@extends('layouts.app')

@section('title', 'Restaurant Tables')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
      <li>
        <a href="{{ route('dashboard') }}" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-700">
          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          Home
        </a>
      </li>
      <li>
        <div class="flex items-center">
          <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          <span class="ml-1 text-sm font-medium text-slate-700">Tables</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div x-data="tablesManager()">
  <!-- Header Section -->
  <div class="mb-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold text-slate-900">Restaurant Tables</h1>
        <p class="text-slate-600 mt-1">Manage dining tables and their status</p>
      </div>
      <button
        @click="showModal = true; editingId = null; form = { number: '', capacity: 2, location: '' }"
        class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium"
      >
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        Add Table
      </button>
    </div>
  </div>

  <!-- Status Summary -->
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="p-4 bg-green-50 rounded-lg border border-green-200">
      <p class="text-sm text-green-700">Available</p>
      <p class="text-2xl font-bold text-green-900" x-text="tables.filter(t => t.status === 'available').length"></p>
    </div>
    <div class="p-4 bg-blue-50 rounded-lg border border-blue-200">
      <p class="text-sm text-blue-700">Occupied</p>
      <p class="text-2xl font-bold text-blue-900" x-text="tables.filter(t => t.status === 'occupied').length"></p>
    </div>
    <div class="p-4 bg-amber-50 rounded-lg border border-amber-200">
      <p class="text-sm text-amber-700">Reserved</p>
      <p class="text-2xl font-bold text-amber-900" x-text="tables.filter(t => t.status === 'reserved').length"></p>
    </div>
    <div class="p-4 bg-slate-50 rounded-lg border border-slate-200">
      <p class="text-sm text-slate-700">Total</p>
      <p class="text-2xl font-bold text-slate-900" x-text="tables.length"></p>
    </div>
  </div>

  <!-- Tables Grid -->
  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
    <template x-for="table in tables" :key="table.id">
      <div
        :class="{
          'border-green-400 bg-green-50': table.status === 'available',
          'border-blue-400 bg-blue-50': table.status === 'occupied',
          'border-amber-400 bg-amber-50': table.status === 'reserved',
          'border-slate-400 bg-slate-50': table.status === 'unavailable'
        }"
        class="border-2 rounded-lg p-4 text-center cursor-pointer hover:shadow-lg transition-all duration-200"
        @click="editTable(table)"
      >
        <div class="text-3xl font-bold mb-2"
          :class="{
            'text-green-700': table.status === 'available',
            'text-blue-700': table.status === 'occupied',
            'text-amber-700': table.status === 'reserved',
            'text-slate-700': table.status === 'unavailable'
          }"
          x-text="`T${table.number}`"
        ></div>

        <p class="text-xs text-slate-600 mb-2" x-text="`Seats: ${table.capacity}`"></p>

        <span
          :class="{
            'bg-green-200 text-green-900': table.status === 'available',
            'bg-blue-200 text-blue-900': table.status === 'occupied',
            'bg-amber-200 text-amber-900': table.status === 'reserved',
            'bg-slate-200 text-slate-900': table.status === 'unavailable'
          }"
          class="inline-block px-2 py-1 rounded text-xs font-medium capitalize"
          x-text="table.status"
        ></span>

        <div class="mt-3 pt-3 border-t text-xs space-y-1">
          <button
            @click.stop="editTable(table)"
            class="block w-full px-2 py-1 bg-white rounded hover:bg-slate-100 transition-colors duration-200 font-medium"
          >
            Edit
          </button>
        </div>
      </div>
    </template>
  </div>

  <!-- Tables Table View -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="bg-slate-50 border-b border-slate-200">
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Table #</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Capacity</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Location</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Current Order</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <template x-for="table in tables" :key="table.id">
            <tr class="hover:bg-slate-50 transition-colors duration-200">
              <td class="px-6 py-4 text-sm font-medium text-slate-900" x-text="`Table ${table.number}`"></td>
              <td class="px-6 py-4 text-sm text-slate-600" x-text="table.capacity"></td>
              <td class="px-6 py-4 text-sm text-slate-600" x-text="table.location"></td>
              <td class="px-6 py-4 text-sm">
                <span
                  :class="{
                    'bg-green-100 text-green-800': table.status === 'available',
                    'bg-blue-100 text-blue-800': table.status === 'occupied',
                    'bg-amber-100 text-amber-800': table.status === 'reserved',
                    'bg-slate-100 text-slate-800': table.status === 'unavailable'
                  }"
                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium capitalize"
                  x-text="table.status"
                ></span>
              </td>
              <td class="px-6 py-4 text-sm text-slate-600" x-text="table.current_order || '-'"></td>
              <td class="px-6 py-4 text-sm space-x-2">
                <button
                  @click="editTable(table)"
                  class="text-blue-600 hover:text-blue-700 font-medium"
                >
                  Edit
                </button>
                <button
                  @click="deleteTable(table.id)"
                  class="text-red-600 hover:text-red-700 font-medium"
                >
                  Delete
                </button>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Edit Modal -->
  <div x-show="showModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
    <div @click.away="showModal = false" class="bg-white rounded-lg shadow-lg max-w-md w-full p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4" x-text="editingId ? 'Edit Table' : 'Add Table'"></h2>

      <form @submit.prevent="saveTable()" class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Table Number <span class="text-red-500">*</span></label>
          <input
            type="number"
            x-model.number="form.number"
            placeholder="e.g., 5"
            min="1"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            required
          >
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Capacity <span class="text-red-500">*</span></label>
          <select
            x-model.number="form.capacity"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            required
          >
            <option value="2">2 Seats</option>
            <option value="4">4 Seats</option>
            <option value="6">6 Seats</option>
            <option value="8">8 Seats</option>
            <option value="10">10 Seats</option>
          </select>
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700 mb-2">Location</label>
          <input
            type="text"
            x-model="form.location"
            placeholder="e.g., Near Window"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          >
        </div>

        <div class="flex gap-3 justify-end pt-4 border-t border-slate-200">
          <button
            type="button"
            @click="showModal = false"
            class="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 font-medium"
          >
            Cancel
          </button>
          <button
            type="submit"
            class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium"
          >
            Save
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  function tablesManager() {
    return {
      showModal: false,
      editingId: null,
      form: {
        number: '',
        capacity: 2,
        location: ''
      },
      tables: [
        { id: 1, number: 1, capacity: 2, location: 'Near Window', status: 'available', current_order: null },
        { id: 2, number: 2, capacity: 4, location: 'Main Dining', status: 'occupied', current_order: 'ORD-001' },
        { id: 3, number: 3, capacity: 4, location: 'Main Dining', status: 'available', current_order: null },
        { id: 4, number: 4, capacity: 6, location: 'Private Area', status: 'occupied', current_order: 'ORD-002' },
        { id: 5, number: 5, capacity: 2, location: 'Bar Side', status: 'available', current_order: null },
        { id: 6, number: 6, capacity: 8, location: 'Private Area', status: 'reserved', current_order: null },
        { id: 7, number: 7, capacity: 4, location: 'Main Dining', status: 'available', current_order: null },
        { id: 8, number: 8, capacity: 6, location: 'Main Dining', status: 'occupied', current_order: 'ORD-003' },
        { id: 9, number: 9, capacity: 2, location: 'Patio', status: 'available', current_order: null },
        { id: 10, number: 10, capacity: 4, location: 'Patio', status: 'available', current_order: null }
      ],

      editTable(table) {
        this.editingId = table.id;
        this.form = { number: table.number, capacity: table.capacity, location: table.location };
        this.showModal = true;
      },

      saveTable() {
        if (!this.form.number || !this.form.capacity) {
          alert('Please fill in all required fields');
          return;
        }

        if (this.editingId) {
          const index = this.tables.findIndex(t => t.id === this.editingId);
          if (index !== -1) {
            this.tables[index] = {
              ...this.tables[index],
              number: this.form.number,
              capacity: this.form.capacity,
              location: this.form.location
            };
          }
        } else {
          this.tables.push({
            id: Math.max(...this.tables.map(t => t.id), 0) + 1,
            number: this.form.number,
            capacity: this.form.capacity,
            location: this.form.location,
            status: 'available',
            current_order: null
          });
        }

        this.showModal = false;
      },

      deleteTable(id) {
        if (confirm('Are you sure you want to delete this table?')) {
          this.tables = this.tables.filter(t => t.id !== id);
        }
      }
    };
  }
</script>
@endsection