@extends('admin.layout.app')

@section('title', 'Locations')

@push('styles')
  <link href="/csstemplate/libs/downloaded/bootstrap.min.css" rel="stylesheet">
  <link href="/csstemplate/libs/downloaded/dataTables.bootstrap5.min.css" rel="stylesheet">
  <style> a{text-decoration: none !important; } </style>
@endpush

@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">Locations List</h5>
      <a href="{{ route('admin.location.create') }}" class="btn btn-sm btn-primary">
        <i class="bi bi-plus-circle me-1"></i> New Location
      </a>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table id="locationTable" class="table table-hover table-bordered table-striped text-nowrap">
          <thead class="table-light">
            <tr>
              <th>Actions</th>
              <th>User Type</th>
              <th>Name</th>
              <th>Address</th>
              <th>City</th>
              <th>State</th>
              <th>Postal Code</th>
              <th>Country</th>
              <th>Location Code</th>
              <th>Geo Location</th>
            </tr>
          </thead>
          <tbody>
            @foreach($locations as $index => $location)
              <tr style="cursor:pointer;">
                <td>
                  <div class="dropdown">
                    <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton{{ $location->id }}" data-bs-toggle="dropdown" aria-expanded="false">
                      Actions
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ $location->id }}">
                      <li>
                        <a class="dropdown-item" href="{{ route('admin.location.show', $location->id) }}">
                          <i class="bi bi-eye"></i> View
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="{{ route('admin.location.edit', $location->id) }}">
                          <i class="bi bi-pencil-square"></i> Edit
                        </a>
                      </li>
                    </ul>
                  </div>
                </td>
                <td>
                  @if($location->user)
                      {{ ucfirst(str_replace('_', ' ', $location->user->user_type)) }}
                  @elseif($location->endClient)
                      End Client
                  @else
                      <em>Unknown</em>
                  @endif
              </td>
                <td>
                    @if($location->user)
                        {{ $location->user->first_name }} {{ $location->user->last_name }}
                        @if($location->user->company_name)
                            ({{ $location->user->company_name }})
                        @endif
                    @elseif($location->endClient)
                        {{ $location->endClient->company_name }}
                        ({{ $location->endClient->first_name }} {{ $location->endClient->last_name }})
                    @else
                        <em>N/A</em>
                    @endif
                </td>

                <td>{{ $location->address_line }}</td>
                <td>{{ $location->city }}</td>
                <td>{{ $location->state }}</td>
                <td>{{ $location->postal_code }}</td>
                <td>{{ $location->country }}</td>
                <td>{{ $location->location_code }}</td>
                <td>{{ $location->geo_location }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
  <script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>

  <script>
    $(document).ready(function () {
      if ($.fn.DataTable.isDataTable('#locationTable')) {
        $('#locationTable').DataTable().destroy();
      }

      $('#locationTable').DataTable({
        responsive: true,
        ordering: true,
        searching: true,
        paging: true,
        pageLength: 25,
        fixedHeader: true,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search locations..."
        }
      });

      $('#locationTable tbody').on('click', 'tr', function () {
        const url = $(this).data('href');
        if (url) {
          window.location.href = url;
        }
      });
    });
  </script>
@endpush