@extends('admin.layouts.app')

@section('title', 'City')

@section('content')
<x-admin.page-header title="List Of City" breadcrumb="Masters / Locations / City">
    <x-slot:actions>
        <button type="button" class="btn nb-btn-primary" data-toggle="modal" data-target="#modals-default" id="add_button">
            <i class="fas fa-plus me-1"></i> Add More
        </button>
    </x-slot:actions>
</x-admin.page-header>

<div class="modal fade insert_frm" id="modals-default">
    <div class="modal-dialog">
        <form class="modal-content" id="validation-form" method="POST" action="{{ route('admin.masters.cities.store') }}" autocomplete="off">
            @csrf
            <input type="hidden" name="_method" id="form_method" value="POST">
            <input type="hidden" name="id" id="id" value="">

            <div class="modal-header">
                <h5 class="modal-title">Add <span class="font-weight-light">City</span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Country <span class="text-danger">*</span></label>
                        <select class="form-control" id="CountryId" name="CountryId" required>
                            <option selected disabled value="">Select Country</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->Name }}</option>
                            @endforeach
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">State <span class="text-danger">*</span></label>
                        <select class="form-control" id="StateId" name="StateId" required>
                            <option selected disabled value="">Select State</option>
                            @foreach ($states as $state)
                                <option value="{{ $state->id }}" data-country-id="{{ $state->CountryId }}">{{ $state->Name }}</option>
                            @endforeach
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">City Name <span class="text-danger">*</span></label>
                        <input type="text" name="Name" class="form-control" id="Name" placeholder="City Name" required>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col">
                        <label class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-control" id="Status" name="Status" required>
                            <option value="1" selected>Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger" id="submit" name="submit">Submit</button>
            </div>
        </form>
    </div>
</div>

<div class="card nb-table-card">
    <div class="card-datatable">
        <table id="cities-table" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Country</th>
                    <th>State</th>
                    <th>City</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($cities as $index => $city)
                    <tr>
                        <td>{{ $index + 1 }}</td>
                        <td>{{ $city->country?->Name }}</td>
                        <td>{{ $city->state?->Name }}</td>
                        <td>{{ $city->Name }}</td>
                        <td>
                            <x-admin.status-badge :active="(int) $city->Status === 1" />
                        </td>
                        <td>
                            <div class="nb-actions">
                                <a href="javascript:void(0);" class="nb-action-btn update" data-id="{{ $city->id }}" data-toggle="tooltip" title="Edit">
                                    <i class="fas fa-pen"></i>
                                </a>
                                <form method="POST" action="{{ route('admin.masters.cities.destroy', $city) }}" class="d-inline delete-form" onsubmit="return confirm('Are you sure you want to delete this City?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="nb-action-btn danger delete" title="Delete" data-toggle="tooltip">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
var allStateOptions = $('#StateId').html();

function filterStates(countryId, selectedStateId) {
    var $state = $('#StateId');
    $state.html('<option selected disabled value="">Select State</option>');
    $(allStateOptions).filter('option[data-country-id]').each(function () {
        if (String($(this).data('country-id')) === String(countryId)) {
            $state.append($(this).clone());
        }
    });
    if (selectedStateId) {
        $state.val(String(selectedStateId));
    }
}

$(document).ready(function () {
    $('#cities-table').DataTable();

    $('#CountryId').on('change', function () {
        filterStates($(this).val(), null);
    });

    $('#add_button').on('click', function () {
        $('.modal-title').html("Add <span class='font-weight-light'>City</span>");
        $('#validation-form').attr('action', @json(route('admin.masters.cities.store')));
        $('#form_method').val('POST');
        $('#id').val('');
        $('#Name').val('');
        $('#Status').val(1);
        $('#CountryId').val('');
        filterStates('', null);
        $('#submit').text('Submit');
    });

    $(document).on('click', '.update', function (event) {
        event.preventDefault();
        var id = $(this).data('id');
        $.ajax({
            url: @json(url('admin/masters/cities')) + '/' + id,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                $('#CountryId').val(data.CountryId);
                filterStates(data.CountryId, data.StateId);
                $('#Name').val(data.Name);
                $('#Status').val(data.Status);
                $('#id').val(id);
                $('#validation-form').attr('action', @json(url('admin/masters/cities')) + '/' + id);
                $('#form_method').val('PUT');
                $('#submit').text('Update');
                $('.modal-title').html("Update <span class='font-weight-light'>City</span>");
                $('.insert_frm').modal('show');
            }
        });
    });
});
</script>
@endpush