@extends('layouts.admin')

@section('title','Add Taluk')

@section('content')
<div class="container-fluid p-0">

    <!--title-->
   <div class="mb-3 d-flex align-items-center justify-content-between">
    <h1 class="h3 mb-0">Add Taluk</h1>

    <a href="{{ url()->previous() }}"
       class="btn btn-primary ms-auto">
        Back
   </a>
</div>

    <!--title-->

    <!--content-->
    <div class="row">

        <!--1-->
        <div class="col-12 col-xl-12">
            <div class="card">
                <div class="card-body">
                  <form method="post" id="submit_Taluk">

                    <div class="row">


                        <div class="mb-3 col-md-6">
                            <label for="example-text-input" class="form-control-label"><span style="color:red">*</span> Taluk Name</label>
                            <input class="form-control" type="text" name="taluk_name" maxlength="200">
                            <label style="color:red" id="taluk_name_error"></label>
                        </div>                                   
                        <div class="col-md-6">
                            <label class="form-label">District <span class="text-danger">*</span></label>
                            <select name="district_id" class="form-select" required>
                                <option value="">-- Select District --</option>
                                @foreach ($districts as $district)
                                <option value="{{ $district->id }}" 
                                    {{ old('district_id') == $district->id ? 'selected' : '' }}>
                                    {{ $district->district }}
                                </option>
                                @endforeach
                            </select>
                            @error('district_id') <small class="text-danger">{{ $message }}</small> @enderror
                        </div>

                    </div>                                       


                    <button type="submit" class="btn btn-primary">Save</button>

                </form>
            </div>
        </div>
    </div>
    <!--1-->


    <!--2-->

</div>
<!--content-->

</div>
@endsection
@push('scripts')
<script>
$(document).ready(function() {

    $('#submit_Taluk').on('submit', function(e) {
        e.preventDefault();

        // Clear previous errors
        $('#taluk_name_error').text('');
        $('#district_error').text('');

        let taluk_name = $('input[name="taluk_name"]').val().trim();
        let district_id = $('select[name="district_id"]').val();

        // Basic validation before sending request

// Required
if (taluk_name === '') {
    $('#taluk_name_error').text('Taluk name is required');
    return;
}

// Length
if (taluk_name.length > 200) {
    $('#taluk_name_error').text('Taluk name must not exceed 200 characters');
    return;
}

// Pattern (letters & spaces only)
if (!/^[A-Za-z\s]+$/.test(taluk_name)) {
    $('#taluk_name_error').text('Only alphabets and spaces are allowed');
    return;
}

        if (district_id === '') {
            Swal.fire('Validation Error', 'Please select a district.', 'warning');
            return;
        }

        $.ajax({
            url: "{{ route('admin.taluks.store') }}",  // your store route
            method: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                taluk_name: taluk_name,
                district_id: district_id
            },
            beforeSend: function() {
                Swal.fire({
                    title: 'Please wait...',
                    text: 'Submitting data...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
            },
            success: function(response) {
                Swal.close();

                if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: response.message || 'Taluk added successfully!',
                    confirmButtonText: 'OK', 
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = "{{ route('admin.taluks.index') }}";
                    }
                });
            } else {
                // Handle unexpected success responses
                Swal.fire({
                    icon: 'success',
                    title: 'Added successfully!',
                    text: 'Redirecting...',
                    confirmButtonText: 'OK', 
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = "{{ route('admin.taluks.index') }}";
                    }
                });
            }
        },
            error: function(xhr) {
                Swal.close();

                if (xhr.status === 422) {
                    // Laravel validation errors
                    let errors = xhr.responseJSON.errors;
                    if (errors.taluk_name) {
                        $('#taluk_name_error').text(errors.taluk_name[0]);
                    }
                    if (errors.district_id) {
                        Swal.fire('Validation Error', errors.district_id[0], 'warning');
                    }
                } else {
                    Swal.fire('Error', 'Something went wrong while submitting.', 'error');
                }
            }
        });
    });

});
</script>
@endpush