@extends('layouts.app')

@section('title', 'Start Shift')
@section('nav_shifts', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Start Your Shift')
@section('page_subtitle', 'Clock in to begin tracking your shift activity')

@section('content')

@if(session('error'))
<div class="mb-5 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">{{ session('error') }}</div>
@endif

<div class="max-w-xl mx-auto">

    {{-- ===== BLOCKED STATE — another shift is still open ===== --}}
    @if(isset($activeShift) && $activeShift)
    <div class="bg-white border-[0.5px] border-red-200 rounded-xl overflow-hidden">
        <div class="px-6 py-5 bg-red-50 border-b border-red-100 flex items-center gap-3">
            <div class="w-9 h-9 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                </svg>
            </div>
            <div>
                <p class="text-red-700 font-bold text-sm">Shift Already Active</p>
                <p class="text-red-500 text-xs mt-0.5">You cannot start a new shift until the current one is closed.</p>
            </div>
        </div>

        <div class="px-6 py-5">
            <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-3">Open Shift</p>
            <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-xl border-[0.5px] border-gray-200">
                <div class="w-10 h-10 rounded-full bg-teal-100 flex items-center justify-center text-teal-700 text-sm font-bold flex-shrink-0">
                    {{ $activeShift->user->initials() }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-gray-800 font-semibold text-sm">{{ $activeShift->user->name }}</p>
                    <p class="text-gray-400 text-xs">{{ $activeShift->user->role?->name ?? '' }}</p>
                    <p class="text-gray-500 text-xs mt-1">
                        {{ $activeShift->typeLabel() }} shift · started {{ $activeShift->started_at->format('g:i A') }}
                        <span class="text-gray-300 mx-1">·</span>
                        {{ $activeShift->started_at->diffForHumans() }}
                    </p>
                </div>
                <div class="flex items-center gap-1.5 flex-shrink-0">
                    <span class="w-2 h-2 rounded-full bg-teal-500 animate-pulse"></span>
                    <span class="text-teal-600 text-xs font-semibold">Active</span>
                </div>
            </div>

            <p class="text-gray-400 text-xs mt-4 leading-relaxed">
                Ask <span class="font-semibold text-gray-600">{{ $activeShift->user->name }}</span> to close their shift and submit the handover report. Once that shift is closed, you'll be able to clock in.
            </p>

            @can('shifts.manage')
            <div class="mt-4 pt-4 border-t border-gray-100">
                <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-2">Manager Override</p>
                <a href="{{ route('shifts.close', $activeShift->id) }}"
                   class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold text-amber-700 bg-amber-50 border-[0.5px] border-amber-200 rounded-lg hover:bg-amber-100 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Close {{ $activeShift->user->name }}'s Shift
                </a>
            </div>
            @endcan
        </div>
    </div>

    <div class="mt-4 text-center">
        <a href="{{ route('shifts.index') }}" class="text-xs text-gray-400 hover:text-gray-600 transition-colors">
            View shift history
        </a>
    </div>

    {{-- ===== NORMAL START FORM ===== --}}
    @else

    {{-- Handover notes from previous shift --}}
    @if($lastShift)
    <div class="mb-6 bg-amber-50 border-[0.5px] border-amber-200 rounded-xl p-5">
        <div class="flex items-start gap-3">
            <svg class="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
            </svg>
            <div>
                <p class="text-amber-700 font-semibold text-sm">Handover from {{ $lastShift->user->name }}</p>
                <p class="text-amber-600 text-xs mt-0.5">
                    {{ $lastShift->typeLabel() }} shift · ended {{ $lastShift->ended_at->diffForHumans() }}
                </p>
                <p class="text-amber-800 text-sm mt-2 leading-relaxed">{{ $lastShift->handover_notes }}</p>
            </div>
        </div>
    </div>
    @endif

    {{-- Start shift form --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-100">
            <p class="text-gray-700 font-semibold text-base">Clock In</p>
            <p class="text-gray-400 text-xs mt-0.5">{{ now()->format('l, F j, Y · g:i A') }}</p>
        </div>

        <form method="POST" action="{{ route('shifts.open') }}" class="px-6 py-5 space-y-5">
            @csrf

            {{-- Shift type --}}
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Shift Type</label>
                <div class="grid grid-cols-2 gap-2">
                    @foreach([
                        'morning'   => ['Morning', '6:00 AM – 2:00 PM', 'M-D'],
                        'afternoon' => ['Afternoon', '2:00 PM – 10:00 PM', 'A'],
                        'night'     => ['Night', '10:00 PM – 6:00 AM', 'N'],
                        'custom'    => ['Custom', 'Any hours', 'C'],
                    ] as $val => [$label, $hours, $abbr])
                    <label class="relative cursor-pointer">
                        <input type="radio" name="shift_type" value="{{ $val }}"
                               {{ old('shift_type', 'morning') === $val ? 'checked' : '' }}
                               class="peer sr-only">
                        <div class="flex items-center gap-3 px-4 py-3 rounded-xl border-[0.5px] border-gray-200 bg-white
                                    peer-checked:border-teal-400 peer-checked:bg-teal-50 transition-colors hover:bg-gray-50">
                            <div class="w-9 h-9 rounded-lg bg-gray-100 peer-checked:bg-teal-100 flex items-center justify-center text-xs font-bold text-gray-400 peer-checked:text-teal-700 flex-shrink-0 transition-colors">
                                {{ $abbr }}
                            </div>
                            <div>
                                <p class="text-gray-700 font-semibold text-sm peer-checked:text-teal-700">{{ $label }}</p>
                                <p class="text-gray-400 text-[11px]">{{ $hours }}</p>
                            </div>
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('shift_type')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>

            {{-- Opening cash float --}}
            <div>
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
                    Opening Cash Float <span class="font-normal normal-case text-gray-300">— optional</span>
                </label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 font-semibold text-sm">₱</span>
                    <input type="number" name="opening_cash" value="{{ old('opening_cash') }}"
                           min="0" step="1" placeholder="0"
                           class="w-full pl-7 border-[0.5px] border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400">
                </div>
                <p class="text-[10px] text-gray-300 mt-1">Enter the cash float you received at the start of this shift</p>
            </div>

            <button type="submit"
                    class="w-full py-3 text-sm font-bold text-white bg-teal-600 hover:bg-teal-700 rounded-xl transition-colors flex items-center justify-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Start Shift
            </button>
        </form>
    </div>

    <div class="mt-4 text-center">
        <a href="{{ route('shifts.index') }}" class="text-xs text-gray-400 hover:text-gray-600 transition-colors">
            View shift history
        </a>
    </div>

    @endif {{-- end @else (no blocking shift) --}}

</div>

@endsection