@extends('backend.layouts.admin.app')

@section('content')

<!-- Google Maps API -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=places&loading=async&callback=initializeGoogleMaps"></script>

<!-- Custom Map Controls CSS -->
<style>
.current-location-control {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
    margin: 10px;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    transition: all 0.2s ease;
    position: relative;
}

.current-location-control:hover {
    background-color: #f5f5f5;
    color: #333;
}

.current-location-control:active {
    background-color: #e0e0e0;
}

.current-location-control.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.current-location-control .spinner {
    animation: spin 1s linear infinite;
}

/* Google Maps style current location icon */
.current-location-icon {
    width: 20px;
    height: 20px;
    position: relative;
}

.current-location-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background-color: #333;
    border-radius: 50%;
}

.current-location-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid #333;
    border-radius: 50%;
}

.current-location-icon .direction-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

.current-location-icon .direction-lines::before,
.current-location-icon .direction-lines::after {
    content: '';
    position: absolute;
    background-color: #333;
}

.current-location-icon .direction-lines::before {
    top: 2px;
    left: 9px;
    width: 2px;
    height: 4px;
}

.current-location-icon .direction-lines::after {
    bottom: 2px;
    left: 9px;
    width: 2px;
    height: 4px;
}

.current-location-icon .direction-lines .left-line,
.current-location-icon .direction-lines .right-line {
    position: absolute;
    top: 9px;
    width: 4px;
    height: 2px;
    background-color: #333;
}

.current-location-icon .direction-lines .left-line {
    left: 2px;
}

.current-location-icon .direction-lines .right-line {
    right: 2px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modal close button positioning */
.modal-header .close {
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 1050;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    cursor: pointer;
}

.modal-header .close:hover {
    opacity: 0.75;
}

.modal-header .close:focus {
    outline: none;
}

/* Google Places Autocomplete styling */
.pac-container {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 1000;
}

.pac-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.pac-item:last-child {
    border-bottom: none;
}

.pac-item:hover {
    background-color: #f5f5f5;
}

.pac-item-selected {
    background-color: #e3f2fd;
}

.pac-matched {
    font-weight: bold;
}

.pac-item-query {
    color: #333;
}

.pac-item-query .pac-matched {
    color: #1976d2;
}

/* Additional styling for better autocomplete */
.pac-container {
    z-index: 9999 !important;
    border-radius: 4px;
    margin-top: 2px;
}

.pac-item {
    padding: 10px 12px;
    font-size: 14px;
}

.pac-item:hover {
    background-color: #f0f0f0;
}

.pac-item-selected {
    background-color: #e3f2fd;
}

#searchInput {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

#searchInput:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Enhanced Google Places Autocomplete styling */
.pac-container {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 9999 !important;
    margin-top: 2px;
}

.pac-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.pac-item:last-child {
    border-bottom: none;
}

.pac-item:hover {
    background-color: #f5f5f5;
}

.pac-item-selected {
    background-color: #e3f2fd;
}

.pac-matched {
    font-weight: bold;
    color: #1976d2;
}

.pac-item-query {
    color: #333;
}

.pac-item-query .pac-matched {
    color: #1976d2;
}

/* Search input with icon styling */
.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
}

.search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.search-icon:hover {
    color: #007bff;
}

