@extends('layouts.app')


@section('content')


<div class="container-fluid py-4 complaint-list-page">


    <div class="card list-card overflow-hidden">


        {{-- ===================================================== --}}
        {{-- HEADER --}}
        {{-- ===================================================== --}}

        <div class="card-header list-card-header">

            <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">


                <h4 class="mb-0 d-flex align-items-center flex-wrap gap-2">

                    <i class="bi bi-list-check"></i>
                    Complaint List

                    {{-- TYPE FILTER --}}
                    @if(request('type'))

                        @php
                            $selectedType = \App\Models\ComplaintType::find(request('type'));
                        @endphp

                        @if($selectedType)
                            <span class="header-filter-badge">{{ $selectedType->type_name }}</span>
                        @endif

                    {{-- STATUS FILTER --}}
                    @elseif(request('status'))
                        <span class="header-filter-badge">{{ request('status') }}</span>

                    {{-- TODAY'S COMPLAINT FILTER --}}
                    @elseif(request('filter') == 'today')
                        <span class="header-filter-badge">Today's Complaints</span>

                    {{-- DEADLINE FILTER --}}
                    @elseif(request('deadline'))

                        @if(is_numeric(request('deadline')))
                            <span class="header-filter-badge">
                                {{ request('deadline') }} {{ request('deadline') == 1 ? 'Day' : 'Days' }} Remaining
                            </span>
                        @elseif(request('deadline') == 'today')
                            <span class="header-filter-badge">Due Today</span>
                        @elseif(request('deadline') == 'overdue')
                            <span class="header-filter-badge header-filter-badge-alert">Overdue</span>
                        @endif

                    @endif

                </h4>

                {{-- NEW COMPLAINT BUTTON --}}
                <a href="{{ route('complaint.create') }}" class="btn btn-new-complaint btn-sm fw-semibold">
                    <i class="bi bi-plus-circle"></i>
                    <span class="d-none d-sm-inline">New Complaint</span>
                </a>

            </div>

        </div>



        <div class="card-body">


            {{-- ================================================= --}}
            {{-- SUCCESS MESSAGE --}}
            {{-- ================================================= --}}

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show d-flex align-items-center gap-2" role="alert">
                    <i class="bi bi-check-circle-fill"></i>
                    <div>{{ session('success') }}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif



            {{-- ================================================= --}}
            {{-- TOOLBAR --}}
            {{-- ================================================= --}}

            <div class="row g-2 align-items-center mb-3 toolbar">

                {{-- SEARCH --}}
                <div class="col-12 col-md-5 col-lg-4">
                    <div class="input-group">
                        <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                        <input type="text" id="tableSearch" class="form-control" placeholder="Search complainant, CNIC, contact...">
                    </div>
                </div>

                {{-- STATUS FILTER --}}
                <div class="col-6 col-md-3 col-lg-2">
                    <select id="statusFilter" class="form-select">
                        <option value="">All Status</option>
                        <option value="Pending">Pending</option>
                        <option value="Forwarded">Forwarded</option>
                        <option value="In Progress">In Progress</option>
                        <option value="Resolved">Resolved</option>
                        <option value="Closed">Closed</option>
                        <option value="Rejected">Rejected</option>
                    </select>
                </div>

                {{-- CURRENT FILTER --}}
                <div class="col-6 col-md-4 col-lg-3">

                    @if(request('deadline'))

                        @if(is_numeric(request('deadline')))
                            <span class="filter-info">
                                <i class="bi bi-calendar-event"></i>
                                {{ request('deadline') }} {{ request('deadline') == 1 ? 'Day' : 'Days' }} Remaining
                            </span>
                        @elseif(request('deadline') == 'today')
                            <span class="filter-info">
                                <i class="bi bi-calendar-day"></i> Due Today
                            </span>
                        @elseif(request('deadline') == 'overdue')
                            <span class="filter-info filter-info-alert">
                                <i class="bi bi-exclamation-triangle"></i> Overdue
                            </span>
                        @endif

                    @elseif(request('status'))
                        <span class="filter-info">
                            <i class="bi bi-filter"></i> {{ request('status') }}
                        </span>

                    @elseif(request('type'))

                        @php
                            $filterType = \App\Models\ComplaintType::find(request('type'));
                        @endphp

                        @if($filterType)
                            <span class="filter-info">
                                <i class="bi bi-diagram-3"></i> {{ $filterType->type_name }}
                            </span>
                        @endif

                    @elseif(request('filter') == 'today')
                        <span class="filter-info">
                            <i class="bi bi-calendar-day"></i> Today's Complaints
                        </span>
                    @endif

                </div>

                {{-- ROW COUNT --}}
                <div class="col-12 col-md-3 col-lg-2 ms-md-auto text-md-end">
                    <span class="badge row-count-badge" id="rowCount"></span>
                </div>

            </div>



            {{-- ================================================= --}}
            {{-- TABLE --}}
            {{-- ================================================= --}}

            <div class="table-responsive rounded-3 border">

                <table class="table table-hover align-middle mb-0 complaint-table" id="complaintTable">

                    <thead>
                        <tr>
                            <th width="120">#</th>
                            <th width="120" class="text-nowrap">Date</th>
                            <th>Complainant</th>
                            <th>CNIC</th>
                            <th>Contact</th>
                            <th>District</th>
                            <th>Against</th>
                            <th>Status</th>
                            <th>Deadline</th>
                            <!-- <th>Complaint</th> -->
                            <th width="160" class="text-center">Action</th>
                        </tr>
                    </thead>



                    <tbody>

                        @forelse($complaints as $key => $row)

                            @php
                                /* Latest Status */
                                $currentStatus = optional($row->latestStatus)->status ?? 'Pending';

                                /* Deadline */
                                $deadline = $row->deadline_date ? \Carbon\Carbon::parse($row->deadline_date) : null;

                                /* Days Remaining */
                                $daysRemaining = null;
                                $isOverdue = false;
                                $isDueToday = false;

                                if ($deadline) {
                                    $today = \Carbon\Carbon::today();
                                    $daysRemaining = $today->diffInDays($deadline, false);
                                    $isOverdue = $daysRemaining < 0 && !in_array($currentStatus, ['Resolved', 'Closed']);
                                    $isDueToday = $daysRemaining === 0 && !in_array($currentStatus, ['Resolved', 'Closed']);
                                }

                                /* Status badge class (KP palette) */
                                $statusClass = 'pending';

                                if ($currentStatus == 'Resolved') {
                                    $statusClass = 'resolved';
                                } elseif ($currentStatus == 'Rejected') {
                                    $statusClass = 'rejected';
                                } elseif ($currentStatus == 'In Progress') {
                                    $statusClass = 'in-progress';
                                } elseif ($currentStatus == 'Forwarded') {
                                    $statusClass = 'forwarded';
                                } elseif ($currentStatus == 'Closed') {
                                    $statusClass = 'closed';
                                } elseif ($currentStatus == 'Pending') {
                                    $statusClass = 'pending';
                                }
                            @endphp

                            <tr class="complaint-row" onclick="printComplaint('{{ route('complaint.print', $row->id) }}', event)">

                            <!-- <td data-label="#">{{ $complaints->firstItem() + $key }}</td> -->
                            <td data-label="#">CC-1992-{{ $row->id }}</td>

                                <td data-label="Date" class="date-cell">
                                    {{ optional($row->created_at)->format('d-M-Y') }}
                                    <small class="text-muted">{{ optional($row->created_at)->format('h:i A') }}</small>
                                </td>

                                <td data-label="Complainant"><strong>{{ $row->complainant_name }}</strong></td>

                                <td data-label="CNIC">{{ $row->cnic_number }}</td>

                                <td data-label="Contact">{{ $row->contact_number }}</td>

                                <td data-label="District">
                                    @if($row->district)
                                        <span class="badge badge-district rounded-pill">{{ $row->district->district_name }}</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>

                                <td data-label="Against">
                                    @if($row->complaintType)
                                        <strong>{{ $row->complaintType->type_name }}</strong>
                                    @endif
                                    <br>
                                    @if($row->complaintAgainst)
                                        <small class="text-muted">{{ $row->complaintAgainst->name }}</small>
                                    @endif
                                </td>

                                <td data-label="Status">
    <span class="badge badge-status badge-status-{{ $statusClass }} rounded-pill">
        {{ $currentStatus }}
    </span>
</td>

<td data-label="Deadline">

    @if($currentStatus != 'Resolved')

        @if($deadline)

            @if($isOverdue)

                <span class="badge badge-deadline badge-deadline-overdue rounded-pill">
                    <i class="bi bi-exclamation-triangle-fill"></i> Overdue
                </span>
                <br>
                <small class="deadline-sub deadline-sub-overdue">
                    {{ $deadline->format('d-M-Y') }}
                </small>

            @elseif($isDueToday)

                <span class="badge badge-deadline badge-deadline-today rounded-pill">
                    <i class="bi bi-clock-fill"></i> Due Today
                </span>
                <br>
                <small class="deadline-sub">
                    {{ $deadline->format('d-M-Y') }}
                </small>

            @else

                <span class="badge badge-deadline badge-deadline-ok rounded-pill">
                    {{ $daysRemaining }}
                    {{ $daysRemaining == 1 ? 'Day' : 'Days' }}
                </span>
                <br>
                <small class="deadline-sub">
                    {{ $deadline->format('d-M-Y') }}
                </small>

            @endif

        @else

            <span class="text-muted">N/A</span>

        @endif

    @else

        <span class="text-muted">{{ $currentStatus }}</span>

    @endif

</td>

                                <!-- <td data-label="Complaint" class="complaint-cell">
                                    {{ Str::limit($row->complaint, 100) }}
                                </td> -->

                                <td data-label="Action">
                                    <div class="d-flex flex-nowrap justify-content-center gap-1 action-buttons">

                                        {{-- COORDINATOR VERIFICATION --}}
                                        @if(auth()->user()->role == 'coordinator')
                                            <form method="POST" action="{{ route('complaint.verify', $row->id) }}" class="d-flex gap-1">
                                                @csrf

                                                @if($row->verification_status != "Genuine")
                                                <button name="action" value="Genuine" class="btn btn-icon btn-icon-genuine" title="Mark Genuine">
                                                    <i class="bi bi-check-circle"></i>
                                                </button>
                                                @endif
                                                @if($row->verification_status != "Irrelevant")
                                                <button name="action" value="Irrelevant" class="btn btn-icon btn-icon-irrelevant" title="Mark Irrelevant">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                                @endif
                                            </form>
                                        @endif

                                        @if(auth()->user()->role != 'department')
                                        <a href="{{ route('complaint.edit', $row->id) }}" class="btn btn-icon btn-icon-edit" title="Edit">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>
                                        @endif

                                        <button class="btn btn-icon btn-icon-status"
                                                data-bs-toggle="modal"
                                                data-bs-target="#statusModal"
                                                data-id="{{ $row->id }}"
                                                data-name="{{ $row->complainant_name }}"
                                                title="Update Status">
                                            <i class="bi bi-clipboard-check"></i>
                                        </button>

                                        <a href="{{ route('complaint.print', $row->id) }}" class="btn btn-icon btn-icon-print" title="Print" target="blank">
                                            <i class="bi bi-printer"></i>
                                        </a>

                                    </div>
                                </td>

                            </tr>

                        @empty

                            <tr>
                                <td colspan="11" class="text-center empty-state py-4">
                                    <i class="bi bi-inbox display-6 d-block mb-2"></i>
                                    No Complaint Found
                                </td>
                            </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>



            {{-- ================================================= --}}
            {{-- PAGINATION --}}
            {{-- ================================================= --}}

            <div class="mt-3 d-flex justify-content-center justify-content-md-end">
                {{ $complaints->links() }}
            </div>


        </div>

    </div>

</div>



{{-- ============================================================= --}}
{{-- STATUS MODAL --}}
{{-- ============================================================= --}}

<div class="modal fade" id="statusModal" tabindex="-1">

    <div class="modal-dialog modal-lg modal-dialog-centered">

        <div class="modal-content rounded-4 overflow-hidden status-modal">

            <form action="{{ route('complaint.status.store') }}" method="POST" enctype="multipart/form-data">

                @csrf

                <div class="modal-header status-modal-header">
                    <h5 class="mb-0"><i class="bi bi-clipboard-check me-1"></i> Update Complaint Status</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    <input type="hidden" name="complaint_id" id="complaint_id">

                    <div class="mb-3">
                        <label class="fw-bold form-label">Complainant</label>
                        <input type="text" id="complainant_name" class="form-control" readonly>
                    </div>

                    <div class="mb-3">
                        <label class="fw-bold form-label">Status</label>
                        <select name="status" class="form-select" required>
                            <option value="">Select Status</option>
                            <option>Pending</option>
                            <option>Forwarded</option>
                            <!-- <option>In Progress</option> -->
                            <option>Resolved</option>
                            <option>Closed</option>
                            <option>Rejected</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="fw-bold form-label">Remarks</label>
                        <textarea name="remarks" class="form-control" rows="4"></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="fw-bold form-label">
                            <i class="bi bi-paperclip me-1"></i>
                            Attachment
                        </label>

                        <input type="file"
                            name="attachment"
                            class="form-control"
                            accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">

                        <small class="text-muted">
                            Optional. Allowed: JPG, JPEG, PNG, PDF, DOC, DOCX. Maximum size: 5 MB.
                        </small>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-save-status">
                        <i class="bi bi-save"></i> Save Status
                    </button>
                </div>

            </form>

        </div>

    </div>

</div>



{{-- ============================================================= --}}
{{-- PAGE STYLES --}}
{{-- ============================================================= --}}

<style>

:root {
    --kp-maroon: #7a1f2b;
    --kp-maroon-dark: #5c1620;
    --kp-green: #0b5e3c;
    --kp-green-dark: #073f28;
    --kp-amber: #c9922a;
    --kp-amber-dark: #a8781e;
    --ink: #22282b;
    --muted: #6b7580;
}

.complaint-list-page * {
    font-family: 'Inter', sans-serif;
}

/* ---------- Card shell ---------- */
.list-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.25);
    position: relative;
}

