@extends('layouts.app')

@section('title', 'Close Shift')
@section('nav_shifts', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Close Shift')
@section('page_subtitle', 'Review your shift activity and hand over')

@section('content')

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

@php
    $paymentColors = [
        'Cash'          => 'bg-green-50 text-green-700',
        'GCash'         => 'bg-blue-50 text-blue-700',
        'Maya'          => 'bg-purple-50 text-purple-700',
        'Credit Card'   => 'bg-amber-50 text-amber-700',
        'Debit Card'    => 'bg-orange-50 text-orange-700',
        'Bank Transfer' => 'bg-teal-50 text-teal-700',
        'Check'         => 'bg-gray-50 text-gray-600',
    ];
@endphp

{{-- Shift header --}}
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 mb-5">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center text-teal-700 text-sm font-bold flex-shrink-0">
                {{ $shift->user->initials() }}
            </div>
            <div>
                <p class="text-gray-900 font-bold text-sm">{{ $shift->user->name }}</p>
                <p class="text-gray-400 text-xs">{{ $shift->typeLabel() }} Shift · Started {{ $shift->started_at->format('g:i A') }}</p>
            </div>
        </div>
        <div class="flex items-center gap-5 text-center">
            <div>
                <p class="text-[10px] text-gray-400 uppercase tracking-wider">Duration</p>
                <p class="text-base font-bold text-gray-900">{{ $shift->duration() }}</p>
            </div>
            <div>
                <p class="text-[10px] text-gray-400 uppercase tracking-wider">Date</p>
                <p class="text-sm font-semibold text-gray-700">{{ $shift->started_at->format('M j, Y') }}</p>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-5 gap-5 items-start">

    {{-- Shift summary (left 3 cols) --}}
    <div class="lg:col-span-3 space-y-4">

        {{-- Check-in / Check-out --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
            <div class="grid grid-cols-2 divide-x divide-gray-100">
                <div class="px-5 py-4">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Check-ins</p>
                    <p class="text-3xl font-black text-teal-600">{{ $summary['checkins']->count() }}</p>
                    @if($summary['checkins']->isNotEmpty())
                    <div class="mt-2 space-y-1 max-h-32 overflow-y-auto">
                        @foreach($summary['checkins'] as $log)
                        <p class="text-xs text-gray-500 truncate">{{ $log->description }}</p>
                        @endforeach
                    </div>
                    @endif
                </div>
                <div class="px-5 py-4">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Check-outs</p>
                    <p class="text-3xl font-black text-amber-500">{{ $summary['checkouts']->count() }}</p>
                    @if($summary['checkouts']->isNotEmpty())
                    <div class="mt-2 space-y-1 max-h-32 overflow-y-auto">
                        @foreach($summary['checkouts'] as $log)
                        <p class="text-xs text-gray-500 truncate">{{ $log->description }}</p>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Payments collected --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
            <div class="px-5 py-3 border-b border-gray-100 bg-gray-50/50">
                <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Payments Collected</p>
            </div>
            @if($summary['paymentsByMethod']->isEmpty() && $summary['posTotal'] == 0)
            <p class="px-5 py-4 text-xs text-gray-300">No payments during this shift.</p>
            @else
            <div class="p-4 space-y-2">
                @foreach($summary['paymentsByMethod'] as $method => $amount)
                <div class="flex items-center justify-between">
                    <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-semibold {{ $paymentColors[$method] ?? 'bg-gray-50 text-gray-500' }}">
                        {{ $method }}
                    </span>
                    <span class="text-sm font-semibold text-gray-800">&#8369;{{ number_format($amount, 0) }}</span>
                </div>
                @endforeach
                @if($summary['posTotal'] > 0)
                <div class="pt-2 mt-2 border-t border-gray-50 flex items-center justify-between">
                    <span class="text-xs text-gray-400">POS Transactions ({{ $summary['posTxns']->count() }})</span>
                    <span class="text-sm font-semibold text-gray-600">&#8369;{{ number_format($summary['posTotal'], 0) }}</span>
                </div>
                @endif
                <div class="pt-2 border-t border-gray-100 flex items-center justify-between">
                    <span class="text-xs font-bold text-gray-600 uppercase tracking-wider">Total Collected</span>
                    <span class="text-base font-black text-gray-900">&#8369;{{ number_format($summary['payments']->sum('amount') + $summary['posTotal'], 0) }}</span>
                </div>
            </div>
            @endif
        </div>

        {{-- Other activity --}}
        <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
            <div class="grid grid-cols-3 divide-x divide-gray-100">
                <div class="px-4 py-4 text-center">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">New Reservations</p>
                    <p class="text-2xl font-black text-blue-600">{{ $summary['newReservations'] }}</p>
                </div>
                <div class="px-4 py-4 text-center">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Rooms Cleaned</p>
                    <p class="text-2xl font-black text-green-600">{{ $summary['roomsCleaned'] }}</p>
                </div>
                <div class="px-4 py-4 text-center">
                    <p class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Work Orders</p>
                    <p class="text-2xl font-black text-amber-600">{{ $summary['maintenance']->count() }}</p>
                </div>
            </div>
        </div>

    </div>

    {{-- Close shift form (right 2 cols) --}}
    <div class="lg:col-span-2 space-y-4">

        <form method="POST" action="{{ route('shifts.submit-close', $shift->id) }}"
              data-confirm="Close your shift? This action cannot be undone.">
            @csrf

            {{-- Cash reconciliation --}}
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5 space-y-4">
                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Cash Reconciliation</p>

                <div class="space-y-2 text-sm pb-3 border-b border-gray-100">
                    @if($shift->opening_cash !== null)
                    <div class="flex justify-between text-gray-500">
                        <span>Opening float</span>
                        <span class="font-medium">&#8369;{{ number_format($shift->opening_cash, 0) }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between text-gray-500">
                        <span>Cash received (payments)</span>
                        <span class="font-medium">&#8369;{{ number_format($summary['cashReceived'], 0) }}</span>
                    </div>
                    @if($summary['posCash'] > 0)
                    <div class="flex justify-between text-gray-500">
                        <span>Cash from POS</span>
                        <span class="font-medium">&#8369;{{ number_format($summary['posCash'], 0) }}</span>
                    </div>
                    @endif
                    <div class="flex justify-between font-semibold text-gray-700">
                        <span>Expected on hand</span>
                        <span>&#8369;{{ number_format((float)($shift->opening_cash ?? 0) + $summary['totalCashIn'], 0) }}</span>
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
                        Actual Cash Count <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="closing_cash" value="{{ old('closing_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>
                </div>
            </div>

            {{-- Handover notes --}}
            <div class="bg-white border-[0.5px] border-gray-200 rounded-xl p-5">
                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
                    Handover Notes <span class="font-normal normal-case text-gray-300">— for the next shift</span>
                </label>
                <textarea name="handover_notes" rows="5" placeholder="Pending tasks, VIP arrivals, issues to flag, room assignments…"
                          class="w-full 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 resize-none">{{ old('handover_notes') }}</textarea>
            </div>

            <button type="submit"
                    class="w-full py-3 text-sm font-bold text-white bg-red-500 hover:bg-red-600 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="M5 13l4 4L19 7"/>
                </svg>
                Close Shift & Generate Report
            </button>
        </form>

    </div>

</div>

@endsection