@extends('layouts.app')

@section('title', 'Transaction #' . $tx->id)
@section('nav_pos', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Transaction #' . $tx->id)
@section('page_subtitle', $tx->transaction_date->format('F j, Y'))

@section('content')

<div class="max-w-2xl">

    <div class="flex items-center justify-between mb-5">
        <a href="{{ route('pos.index') }}"
           class="inline-flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-600 transition-colors">
            <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 POS
        </a>
        <a href="{{ route('pos.new') }}"
           class="inline-flex items-center gap-2 px-3.5 py-1.5 text-sm 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>
            New Sale
        </a>
    </div>

    {{-- Receipt card --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">

        {{-- Header band --}}
        @if($tx->payment_method === null)
        <div class="bg-blue-50 border-b border-blue-100 px-5 py-3 flex items-center gap-2">
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-700 border-[0.5px] border-blue-200">
                Charged to Room
            </span>
            @if($tx->reservation)
            <span class="text-blue-600 text-sm">
                Room {{ $tx->reservation->room_no }} — {{ $tx->reservation->guest_name }}
            </span>
            @endif
        </div>
        @else
        <div class="bg-green-50 border-b border-green-100 px-5 py-3 flex items-center gap-2">
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-700 border-[0.5px] border-green-200">
                {{ $tx->payment_method }}
            </span>
            @if($tx->reference)
            <span class="text-green-600 text-sm">Ref: {{ $tx->reference }}</span>
            @endif
        </div>
        @endif

        {{-- Meta grid --}}
        <div class="px-5 py-4 border-b border-gray-100 grid grid-cols-3 gap-4">
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">Transaction #</p>
                <p class="text-gray-700 font-semibold text-sm mt-0.5">#{{ $tx->id }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">Date</p>
                <p class="text-gray-700 font-semibold text-sm mt-0.5">{{ $tx->transaction_date->format('M j, Y') }}</p>
            </div>
            <div>
                <p class="text-gray-400 text-[10px] uppercase tracking-wider">Cashier</p>
                <p class="text-gray-700 font-semibold text-sm mt-0.5">{{ $tx->cashier }}</p>
            </div>
        </div>

        {{-- Items --}}
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-gray-100">
                    <th class="px-5 py-3 text-left text-[10px] font-semibold text-gray-400 uppercase tracking-wider">Item</th>
                    <th class="px-5 py-3 text-center text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-16">Qty</th>
                    <th class="px-5 py-3 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-24">Unit Price</th>
                    <th class="px-5 py-3 text-right text-[10px] font-semibold text-gray-400 uppercase tracking-wider w-24">Amount</th>
                </tr>
            </thead>
            <tbody>
                @foreach($tx->items as $item)
                <tr class="{{ !$loop->last ? 'border-b border-gray-50' : '' }}">
                    <td class="px-5 py-3 text-gray-700">
                        {{ $item->description }}
                        @php
                            $catLabel = ['food_beverage'=>'Food & Bev','laundry'=>'Laundry','telephone'=>'Telephone','minibar'=>'Minibar','damage'=>'Damage','other'=>'Misc'];
                        @endphp
                        <span class="ml-1.5 text-gray-400 text-[10px]">{{ $catLabel[$item->category] ?? '' }}</span>
                    </td>
                    <td class="px-5 py-3 text-center text-gray-500">{{ $item->quantity }}</td>
                    <td class="px-5 py-3 text-right text-gray-500">&#8369;{{ number_format($item->unit_price, 0) }}</td>
                    <td class="px-5 py-3 text-right text-gray-700 font-semibold">&#8369;{{ number_format($item->lineTotal(), 0) }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="border-t border-gray-200 bg-gray-50/50">
                    <td colspan="3" class="px-5 py-4 text-right font-bold text-gray-500 text-sm uppercase tracking-wider">Total</td>
                    <td class="px-5 py-4 text-right font-black text-teal-700 text-lg">&#8369;{{ number_format($tx->total, 0) }}</td>
                </tr>
            </tfoot>
        </table>

        {{-- Notes --}}
        @if($tx->notes)
        <div class="px-5 py-3 border-t border-gray-100 bg-amber-50/50">
            <p class="text-gray-400 text-[10px] uppercase tracking-wider mb-1">Notes</p>
            <p class="text-gray-600 text-sm">{{ $tx->notes }}</p>
        </div>
        @endif

        {{-- Folio link --}}
        @if($tx->reservation)
        <div class="px-5 py-3 border-t border-gray-100 flex items-center justify-between bg-blue-50/50">
            <div class="flex items-center gap-2">
                <svg class="w-3.5 h-3.5 text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                </svg>
                <p class="text-blue-700 text-xs font-medium">
                    Charged to Room {{ $tx->reservation->room_no }} — {{ $tx->reservation->guest_name }}
                </p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('reservations.folio', $tx->reservation_id) }}"
                   class="text-xs font-semibold text-teal-600 hover:text-teal-700 transition-colors">
                    View Folio →
                </a>
                <a href="{{ route('reservations.show', $tx->reservation_id) }}"
                   class="text-xs text-gray-400 hover:text-gray-600 transition-colors">
                    Reservation
                </a>
            </div>
        </div>
        @endif
    </div>

</div>

@endsection