.list-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--kp-green) 0%, var(--kp-green) 50%, var(--kp-maroon) 50%, var(--kp-maroon) 100%);
    z-index: 2;
}

/* ---------- Header ---------- */
.list-card-header {
    background: #fff;
    border-bottom: 1px solid #eef0f2;
    padding: 1.1rem 1.4rem;
}

.list-card-header h4 {
    color: var(--ink);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .2px;
}

.list-card-header h4 .bi {
    color: var(--kp-green);
    margin-right: .1rem;
}

.header-filter-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    background: #f1f8f5;
    color: var(--kp-green-dark);
    border: 1px solid #d8eee2;
    border-radius: 50px;
    padding: .3rem .8rem;
}

.header-filter-badge-alert {
    background: #fbecee;
    color: var(--kp-maroon);
    border-color: #f2d3d8;
}

.btn-new-complaint {
    background: linear-gradient(135deg, var(--kp-green) 0%, var(--kp-green-dark) 100%);
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .5rem 1rem;
    box-shadow: 0 6px 14px -6px rgba(11, 94, 60, .5);
    transition: transform .15s ease, box-shadow .15s ease;
}

.btn-new-complaint:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 18px -6px rgba(11, 94, 60, .55);
}

/* ---------- Toolbar ---------- */
.toolbar .form-control,
.toolbar .form-select,
.toolbar .input-group-text {
    border-radius: .6rem;
    border: 1.5px solid #e2e5e9;
    font-size: .88rem;
}

