@extends('layouts/base_view')
@section('title'){!! $variables['header_routes'] !!}@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">{{ $variables['judul'] ?? 'Kota' }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="main-form" method="post" action="{{ route('cities.store', $data->id ?? 0) }}">
                            @csrf
                            <div class="form-group form-floating mb-3">
                                <input type="text" name="city_name" class="form-control" placeholder="" value="{{ old('city_name', $data->city_name ?? '') }}" required>
                                <label>Nama Kota</label>
                            </div>
                            <div class="form-group form-floating mb-3">
                                <input type="text" name="province_name" id="province_name" class="form-control" placeholder="" value="{{ old('province_name', $data->province_name ?? '') }}" required autocomplete="off">
                                <label>Nama Provinsi</label>
                                <div id="province-suggestions" class="list-group position-absolute w-100" style="z-index:999;display:none;"></div>
                            </div>
                            <div class="form-check mb-3">
                                <input type="checkbox" class="form-check-input" name="is_active" id="is_active" value="1" {{ old('is_active', $data->is_active ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">Aktif</label>
                            </div>
                            <button type="submit" class="btn btn-outline-primary"><i class="fa-regular fa-floppy-disk"></i> Simpan</button>
                            <a href="{{ route('cities.index') }}" class="btn btn-outline-secondary" data="back" onclick="return notificationBeforeBack(event, this)">Kembali</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
$(function() {
    // Autocomplete provinsi dari data yang sudah ada
    var timer;
    $('#province_name').on('input', function() {
        clearTimeout(timer);
        var q = $(this).val();
        if (q.length < 2) { $('#province-suggestions').hide(); return; }
        timer = setTimeout(function() {
            $.get('{{ route("cities.lookup") }}', { q: q }, function(res) {
                var provinces = [...new Set(res.map(function(r) { return r.province_name; }))];
                if (!provinces.length) { $('#province-suggestions').hide(); return; }
                var html = provinces.map(function(p) {
                    return '<a href="#" class="list-group-item list-group-item-action py-1 px-3 province-item" data-value="' + p + '">' + p + '</a>';
                }).join('');
                $('#province-suggestions').html(html).show();
            });
        }, 300);
    });

    $(document).on('click', '.province-item', function(e) {
        e.preventDefault();
        $('#province_name').val($(this).data('value'));
        $('#province-suggestions').hide();
    });

    $(document).on('click', function(e) {
        if (!$(e.target).closest('#province_name, #province-suggestions').length) {
            $('#province-suggestions').hide();
        }
    });

    $('#main-form').on('submit', function(e) {
        e.preventDefault();
        $('#loaderaditdinda').show();
        $.ajax({
            url: $(this).attr('action'), method: 'POST', data: $(this).serialize(),
            success: function(res) {
                $('#loaderaditdinda').hide();
                if (res[0] === 'success') {
                    Swal.fire({ icon: 'success', text: res[1], timer: 1500, showConfirmButton: false })
                        .then(() => window.location.href = '{{ route("cities.index") }}');
                } else {
                    Swal.fire({ icon: 'warning', text: res[1] });
                }
            },
            error: function(xhr) {
                $('#loaderaditdinda').hide();
                var msg = xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).map(e => e[0]).join('\n') : 'Terjadi kesalahan.';
                Swal.fire({ icon: 'error', text: msg });
            }
        });
    });
});
</script>
@endsection