@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;
    }
</style>

@section('content')

<div class="container py-4">

    @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

    <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

                @if($errors->any())

                <div class="alert alert-danger">

                <ul>

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

                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            Complainant Name
                        </label>

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


                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            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>



                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            Contact Number
                        </label>

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

                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            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>

                    <div class="col-md-12 mb-3">
                        <label class="form-label fw-semibold">
                            Address
                        </label>

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

                </div>

                <hr>

                <!-- ================= Complaint Against ================= -->

            <div class="section-title">
                <i class="bi bi-buildings me-2"></i>
                Complaint Information
            </div>

                <div class="row">

                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            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>

                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">
                            Name
                        </label>

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

                            <option value="">

                            Select Type First

                            </option>

                        </select>
                    </div>

                </div>

                <div class="col-12 mb-3">
                    <label class="form-label fw-semibold"> Complaint </label>
                    <textarea name="complaint" rows="5" class="form-control" required>{{ old('complaint') }}</textarea>
                </div>

                <div class="col-md-12 mb-3">
                    <label class="form-label fw-semibold">
                        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 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>

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

<script>




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

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

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

    $.get(
        '/complaint/against/'+id,
        function(data){

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

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

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

            });

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

        }
    );

});







$('#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