@extends('layouts.admin')

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

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

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

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

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

                        <!--1-->
                        <div class="col-12 col-xl-12">
                            <div class="card">
                                <div class="card-body">
                                      <form method="post" id="submit_hospital">
<div class="row mb-3 d-flex">
    <div class="col-12 col-md-6">
        <label class="form-label">
            <span class="text-danger">*</span> Hospital Name
        </label>
        <input class="form-control" type="text" name="name">
        <small class="text-danger" id="name_error"></small>
    </div>

    <div class="col-12 col-md-6">
        <label class="form-label">
            District <span class="text-danger">*</span>
        </label>
        <select name="district_id" id="district_id" class="form-control" required>
            <option value="">-- Select District --</option>
            @foreach($districts as $district)
                <option value="{{ $district->id }}">
                    {{ $district->district }}
                </option>
            @endforeach
        </select>
        @error('district_id')
            <small class="text-danger">{{ $message }}</small>
        @enderror
    </div>
</div>
                       




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

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


                        <!--2-->

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

        </div>
@endsection

@push('scripts')


    <script>
$(document).ready(function() {

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

    $('#name_error').text('');

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

let namePattern = /^[a-zA-Z\s\.\-&()]+$/;

if (hospital_name === '') {
    $('#name_error').text('Hospital name is required');
    return;
}
if (district_id === '') {
        Swal.fire({
            icon: 'warning',
            text: 'Please select a district'
        });
        return;
    }
if (!namePattern.test(hospital_name)) {
    $('#name_error').text('Only letters and valid symbols (. - & () ) are allowed');
    return;
}

    let formData = {
        name: hospital_name,
        district_id: $('#district_id').val(),
        _token: '{{ csrf_token() }}'
    };

    $.ajax({
        url: "{{ route('admin.hospital.store') }}",
        method: "POST",
        data: formData,
        beforeSend: function() {
            Swal.fire({
                title: 'Please wait...',
                text: 'Saving hospital details',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
        },
        success: function(response) {
            Swal.close();

            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: 'Hospital added successfully.',
                showConfirmButton: true,
                confirmButtonText: 'OK',
                confirmButtonColor: '#3085d6'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Redirect to hospital list page
                    window.location.href = "{{ route('admin.hospitals.index') }}";
                }
            });
        },
        error: function(xhr) {
            Swal.close();

            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                if (errors.name) {
                    $('#name_error').text(errors.name[0]);
                }
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Something went wrong! Please try again later.',
                });
            }
        }
    });
});


});
</script>



@endpush