@extends('backend.layouts.app')

@section('main-content')
<section class="content-header">
    <div class="container-fluid my-2">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Create City</h1>
            </div>
            <div class="col-sm-6 text-right">
                <a href="{{ route('cities.index') }}" class="btn btn-primary">Back</a>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <form action="" method="post" id="city_form" name="city_form">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="name">City Name</label>
                                <input type="text" name="name" id="name" class="form-control" required>
                                <p></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="country">Country</label>
                                <input type="text" name="country" id="country" class="form-control" placeholder="e.g. France">
                                <p></p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="code">Code</label>
                                <input type="text" name="code" id="code" class="form-control" placeholder="Optional">
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pb-5 pt-3">
                <button class="btn btn-primary" type="submit">Create</button>
                <a href="{{ route('cities.index') }}" class="btn btn-outline-dark ml-3">Cancel</a>
            </div>
        </form>
    </div>
</section>
@endsection

@push('bottom-scripts')
<script>
    jQuery(document).ready(($) => {
        $('#name').on('blur', () => {
            if (!$('#code').val()) {
                $('#code').val($('#name').val().trim().substring(0, 3).toUpperCase());
            }
        });

        $('#city_form').submit(async (e) => {
            e.preventDefault();
            let formData = new FormData($('#city_form')[0]);
            formData.append('_token', "{{ csrf_token() }}");

            try {
                const response = await fetch("{{ route('cities.store') }}", {
                    method: "POST",
                    body: formData,
                });

                const jsonResponse = await response.json();

                if (jsonResponse.status === true) {
                    window.location.href = "{{ route('cities.index') }}";
                    return;
                }

                let errors = jsonResponse.errors || {};
                ['name', 'country', 'code'].forEach((field) => {
                    if (errors[field]) {
                        $('#' + field).addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors[field]);
                    } else {
                        $('#' + field).removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html('');
                    }
                });
            } catch (error) {
                console.error('Error occurred:', error);
            }
        });
    });
</script>
@endpush