@extends('admin.layout.app')

@section('title', 'Edit 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">Edit 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.update', $location->id) }}">
        @csrf
        @method('PUT')

        <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="Users">
                @foreach($users as $user)
                    <option value="{{ $user->id }}" data-type="user"
                        {{ (int) old('associated_id', $location->user_id ?? 0) === $user->id ? 'selected' : '' }}>
                        {{ $user->first_name }} {{ $user->last_name }} ({{ $user->company_name }})
                    </option>
                @endforeach
            </optgroup>

            <optgroup label="End Clients">
                @foreach($endClients as $endClient)
                    <option value="{{ $endClient->id }}" data-type="end_client"
                        {{ (int) old('associated_id', $location->end_client_id ?? 0) === $endClient->id ? 'selected' : '' }}>
                        {{ $endClient->company_name }} ({{ $endClient->first_name }} {{ $endClient->last_name }})
                    </option>
                @endforeach
            </optgroup>
        </select>
        @php
            $selectedType = old('associated_type');

            if (!$selectedType) {
                if ($location->user_id) {
                    $selectedType = 'user';
                } elseif ($location->end_client_id) {
                    $selectedType = 'end_client';
                } else {
                    $selectedType = '';
                }
            }
        @endphp

        <input type="hidden" name="associated_type" id="associated_type" value="{{ $selectedType }}">
        </div>

        <div class="row mb-3 mt-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
              value="{{ old('address_line', $location->address_line) }}">
          </div>
          <div class="col-md-6">
            <label for="city" class="form-label">City</label>
            <input type="text" name="city" class="form-control" required
              value="{{ old('city', $location->city) }}">
          </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"
              value="{{ old('state', $location->state) }}">
          </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
              value="{{ old('postal_code', $location->postal_code) }}">
          </div>
          @include('admin.components.country-dropdown', ['name' => 'country', 'selected' => old('country', $location->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"
              value="{{ old('geo_location', $location->geo_location) }}">
          </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"
              value="{{ old('location_code', $location->location_code) }}">
          </div>
        </div>  

        <div class="text-end">
          <button type="submit" class="btn btn-primary">Update 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%'
    });

    $('#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