@extends('layouts.admin')

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

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

    <div class="mb-3">
        <h1 class="h3 d-inline align-middle">Edit Taluk</h1>
        <a href="{{ route('admin.taluks.index') }}" class="btn btn-primary float-end">Back</a>
    </div><br>

    <div class="card">
        <div class="card-body">
            <form id="edit_taluk_form">

                @csrf
                <div class="mb-3 col-md-6">
                    <label class="form-label">
                        <span style="color:red">*</span> Taluk Name
                    </label>
                    <input type="text" name="taluk_name" class="form-control" value="{{ $taluk->taluk_name }}">
                    <label style="color:red" id="taluk_name_error"></label>
                </div>

                <div class="mb-3 col-md-6">
                <label class="form-label">District <span class="text-danger">*</span></label>
                <select name="district_id" class="form-select" >
                    <option value="">-- Select District --</option>
                    @foreach ($districts as $district)
                        <option 
                            value="{{ $district->id }}" 
                            {{ old('district_id', $taluk->district_id) == $district->id ? 'selected' : '' }}
                        >
                            {{ $district->district }}
                        </option>
                    @endforeach
                </select>
               <label style="color:red" id="district_error"></label>
            </div>

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

            </form>
        </div>
    </div>
</div>
@endsection

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

    $('#edit_taluk_form').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();

        // Client-side validation
        let hasError = false;
        if (taluk_name === '') {
            $('#taluk_name_error').text('Taluk name is required');
            hasError = true;
        }

        if (district_id === '' || district_id === null) {
            $('#district_error').text('District is required');
            hasError = true;
        }

        if (hasError) return;

        $.ajax({
            url: "{{ route('admin.taluks.update', Crypt::encryptString($taluk->id)) }}",
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                _method: 'PUT',
                taluk_name: taluk_name,
                district_id: district_id
            },
            beforeSend: function() {
                Swal.fire({
                    title: 'Please wait...',
                    text: 'Updating Taluk details',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
            },
            success: function(response) {
                Swal.close();
              if (response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Updated!',
                    text: response.message,
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = "{{ route('admin.taluks.index') }}";
                    }
                });
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message || 'Something went wrong!',
                    confirmButtonText: 'OK'
                });
            }
        },
            error: function(xhr) {
                Swal.close();
                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    if (errors.taluk_name) {
                        $('#taluk_name_error').text(errors.taluk_name[0]);
                    }
                    if (errors.district_id) {
                        $('#district_error').text(errors.district_id[0]);
                    }
                } else {
                    Swal.fire('Error', 'Something went wrong.', 'error');
                }
            }
        });

    });

});

</script>
@endpush