.toolbar .input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.toolbar .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--muted);
}

.toolbar .form-control:focus,
.toolbar .form-select:focus {
    border-color: var(--kp-green);
    box-shadow: 0 0 0 .16rem rgba(11, 94, 60, .15);
}

.filter-info {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--kp-green-dark);
    font-weight: 600;
    background: #f1f8f5;
    border: 1px solid #d8eee2;
    border-radius: 20px;
    padding: 6px 12px;
}

.filter-info-alert {
    color: var(--kp-maroon);
    background: #fbecee;
    border-color: #f2d3d8;
}

.row-count-badge {
    background: #eef0f2;
    color: var(--ink);
    border: 1px solid #e2e5e9;
    font-weight: 600;
    font-size: .78rem;
    padding: .4em .8em;
}

/* ---------- Table ---------- */
.complaint-table thead th {
    background: linear-gradient(180deg, var(--kp-green-dark) 0%, #05271a 100%);
    color: #fff;
    white-space: nowrap;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    position: sticky;
    top: 0;
    z-index: 1;
    border: none;
}

.complaint-table tbody tr {
    transition: background-color .15s ease;
}

.complaint-table tbody tr:hover {
    background-color: #f6faf8;
}

.complaint-table td {
    padding-top: .55rem;
    padding-bottom: .55rem;
    vertical-align: middle;
    line-height: 1.3;
    font-size: .85rem;
    color: var(--ink);
}

.complaint-table .date-cell {
    white-space: nowrap;
}

.complaint-table .date-cell small {
    display: block;
    color: var(--muted);
}

.complaint-table .complaint-cell {
    max-width: 260px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.complaint-table .badge {
    font-weight: 500;
    padding: .45em .8em;
}

.empty-state {
    color: var(--kp-maroon);
}

/* ---------- Badges: District ---------- */
.badge-district {
    background: var(--kp-green);
    color: #fff;
}

/* ---------- Badges: Status ---------- */
.badge-status-resolved     { background: var(--kp-green);  color: #fff; }
.badge-status-rejected     { background: var(--kp-maroon); color: #fff; }
.badge-status-in-progress  { background: var(--kp-amber);  color: #2b210d; }
.badge-status-forwarded    { background: #46708a;          color: #fff; }
.badge-status-closed       { background: var(--ink);       color: #fff; }
.badge-status-pending      { background: #9aa5ad;          color: #fff; }

/* ---------- Badges: Deadline ---------- */
.badge-deadline-overdue { background: var(--kp-maroon); color: #fff; }
.badge-deadline-today   { background: var(--kp-amber);  color: #2b210d; }
.badge-deadline-ok      { background: var(--kp-green);  color: #fff; }

.deadline-sub {
    color: var(--muted);
    font-weight: 500;
}

.deadline-sub-overdue {
    color: var(--kp-maroon);
    font-weight: 600;
}

/* ---------- Action buttons ---------- */
.action-buttons .btn-icon {
    border-radius: 7px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid transparent;
    padding: 0;
    font-size: .9rem;
}

.btn-icon-edit {
    color: var(--kp-green-dark);
    border-color: #cfe6da;
    background: #f1f8f5;
}

.btn-icon-edit:hover {
    background: var(--kp-green);
    color: #fff;
}

.btn-icon-status {
    color: var(--kp-amber-dark);
    border-color: #f0ddb8;
    background: #fbf3e4;
}

.btn-icon-status:hover {
    background: var(--kp-amber);
    color: #2b210d;
}

.btn-icon-print {
    color: var(--muted);
    border-color: #e2e5e9;
    background: #f4f5f7;
}

.btn-icon-print:hover {
    background: var(--ink);
    color: #fff;
}

.btn-icon-genuine {
    color: #fff;
    background: var(--kp-green);
    border-color: var(--kp-green);
}

.btn-icon-genuine:hover {
    background: var(--kp-green-dark);
}

.btn-icon-irrelevant {
    color: #fff;
    background: var(--kp-maroon);
    border-color: var(--kp-maroon);
}

.btn-icon-irrelevant:hover {
    background: var(--kp-maroon-dark);
}

/* ---------- Status modal ---------- */
.status-modal-header {
    background: linear-gradient(135deg, var(--kp-green) 0%, var(--kp-green-dark) 100%);
    color: #fff;
    border-bottom: none;
}

.status-modal .form-control,
.status-modal .form-select {
    border-radius: .6rem;
    border: 1.5px solid #e2e5e9;
}

.status-modal .form-control:focus,
.status-modal .form-select:focus {
    border-color: var(--kp-green);
    box-shadow: 0 0 0 .16rem rgba(11, 94, 60, .15);
}

.btn-save-status {
    background: linear-gradient(135deg, var(--kp-green) 0%, var(--kp-green-dark) 100%);
    color: #fff;
    border: none;
    border-radius: .55rem;
    font-weight: 600;
    padding: .5rem 1.1rem;
}

.btn-save-status:hover {
    color: #fff;
    filter: brightness(1.05);
}

/* ---------- Responsive: card-style table on small screens ---------- */
@media (max-width: 767.98px) {

    .complaint-table thead {
        display: none;
    }

    .complaint-table, .complaint-table tbody, .complaint-table tr, .complaint-table td {
        display: block;
        width: 100%;
    }

    .complaint-table tr {
        margin-bottom: 1rem;
        border: 1px solid #e2e2e2;
        border-radius: .75rem;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }

    .complaint-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: .75rem;
        text-align: right;
        padding: .6rem .9rem;
        border: none;
        border-bottom: 1px solid #f1f1f1;
    }

    .complaint-table td:last-child {
        border-bottom: none;
    }

    .complaint-table td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--muted);
        flex-shrink: 0;
    }

    .complaint-table .action-buttons {
        justify-content: flex-end !important;
        width: 100%;
    }

    .complaint-table .complaint-cell {
        max-width: 100%;
        -webkit-line-clamp: unset;
        display: block;
    }

    .list-card-header {
        padding: 1rem 1.1rem;
    }

    .list-card-header h4 {
        font-size: 1.02rem;
    }
}

@media (min-width: 576px) {
    .btn-new-complaint {
        padding: .5rem 1.1rem;
    }
}











/* =========================================
   CLICKABLE COMPLAINT ROW
========================================= */

.complaint-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.complaint-row:hover {
    background-color: #f1f8f4 !important;
}

/* Action column should not look clickable */
.complaint-row td:last-child {
    cursor: default;
}



</style>



{{-- ============================================================= --}}
{{-- PAGE SCRIPTS --}}
{{-- ============================================================= --}}

<script>




function printComplaint(url, event) {

/*
 * If the click happened inside the Action column,
 * do nothing.
 */
if (event.target.closest('.action-buttons')) {
    return;
}

/*
 * Open the complaint print page
 */
window.open(url, '_blank');

}






/*
|--------------------------------------------------------------------------
| Status Modal
|--------------------------------------------------------------------------
*/

const statusModal = document.getElementById('statusModal');

if (statusModal) {
    statusModal.addEventListener('show.bs.modal', function (event) {
        let button = event.relatedTarget;
        document.getElementById('complaint_id').value = button.dataset.id;
        document.getElementById('complainant_name').value = button.dataset.name;
    });
}


/*
|--------------------------------------------------------------------------
| Client-side Search + Status Filter
|--------------------------------------------------------------------------
*/

(function () {

    const searchInput = document.getElementById('tableSearch');
    const statusFilter = document.getElementById('statusFilter');
    const rows = Array.from(document.querySelectorAll('#complaintTable tbody tr'));
    const rowCount = document.getElementById('rowCount');

    if (!searchInput || !statusFilter || !rowCount) {
        return;
    }

    function applyFilters() {

        const term = (searchInput.value || '').toLowerCase().trim();
        const status = statusFilter.value;
        let visible = 0;

        rows.forEach(function (row) {

            if (row.querySelector('td[colspan="11"]')) {
                return;
            }

            const text = row.innerText.toLowerCase();
            const matchesSearch = !term || text.includes(term);
            const matchesStatus = !status || text.includes(status.toLowerCase());
            const show = matchesSearch && matchesStatus;

            row.style.display = show ? '' : 'none';

            if (show) {
                visible++;
            }

        });

        rowCount.textContent = visible + ' shown';
    }

    searchInput.addEventListener('input', applyFilters);
    statusFilter.addEventListener('change', applyFilters);

    applyFilters();

})();

</script>


@endsection