@extends('backend.layout.main')

@section('title', 'City Management')

@section('content')
<div class="page-wrapper">
    <div class="content">

        <!-- PAGE HEADER -->
        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">City Management</h2>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#cityOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add City
                </button>
            </div>
        </div>

        <!-- CITY TABLE -->
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-bordered" id="cityTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>State</th>
                            <th>City</th>
                            <th>Code</th>
                            <th>Status</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- OFFCANVAS FORM -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="cityOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update City</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form id="cityForm">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    <div class="mb-3">
                        <label>State</label>
                        <select name="state_id" id="state_id" class="form-control select2">
                            <option value="">Select State</option>
                            @foreach($states as $state)
                                <option value="{{ $state->id }}">{{ $state->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>City</label>
                        <input type="text"
                               name="city"
                               id="city"
                               class="form-control"
                               placeholder="Enter city name">
                    </div>

                    <div class="mb-3">
                        <label>City Code</label>
                        <input type="text"
                               name="cityCode"
                               id="cityCode"
                               class="form-control"
                               placeholder="Enter city code">
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="button"
                                class="btn btn-secondary w-50"
                                data-bs-dismiss="offcanvas">
                            Cancel
                        </button>
                        <button type="submit"
                                class="btn btn-primary w-50"
                                id="submitBtn">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>

<script>
let cityTable;

$(document).ready(function () {

    $('.select2').select2({
        dropdownParent: $('#cityOffcanvas')
    });

    fetchCities();

    function initDataTable() {
        cityTable = $('#cityTable').DataTable({
            destroy: true,
            responsive: true,
            pageLength: 10,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'collection',
                    text: '<i class="fa fa-download me-1"></i> Export',
                    className: 'btn btn-primary',
                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                },
                {
                    extend: 'colvis',
                    text: '<i class="fa fa-columns me-1"></i> Columns',
                    className: 'btn btn-secondary'
                }
            ]
        });
    }

    function fetchCities() {
        $.get("{{ route('admin.cities.fetch') }}", function (res) {

            let rows = '';
            $.each(res.data, function (i, item) {
                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.state?.name ?? '-'}</td>
                    <td>${item.city}</td>
                    <td>${item.cityCode}</td>
                    <td class="text-center">
                        <button class="toggle btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                            ${item.status ? 'Show':'Hide'}
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm edit"
                                data-item='${JSON.stringify(item)}'>
                            <i class="fa fa-edit text-info"></i>
                        </button>
                        <button class="btn btn-sm delete"
                                data-id="${item.id}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>`;
            });

            if ($.fn.DataTable.isDataTable('#cityTable')) {
                cityTable.destroy();
            }

            $('#cityTable tbody').html(rows);
            initDataTable();
        });
    }

    // SUBMIT FORM
    $('#cityForm').submit(function (e) {
        e.preventDefault();

        $.post("{{ route('admin.cities.store') }}",
            $(this).serialize(),
            function (res) {
                toastr.success(res.message);
                resetForm();

                let canvas = document.getElementById('cityOffcanvas');
                bootstrap.Offcanvas.getInstance(canvas).hide();

                fetchCities();
            }
        );
    });

    // EDIT
    $(document).on('click', '.edit', function () {
        let item = $(this).data('item');

        $('#id').val(item.id);
        $('#state_id').val(item.state_id).trigger('change');
        $('#city').val(item.city);
        $('#cityCode').val(item.cityCode);
        $('#submitBtn').text('Update');

        let canvas = new bootstrap.Offcanvas('#cityOffcanvas');
        canvas.show();
    });

    function resetForm() {
        $('#cityForm')[0].reset();
        $('#state_id').val('').trigger('change');
        $('#id').val('');
        $('#submitBtn').text('Save');
    }

    // DELETE
    $(document).on('click', '.delete', function () {
        if (!confirm('Delete this city?')) return;

        $.ajax({
            url: "{{ route('admin.cities.delete') }}",
            type: "DELETE",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchCities();
            }
        });
    });

    // TOGGLE STATUS
    $(document).on('click', '.toggle', function () {
        $.ajax({
            url: "{{ route('admin.cities.toggle') }}",
            type: "PATCH",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchCities();
            }
        });
    });

});
</script>
@endpush