@extends('layouts.app')


<style>

    body {
        background: #f4f6f9;
    }


    .card {
        border-radius: 18px;
    }


    .form-control,
    .form-select {

        border-radius: 12px;

        border: 1px solid #d6d6d6;

        box-shadow: 0 3px 10px rgba(0,0,0,.15);

        padding: 12px 15px;

        transition: all .3s ease;
    }


    .form-control:focus,
    .form-select:focus {

        border-color: #198754;

        box-shadow:
            0 0 0 .25rem rgba(25,135,84,.20);
    }


    textarea.form-control {
        resize: vertical;
    }


    .form-label {

        font-weight: 600;

        margin-bottom: 8px;

        color: #333;
    }


    .section-title {

        background: #198754;

        color: #fff;

        padding: 12px 18px;

        border-radius: 10px;

        margin-bottom: 25px;
    }


    .btn-primary {

        border-radius: 10px;

        padding: 12px 40px;
    }


    .deadline-note {

        font-size: 13px;

        color: #6c757d;

        margin-top: 5px;
    }

</style>


@section('content')


<div class="container py-4">


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

    @if(session('success'))

        <div
            class="alert alert-success alert-dismissible fade show"
            role="alert"
        >

            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert"
            ></button>

        </div>

    @endif



    {{-- ================= MAIN CARD ================= --}}

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

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


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

                @csrf


                {{-- ================= VALIDATION ERRORS ================= --}}

                @if($errors->any())

                    <div class="alert alert-danger">

                        <ul class="mb-0">

                            @foreach($errors->all() as $error)

                                <li>
                                    {{ $error }}
                                </li>

                            @endforeach

                        </ul>

                    </div>

                @endif



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

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


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


                        {{-- Left Logo --}}

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

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

                        </div>



                        {{-- Center Logo --}}

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

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

                        </div>



                        {{-- Right Logo --}}

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

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

                        </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">

                        Complaint Form

                    </h4>


                </div>


                <hr>



                {{-- ====================================================== --}}
                {{-- COMPLAINANT INFORMATION --}}
                {{-- ====================================================== --}}

                <div class="section-title">

                    <i class="bi bi-person-fill me-2"></i>

                    Complainant Information

                </div>


                <div class="row">


                    {{-- Complainant Name --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Complainant Name

                        </label>


                        <input
                            type="text"
                            name="complainant_name"
                            class="form-control"
                            value="{{ old('complainant_name') }}"
                            required
                        >

                    </div>



                    {{-- CNIC --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            CNIC Number

                        </label>


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

                    </div>



                    {{-- Contact Number --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Contact Number

                        </label>


                        <input
                            type="text"
                            name="contact_number"
                            class="form-control"
                            value="{{ old('contact_number') }}"
                            required
                        >

                    </div>



                    {{-- District --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            District

                        </label>


                        <select
                            name="district_id"
                            class="form-select"
                            required
                        >

                            <option value="">

                                Select District

                            </option>


                            @foreach($districts as $district)

                                <option
                                    value="{{ $district->id }}"

                                    {{ old('district_id') == $district->id
                                        ? 'selected'
                                        : '' }}
                                >

                                    {{ $district->district_name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



                    {{-- Address --}}

                    <div class="col-md-12 mb-3">

                        <label class="form-label">

                            Address

                        </label>


                        <input
                            type="text"
                            name="address"
                            class="form-control"
                            value="{{ old('address') }}"
                            required
                        >

                    </div>


                </div>



                <hr>



                {{-- ====================================================== --}}
                {{-- COMPLAINT INFORMATION --}}
                {{-- ====================================================== --}}

                <div class="section-title">

                    <i class="bi bi-buildings me-2"></i>

                    Complaint Information

                </div>


                <div class="row">


                    {{-- Complaint Type --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Complaint Against

                        </label>


                        <select
                            class="form-select"
                            name="complaint_type_id"
                            id="type"
                            required
                        >

                            <option value="">

                                Select Type

                            </option>


                            @foreach($types as $type)

                                <option
                                    value="{{ $type->id }}"

                                    {{ old('complaint_type_id') == $type->id
                                        ? 'selected'
                                        : '' }}
                                >

                                    {{ $type->type_name }}

                                </option>

                            @endforeach

                        </select>

                    </div>



                    {{-- Complaint Against Name --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Name

                        </label>


                        <select
                            class="form-select"
                            name="complaint_against_id"
                            id="against"
                            required
                        >

                            <option value="">

                                Select Type First

                            </option>

                        </select>

                    </div>



                    {{-- Complaint --}}

                    <div class="col-12 mb-3">

                        <label class="form-label">

                            Complaint

                        </label>


                        <textarea
                            name="complaint"
                            rows="5"
                            class="form-control"
                            required
                        >{{ old('complaint') }}</textarea>

                    </div>



                    {{-- ================================================== --}}
                    {{-- RESOLUTION DEADLINE --}}
                    {{-- ================================================== --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Resolution Deadline

                        </label>


                        <input
                            type="date"
                            name="deadline_date"
                            id="deadline_date"
                            class="form-control"

                            value="{{ old('deadline_date', $deadlineDate) }}"

                            min="{{ now()->format('Y-m-d') }}"

                            max="{{ now()->addDays(14)->format('Y-m-d') }}"

                            required
                        >


                        <div class="deadline-note">

                            <i class="bi bi-info-circle"></i>

                            Maximum resolution timeline is
                            <strong>14 days</strong>.

                            Default deadline:
                            <strong>
                                {{ \Carbon\Carbon::parse($deadlineDate)->format('d-M-Y') }}
                            </strong>

                        </div>

                    </div>



                    {{-- Attachment --}}

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Attachment

                        </label>


                        <input
                            type="file"
                            name="attachment"
                            class="form-control"

                            accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"
                        >


                        <small class="text-muted">

                            Allowed: PDF, Images, Word, Excel
                            (Maximum 10 MB)

                        </small>

                    </div>


                </div>



                {{-- ====================================================== --}}
                {{-- SUBMIT --}}
                {{-- ====================================================== --}}

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


                    <button
                        type="submit"
                        class="btn btn-primary btn-lg px-5"
                    >

                        <i class="bi bi-send-fill"></i>

                        Submit Complaint

                    </button>


                </div>


            </form>


        </div>

    </div>


</div>



{{-- ================================================================ --}}
{{-- JQUERY --}}
{{-- ================================================================ --}}

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


<script>


/*
|--------------------------------------------------------------------------
| Load Complaint Against
|--------------------------------------------------------------------------
*/

$('#type').change(function () {

    let id = $(this).val();


    $('#against').html(
        '<option>Loading...</option>'
    );


    if (!id) {

        $('#against').html(
            '<option value="">Select Type First</option>'
        );

        return;
    }


    $.ajax({

        url: "{{ url('complaint/against') }}/" + id,

        type: "GET",

        dataType: "json",


        success: function (data) {

            let html =
                '<option value="">Select</option>';


            $.each(data, function (i, row) {

                html +=
                    '<option value="' +
                    row.id +
                    '">' +
                    row.name +
                    '</option>';

            });


            $('#against').html(html);

        },


        error: function (xhr) {

            console.log(xhr.responseText);


            $('#against').html(
                '<option>Error Loading</option>'
            );

        }

    });

});



/*
|--------------------------------------------------------------------------
| 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