@extends('layouts.app')

@section('title', 'Shift Log')
@section('nav_shifts', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Shift Log')
@section('page_subtitle', 'History of all staff shifts')

@section('content')

@if(session('success'))
<div class="mb-5 px-4 py-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl text-sm text-teal-700 flex items-center gap-2">
    <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
    </svg>
    {{ session('success') }}
</div>
@endif

{{-- Currently open shifts --}}
@if($openShifts->isNotEmpty())
<div class="mb-5 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl p-4">
    <p class="text-[10px] font-semibold text-teal-600 uppercase tracking-wider mb-2.5">Currently On Shift</p>
    <div class="flex flex-wrap gap-2">
        @foreach($openShifts as $open)
        <a href="{{ route('shifts.close', $open->id) }}"
           class="flex items-center gap-2 px-3 py-1.5 bg-white border-[0.5px] border-teal-300 rounded-lg hover:bg-teal-50/50 transition-colors">
            <span class="w-2 h-2 rounded-full bg-teal-500 animate-pulse flex-shrink-0"></span>
            <span class="text-teal-800 text-xs font-semibold">{{ $open->user->name }}</span>
            <span class="text-teal-500 text-[10px]">{{ $open->typeLabel() }} · since {{ $open->started_at->format('g:i A') }}</span>
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- Shift history table --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <p class="text-gray-500 text-xs font-semibold uppercase tracking-wider">{{ $shifts->total() }} Shifts</p>
        @if($openShifts->isEmpty())
        <a href="{{ route('shifts.start') }}"
           class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-teal-600 hover:bg-teal-700 text-white rounded-lg transition-colors">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Start Shift
        </a>
        @else
        <span title="Close the active shift first" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-gray-100 text-gray-400 rounded-lg cursor-not-allowed select-none">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Start Shift
        </span>
        @endif
    </div>

    @if($shifts->isEmpty())
    <p class="px-5 py-10 text-center text-gray-300 text-sm">No shift records yet.</p>
    @else
    <table class="w-full text-sm">
        <thead>
            <tr class="border-b border-gray-100 bg-gray-50/30">
                <th class="px-5 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Staff</th>
                <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Shift</th>
                <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Started</th>
                <th class="px-4 py-2.5 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Ended</th>
                <th class="px-4 py-2.5 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Duration</th>
                <th class="px-4 py-2.5 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Status</th>
                <th class="px-5 py-2.5"></th>
            </tr>
        </thead>
        <tbody>
            @foreach($shifts as $shift)
            <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }} hover:bg-gray-50/40 transition-colors">
                <td class="px-5 py-3">
                    <div class="flex items-center gap-2.5">
                        <div class="w-7 h-7 rounded-full bg-teal-100 flex items-center justify-center text-teal-700 text-[10px] font-bold flex-shrink-0">
                            {{ $shift->user->initials() }}
                        </div>
                        <div>
                            <p class="text-gray-700 font-medium text-xs">{{ $shift->user->name }}</p>
                            <p class="text-gray-400 text-[10px]">{{ $shift->user->role?->name ?? '' }}</p>
                        </div>
                    </div>
                </td>
                <td class="px-4 py-3">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-semibold bg-gray-50 text-gray-600 border-[0.5px] border-gray-200">
                        {{ $shift->typeLabel() }}
                    </span>
                </td>
                <td class="px-4 py-3">
                    <p class="text-gray-700 text-xs">{{ $shift->started_at->format('M j, Y') }}</p>
                    <p class="text-gray-400 text-[10px]">{{ $shift->started_at->format('g:i A') }}</p>
                </td>
                <td class="px-4 py-3">
                    @if($shift->ended_at)
                    <p class="text-gray-700 text-xs">{{ $shift->ended_at->format('M j, Y') }}</p>
                    <p class="text-gray-400 text-[10px]">{{ $shift->ended_at->format('g:i A') }}</p>
                    @else
                    <span class="text-teal-500 text-xs font-medium">Active now</span>
                    @endif
                </td>
                <td class="px-4 py-3 text-center">
                    <span class="text-gray-600 text-xs font-semibold">{{ $shift->duration() }}</span>
                </td>
                <td class="px-4 py-3 text-center">
                    @if($shift->status === 'open')
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-teal-50 text-teal-700 border-[0.5px] border-teal-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-teal-500 animate-pulse"></span>
                        Open
                    </span>
                    @else
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-gray-50 text-gray-400 border-[0.5px] border-gray-200">
                        Closed
                    </span>
                    @endif
                </td>
                <td class="px-5 py-3 text-right">
                    @if($shift->status === 'open')
                    <a href="{{ route('shifts.close', $shift->id) }}"
                       class="text-xs font-semibold text-red-500 hover:text-red-700 transition-colors">
                        Close
                    </a>
                    @else
                    <a href="{{ route('shifts.report', $shift->id) }}"
                       class="text-xs font-semibold text-teal-600 hover:text-teal-800 transition-colors">
                        Report
                    </a>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    @if($shifts->hasPages())
    <div class="px-5 py-3 border-t border-gray-50 bg-gray-50/30">
        {{ $shifts->links() }}
    </div>
    @endif
    @endif
</div>

@endsection