@extends('dashboard.admin.layouts.master')

@section('toolbar')
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('sidebar.cities') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted"><a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">{{ trans('Toolbar.home') }}</a></li>
                <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                <li class="breadcrumb-item text-muted">{{ trans('sidebar.cities') }}</li>
            </ul>
        </div>
        <button type="button" class="btn btn-sm btn-primary" id="addCity"><i class="bi bi-plus-lg"></i>{{ trans('settings.Add_City') }}</button>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card card-flush">
            <div class="card-header border-0 pt-6 align-items-center">
                <div class="card-title">
                    <div class="d-flex align-items-center position-relative my-1">
                        <i class="bi bi-search fs-5 position-absolute ms-4 text-muted"></i>
                        <input type="text" id="citySearch" class="form-control form-control-solid w-250px ps-12" placeholder="{{ trans('dash_site.search') }}">
                    </div>
                </div>
                @if ($countries->count() > 1)
                    <div class="card-toolbar">
                        <select id="countryFilter" class="form-select form-select-solid form-select-sm w-200px">
                            <option value="">{{ trans('settings.all_countries') }}</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-4" id="citiesTable">
                    <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                        <th class="min-w-250px">{{ trans('settings.cityName') }}</th>
                        <th>{{ trans('settings.country') }}</th>
                        <th>{{ trans('settings.districts_count') }}</th>
                        <th class="text-end min-w-100px">{{ trans('forms.Action') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    {{-- One popup for add and edit; the edit button fills it from city/{id}/edit. --}}
    <div class="modal fade" id="cityModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered mw-550px">
            <form id="cityForm" class="modal-content" method="POST" enctype="multipart/form-data"
                  action="{{ route('admin.setting.city.store') }}" data-store-url="{{ route('admin.setting.city.store') }}">
                @csrf
                <input type="hidden" name="_method" value="POST" id="cityMethod">
                <div class="modal-header">
                    <h3 class="modal-title" id="cityModalTitle">{{ trans('settings.Add_City') }}</h3>
                    <button type="button" class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"><i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i></button>
                </div>
                <div class="modal-body">
                    <div class="text-center mb-7">
                        <div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}')">
                            <div class="image-input-wrapper w-125px h-125px" id="cityImagePreview" style="background-size: cover"></div>
                            <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" title="{{ trans('forms.edite_btn') }}">
                                <i class="bi bi-pencil-fill fs-7"></i>
                                <input type="file" name="image" id="image" accept=".png,.jpg,.jpeg,.webp">
                            </label>
                            <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" title="{{ trans('dash_site.Cancel') }}"><i class="bi bi-x fs-2"></i></span>
                        </div>
                    </div>
                    <div class="mb-6">
                        <label class="required form-label">{{ trans('settings.city_name') }} (AR)</label>
                        <input type="text" name="name[ar]" id="name_ar" dir="rtl" class="form-control" autocomplete="off">
                    </div>
                    <div class="mb-6">
                        <label class="required form-label">{{ trans('settings.city_name') }} (EN)</label>
                        <input type="text" name="name[en]" id="name_en" dir="ltr" class="form-control" autocomplete="off">
                    </div>
                    <div>
                        <label class="required form-label">{{ trans('settings.country') }}</label>
                        <select name="country_id" id="country_id" class="form-select">
                            <option value="">—</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}" @selected($loop->count === 1)>{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ trans('settings.Close') }}</button>
                    <button type="submit" class="btn btn-primary" id="citySubmit">
                        <span class="indicator-label">{{ trans('settings.Save_Changes') }}</span>
                        <span class="indicator-progress">{{ trans('settings.saving') }} <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\Admin\settings\CityRequest', '#cityForm') !!}
    @include('dashboard.admin.partials.crud-table-js')
    <script>
        $(document).ready(function () {
            var datatable = $('#citiesTable').DataTable({
                processing: true,
                serverSide: true,
                dom: "<'table-responsive'tr><'row align-items-center mt-5'<'col-sm-12 col-md-5 d-flex align-items-center gap-3'li><'col-sm-12 col-md-7 d-flex justify-content-end'p>>",
                ajax: {
                    url: "{{ route('admin.setting.city.index') }}",
                    data: function (d) { d.country_id = $('#countryFilter').val(); }
                },
                columns: [
                    {data: 'city', name: 'city'},
                    {data: 'country', name: 'country', orderable: false, searchable: false},
                    {data: 'districts_count', name: 'districts_count', searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                order: [[0, 'desc']],
                language: {lengthMenu: '_MENU_'}
            });

            var searchTimer;
            $('#citySearch').on('keyup', function () {
                clearTimeout(searchTimer);
                var value = this.value;
                searchTimer = setTimeout(function () { datatable.search(value).draw(); }, 300);
            });
            $('#countryFilter').on('change', function () { datatable.ajax.reload(); });
            CrudTable.bind($('#citiesTable'), datatable);

            var $form = $('#cityForm');
            var modal = new bootstrap.Modal(document.getElementById('cityModal'));
            var defaultCountry = $('#country_id').val();

            function openModal(title, action, method, values) {
                $form[0].reset();
                $form.validate().resetForm();
                $form.find('.is-invalid, .is-valid').removeClass('is-invalid is-valid');
                $form.find('[data-server-error]').remove();
                $form.attr('action', action);
                $('#cityMethod').val(method);
                $('#cityModalTitle').text(title);
                $('#name_ar').val(values.name_ar || '');
                $('#name_en').val(values.name_en || '');
                $('#country_id').val(values.country_id || defaultCountry);
                $('#cityImagePreview').css('background-image', values.image_url ? 'url(' + values.image_url + ')' : 'none');
                modal.show();
            }

            $('#addCity').on('click', function () {
                openModal(@json(trans('settings.Add_City')), $form.data('store-url'), 'POST', {});
            });

            $('#citiesTable').on('click', '[data-edit-url]', function () {
                $.getJSON(this.dataset.editUrl, function (city) {
                    openModal(@json(trans('settings.Update_City')), city.update_url, 'PUT', city);
                });
            });

            // Save over AJAX once the client-side rules pass; server errors are shown on the fields.
            $form.on('submit', function (event) {
                event.preventDefault();
                if (!$form.valid()) {
                    return;
                }
                var $button = $('#citySubmit').attr('data-kt-indicator', 'on').prop('disabled', true);
                $form.find('[data-server-error]').remove();

                $.ajax({url: $form.attr('action'), type: 'POST', data: new FormData($form[0]), processData: false, contentType: false})
                    .done(function (response) {
                        modal.hide();
                        Swal.fire({text: response.message, icon: 'success', buttonsStyling: false, timer: 1800, confirmButtonText: 'OK', customClass: {confirmButton: 'btn btn-primary'}});
                        datatable.ajax.reload(null, false);
                    })
                    .fail(function (xhr) {
                        var errors = (xhr.responseJSON && xhr.responseJSON.errors) || {};
                        $.each(errors, function (field, messages) {
                            var name = field.replace(/\.(\w+)/g, '[$1]');
                            var $input = $form.find('[name="' + name + '"]').addClass('is-invalid');
                            $('<div class="invalid-feedback d-block" data-server-error></div>').text(messages[0]).insertAfter($input);
                        });
                        if (!Object.keys(errors).length) { toastr.error(CrudTable.labels.error); }
                    })
                    .always(function () { $button.removeAttr('data-kt-indicator').prop('disabled', false); });
            });
        });
    </script>
@endsection