@extends('admin.layout.app')

@section('title', 'Create Location')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">Create New Location</h5>
      <a href="{{ route('admin.location.index') }}" class="btn btn-sm btn-secondary">
        <i class="bx bx-arrow-back"></i> Back
      </a>
    </div>

    <div class="card-body">
            @if ($errors->any())
              <div class="alert alert-danger">
                  <ul>
                      @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                      @endforeach
                  </ul>
              </div>
          @endif
      <form method="POST" action="{{ route('admin.location.store') }}">
        @csrf

        <div class="col-md-6">
          <label for="associated_id" class="form-label">Associated Client</label>
          <select name="associated_id" id="associated_id" class="form-select select2" required>
              <option value="">Select Client or Client Team</option>

              <optgroup label="Client Teams (Users)">
                  @foreach($clientTeams as $client)
                      <option value="{{ $client->id }}" data-type="user"
                          {{ old('associated_id') == $client->id && old('associated_type') == 'user' ? 'selected' : '' }}>
                          {{ $client->first_name }} {{ $client->last_name }} ({{ $client->company_name }})
                      </option>
                  @endforeach
              </optgroup>

              <optgroup label="End Clients">
                  @foreach($endClients as $endClient)
                      <option value="{{ $endClient->id }}" data-type="end_client"
                          {{ old('associated_id') == $endClient->id && old('associated_type') == 'end_client' ? 'selected' : '' }}>
                          {{ $endClient->company_name }} ({{ $endClient->first_name }} {{ $endClient->last_name }})
                      </option>
                  @endforeach
              </optgroup>
          </select>
          <input type="hidden" name="associated_type" id="associated_type" value="{{ old('associated_type') }}">
      </div>


        <div class="row mb-3">
          <div class="col-md-6">
            <label for="address_line" class="form-label">Address Line</label>
            <input type="text" name="address_line" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label for="city" class="form-label">City</label>
            <input type="text" name="city" class="form-control" required>
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-4">
            <label for="state" class="form-label">State</label>
            <input type="text" name="state" class="form-control">
          </div>
          <div class="col-md-4">
            <label for="postal_code" class="form-label">Postal Code</label>
            <input type="text" name="postal_code" class="form-control" required>
          </div>
          @include('admin.components.country-dropdown', ['name' => 'country', 'selected' => old('country')])
        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <label for="geo_location" class="form-label">Geo Location (Optional)</label>
            <input type="text" name="geo_location" class="form-control" placeholder="Latitude,Longitude">
          </div>
          <div class="col-md-6">
            <label for="location_code" class="form-label">Location Code (Optional)</label>
            <input type="text" name="location_code" class="form-control" placeholder="EU1234">
          </div>
        </div>  

        <div class="text-end">
          <button type="submit" class="btn btn-primary">Create Location</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  // $(document).ready(function () {
  document.addEventListener("DOMContentLoaded", function () {
    $('.select2').select2({
      placeholder: "Select an option",
      allowClear: true,
      width: '100%'
    });

    // Set associated_type hidden input on dropdown change
    $('#associated_id').on('change', function () {
      const selectedOption = $(this).find('option:selected');
      const type = selectedOption.data('type') || '';
      $('#associated_type').val(type);
    });

    // Trigger change on page load in case of old value (for validation error)
    $('#associated_id').trigger('change');
  });
</script>
@endpush