@extends('layouts.public')
<link rel="icon" type="image/png" href="{{ asset('fevicon.png') }}">

@section('content')

<div class="container py-5">

    <div class="card shadow-lg border-0">

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

        <div class="complaint-header text-center">

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

                {{-- Left Logo --}}
                <div class="col-4 text-start logo-col">

                    <img
                        src="{{ asset('logo-home.png') }}"
                        class="img-fluid"
                    >

                </div>

                {{-- Center Logo --}}
                <div class="col-4 text-center logo-col">

                    <img
                        src="{{ asset('logo-complaint.jpeg') }}"
                        class="img-fluid"
                    >

                </div>

                {{-- Right Logo --}}
                <div class="col-4 text-end logo-col">

                    <img
                        src="{{ asset('logo-kpk.png') }}"
                        class="img-fluid"
                    >

                </div>

            </div>

            <h3 class="fw-bold text-success mb-1">
                Home & Tribal Affairs Department
            </h3>

            <h3 class="fw-bold text-danger mb-1">
                Khyber Pakhtunkhwa
            </h3>

            <h4 class="fw-bold text-dark mb-0">
                Track Complaint Status
            </h4>

        </div>

        <hr>

        <div class="card-body p-4">

            {{-- ================= SEARCH FORM ================= --}}

            <div class="row justify-content-center">

                <div class="col-lg-7">

                    <div class="card border-0 shadow-sm">

                        <div class="card-body p-4">

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

                                <div class="mb-2">
                                    <i class="bi bi-search text-success"
                                       style="font-size: 40px;"></i>
                                </div>

                                <h4 class="fw-bold">
                                    Track Your Complaint
                                </h4>

                                <p class="text-muted mb-0">
                                    Enter your CNIC number to view your complaints
                                    and their current status.
                                </p>

                            </div>


                            @if($errors->any())

                                <div class="alert alert-danger">

                                    <i class="bi bi-exclamation-triangle-fill"></i>

                                    {{ $errors->first() }}

                                </div>

                            @endif


                            <form
                                action="{{ route('public.complaint.track.search') }}"
                                method="POST">

                                @csrf

                                <div class="mb-3">

                                    <label class="form-label fw-semibold">
                                        CNIC Number
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input
                                        type="text"
                                        name="cnic_number"
                                        id="cnic_number"
                                        class="form-control form-control-lg"
                                        value="{{ old('cnic_number', $cnic ?? '') }}"
                                        maxlength="15"
                                        placeholder="xxxxx-xxxxxxx-x"
                                        pattern="\d{5}-\d{7}-\d{1}"
                                        title="CNIC format: 12345-1234567-1"
                                        required>

                                    <small class="text-muted">
                                        Enter CNIC in the format:
                                        <strong>12345-1234567-1</strong>
                                    </small>

                                </div>

                                <button
                                    type="submit"
                                    class="btn btn-success btn-lg w-100">

                                    <i class="bi bi-search"></i>
                                    Search Complaint

                                </button>

                            </form>

                        </div>

                    </div>

                </div>

            </div>


            {{-- ================= RESULTS ================= --}}

            @isset($complaints)

                <hr class="my-5">

                <div class="d-flex justify-content-between align-items-center mb-3">

                    <div>

                        <h4 class="fw-bold mb-1">
                            Complaint History
                        </h4>

                        <p class="text-muted mb-0">
                            CNIC:
                            <strong>{{ $cnic }}</strong>
                        </p>

                    </div>

                    <span class="badge bg-success fs-6">
                        {{ $complaints->count() }} Complaint(s)
                    </span>

                </div>


                @if($complaints->count() > 0)

                    <div class="row">

                        @foreach($complaints as $complaint)

                            <div class="col-lg-6 mb-4">

                                <div class="card h-100 shadow-sm border-0">

                                    <div class="card-header bg-light">

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

                                            <strong>
                                                Complaint #{{ $complaint->id }}
                                            </strong>

                                            @php
                                                $status = $complaint->latestStatus->status ?? 'Pending';
                                            @endphp

                                            @if($status == 'Resolved')

                                                <span class="badge bg-success">
                                                    <i class="bi bi-check-circle"></i>
                                                    Resolved
                                                </span>

                                            @elseif($status == 'In Progress')

                                                <span class="badge bg-warning text-dark">
                                                    <i class="bi bi-hourglass-split"></i>
                                                    In Progress
                                                </span>

                                            @elseif($status == 'Rejected')

                                                <span class="badge bg-danger">
                                                    <i class="bi bi-x-circle"></i>
                                                    Rejected
                                                </span>

                                            @else

                                                <span class="badge bg-secondary">
                                                    <i class="bi bi-clock"></i>
                                                    {{ $status }}
                                                </span>

                                            @endif

                                        </div>

                                    </div>


                                    <div class="card-body">

                                        <div class="mb-3">

                                            <small class="text-muted">
                                                Complaint Type
                                            </small>

                                            <div class="fw-semibold">
                                                {{ $complaint->complaintType->type_name ?? 'N/A' }}
                                            </div>

                                        </div>


                                        <div class="mb-3">

                                            <small class="text-muted">
                                                Complaint Against
                                            </small>

                                            <div class="fw-semibold">
                                                {{ $complaint->complaintAgainst->name ?? 'N/A' }}
                                            </div>

                                        </div>


                                        <div class="mb-3">

                                            <small class="text-muted">
                                                District
                                            </small>

                                            <div class="fw-semibold">
                                                {{ $complaint->district->district_name ?? 'N/A' }}
                                            </div>

                                        </div>


                                        <div class="mb-3">

                                            <small class="text-muted">
                                                Complaint
                                            </small>

                                            <div>
                                                {{ \Illuminate\Support\Str::limit(
                                                    $complaint->complaint,
                                                    180
                                                ) }}
                                            </div>

                                        </div>


                                        <div>

                                            <small class="text-muted">
                                                Submitted On
                                            </small>

                                            <div class="fw-semibold">
                                                {{ $complaint->created_at->format('d M Y, h:i A') }}
                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        @endforeach

                    </div>

                @else

                    <div class="alert alert-warning text-center p-4">

                        <i
                            class="bi bi-search"
                            style="font-size:40px;">
                        </i>

                        <h5 class="fw-bold mt-2">
                            No Complaint Found
                        </h5>

                        <p class="mb-0">
                            No complaint has been registered against
                            CNIC <strong>{{ $cnic }}</strong>.
                        </p>

                    </div>

                @endif

            @endisset

        </div>

    </div>

</div>


<style>

.complaint-header {
    padding: 30px 50px 15px 50px;
}

.complaint-header .logo-col {
    padding-left: 20px;
    padding-right: 20px;
}

.complaint-header img {
    max-height: 90px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 576px) {

    .complaint-header {
        padding: 20px 15px 10px 15px;
    }

    .complaint-header .logo-col {
        padding-left: 8px;
        padding-right: 8px;
    }

    .complaint-header img {
        max-height: 65px;
    }

}

</style>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>



/*
|--------------------------------------------------------------------------
| CNIC Formatting
|--------------------------------------------------------------------------
*/

$('#cnic_number').on('input', function () {

let value =
    $(this)
    .val()
    .replace(/\D/g, '');


if (value.length > 13) {

    value =
        value.substr(0, 13);

}


let formatted = '';


if (value.length > 0) {

    formatted +=
        value.substring(0, 5);

}


if (value.length >= 6) {

    formatted +=
        '-' +
        value.substring(5, 12);

}


if (value.length >= 13) {

    formatted +=
        '-' +
        value.substring(12, 13);

}


$(this).val(formatted);

});


</script>


@endsection