@extends('layouts.app')

@section('title', 'Employees')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <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>
      </li>
      <li>
        <span class="text-slate-700 font-medium">Employees</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-slate-900">Employees</h1>
      <p class="text-slate-600 mt-1">Manage your hotel staff and employees</p>
    </div>
    <a href="{{ route('employees.create') }}" class="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 flex items-center space-x-2">
      <svg class="w-5 h-5" 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>
      <span>Add Employee</span>
    </a>
  </div>

  <!-- Filters -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6" x-data="{ viewMode: 'grid' }">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Search</label>
        <input type="text" class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Search by name or email...">
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Department</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="">All Departments</option>
          <option value="front-desk">Front Desk</option>
          <option value="housekeeping">Housekeeping</option>
          <option value="it">IT</option>
          <option value="finance">Finance</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="">All Status</option>
          <option value="active">Active</option>
          <option value="inactive">Inactive</option>
          <option value="on-leave">On Leave</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">View</label>
        <div class="flex items-center space-x-2 mt-2">
          <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-primary-600 text-white' : 'bg-slate-200 text-slate-700'" class="p-2 rounded-lg transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h12a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6z"></path>
            </svg>
          </button>
          <button @click="viewMode = 'table'" :class="viewMode === 'table' ? 'bg-primary-600 text-white' : 'bg-slate-200 text-slate-700'" class="p-2 rounded-lg transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Grid View -->
  <div x-show="viewMode === 'grid'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @for ($i = 0; $i < 9; $i++)
      <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
        <img src="https://ui-avatars.com/api/?name=Employee+{{ $i + 1 }}&size=300&background=0369a1&color=fff" alt="Employee" class="w-full h-48 object-cover">
        <div class="p-4">
          <div class="flex items-start justify-between mb-3">
            <div>
              <h3 class="font-semibold text-slate-900">John Doe {{ $i + 1 }}</h3>
              <p class="text-sm text-slate-600">john.doe{{ $i + 1 }}@hotel.com</p>
            </div>
            <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
          </div>
          <div class="space-y-2 text-sm text-slate-600 mb-4">
            <p><strong>Department:</strong> Front Desk</p>
            <p><strong>Position:</strong> Receptionist</p>
            <p><strong>Phone:</strong> +1 (555) 123-4567</p>
          </div>
          <div class="flex space-x-2">
            <a href="{{ route('employees.show', $i + 1) }}" class="flex-1 px-3 py-2 text-center text-sm bg-primary-100 text-primary-600 rounded-lg hover:bg-primary-200 transition-colors duration-200">View</a>
            <a href="{{ route('employees.edit', $i + 1) }}" class="flex-1 px-3 py-2 text-center text-sm bg-slate-100 text-slate-600 rounded-lg hover:bg-slate-200 transition-colors duration-200">Edit</a>
          </div>
        </div>
      </div>
    @endfor
  </div>

  <!-- Table View -->
  <div x-show="viewMode === 'table'" class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-slate-50 border-b border-slate-200">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Name</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Department</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Position</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Email</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Status</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          @for ($i = 0; $i < 10; $i++)
            <tr class="hover:bg-slate-50 transition-colors duration-200">
              <td class="px-6 py-4 text-sm font-medium text-slate-900">John Doe {{ $i + 1 }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">Front Desk</td>
              <td class="px-6 py-4 text-sm text-slate-600">Receptionist</td>
              <td class="px-6 py-4 text-sm text-slate-600">john.doe{{ $i + 1 }}@hotel.com</td>
              <td class="px-6 py-4 text-sm">
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
              </td>
              <td class="px-6 py-4 text-sm flex space-x-2">
                <a href="{{ route('employees.show', $i + 1) }}" class="text-primary-600 hover:text-primary-700 font-medium">View</a>
                <a href="{{ route('employees.edit', $i + 1) }}" class="text-slate-600 hover:text-slate-700 font-medium">Edit</a>
              </td>
            </tr>
          @endfor
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="bg-white border-t border-slate-200 px-6 py-4 flex items-center justify-between">
      <p class="text-sm text-slate-600">Showing 1 to 10 of 100 results</p>
      <div class="flex space-x-2">
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">Previous</button>
        <button class="px-3 py-2 border border-primary-300 bg-primary-50 rounded-lg text-sm font-medium text-primary-600">1</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">2</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">3</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">Next</button>
      </div>
    </div>
  </div>
</div>
@endsection