@extends('admin.includes.layout')
@section('title', $page_title)
@section('content')
<!-- Page sidebar end-->
<div class="page-body">
   <div class="container-fluid">
      <div class="page-title">
         <div class="row">
            <div class="col-sm-6 col-12">
            </div>
            <div class="col-sm-6 col-12">
               <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="{{ route('admin') }}"> <i class="fa-solid fa-home me-2"></i></a></li>
                  <li class="breadcrumb-item">{{ $page_title }}</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
   <!-- Container-fluid starts-->
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-12">
            <div class="card shadow-lg border-0 rounded-3">
               <!-- Card Header -->
               <div class="card-header bg-light border-bottom-0 py-3 d-flex justify-content-between align-items-center rounded-top">
                  <h3 class="mb-0 fw-bold text-primary">
                     {{ $page_title }}
                  </h3>
                  <a href="{{ route('region.list') }}" class="btn btn-sm btn-sm btn-outline-primary">
                  <i class="fas fa-list"></i> List
                  </a>
               </div>
               <div class="border-top"></div>
               <div class="card-body p-4">

                                
                <form id="saveForm" class="theme-form row g-3" enctype="multipart/form-data">
                    <input type="hidden" name="id" id="id" value="{{ $region->id ?? '' }}">
                    @csrf

                    
                    <div class="col-12 col-md-4">
                        <label for="name" class="form-label">Name</label>
                        <input class="form-control" type="text" id="name" name="name"
                            value="{{ $region->name ?? '' }}" placeholder="Enter  Name">
                    </div>

                

                    <!-- Status -->
                    <div class="col-12 col-md-4">
                        <label class="form-label" for="status">Status</label>
                        <select class="form-select select2" id="status" name="status">
                            <option value="Active" {{ !empty($region) && $region->status === 'Active' ? 'selected' : '' }}>Active</option>
                            <option value="Inactive" {{ !empty($region) && $region->status === 'Inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>

                    <!-- Submit -->
                    <div class="col-12 text-start mt-3">
                        <button type="submit" id="submitBtn" class="btn btn-sm btn-primary me-2">
                            <i class="fas fa-save"></i> {{ $btn_title }}
                        </button>
                        <button type="reset" id="resetBtn" class="btn btn-sm btn-secondary">
                            <i class="fa-solid fa-rotate-left"></i> Reset
                        </button>
                    </div>
                </form>

               </div>
            </div>
         </div>
      </div>
   </div>
</div>
@endsection
@push('scripts')
<script>
   $(document).ready(function() {
       $('#saveForm').on('submit', function(e) {
           e.preventDefault();
           syncEditors();
           const formData = new FormData();
           formData.append('_token', $('input[name="_token"]').val());
           formData.append('id', $('#id').val());
           formData.append('name', $('#name').val());
            formData.append('status', $('#status').val());
         
           $.ajax({
               url: '{{ route("region.save") }}',
               type: 'POST',
               data: formData,
               processData: false,
               contentType: false,
               beforeSend: function() {
                   // Disable button before sending
                   $('#submitBtn').prop('disabled', true).text('Processing...');
               },
               success: function(response) {
                   toastr.success(response.message || 'record saved successfully!');
                   $('#saveForm')[0].reset(); // reset form
                   if(response.success){
                       setTimeout(function() {
                           location.reload();
                       }, 1000);
                   }
               },
               error: function(xhr) {
                   if(xhr.status === 422){
                       let errors = xhr.responseJSON.errors;
                       let errorMessages = [];
                       $.each(errors, function(key, val) {
                           errorMessages.push(val[0]);
                       });
                       toastr.error(errorMessages.join('<br>'));
                   } else {
                       toastr.error(xhr.responseJSON?.message || 'Something went wrong!');
                       console.log(xhr.responseText);
                   }
               },
               complete: function() {
                   // Enable button after response
                   $('#submitBtn').prop('disabled', false).text('Save');
               }
           });
       });
   });
</script>
@endpush