@extends('layouts.app')

@section('content')

 <!-- Content part -->
         <div class="admim-content-wrapper">
            <div class="wrapper">
               <div class="row ">
                  <div class="col-la-12">
                     <div class="admin-content-header admin-content-sky-header sky-bg">
                        <h1 class="float-left-sm">Add Locations
                           <small>Fill out the form below to create a new user location. Please make sure to adhere to the validation rules. </small>
                        </h1>
                     </div>
                  </div>
                  <div class="clearfix"></div>


                  <div class="main-bg white-bg label-inline-block clearfix margin-bottom-la">
                     <?php echo show_flash_messages(); ?>
                     <div class="col-la-12">
                        <ul class="breadcrumb-slash">
                           <li><a href="{{url('/')}}"><i class="fas fa-home"></i></a></li>
                           <li><a href="{{url('/locations')}}">Locations </a></li>
                           <li class="active">Add</li>
                        </ul>
                        <div class="inner-content-header">
                           <h3 class=" text-border">
                              Location Information
                              <small>* Denotes required field</small>
                           </h3>
                        </div>
                     </div>
                     
                    
                     <form id="createlocationForm"  class="form-horizontal" action="{{ route('locations.store') }}" method="post" enctype="multipart/form-data">
                              @csrf
                        
                              <div class="col-me-6">
                                 <div class="form-panel">
                                       <label for="location_name" class="col-sm-4 col-me-4">Location Name<span> *</span></label>
                                    <div class="col-sm-7 col-me-7">
                                       <input type="text" class="input-panel" id="location_name" name="location_name">
                                       <span class="error-feedback text-danger" id="location_nameError"></span>
                                    </div>
                                 </div>
                              </div>

                              <div class="col-me-6">
                                 <div class="form-panel">
                                       <label for="location_state_id" class="col-sm-4 col-me-4">State<span> *</span></label>
                                    <div class="col-sm-7 col-me-7">
                                       <select id="location_state_id" name="location_state_id" class="input-panel">
                                          <option value="">Select State</option>
                                          @foreach ($statesDetails as $state)
                                             <option value="{{ $state->i_id }}">{{ $state->s_name }}</option>
                                          @endforeach
                                       </select>
                                       <span class="error-feedback text-danger" id="location_state_idError"></span>
                                    </div>
                                 </div>
                              </div>

                              <div class="col-me-6">
                                 <div class="form-panel">
                                       <label for="location_latitude" class="col-sm-4 col-me-4">Latitude<span> *</span></label>
                                    <div class="col-sm-7 col-me-7">
                                       <input type="text" class="input-panel" id="location_latitude" name="location_latitude">
                                       <span class="error-feedback text-danger" id="location_latitudeError"></span>
                                    </div>
                                 </div>
                              </div>

                              <div class="col-me-6">
                                 <div class="form-panel">
                                       <label for="location_longitude" class="col-sm-4 col-me-4">Longitude<span> *</span></label>
                                    <div class="col-sm-7 col-me-7">
                                       <input type="text" class="input-panel" id="location_longitude" name="location_longitude">
                                       <span class="error-feedback text-danger" id="location_longitudeError"></span>
                                    </div>
                                 </div>
                              </div>
                        
                              <div class="col-me-6">
                                 <div class="form-panel">
                                       <label for="location_description" class="col-sm-4 col-me-4">Address<span> *</span></label>
                                    <div class="col-sm-7 col-me-7">
                                       <textarea class="input-panel" id="location_description" name="location_description"></textarea>
                                       <span class="error-feedback text-danger" id="location_descriptionError"></span>
                                    </div>
                                 </div>
                              </div>
                        
                              

                              <div class="col-me-6">
                                 <div class="form-panel">
                                    <label for="i_is_active" class="col-sm-4 col-me-4">Status<span> *</span></label>
                                    <div class="col-sm-7 col-me-7">
                                       <select id="i_is_active" name="i_is_active" class="input-panel">
                                          <option value="">Select</option>
                                          <option value="1">Active</option>
                                          <option value="0">Inactive</option>
                                       </select>
                                       <span class="error-feedback text-danger" id="i_is_activeError"></span>
                                    </div>
                                 </div>
                              </div>
                              
                              <div class="col-me-12">
                                 <div class="form-panel submit-form">
                                       <button type="button" id="submitlocationBtn" class="button button-la float-left"><i class="fas fa-check"></i> Add Location</button>
                                       <a href="{{ route('locations.index')}}" class="button button-la button-gray float-left"><i class="fas fa-times"></i> Cancel</a>                             
                                 </div>
                              </div>
                              
                        </form>

                  </div>
               </div>
            </div>            
         </div>
         <!-- /Content part -->

<script type="text/javascript">

$(document).ready(function(){
   $('input[name="txt_f_name"]').focus();
});

$(document).ready(function() {
    // Handle the form submission without confirmation
    $('#submitlocationBtn').on('click', function() {
        // Clear previous error messages
        $('.error-feedback').text('');

        // Create a FormData object to handle file uploads
        var formData = new FormData($('#createlocationForm')[0]);

        // Make an AJAX request
        $.ajax({
            type: 'POST',
            url: $('#createlocationForm').attr('action'),
            data: formData,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(response) {
                // Handle success, e.g., show a success message
                // alert(response.message);
                alert(response.message);
                window.location.href = '{{ route("locations.index") }}';
            },
            error: function(xhr, status, error) {
                // Handle errors and display error messages
                var errors = xhr.responseJSON.errors;

                if (errors) {
                    $.each(errors, function(key, value) {
                        $('#' + key + 'Error').text(value[0]);
                    });
                } else {
                    // Handle other types of errors
                    alert('An error occurred. Please try again.');
                }
            }
        });
    });
});


</script>
@endsection