@extends('layouts.app')

@section('content')
<div class="contents">
    <div class="crm mb-25">
        <div class="container-fluid">
            <div class="row ">
                <div class="col-lg-12 d-flex justify-content-end">
                    @include('layouts.navigation')
                </div>

                <div class="col-lg-12">
                    <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                        <h2 class="breadcrumb-title">City List</h2>
                        <button class="btn btn-primary btn-squared" data-bs-toggle="modal" data-bs-target="#modal-basic">
                            Add City <i class="fa-solid fa-plus ms-2"></i>
                        </button>
                    </div>
                </div>

                <div class="col-xxl-12">
                    <div class="userDatatable  global-shadow border-light-0 w-100 adv-table">
                        <div class="table-responsive">
                            <table class="table mb-0 table-borderless  table-striped"
                                   data-sorting="true" data-paging-size="10">
                                <thead>
                                    <tr class="userDatatable-header">
                                        <th>S.No.</th>
                                        <th>State Name</th>
                                        <th>District Name</th>
                                        <th>City Name</th>
                                        <th class="d-flex justify-content-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($city as $key => $value)
                                    <tr>
                                        <td>{{ $key + 1 }}</td>
                                        <td>{{ $value->state->name }}</td>
                                        <td>{{ $value->district->name }}</td>
                                        <td>{{ $value->name }}</td>
                                        <td>
                                            <ul class="orderDatatable_actions mb-0 d-flex flex-wrap">
                                                <li>
                                                    <a href="javascript:void(0)"
                                                       class="edit text-success edit-city-btn"
                                                       data-id="{{ $value->id }}"
                                                       data-name="{{ $value->name }}"
                                                       data-state="{{ $value->state_id }}"
                                                       data-district="{{ $value->district_id }}"
                                                       data-status="{{ $value->status }}"
                                                       title="Edit">
                                                        <i class="fas fa-pen"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <form action="{{ route('city.destroy', $value->id) }}" method="POST" style="display:inline;">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="text-danger mx-2"
                                                                onclick="return confirm('Are you sure you want to delete this city?');">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{$city->links('pagination::bootstrap-4')}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal-basic" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content modal-bg-white">
                    <div class="modal-header">
                        <h3 class="modal-title">Create City</h3>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="cityForm" class="p-3">
                            @csrf
                            <input type="hidden" name="city_id" id="city_id">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="state_id">State Name <span class="text-danger">*</span></label>
                                        <select class="form-control" name="state_id" id="state_id" required>
                                            <option value="">Select an Option</option>
                                            @foreach(state() as $value)
                                            <option value="{{$value->id}}">{{$value->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="district_id">District <span class="text-danger">*</span></label>
                                    <select class="form-control" name="district_id" id="district_id" required>
                                      <option value="">Select a District</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name">City Name <span class="text-danger">*</span></label>
                                        <input type="text" id="name" name="name"
                                            class="form-control" placeholder="Enter City Name" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="status">Status <span class="text-danger">*</span></label>
                                        <select class="form-control" name="status" id="status" required>
                                            <option value="">Select an Option</option>
                                            <option value="1">Active</option>
                                            <option value="2">In-Active</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-12 text-center mt-3">
                                    <button type="submit" id="citySubmit" class="btn btn-primary w-100">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        {{-- Scripts --}}
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            $(function () {
                $.ajaxSetup({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
                });

                // Load districts when state changes
                $('#state_id').on('change', function() {
                    let state_id = $(this).val();
                    if(!state_id) return $('#district_id').html('<option value="">Select a District</option>');
                    $.post("{{ route('district.store') }}", { value: state_id, get_district: 0 }, function(data) {
                        let options = '<option value="">Select a District</option>';
                        data.forEach(d => options += `<option value="${d.id}">${d.name}</option>`);
                        $('#district_id').html(options);
                    }).fail(function() {
                        Swal.fire('Error', 'Failed to load districts!', 'error');
                    });
                });


                // Open modal for create
                $('[data-bs-target="#modal-basic"]').on('click', function () {
                    $('#modal-basic .modal-title').text('Create City');
                    $('#cityForm')[0].reset();
                    $('#city_id').val('');
                    $('#citySubmit').text('Save');
                });

                // Open modal for edit
                $(document).on('click', '.edit-city-btn', function () {
                    const id = $(this).data('id');
                    const name = $(this).data('name');
                    const state = $(this).data('state');
                    const district = $(this).data('district');
                    const status = $(this).data('status');

                    $('#modal-basic .modal-title').text('Edit City');
                    $('#city_id').val(id);
                    $('#name').val(name);
                    $('#state_id').val(state).trigger('change');

                    // Delay to ensure districts loaded
                    setTimeout(() => $('#district_id').val(district), 200);

                    $('#status').val(status);
                    $('#citySubmit').text('Update');
                    $('#modal-basic').modal('show');
                });

                // Submit form
                $('#cityForm').on('submit', function (e) {
                    e.preventDefault();
                    const id = $('#city_id').val();
                    const url = id ? `city/${id}` : 'city';

                    let formData = new FormData(this);
                    if (id) formData.append('_method', 'PUT');

                    $.ajax({
                        url: url,
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function () {
                            $('#modal-basic').modal('hide');
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: id ? 'City updated successfully!' : 'City created successfully!',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => location.reload());
                        },
                        error: function (xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Something went wrong!'
                            });
                        }
                    });
                });
            });
        </script>
    </div>
</div>
@endsection