@extends('layouts.app')

@section('content')

<div class="container py-4">

<div class="card shadow">

<div class="card-header bg-warning text-dark">
    <h4 class="mb-0">
        Edit Complaint
    </h4>
</div>

<div class="card-body">

<form action="{{ route('complaint.update', $complaint->id) }}" method="POST">

@csrf
@method('PUT')

<div class="row">

<div class="col-md-6 mb-3">
<label>Complainant Name</label>
<input type="text"
       class="form-control"
       name="complainant_name"
       value="{{ old('complainant_name', $complaint->complainant_name) }}"
       required>
</div>

<div class="col-md-6 mb-3">
<label>CNIC Number</label>
<input type="text"
       class="form-control"
       name="cnic_number"
       value="{{ old('cnic_number', $complaint->cnic_number) }}"
       required>
</div>

<div class="col-md-6 mb-3">
<label>Contact Number</label>
<input type="text"
       class="form-control"
       name="contact_number"
       value="{{ old('contact_number', $complaint->contact_number) }}"
       required>
</div>

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

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

    <option value="">Select District</option>

    @foreach($districts as $district)

        <option
            value="{{ $district->id }}"
            {{ old('district_id',$complaint->district_id)==$district->id ? 'selected' : '' }}>

            {{ $district->district_name }}

        </option>

    @endforeach

</select>

</div>

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

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

</div>

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

<label>Complaint</label>

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

</div>

</div>

<hr>

<h5>Complaint Against</h5>

<div class="row">

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

<label>Type</label>

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

    <option value="">Select Type</option>

    @foreach($types as $type)

        <option
            value="{{ $type->id }}"
            {{ old('complaint_type_id',$complaint->complaint_type_id)==$type->id ? 'selected' : '' }}>

            {{ $type->type_name }}

        </option>

    @endforeach

</select>

</div>

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

<label>Name</label>

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

</select>

</div>

</div>

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

<button class="btn btn-success">
    <i class="bi bi-check-circle"></i>
    Update Complaint
</button>

<a href="{{ route('complaint.index') }}"
   class="btn btn-secondary">

Cancel

</a>

</div>

</form>

</div>

</div>

</div>

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

<script>

$(document).ready(function(){

    function loadAgainst(typeId, selectedId = null)
    {
        if(typeId == '')
        {
            $('#against').html(
                '<option value="">Select Type First</option>'
            );
            return;
        }

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

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

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

                html +=
                    '<option value="'+row.id+'" '+
                    (row.id == selectedId ? 'selected' : '')+
                    '>'+
                    row.name+
                    '</option>';

            });

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

        });

    }

    let selectedAgainst =
        "{{ old('complaint_against_id',$complaint->complaint_against_id) }}";

    loadAgainst($('#type').val(), selectedAgainst);

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

        loadAgainst($(this).val());

    });

});

</script>

@endsection