@extends('layouts.app')

@section('title', 'Complaint Details')

@section('content')

<style>

@media print {

    /* Page setup */
    @page {
        size: A4;
        margin: 10mm;
    }

    html,
    body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide everything */
    body * {
        visibility: hidden !important;
    }

    /* Show only the complaint page */
    .print-page,
    .print-page * {
        visibility: visible !important;
    }

    /* Position the printable area */
    .print-page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 10px;
        background: #fff;
        box-shadow: none !important;
        border: none !important;
    }

    /* Hide print buttons */
    .no-print {
        display: none !important;
    }

    /* Remove card styling */
    .card,
    .container,
    .container-fluid {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Better table printing */
    table {
        page-break-inside: auto;
        width: 100%;
    }

    tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

/* Force browser to print colors */
* {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

/* Table Header */
.table-dark th,
.table-dark td {
    background-color: #212529 !important;
    color: #ffffff !important;
    border: 1px solid #000 !important;
}

/* Section Headings */
.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
}

.bg-primary {
    background-color: #0d6efd !important;
    color: #fff !important;
}

/* Bootstrap Badges */
.badge.bg-success {
    background-color: #198754 !important;
    color: #fff !important;
}

.badge.bg-primary {
    background-color: #0d6efd !important;
    color: #fff !important;
}

.badge.bg-warning {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.badge.bg-danger {
    background-color: #dc3545 !important;
    color: #fff !important;
}

.badge.bg-secondary {
    background-color: #6c757d !important;
    color: #fff !important;
}



}




    /* Media Print End */




.print-page{

    max-width:900px;
    margin:auto;
    background:#fff;
    padding:30px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);

}

.table td,
.table th{

    vertical-align:middle;

}

.heading{

    font-weight:bold;
    color:#198754;

}

</style>


<div class="container py-4">

<div class="text-end mb-3 no-print">

<button onclick="window.print()"
class="btn btn-success">

<i class="bi bi-printer"></i>

Print Complaint

</button>

<a href="{{ url()->previous() }}"
class="btn btn-secondary">

Back

</a>

</div>



<div class="print-page">


<!-- ================= Header ================= -->

<div class="text-center mb-4">

<div class="row align-items-center">

<div class="col-4 text-start">

<img src="{{ asset('logo-home.png') }}"
style="height:80px;">

</div>

<div class="col-4 text-center">

<img src="{{ asset('logo-complaint.jpeg') }}"
style="height:80px;">

</div>

<div class="col-4 text-end">

<img src="{{ asset('logo-kpk.png') }}"
style="height:80px;">

</div>

</div>

<h3 class="mt-3 text-success fw-bold">

Home & Tribal Affairs Department

</h3>

<h4 class="text-danger fw-bold">

Khyber Pakhtunkhwa

</h4>

<h5>

Complaint Cell

</h5>

<hr>

</div>



<!-- ================= Complaint Info ================= -->

<h5 class="bg-success text-white p-2 rounded">

Complaint Information

</h5>


<table class="table table-bordered">

<tr>

<th width="30%">

Complaint ID

</th>

<td>

CC-1992-{{ $complaint->id }}

</td>

<th>

Complaint Date

</th>

<td>

{{ $complaint->created_at->format('d-M-Y h:i A') }}

</td>
</tr>



<tr>

<th>

Complainant Name

</th>

<td>

{{ $complaint->complainant_name }}

</td>

<th>

CNIC Number

</th>

<td>

{{ $complaint->cnic_number }}

</td>

</tr>




<tr>

<th>

Contact Number

</th>

<td>

{{ $complaint->contact_number }}

</td>


<th>

District

</th>

<td>

{{ $complaint->district->district_name ?? 'N/A' }}

</td>

</tr>



<tr>

    <th>

        Address

    </th>

    <td colspan="3">

        {{ $complaint->address }}

    </td>

</tr>


<tr>

    <th>

        Complaint Against

    </th>

    <td colspan="3">

        <strong>

        {{ $complaint->complaintType->type_name ?? 'N/A' }}

        </strong>

        -

        {{ $complaint->complaintAgainst->name ?? 'N/A' }}

    </td>

</tr>

<tr>

    <th>

        Complaint Details

    </th>

    <td colspan="3">

        {!! nl2br(e($complaint->complaint)) !!}

    </td>

</tr>

</table>



<!-- ================= Status History ================= -->

<h5 class="bg-primary text-white p-2 rounded mt-4">

Complaint Status History

</h5>


<table class="table table-bordered table-striped">

<thead class="table-dark">

<tr>

<th width="5%">

#

</th>

<th width="20%">

Date

</th>

<th width="20%">

Status

</th>

<th>

Remarks

</th>

<th width="15%">

Updated By

</th>

</tr>

</thead>

<tbody>

@forelse($complaint->statuses as $key=>$status)

<tr>

<td>

{{ $key+1 }}

</td>

<td>

{{ $status->created_at->format('d-M-Y h:i A') }}

</td>

<td>

@php

$statusColor = match($status->status){

    'Resolved' => 'success',

    'Rejected' => 'danger',

    'Closed' => 'secondary',

    'In Progress' => 'warning',

    'Forwarded' => 'primary',

    default => 'info'

};

@endphp


<span class="badge bg-{{ $statusColor }}">

{{ $status->status }}

</span>



</td>

<td>

{{ $status->remarks }}

</td>

<td>
    <strong>{{ $status->user->name ?? 'Unknown User' }}</strong>

    <br>

    {{-- <small class="text-muted">
        {{ $status->user->email ?? '' }}
    </small> --}}
</td>

</tr>

@empty

<tr>

<td colspan="5" class="text-center text-danger">

No status updates available.

</td>

</tr>

@endforelse

</tbody>

</table>



<!-- ================= Footer ================= -->

<div class="mt-5">

<div class="row">

<div class="col-6 text-center">

<br><br>

_________________________

<br>

Receiving Officer

</div>


<div class="col-6 text-center">

<br><br>

_________________________

<br>

Authorized Officer

</div>

</div>

</div>



<div class="text-center mt-2">

<small>

Printed on:

{{ now()->format('d-M-Y h:i A') }}

</small>

</div>


</div>

</div>

@endsection