.search-input:focus + .search-icon {
    color: #007bff;
}
</style>

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('admin.locations.index') }}">Locations</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
    @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
      <div class="col-md-12">

        <div class="border-top">
            
            <div class="" id="customer-step-1" > 
              <form action="{{ $save }}" method="POST" class="form-horizontal form-validate location-form" enctype="multipart/form-data">
                  @csrf
                  @if(isset($pageData) && $pageData)
                    @method('PUT')
                  @endif
                  <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="scret_id">
                  
                      <div class="box-body px-0 form-box-scroll">
                      
                        <div class="row">
                          <div class="col-md-4">
                          
                            <div class="form-group">
                                <label for="name" class="control-label">Name of the Location</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Enter location name" value="{{ old('name', $pageData['name'] ?? '') }}">
                                    @if ($errors->has('name'))
                                    <span class="help-block">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          
                          <div class="col-md-4">
                         
                            <div class="form-group">
                                <label for="terminal" class="control-label">Terminal (Stamping)</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="terminal" class="form-control" id="terminal" placeholder="Enter terminal" value="{{ old('terminal', $pageData['terminal'] ?? '') }}">
                                    @if ($errors->has('terminal'))
                                    <span class="help-block">{{ $errors->first('terminal') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                          
                            <div class="form-group">
                                <label for="address" class="control-label">Address</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="address" class="form-control" id="address" placeholder="Enter address" value="{{ old('address', $pageData['address'] ?? '') }}">
                                    @if ($errors->has('address'))
                                    <span class="help-block">{{ $errors->first('address') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="row">
                              <div class="col-md-4">
                                <div class="form-group">
                                    <label for="latitude" class="control-label">Latitude</label>
                                    <div class="col-field-wrapper">
                                        <input type="text" name="latitude" class="form-control" id="latitude" placeholder="Enter latitude" value="{{ old('latitude', $pageData['latitude'] ?? '') }}">
                                        @if ($errors->has('latitude'))
                                        <span class="help-block">{{ $errors->first('latitude') }}</span>
                                        @endif
                                    </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                    <label for="longitude" class="control-label">Longitude</label>
                                    <div class="col-field-wrapper">
                                        <input type="text" name="longitude" class="form-control" id="longitude" placeholder="Enter longitude" value="{{ old('longitude', $pageData['longitude'] ?? '') }}">
                                        @if ($errors->has('longitude'))
                                        <span class="help-block">{{ $errors->first('longitude') }}</span>
                                        @endif
                                    </div>
                                </div>
                              </div>
                              <div class="col-md-4">
                                <div class="form-group">
                                    <div class="control-label">&nbsp;</div>
                                    <div class="col-field-wrapper mt-2">
                                      <a href="javascript:void(0);" class="btn btn-primary" id="get-location-btn">Get Location</a>
                                    </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="col-md-8">
                          
                            <div class="form-group">
                                <label for="google_map_link" class="control-label">Link of Google Map</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="google_map_link" class="form-control" id="google_map_link" placeholder="Http://" value="{{ old('google_map_link', $pageData['google_map_link'] ?? '') }}">
                                    @if ($errors->has('google_map_link'))
                                    <span class="help-block">{{ $errors->first('google_map_link') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-6">
                                <div class="form-group">
                                    <label for="type" class="control-label">Site</label>
                                    <div class="col-field-wrapper">
                                        <select name="type" id="type" class="form-control">
                                            <option value="">Select Site Type</option>
                                            <option value="loading" {{ old('type', $pageData['type'] ?? '') == 'loading' ? 'selected' : '' }}>Loading Site</option>
                                            <option value="offloading" {{ old('type', $pageData['type'] ?? '') == 'offloading' ? 'selected' : '' }}>Offloading Site</option>
                                        </select>
                                        @if ($errors->has('type'))
                                        <span class="help-block">{{ $errors->first('type') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="location_type" class="control-label">Type</label>
                                    <div class="col-field-wrapper">
                                        <select name="location_type" id="location_type" class="form-control">
                                            <option value="">Select Type</option>
                                            @foreach($locationTypes as $locationType)
                                            <option value="{{ $locationType->id }}" {{ old('location_type', $pageData['location_type'] ?? '') == $locationType->id ? 'selected' : '' }}>{{ ucwords($locationType->name) }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('location_type'))
                                        <span class="help-block">{{ $errors->first('location_type') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="access_requirements" class="control-label">Access Requirements</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="access_requirements" id="access_requirements" class="form-control" placeholder="Example: Access Card needed, PPE required" value="{{ old('access_requirements', $pageData['access_requirements'] ?? '') }}">
                                    @if ($errors->has('access_requirements'))
                                    <span class="help-block">{{ $errors->first('access_requirements') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="cargo_details" class="control-label">Cargo Details</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="cargo_details" id="cargo_details" class="form-control" placeholder="Example: Coal, Iron Ore, Limestone" value="{{ old('cargo_details', $pageData['cargo_details'] ?? '') }}">
                                    @if ($errors->has('cargo_details'))
                                    <span class="help-block">{{ $errors->first('cargo_details') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="loading_offloading_instructions" class="control-label">Loading/Offloading Instructions</label>
                                <div class="col-field-wrapper">
                                    <textarea name="loading_offloading_instructions" id="loading_offloading_instructions" class="form-control" rows="3" placeholder="Example: Driver must report to weighbridge before loading">{{ old('loading_offloading_instructions', $pageData['loading_offloading_instructions'] ?? '') }}</textarea>
                                    @if ($errors->has('loading_offloading_instructions'))
                                    <span class="help-block">{{ $errors->first('loading_offloading_instructions') }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                          <div class="col-md-12">
                            <div class="row">
                              <div class="col-xl-4 col-md-12 col-lg-7">
                                <!-- Description -->
                                <div class="form-group">
                                    <label for="description" class="control-label col-md-5 fw-semibold text-color-2D3648">Load/Offload Time</label>
                                    <div class="col-field-wrapper col-md-7">
                                        <div class="d-flex justify-content-xl-end">
                                          <label class="custom-radio">
                                            <input type="radio" name="duration_type" value="24_7" {{ old('duration_type', $pageData['duration_type'] ?? '24_7') == '24_7' ? 'checked' : '' }} />
                                            <span class="text-color-2D3648">24/7</span>
                                          </label>
                                          <label class="custom-radio ms-3">
                                            <input type="radio" name="duration_type" value="range" {{ old('duration_type', $pageData['duration_type'] ?? '') == 'range' ? 'checked' : '' }}/>
                                            <span class="text-color-2D3648">Time Range</span>
                                          </label>
                                        </div>
                                    </div>
                                </div>
                              </div>
                            </div>
                          </div>

                            <div class="col-md-4" id="timeRangeFields" style="{{ old('duration_type', $pageData['duration_type'] ?? '') == 'range' ? 'display: block;' : 'display: none;'}}">
                              <div class="row">
                                <div class="col-md-6">
                                  <div class="form-group">
                                      <label for="range_start" class="control-label">Start Time</label>
                                      <div class="col-field-wrapper">
                                          <select name="range_start" class="form-control" id="range_start">
                                              <option value="">Select Start Time</option>
                                              @for($hour = 0; $hour <= 23; $hour++)
                                                  @for($minute = 0; $minute <= 30; $minute += 30)
                                                      @php
                                                          $time = sprintf('%02d:%02d', $hour, $minute);
                                                          $selected = old('range_start', isset($pageData['range_start']) && $pageData['range_start'] ? $pageData['range_start']->format('H:i') : '') == $time ? 'selected' : '';
                                                      @endphp
                                                      <option value="{{ $time }}" {{ $selected }}>{{ $time }}</option>
                                                  @endfor
                                              @endfor
                                          </select>
                                          @if ($errors->has('range_start'))
                                          <span class="help-block">{{ $errors->first('range_start') }}</span>
                                          @endif
                                      </div>
                                  </div>
                                </div>
                                <div class="col-md-6">
                                  <div class="form-group">
                                      <label for="range_end" class="control-label">End Time</label>
                                      <div class="col-field-wrapper">
                                          <select name="range_end" class="form-control" id="range_end">
                                              <option value="">Select End Time</option>
                                              @for($hour = 0; $hour <= 23; $hour++)
                                                  @for($minute = 0; $minute <= 30; $minute += 30)
                                                      @php
                                                          $time = sprintf('%02d:%02d', $hour, $minute);
                                                          $selected = old('range_end', isset($pageData['range_end']) && $pageData['range_end'] ? $pageData['range_end']->format('H:i') : '') == $time ? 'selected' : '';
                                                      @endphp
                                                      <option value="{{ $time }}" {{ $selected }}>{{ $time }}</option>
                                                  @endfor
                                              @endfor
                                          </select>
                                          @if ($errors->has('range_end'))
                                          <span class="help-block">{{ $errors->first('range_end') }}</span>
                                          @endif
                                      </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          
                          @if(isset($pageData) && $pageData)
                          <div class="col-md-12">
                            <div class="row">
                              <div class="col-xl-4 col-md-12 col-lg-7">
                                <!-- Status -->
                                <div class="form-group">
                                    <label for="status" class="control-label col-md-5 fw-semibold text-color-2D3648">Status</label>
                                    <div class="col-field-wrapper col-md-7">
                                        <div class="d-flex justify-content-xl-end">
                                          <label class="custom-radio">
                                            <input type="radio" name="status" value="1" {{ old('status', $pageData['status'] ?? 1) == 1 ? 'checked' : '' }} />
                                            <span class="text-color-2D3648">Active</span>
                                          </label>
                                          <label class="custom-radio ms-3">
                                            <input type="radio" name="status" value="0" {{ old('status', $pageData['status'] ?? 1) == 0 ? 'checked' : '' }}/>
                                            <span class="text-color-2D3648">Inactive</span>
                                          </label>
                                        </div>
                                        @if ($errors->has('status'))
                                        <span class="help-block">{{ $errors->first('status') }}</span>
                                        @endif
                                    </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          @endif
                         
                        </div>
                      </div>
                      <!-- /.box-body -->
                      <div class="box-footer px-0">    
                          <div class="col-sm-12 text-end">
                              <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">Cancel</a>
                              <button type="submit" class="btn btn-primary" id="save-location">{{ $saveBtn }}</button>
                              
                          </div>
                          
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            
        </div>
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->

<!-- Location Selection Modal -->
<div class="modal fade" id="locationModal" tabindex="-1" aria-labelledby="locationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="locationModalLabel">Select Location</h5>
                <button type="button" class="close" id="closeModalBtn" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <!-- Search Box with Icon -->
                        <div class="form-group">
                            <label for="searchInput">Search Location:</label>
                            <div class="search-input-wrapper">
                                <input type="text" id="searchInput" class="form-control search-input" placeholder="Enter location to search...">
                                <span class="fa fa-search search-icon"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <!-- Map Container -->
                        <div id="map" style="height: 500px; width: 100%; border: 1px solid #ddd;"></div>
                    </div>
                    <div class="col-md-4">
                        <!-- Location Details -->
                        <div class="location-details">
                            <h6>Selected Location Details:</h6>
                            <div class="form-group">
                                <strong>Address:</strong>
                                <p id="selectedAddress" class="form-control-static">No location selected</p>
                            </div>
                            <div class="form-group">
                                <strong>Latitude:</strong>
                                <p id="selectedLatitude" class="form-control-static">-</p>
                            </div>
                            <div class="form-group">
                                <strong>Longitude:</strong>
                                <p id="selectedLongitude" class="form-control-static">-</p>
                            </div>
                            <div class="form-group">
                                <strong>Instructions:</strong>
                                <ul class="list-unstyled">
                                    <li><span class="fa fa-search"></span> Use the search box to find a location</li>
                                    <li><span class="fa fa-map-marker"></span> Click on the map to place a marker</li>
                                    <li><span class="fa fa-arrows"></span> Drag the marker to adjust position</li>
                                    <li><span class="fa fa-check"></span> Click "Select Location" to confirm</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="cancelModalBtn">Cancel</button>
                <button type="button" class="btn btn-primary" id="selectLocationBtn" disabled>Select Location</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
    $('.location-form').validate({
      debug: false,
      ignore : [],
      errorClass: 'help-block',
      errorElement: "span",
      rules: {
          name: {
              required: true,
              minlength: 2,
              maxlength: 255
          },
          address: {
              required: true,
              minlength: 5,
              maxlength: 500
          },
          latitude: {
              required: true,
              number: true,
              range: [-90, 90]
          },
          longitude: {
              required: true,
              number: true,
              range: [-180, 180]
          },
          type: {
              required: true
          },
          location_type: {
              required: true
          },
          duration_type: {
              required: true
          },
          range_start: {
              required: function() {
                  return $('input[name="duration_type"]:checked').val() === 'range';
              }
          },
          range_end: {
              required: function() {
                  return $('input[name="duration_type"]:checked').val() === 'range';
              },
              greaterThan: "#range_start"
          },
          google_map_link: {
              required: true,
              url: true
          },
          cargo_details: {
              maxlength: 255
          },
          access_requirements: {
              maxlength: 255
          },
          loading_offloading_instructions: {
              maxlength: 1000
          }
      },
      messages: {
          name: {
              required: "Please enter the location name.",
              minlength: "Location name must be at least 2 characters long.",
              maxlength: "Location name cannot exceed 255 characters."
          },
          address: {
              required: "Please enter the address.",
              minlength: "Address must be at least 5 characters long.",
              maxlength: "Address cannot exceed 500 characters."
          },
          latitude: {
              required: "Please enter the latitude.",
              number: "Latitude must be a number.",
              range: "Latitude must be between -90 and 90."
          },
          longitude: {
              required: "Please enter the longitude.",
              number: "Longitude must be a number.",
              range: "Longitude must be between -180 and 180."
          },
          type: {
              required: "Please select a site."
          },
          location_type: {
              required: "Please select a type."
          },
          duration_type: {
              required: "Please select a duration type."
          },
          range_start: {
              required: "Start time is required when duration type is range."
          },
          range_end: {
              required: "End time is required when duration type is range.",
              greaterThan: "End time must be after start time."
          },
          google_map_link: {
             required: "Please enter the google map link.",
              url: "Please enter a valid URL."
          },
          cargo_details: {
              maxlength: "Cargo details cannot exceed 255 characters."
          },
          access_requirements: {
              maxlength: "Access requirements cannot exceed 255 characters."
          },
          loading_offloading_instructions: {
              maxlength: "Loading/offloading instructions cannot exceed 1000 characters."
          }
      },
      highlight: function (element, errorClass, validClass) {
          $(element).parents('.col-field-wrapper').addClass('has-error');
      },
      unhighlight: function (element, errorClass, validClass) {
          $(element).parents('.col-field-wrapper').removeClass('has-error');
      },
      invalidHandler: function(form, validator) {
          if (!validator.numberOfInvalids())
              return;

          $('html, body').animate({
              scrollTop: ($(validator.errorList[0].element).offset().top - 100)
          }, 500);
      },
      submitHandler: function(form) {
          // Show loading state
          var submitBtn = $(form).find('button[type="submit"]');
          var originalText = submitBtn.text();
          submitBtn.prop('disabled', true).text('Saving...');

          // Submit form via AJAX
          $.ajax({
              url: $(form).attr('action'),
              type: $(form).attr('method'),
              data: $(form).serialize(),
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              success: function(response) {
                  toastr.success(response.message);
                  setTimeout(function() {
                      window.location.href = '{{ route("admin.locations.index") }}';
                  }, 1000);
              },
              error: function(xhr) {
                  submitBtn.prop('disabled', false).text(originalText);
                  
                      // Other errors
                      let errorMessage = 'An error occurred while saving the location';
                      if (xhr.responseJSON && xhr.responseJSON.message) {
                          errorMessage = xhr.responseJSON.message;
                      }
                      toastr.error(errorMessage);
              }
          });
          
          return false; // Prevent default form submission
      }
    });

    // Custom validation method for time comparison
    $.validator.addMethod("greaterThan", function(value, element, param) {
        var startTime = $(param).val();
        if (!startTime || !value) return true;
        
        var start = new Date("2000-01-01 " + startTime);
        var end = new Date("2000-01-01 " + value);
        
        return end > start;
    }, "End time must be after start time.");

    
});

$(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
    var table = $('#tbl-users').DataTable({
      info: true,
      searching: true,
      //ajax: '../server_side/scripts/server_processing.php',
      pageLength: 10,
      pagingType: "full_numbers",
      dom: 'frt<"bottom"ipl><"clear">'
    });
    $('#tbl-users_filter input[type="search"]').attr('placeholder', 'Search');

    $('#tbl-users_filter').append(`
    <div class="position-relative">
      <input type="text" class="form-control date-picker" id="calendar">
      <span class="position-absolute date-picker-icon">
        <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

      </span>
    </div>
  `);

  // Filter on change
  $('#roleFilter').on('change', function () {
    let selected = $(this).val();
    table.column(1).search(selected).draw(); // column index 1 = "Role"
  });
  $('#calendar').datepicker();
  
  // Handle duration type radio buttons
  $('input[name="duration_type"]').on('change', function() {
    if ($(this).val() === 'range') {
      $('#timeRangeFields').show();
    } else {
      $('#timeRangeFields').hide();
    }
  });
});

// Google Maps functionality
let map;
let marker;
let geocoder;
let searchBox;
let selectedLocation = null;

// Global callback function for Google Maps API
window.initializeGoogleMaps = function() {
    console.log('Google Maps API loaded successfully');
};

// Initialize map when modal is shown
$('#locationModal').on('shown.bs.modal', function () {
    if (typeof google !== 'undefined' && google.maps) {
        initializeMap();
        initializeAutocomplete();
    } else {
        console.error('Google Maps API not loaded');
        toastr.error('Google Maps API not loaded. Please refresh the page.');
    }
});

// Initialize map
function initializeMap() {
    // Default center (you can change this to your preferred default location)
    const defaultCenter = { lat: 28.6139, lng: 77.2090 }; // Delhi, India
    
    // Initialize map with minimal controls
    map = new google.maps.Map(document.getElementById('map'), {
        center: defaultCenter,
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true, // Disable all default UI controls
        zoomControl: true, // Keep only zoom control
        mapTypeControl: false, // Remove map type control
        scaleControl: false, // Remove scale control
        streetViewControl: false, // Remove street view control
        rotateControl: false, // Remove rotate control
        fullscreenControl: false, // Remove fullscreen control
        panControl: false // Remove pan control (left/right/top/bottom)
    });

    // Initialize geocoder
    geocoder = new google.maps.Geocoder();

    // Add current location control to map
    addCurrentLocationControl();

    // Add click listener to map
    map.addListener('click', function(event) {
        placeMarker(event.latLng);
    });

    // If there are existing coordinates, show them
    const existingLat = $('#latitude').val();
    const existingLng = $('#longitude').val();
    
    if (existingLat && existingLng) {
        const existingLocation = { lat: parseFloat(existingLat), lng: parseFloat(existingLng) };
        placeMarker(existingLocation);
        
        // Get address for existing coordinates
        geocoder.geocode({ location: existingLocation }, function(results, status) {
            if (status === 'OK' && results[0]) {
                updateLocationDetails(existingLocation, results[0].formatted_address);
            }
        });
    }
}

// Initialize Autocomplete Functionality
function initializeAutocomplete() {
    try {
        const input = document.getElementById('searchInput');
        
        if (!input) {
            console.error('Search input not found');
            return;
        }

        // Check if Google Maps Places API is loaded
        if (typeof google.maps.places === 'undefined') {
            console.error('Google Maps Places API not loaded');
            toastr.error('Places API not available. Please check your API key configuration.');
            return;
        }

        // Initialize autocomplete with proper configuration
        const autocomplete = new google.maps.places.Autocomplete(input, {
            types: ['establishment', 'geocode'],
            // Removed country restriction to allow global search
            fields: ['place_id', 'geometry', 'name', 'formatted_address']
        });

        // Add listener for place selection
        autocomplete.addListener('place_changed', function() {
            const place = autocomplete.getPlace();
            
            if (!place.geometry || !place.geometry.location) {
                console.log("No details available for input: '" + place.name + "'");
                toastr.error('No details available for the selected place');
                return;
            }

            // Clear existing marker
            if (marker) {
                marker.setMap(null);
            }

            // Create new marker
            marker = new google.maps.Marker({
                map: map,
                title: place.name,
                position: place.geometry.location,
                draggable: true,
                animation: google.maps.Animation.DROP
            });

            // Add drag listener to marker
            marker.addListener('dragend', function() {
                const newLocation = marker.getPosition();
                geocoder.geocode({ location: newLocation }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        updateLocationDetails(newLocation, results[0].formatted_address);
                    }
                });
            });

            // Add click listener to marker
            marker.addListener('click', function() {
                const markerLocation = marker.getPosition();
                geocoder.geocode({ location: markerLocation }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        updateLocationDetails(markerLocation, results[0].formatted_address);
                    }
                });
            });

            // Update location details
            updateLocationDetails(place.geometry.location, place.formatted_address, place.name);

            // Center map on the place
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(15);
            }

        });

        // Add click handler for search icon
        $('.search-icon').on('click', function() {
            performManualSearch();
        });

        
    } catch (error) {
        console.error('Error initializing autocomplete:', error);
        toastr.error('Error initializing search functionality');
    }
}

// Manual search function for icon click
function performManualSearch() {
    const searchQuery = $('#searchInput').val().trim();
    
    if (!searchQuery) {
        toastr.warning('Please enter a location to search');
        return;
    }
    
    // Use geocoder to search for the location
    geocoder.geocode({ address: searchQuery }, function(results, status) {
        if (status === 'OK' && results[0]) {
            const location = results[0].geometry.location;
            
            // Clear existing marker
            if (marker) {
                marker.setMap(null);
            }
            
            // Create new marker
            marker = new google.maps.Marker({
                map: map,
                title: results[0].formatted_address,
                position: location,
                draggable: true,
                animation: google.maps.Animation.DROP
            });
            
            // Add drag listener to marker
            marker.addListener('dragend', function() {
                const newLocation = marker.getPosition();
                geocoder.geocode({ location: newLocation }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        updateLocationDetails(newLocation, results[0].formatted_address);
                    }
                });
            });

            // Add click listener to marker
            marker.addListener('click', function() {
                const markerLocation = marker.getPosition();
                geocoder.geocode({ location: markerLocation }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        updateLocationDetails(markerLocation, results[0].formatted_address);
                    }
                });
            });
            
            // Update location details
            updateLocationDetails(location, results[0].formatted_address);
            
            // Center map on the location
            map.setCenter(location);
            map.setZoom(15);
        } else {
            toastr.error('Location not found. Please try a different search term.');
        }
    });
}

// Place marker at specified location
function placeMarker(location) {
    // Remove existing marker
    if (marker) {
        marker.setMap(null);
    }

    // Create new marker with animation
    marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true,
        title: 'Selected Location',
        animation: google.maps.Animation.DROP
    });

    // Add drag listener
    marker.addListener('dragend', function() {
        const newLocation = marker.getPosition();
        geocoder.geocode({ location: newLocation }, function(results, status) {
            if (status === 'OK' && results[0]) {
                updateLocationDetails(newLocation, results[0].formatted_address);
            }
        });
    });

    // Add click listener to marker
    marker.addListener('click', function() {
        const markerLocation = marker.getPosition();
        geocoder.geocode({ location: markerLocation }, function(results, status) {
            if (status === 'OK' && results[0]) {
                updateLocationDetails(markerLocation, results[0].formatted_address);
            }
        });
    });

    // Center map on marker with smooth animation
    map.panTo(location);
    map.setZoom(15);

    // Update location details
    geocoder.geocode({ location: location }, function(results, status) {
        if (status === 'OK' && results[0]) {
            updateLocationDetails(location, results[0].formatted_address);
        } else {
            // If geocoding fails, still update with coordinates
            updateLocationDetails(location, 'Address not available');
        }
    });
}

// Update location details display
function updateLocationDetails(location, address, placeName) {
    // Handle both Google Maps LatLng objects and plain JavaScript objects
    let lat, lng;
    
    if (typeof location.lat === 'function') {
        // Google Maps LatLng object
        lat = location.lat();
        lng = location.lng();
    } else {
        // Plain JavaScript object
        lat = location.lat;
        lng = location.lng;
    }
    
    const mapsUrl = 'https://www.google.com/maps/search/?api=1&query=' + lat + ',' + lng;
    const nameFromAddress = address ? String(address).split(',')[0].trim() : '';
    const resolvedName = placeName && placeName.trim ? placeName.trim() : nameFromAddress;

    selectedLocation = {
        lat: lat,
        lng: lng,
        address: address,
        mapsUrl: mapsUrl,
        name: resolvedName
    };

    $('#selectedLatitude').text(lat.toFixed(6));
    $('#selectedLongitude').text(lng.toFixed(6));
    $('#selectedAddress').text(address || 'Address not available');
    
    // Enable select button
    $('#selectLocationBtn').prop('disabled', false);
}

// Handle Get Location button click
$('#get-location-btn').on('click', function() {
    $('#locationModal').modal('show');
});

// Add current location control to map
function addCurrentLocationControl() {
    const currentLocationControl = document.createElement('div');
    currentLocationControl.className = 'current-location-control';
    currentLocationControl.innerHTML = `
        <div class="current-location-icon">
            <div class="direction-lines">
                <div class="left-line"></div>
                <div class="right-line"></div>
            </div>
        </div>
    `;
    currentLocationControl.title = 'Use current location';
    
    // Add click event listener
    currentLocationControl.addEventListener('click', function() {
        getCurrentLocation(currentLocationControl);
    });
    
    // Add control to map at bottom right
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(currentLocationControl);
}

// Get current location function
function getCurrentLocation(controlElement) {
    const originalHTML = controlElement.innerHTML;
    
    // Show loading state
    controlElement.classList.add('disabled');
    controlElement.innerHTML = '<i class="fa fa-spinner spinner"></i>';
    
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function(position) {
                const currentLocation = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                
                // Place marker at current location
                placeMarker(currentLocation);
                
                // Get address for current location
                geocoder.geocode({ location: currentLocation }, function(results, status) {
                    if (status === 'OK' && results[0]) {
                        updateLocationDetails(currentLocation, results[0].formatted_address);
                    }
                });
                
                // Reset control
                controlElement.classList.remove('disabled');
                controlElement.innerHTML = originalHTML;
            },
            function(error) {
                // Reset control
                controlElement.classList.remove('disabled');
                controlElement.innerHTML = originalHTML;
                
                let errorMessage = 'Unable to get your current location.';
                switch(error.code) {
                    case error.PERMISSION_DENIED:
                        errorMessage = 'Location access denied by user.';
                        break;
                    case error.POSITION_UNAVAILABLE:
                        errorMessage = 'Location information is unavailable.';
                        break;
                    case error.TIMEOUT:
                        errorMessage = 'Location request timed out.';
                        break;
                }
                toastr.error(errorMessage);
            },
            {
                enableHighAccuracy: true,
                timeout: 10000,
                maximumAge: 60000
            }
        );
    } else {
        // Reset control
        controlElement.classList.remove('disabled');
        controlElement.innerHTML = originalHTML;
        toastr.error('Geolocation is not supported by this browser.');
    }
}

