@extends('layouts.app')

@section('title', 'Job Details: ' . $job->job_no)

@section('content')
<div class="max-w-4xl mx-auto space-y-lg">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-md mb-xl">
        <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('jobs.index') }}">Job List</a>
                <span class="material-symbols-outlined text-[16px]">chevron_right</span>
                <span class="text-on-surface">{{ $job->job_no }}</span>
            </nav>
            <h2 class="font-headline-md text-headline-md text-on-surface">Job Details</h2>
            <p class="font-body-md text-body-md text-secondary">Full details copied from confirmed quotation.</p>
        </div>
        <a href="{{ route('jobs.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>
    </div>

    <div class="bg-surface-container-lowest ambient-shadow rounded-2xl overflow-hidden border border-surface-container">
        <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">{{ $job->job_name ?: 'Untitled Job' }}</h3>
                <div class="flex items-center gap-sm font-label-md text-label-md text-secondary">
                    <span>{{ $job->job_no }}</span>
                    <span>&bull;</span>
                    <span>{{ $job->booking_no }}</span>
                    <span>&bull;</span>
                    <span>{{ $job->booking_date ? date('d M Y', strtotime($job->booking_date)) : '-' }}</span>
                </div>
            </div>
            <div class="px-lg py-sm rounded-full border bg-amber-50 text-amber-700 border-amber-100 font-label-md text-label-md font-bold uppercase tracking-wider">
                {{ $job->job_status }}
            </div>
        </div>

        <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 & Specs</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-xl gap-x-md">
                <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">{{ $job->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">{{ $job->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">{{ $job->address ?: '-' }}</div>
                </div>
                <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">{{ $job->category_name ?: '-' }}</div>
                </div>
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Paper Size</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $job->paper_size ?: '-' }}</div>
                </div>
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">GSM</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $job->paper_gsm ?: '-' }}</div>
                </div>
                <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">{{ $job->print_type ?: '-' }}</div>
                </div>
                <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">{{ $job->lamination ?: '-' }}</div>
                </div>
                <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">{{ $job->lamination_side ?: '-' }}</div>
                </div>
                @if($job->carbon_copy || $job->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">{{ $job->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">{{ $job->bill_binding ?: '-' }}</div>
                </div>
                @endif
                <div>
                    <div class="font-label-sm text-label-sm text-secondary uppercase tracking-widest mb-xs">Quantity</div>
                    <div class="font-body-lg text-body-lg text-on-surface font-semibold">{{ $job->quantity }}</div>
                </div>
                <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($job->grand_total, 2) }}</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection