@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4">

    <!-- Flash Messages -->
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif
    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <!-- Action Bar -->
    <div class="flex justify-between items-center mb-2 px-2">
        <h2 class="text-xl font-bold text-gray-800">Shift List</h2>
        <a href="{{ route('shifts.create') }}" class="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white px-4 py-1.5 rounded shadow text-sm font-semibold transition flex items-center">
            <i class="fa-solid fa-plus mr-1"></i> Add Shift
        </a>
    </div>

    <!-- Table Container -->
    <div class="bg-white shadow-sm border border-gray-200 overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-slate-50 text-slate-500 border-b border-slate-200 text-xs uppercase tracking-wider">
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold w-16 text-center">Sr No.</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Shift Name</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Shift Code</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">Start Time</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold">End Time</th>
                    <th class="px-4 py-2 border-b border-slate-200 font-semibold w-32 text-center">Action</th>
                </tr>
            </thead>
            <tbody class="text-gray-700 text-sm">
                @forelse($shifts as $index => $shift)
                    <tr class="hover:bg-gray-50 border-b border-gray-100">
                        <td class="px-4 py-2 border-r border-gray-100 text-center">{{ $index + 1 }}</td>
                        <td class="px-4 py-2 border-r border-gray-100 font-medium">{{ $shift->name }}</td>
                        <td class="px-4 py-2 border-r border-gray-100">{{ $shift->shift_code }}</td>
                        <td class="px-4 py-2 border-r border-gray-100">{{ $shift->start_time }}</td>
                        <td class="px-4 py-2 border-r border-gray-100">{{ $shift->end_time }}</td>
                        <td class="px-4 py-2 text-center flex items-center justify-center space-x-2">
                            <a href="{{ route('shifts.edit', $shift->id) }}" class="text-cyan-600 hover:text-cyan-700 bg-orange-50 p-1.5 rounded" title="Edit">
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                            <form action="{{ route('shifts.destroy', $shift->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to delete this shift?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-700 bg-red-50 p-1.5 rounded" title="Delete">
                                    <i class="fa-solid fa-trash-can"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-gray-500 font-medium bg-gray-50">
                            <div class="flex flex-col items-center justify-center">
                                <i class="fa-solid fa-clock text-4xl mb-2 text-gray-300"></i>
                                No Shifts found for this company.
                            </div>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

</div>
@endsection