// Handle Select Location button click
$('#selectLocationBtn').on('click', function() {
    if (selectedLocation) {
        // Update form fields
        $('#latitude').val(selectedLocation.lat);
        $('#longitude').val(selectedLocation.lng);
        if (selectedLocation.address && selectedLocation.address !== 'Address not available') {
            $('#address').val(selectedLocation.address).trigger('change');
        }
        if (selectedLocation.mapsUrl) {
            $('#google_map_link').val(selectedLocation.mapsUrl).trigger('change');
        }
        if (selectedLocation.name && selectedLocation.name !== 'Address not available') {
            $('#name').val(selectedLocation.name).trigger('change');
        }
        
        // Close modal
        $('#locationModal').modal('hide');
        
        // Show success message
        toastr.success('Location selected successfully!');
    }
});

// Handle Close button (X) click
$('#closeModalBtn').on('click', function() {
    $('#locationModal').modal('hide');
});

// Handle Cancel button click
$('#cancelModalBtn').on('click', function() {
    $('#locationModal').modal('hide');
});



// Clear location when modal is hidden
$('#locationModal').on('hidden.bs.modal', function () {
    selectedLocation = null;
    $('#selectLocationBtn').prop('disabled', true);
    $('#selectedLatitude').text('-');
    $('#selectedLongitude').text('-');
    $('#selectedAddress').text('No location selected');
    
    // Clear search input
    $('#searchInput').val('');
});
</script>
@endsection