@extends('layouts.nebulox', [
  'title' => 'Locations',
  'subtitle' => 'Add and manage locations'
])

@section('content')

<div class="nx-grid nx-grid-2">

  {{-- ADD --}}
  <div class="nx-card">
    <div class="nx-card-header">Add Location</div>
    <div class="nx-card-body">

      <form method="POST" action="{{ route('admin.locations.store') }}">
        @csrf

        <label class="nx-label">Location Name</label>
        <input class="nx-input"
               type="text"
               name="locationName"
               required
               placeholder="e.g. Regina Maria Ponderas">

        <button class="nx-btn nx-btn-primary nx-w-full nx-mt-12">
          Add Location
        </button>
      </form>

    </div>
  </div>

  {{-- LIST --}}
  <div class="nx-card">
    <div class="nx-card-header">Existing Locations</div>
    <div class="nx-card-body">

      <div class="nx-scroll">
        <table class="nx-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>Location</th>
              <th>Created</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            @forelse($locations as $l)
              <tr>
                <td>{{ $l->id }}</td>
                <td><strong>{{ $l->locationName }}</strong></td>
                <td>{{ $l->created_at }}</td>
                <td>
                  <form method="POST"
                        action="{{ route('admin.locations.destroy', $l->id) }}"
                        onsubmit="return confirm('Delete this location?');">
                    @csrf
                    @method('DELETE')
                    <button class="nx-btn nx-btn-danger">
                      Delete
                    </button>
                  </form>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="4" class="nx-muted">
                  No locations yet.
                </td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

    </div>
  </div>

</div>

@endsection