@extends('layouts.app')

@section('title', 'Booking Details: ' . $booking->booking_no)

@section('content')
<div class="max-w-4xl mx-auto space-y-lg">
    <!-- Page Header Actions -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-md mb-xl no-print">
        <div>
            <nav class="flex items-center gap-xs text-secondary font-label-md text-label-md mb-xs">
                <a class="hover:text-primary transition-colors" href="{{ route('bookings.index') }}">Quotation Bookings</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <span class="text-on-surface">{{ $booking->booking_no }}</span>
            </nav>
            <h2 class="font-headline-md text-headline-md text-on-surface">Booking Details</h2>
            <p class="font-body-md text-body-md text-secondary">Review the configured specifications for this job.</p>
        </div>
        <div class="flex items-center gap-sm">
            <a href="{{ route('bookings.index') }}" class="px-md py-sm bg-surface-container-highest border border-outline-variant text-on-surface-variant rounded-lg font-label-md text-label-md flex items-center gap-xs hover:bg-surface-container transition-all">
                <span class="material-symbols-outlined text-[18px]">arrow_back</span>
                Back to List
            </a>
            <button onclick="window.print()" class="px-md py-sm bg-primary text-on-primary rounded-lg font-label-md text-label-md flex items-center gap-xs shadow-md hover:bg-opacity-90 transition-all">
                <span class="material-symbols-outlined text-[18px]">print</span>
                Print Ticket
            </button>
        </div>
    </div>

    <!-- Booking Summary Card -->
    <div class="bg-surface-container-lowest ambient-shadow rounded-2xl overflow-hidden border border-surface-container printable-area">
        
        <!-- Header -->
        <div class="bg-surface-container-low p-xl border-b border-surface-container flex flex-col md:flex-row justify-between items-start md:items-center gap-lg">
            <div>
                <h3 class="font-display-lg-mobile text-display-lg-mobile text-primary font-bold mb-1">
                    {{ $booking->job_name ?: 'Untitled Job' }}
                </h3>
                <div class="flex items-center gap-sm font-label-md text-label-md text-secondary">
                    <span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">tag</span> {{ $booking->booking_no }}</span>
                    <span>&bull;</span>
                    <span class="flex items-center gap-1"><span class="material-symbols-outlined text-[16px]">calendar_today</span> {{ date('d M Y', strtotime($booking->booking_date)) }}</span>
                </div>
            </div>
            
            @php
                $statusColor = 'bg-amber-50 text-amber-700 border-amber-100';
                if($booking->status == 'Confirmed') $statusColor = 'bg-emerald-50 text-emerald-700 border-emerald-100';
            @endphp
            <div class="px-lg py-sm rounded-full border {{ $statusColor }} font-label-md text-label-md font-bold uppercase tracking-wider">
                {{ $booking->status }}
            </div>
        </div>

        @php
            $item = $booking->items->first();
        @endphp

        <!-- Details Grid -->
        <div class="p-xl">
            <h4 class="font-headline-sm text-headline-sm text-on-surface border-b border-surface-container pb-sm mb-lg">Customer & Specifications</h4>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-xl gap-x-md mb-xl">
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Customer</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $booking->customer?->name ?? $booking->customer_name }}</div>
                </div>
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Mobile</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $booking->customer?->mobile ?? $booking->mobile }}</div>
                </div>
                <div class="md:col-span-2 lg:col-span-3">
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Address</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $booking->customer?->address ?? $booking->address ?? '-' }}</div>
                </div>
            </div>

            @if($item)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-xl gap-x-md">
                
                <!-- Category -->
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Category</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">
                        {{ \App\Models\BookingCategory::find($item->category_id)?->name ?? 'Not Specified' }}
                    </div>
                </div>

                <!-- Paper Size -->
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Print Paper Size</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">
                        {{ \App\Models\PaperSize::find($item->paper_size_id)?->name ?? 'Not Specified' }}
                    </div>
                </div>

                <!-- GSM -->
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Paper GSM</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">
                        {{ \App\Models\PaperGsm::find($item->paper_gsm_id)?->name ?? 'Not Specified' }}
                    </div>
                </div>

                <!-- Print Type -->
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Print Type</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">
                        {{ \App\Models\PrintType::find($item->print_type_id)?->name ?? 'Not Specified' }}
                    </div>
                </div>

                <!-- Lamination -->
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Lamination</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">
                        {{ \App\Models\Lamination::find($item->lamination_id)?->name ?? 'NONE' }}
                    </div>
                </div>

                <!-- Lamination Side -->
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Lamination Side</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">
                        {{ \App\Models\LaminationSide::find($item->lamination_side_id)?->name ?? 'NONE' }}
                    </div>
                </div>

                @if($item->carbon_copy || $item->bill_binding)
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Carbon Copy</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $item->carbon_copy ?: '-' }}</div>
                </div>
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Binding</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $item->bill_binding ?: '-' }}</div>
                </div>
                @endif

                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Amount</div>
                    <div class="font-body-lg text-body-lg text-primary font-bold">₹{{ number_format($booking->grand_total, 2) }}</div>
                </div>

                <!-- Quantity -->
                <div class="lg:col-span-3 mt-md pt-lg border-t border-surface-container">
                    <div class="bg-primary-container/30 rounded-xl p-md flex items-center justify-between">
                        <div class="font-label-md text-label-md text-on-surface-variant uppercase tracking-widest">Total Print Quantity</div>
                        <div class="font-display-lg text-display-lg text-primary font-bold">{{ $item->quantity ?? $item->total_quantity ?? 0 }}</div>
                    </div>
                </div>

            </div>
            @else
            <div class="text-center py-xl text-secondary font-body-md text-body-md">
                No specifications found for this job.
            </div>
            @endif
        </div>

    </div>
</div>

<style>
    @media print {
        body { background-color: white !important; }
        .no-print { display: none !important; }
        #sidebar, header, nav, main { margin: 0 !important; padding: 0 !important; }
        .printable-area { box-shadow: none !important; border: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    }
</style>
@endsection