@extends('asset.partials.app')

@section('content')
<div class="p-6 space-y-6">
  <h1 class="text-2xl font-bold text-slate-800">Employee Directory</h1>

  {{-- Flash Message --}}
  @if(session('success'))
    <div class="rounded-lg bg-green-50 border border-green-300 text-green-700 px-4 py-3 text-sm font-medium shadow-sm">
      {{ session('success') }}
    </div>
  @endif

  {{-- Search & Filter Bar --}}
  <form method="GET" action="{{ route('asset.employees.index') }}" class="flex flex-wrap gap-3 bg-white shadow p-4 rounded-xl items-center">
    <div class="flex items-center gap-2">
      <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name..."
             class="border border-slate-300 rounded-lg px-3 py-2 w-56 focus:ring-2 focus:ring-sky-500 focus:outline-none text-sm">
    </div>

    <div class="flex items-center gap-2">
      <select name="department" class="border border-slate-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-sky-500 text-sm">
        <option value="">All Departments</option>
        @foreach($departments as $d)
          <option value="{{ $d->id }}" {{ request('department')==$d->id ? 'selected' : '' }}>
            {{ $d->name }}
          </option>
        @endforeach
      </select>
    </div>

    <button type="submit"
      class="bg-gradient-to-r from-sky-500 to-blue-600 text-white px-5 py-2 rounded-lg text-sm hover:opacity-90">
      <i class="fas fa-filter mr-1"></i>Filter
    </button>

    <a href="{{ route('asset.employees.index') }}" 
       class="text-sm text-slate-500 hover:text-slate-700 px-2">Reset</a>
  </form>

  {{-- Add Employee --}}
  <form method="POST" action="{{ route('asset.employees.store') }}"
        class="bg-white shadow p-4 rounded-xl grid md:grid-cols-6 gap-3 items-center">
    @csrf
    <input type="text" name="name" placeholder="Name" required
           class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
    <input type="email" name="email" placeholder="Email"
           class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
    <input type="text" name="phone" placeholder="Phone"
           class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
    <input type="text" name="designation" placeholder="Designation"
           class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
    <select name="emp_dep_id"
            class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
      <option value="">Select Department</option>
      @foreach($departments as $d)
          <option value="{{ $d->id }}">{{ $d->name }}</option>
      @endforeach
    </select>
    <select name="status" class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
    </select>

    <button type="submit"
      class="bg-gradient-to-r from-sky-500 to-blue-600 text-white px-5 py-2 rounded-lg hover:opacity-90 font-medium col-span-full md:col-span-1">
      <i class="fas fa-plus mr-1"></i>Add
    </button>
  </form>

  {{-- Employees Table --}}
<div x-data="{ showModal:false, editData:{} }" class="bg-white shadow rounded-xl overflow-hidden">

  <table class="min-w-full text-sm text-slate-700">
    <thead class="bg-gradient-to-r from-slate-800 to-slate-700 text-white">
      <tr>
        <th class="px-4 py-3 text-left">#</th>
        <th class="px-4 py-3 text-left">Name</th>
        <th class="px-4 py-3 text-left">Email</th>
        <th class="px-4 py-3 text-left">Phone</th>
        <th class="px-4 py-3 text-left">Designation</th>
        <th class="px-4 py-3 text-left">Department</th>
        <th class="px-4 py-3 text-left">Status</th>
        <th class="px-4 py-3 text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      @forelse($employees as $i => $emp)
        <tr class="border-b hover:bg-slate-50 transition">
          <td class="px-4 py-3">{{ $employees->firstItem() + $i }}</td>
          <td class="px-4 py-3 font-medium">{{ $emp->name }}</td>
          <td class="px-4 py-3">{{ $emp->email }}</td>
          <td class="px-4 py-3">{{ $emp->phone }}</td>
          <td class="px-4 py-3">{{ $emp->designation }}</td>
          <td class="px-4 py-3">{{ $emp->department->name ?? '-' }}</td>
          <td class="px-4 py-3">
            @if($emp->status=='active')
              <span class="px-2 py-1 text-xs font-semibold rounded bg-green-100 text-green-700">Active</span>
            @else
              <span class="px-2 py-1 text-xs font-semibold rounded bg-red-100 text-red-700">Inactive</span>
            @endif
          </td>
          <td class="px-4 py-3 text-right space-x-2">
            <button type="button" 
                    class="text-indigo-600 hover:underline"
                    @click="fetch('/asset/employees/{{ $emp->id }}/edit')
                            .then(r => r.json())
                            .then(data => { editData=data; showModal=true; })">
              Edit
            </button>

            <a href="{{ route('asset.employees.toggle',$emp->id) }}" class="text-sky-600 hover:underline">Toggle</a>

            <form action="{{ route('asset.employees.destroy',$emp->id) }}" method="POST" class="inline">
              @csrf @method('DELETE')
              <button type="submit" onclick="return confirm('Delete this employee?')" 
                      class="text-red-600 hover:underline">Delete</button>
            </form>
          </td>
        </tr>
      @empty
        <tr><td colspan="8" class="text-center py-4 text-slate-500">No employees found.</td></tr>
      @endforelse
    </tbody>
  </table>

  {{-- Pagination --}}
  <div class="px-4 py-3 bg-slate-50 border-t border-slate-200">
    {{ $employees->links('pagination::tailwind') }}
  </div>

  {{-- Edit Modal --}}
  <div x-show="showModal" x-cloak 
       class="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 relative">
      <h2 class="text-lg font-semibold text-slate-800 mb-4">Edit Employee</h2>

      <form method="POST" :action="'/asset/employees/' + editData.employee?.id">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-2 gap-3">
          <input type="text" name="name" x-model="editData.employee.name" 
                 class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500" required>
          <input type="email" name="email" x-model="editData.employee.email" 
                 class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">

          <input type="text" name="phone" x-model="editData.employee.phone"
                 class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
          <input type="text" name="designation" x-model="editData.employee.designation"
                 class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">

          <select name="emp_dep_id"
                  class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
            <template x-for="d in editData.departments" :key="d.id">
              <option :value="d.id" x-text="d.name" 
                      :selected="editData.employee.emp_dep_id === d.id"></option>
            </template>
          </select>

          <select name="status" x-model="editData.employee.status"
                  class="border rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-sky-500">
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
          </select>
        </div>

        <div class="mt-5 flex justify-end gap-3">
          <button type="button" 
                  class="px-4 py-2 text-sm bg-slate-200 rounded-lg hover:bg-slate-300"
                  @click="showModal=false">Cancel</button>

          <button type="submit" 
                  class="px-5 py-2 bg-gradient-to-r from-sky-500 to-blue-600 text-white rounded-lg hover:opacity-90">
            Update
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

</div>
@endsection
