@extends('layouts.app')

@section('title', 'Session #' . $posSession->id)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6">
        <a href="{{ route('pos-sessions.index') }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 flex items-center gap-1 text-sm">
            <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="M15 19l-7-7 7-7"/></svg>
            Back to Sessions
        </a>
    </div>

    <!-- Session Header -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
            <div>
                <h1 class="text-xl font-bold text-gray-900 dark:text-white">Session #{{ $posSession->id }}</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $posSession->warehouse->name ?? 'Unknown Location' }}</p>
            </div>
            @if($posSession->status === 'open')
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                    <span class="w-2 h-2 mr-2 rounded-full bg-green-500 animate-pulse"></span>
                    Open
                </span>
            @else
                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
                    Closed
                </span>
            @endif
        </div>
        <div class="px-6 py-4 grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
                <p class="text-xs text-gray-500 dark:text-gray-400">Cashier</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $posSession->user->name ?? '-' }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500 dark:text-gray-400">Opened At</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $posSession->opened_at ? $posSession->opened_at->format('d M Y, H:i') : $posSession->created_at->format('d M Y, H:i') }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500 dark:text-gray-400">Closed At</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $posSession->closed_at ? $posSession->closed_at->format('d M Y, H:i') : '-' }}</p>
            </div>
            <div>
                <p class="text-xs text-gray-500 dark:text-gray-400">Duration</p>
                <p class="text-sm font-medium text-gray-900 dark:text-white">
                    @if($posSession->closed_at)
                        {{ $posSession->opened_at ? $posSession->opened_at->diffForHumans($posSession->closed_at, true) : '-' }}
                    @elseif($posSession->opened_at)
                        {{ $posSession->opened_at->diffForHumans(null, true) }} (ongoing)
                    @else
                        -
                    @endif
                </p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Stats Cards -->
        <div class="lg:col-span-2 grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">Total Sales</p>
                <p class="text-xl font-bold text-gray-900 dark:text-white">RM {{ number_format($stats['total_sales'], 2) }}</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">Transactions</p>
                <p class="text-xl font-bold text-gray-900 dark:text-white">{{ $stats['transaction_count'] }}</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">Cash Sales</p>
                <p class="text-xl font-bold text-green-600 dark:text-green-400">RM {{ number_format($stats['cash_sales'], 2) }}</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                <p class="text-xs text-gray-500 dark:text-gray-400">Card/E-Wallet</p>
                <p class="text-xl font-bold text-blue-600 dark:text-blue-400">RM {{ number_format($stats['card_sales'] + $stats['ewallet_sales'] + $stats['transfer_sales'], 2) }}</p>
            </div>
        </div>

        <!-- Cash Summary -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Cash Summary</h3>
            </div>
            <div class="px-6 py-4 space-y-3">
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Opening Cash</span>
                    <span class="text-sm font-medium text-gray-900 dark:text-white">RM {{ number_format($posSession->opening_cash ?? 0, 2) }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-sm text-gray-500 dark:text-gray-400">+ Cash Sales</span>
                    <span class="text-sm font-medium text-green-600 dark:text-green-400">RM {{ number_format($stats['cash_sales'], 2) }}</span>
                </div>
                <div class="flex justify-between pt-2 border-t border-gray-200 dark:border-gray-600">
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Expected Cash</span>
                    <span class="text-sm font-bold text-gray-900 dark:text-white">RM {{ number_format(($posSession->opening_cash ?? 0) + $stats['cash_sales'], 2) }}</span>
                </div>
                @if($posSession->closing_cash !== null)
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Actual Closing</span>
                        <span class="text-sm font-medium text-gray-900 dark:text-white">RM {{ number_format($posSession->closing_cash, 2) }}</span>
                    </div>
                    @php
                        $expected = ($posSession->opening_cash ?? 0) + $stats['cash_sales'];
                        $difference = $posSession->closing_cash - $expected;
                    @endphp
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500 dark:text-gray-400">Difference</span>
                        <span class="text-sm font-medium {{ $difference >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                            {{ $difference >= 0 ? '+' : '' }}RM {{ number_format($difference, 2) }}
                        </span>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Transactions List -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg mt-6">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Transactions ({{ $posSession->sales->count() }})</h3>
        </div>
        @if($posSession->sales->count() > 0)
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Receipt</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Time</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Customer</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Payment</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Total</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($posSession->sales as $sale)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="text-sm font-mono text-gray-900 dark:text-white">{{ $sale->receipt_number }}</span>
                                @if($sale->status === 'voided')
                                    <span class="ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">Voided</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $sale->created_at->format('H:i:s') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $sale->customer_name ?? 'Walk-in' }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                    @if($sale->payment_method === 'cash') bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200
                                    @elseif($sale->payment_method === 'card') bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200
                                    @else bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200
                                    @endif">
                                    {{ ucfirst($sale->payment_method) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-right font-medium text-gray-900 dark:text-white">
                                RM {{ number_format($sale->total, 2) }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                                <a href="{{ route('pos-sales.show', $sale) }}" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400">View</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                No transactions in this session
            </div>
        @endif
    </div>

    @if($posSession->notes)
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg mt-6">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Closing Notes</h3>
            </div>
            <div class="px-6 py-4">
                <p class="text-sm text-gray-600 dark:text-gray-300">{{ $posSession->notes }}</p>
            </div>
        </div>
    @endif
</div>
@endsection