@extends('layouts.admin')

@section('content')
    <div class="container py-4">
          <div class="mb-3 d-flex align-items-center justify-content-between">
    <h1 class="h3 mb-0">Add District</h1>

   <a href="{{ url()->previous() }}"
       class="btn btn-primary ms-auto">
        Back
   </a>
</div>
        <form id="districtForm" action="{{ route('admin.districts.store') }}" method="POST">
            @csrf
            <div class="row mb-3">
                <div class="col-md-6">
                    <label class="form-label">District Name <span class="text-danger">*</span></label>
                    <input type="text" id="districtName" name="district" value="{{ old('district') }}"
                        class="form-control">
                    <small id="errors" class="text-danger d-none"></small>
                </div>
            </div>

            <button type="submit" class="btn btn-success">Save</button>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $(document).on("submit", "#districtForm", function(e) {
                e.preventDefault();

                let nameInput = $("#districtName");
                let nameError = $("#errors");
                let name = nameInput.val().trim();
                let hasError = false;

                nameError.text('').addClass('d-none');
                nameInput.removeClass('is-invalid');

                if (name === "") {
                    nameError.text("Please fill out this field.").removeClass('d-none');
                    nameInput.addClass('is-invalid');
                    hasError = true;
                }

                if (hasError) return;

                let formData = new FormData($(this)[0]);
                let url = $(this).attr("action");

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    url: url,
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "JSON",
                    beforeSend: function() {
                        $('button[type="submit"]').prop('disabled', true).text(
                            'Please wait...');
                    },
                    success: function(response) {
                        if (response.status === "success") {
                            Swal.fire({
                                title: 'District Added',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'Ok'
                            }).then(() => {
                                window.location.href =
                                    "{{ route('admin.districts.index') }}";
                            });
                        } else {
                            Swal.fire({
                                title: 'Failed!',
                                text: response.message || 'Something went wrong.',
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Server error. Please check logs or try again.',
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        });
                        console.error(xhr.responseText);
                    },
                    complete: function() {
                        $('button[type="submit"]').prop('disabled', false).text('Save');
                    }
                });
            });

            $("#districtName").on("input", function() {
                $(this).removeClass('is-invalid');
                $("#errors").text('').addClass('d-none');
            });
        });
    </script>
@endpush