@extends('asset.partials.app')

@section('content')
<div class="p-6">
  <h1 class="text-2xl font-bold mb-6 text-slate-700">Employee Departments</h1>

  {{-- Flash message --}}
  @if(session('success'))
    <div class="mb-4 bg-green-100 border-l-4 border-green-500 text-green-700 p-3 rounded">
      {{ session('success') }}
    </div>
  @endif

  {{-- Add Department Form --}}
  <form method="POST" action="{{ route('asset.empdeps.store') }}" 
        class="mb-6 bg-white shadow p-4 rounded-xl flex flex-col md:flex-row gap-3 items-center">
    @csrf
    <input type="text" name="name" placeholder="Department Name"
           class="border rounded-lg px-3 py-2 w-full md:w-1/3 focus:ring-2 focus:ring-sky-500" required>
    <input type="text" name="notes" placeholder="Notes (optional)"
           class="border rounded-lg px-3 py-2 w-full md:w-1/3 focus:ring-2 focus:ring-sky-500">
    <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">
      + Add
    </button>
  </form>

  {{-- Table --}}
  <div 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">Department</th>
          <th class="px-4 py-3 text-left">Status</th>
          <th class="px-4 py-3 text-left">Notes</th>
          <th class="px-4 py-3 text-right">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($empDeps as $index => $dep)
          <tr class="border-b hover:bg-slate-50">
            <td class="px-4 py-3">{{ $index + 1 }}</td>
            <td class="px-4 py-3 font-medium">{{ $dep->name }}</td>
            <td class="px-4 py-3">
              @if($dep->is_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">{{ $dep->notes }}</td>
            <td class="px-4 py-3 text-right space-x-2">
              <a href="{{ route('asset.empdeps.toggle', $dep->id) }}"
                 class="text-sky-600 hover:underline">Toggle</a>
              <form action="{{ route('asset.empdeps.destroy', $dep->id) }}" method="POST" class="inline">
                @csrf @method('DELETE')
                <button type="submit" onclick="return confirm('Delete this department?')"
                        class="text-red-600 hover:underline">Delete</button>
              </form>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="5" class="text-center py-4 text-slate-500">No employee departments yet.</td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection
