@extends('layout.app')
@section('title', 'Print Trip Sheet #' . $tripSheet->trip_sheet_no)

@push('header_script')
    <style>
        @page {
            size: A4 portrait;
            margin: 10mm;
        }

        /* Container */
        .print-container {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
            background: #fff;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        
        .company-name, .top-om, .faith-line, .company-tagline, .company-tag {
            color: {{ $companyDetails->header_color ?? '#000' }} !important;
        }

        /* Premium Header Styling */
        .company-header {
            text-align: center;
            border-bottom: 2px solid #1e3a8a;
            padding-bottom: 12px;
            margin-bottom: 20px;
        }

        .faith-line {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #ef4444;
            font-weight: 700;
            margin-bottom: 4px;
        }

        .company-name {
            font-size: 24px;
            font-weight: 800;
            color: #1e3a8a;
            margin: 0;
            letter-spacing: 0.5px;
        }

        .company-tagline {
            font-size: 11px;
            font-style: italic;
            color: #6b7280;
            margin: 4px 0 8px;
        }

        .header-meta {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
            color: #4b5563;
        }

        .address-box {
            text-align: left;
            max-width: 60%;
        }

        .contact-box {
            text-align: right;
        }

        /* Document Title */
        .doc-title-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 8px;
        }

        .doc-title {
            font-size: 16px;
            font-weight: 700;
            color: #1f2937;
            text-transform: uppercase;
            margin: 0;
        }

        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            font-size: 10px;
            font-weight: 700;
            border-radius: 12px;
            text-transform: uppercase;
        }

        .status-completed { background-color: #d1fae5; color: #065f46; }
        .status-inprogress { background-color: #fef3c7; color: #92400e; }
        .status-draft { background-color: #f3f4f6; color: #374151; }

        /* Grid info */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }

        .info-card {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 10px 14px;
            background-color: #f9fafb;
        }

        .info-title {
            font-size: 11px;
            text-transform: uppercase;
            color: #6b7280;
            font-weight: 600;
            margin-bottom: 6px;
            border-bottom: 1px dashed #e5e7eb;
            padding-bottom: 4px;
        }

        .info-row {
            display: flex;
            margin-bottom: 4px;
            font-size: 11px;
        }

        .info-row:last-child {
            margin-bottom: 0;
        }

        .info-label {
            width: 120px;
            color: #4b5563;
            font-weight: 500;
        }

        .info-val {
            font-weight: 600;
            color: #111827;
        }

        /* Table design */
        .section-title {
            font-size: 12px;
            font-weight: 700;
            color: #1e3a8a;
            margin: 15px 0 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .table-container {
            margin-bottom: 20px;
        }

        .print-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 11px;
        }

        .print-table th, .print-table td {
            border: 1px solid #d1d5db;
            padding: 6px 8px;
            text-align: left;
        }

        .print-table th {
            background-color: #f3f4f6;
            color: #374151;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 10px;
        }

        .text-right {
            text-align: right !important;
        }

        .text-center {
            text-align: center !important;
        }

        .fw-bold {
            font-weight: 700 !important;
        }

        /* Summary Cards */
        .summary-wrapper {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 15px;
            margin-top: 15px;
        }

        .summary-card {
            border: 1px solid #d1d5db;
            border-radius: 6px;
            padding: 12px;
            background-color: #fcfcfc;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid #e5e7eb;
            font-size: 11px;
        }

        .summary-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .summary-row:first-child {
            padding-top: 0;
        }

        .summary-total {
            font-size: 14px;
            font-weight: 800;
            color: #1e3a8a;
            border-top: 2px solid #1e3a8a;
            padding-top: 8px;
            margin-top: 4px;
        }

        .text-success { color: #15803d !important; }
        .text-danger { color: #b91c1c !important; }
        .text-primary { color: #1d4ed8 !important; }

        /* Signature block */
        .signature-section {
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }

        .sig-box {
            text-align: center;
            width: 200px;
            border-top: 1px solid #333;
            padding-top: 5px;
            font-weight: 600;
            font-size: 11px;
            color: #4b5563;
        }

        /* Print media styles */
        @media print {
            .no-print {
                display: none !important;
            }
            .print-container {
                padding: 0;
                width: 100%;
                max-width: 100%;
                border: none !important;
                box-shadow: none !important;
            }
            .info-card {
                background-color: #fff !important;
                border: 1px solid #999 !important;
            }
            .print-table th {
                background-color: #eaeaea !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center no-print" style="padding: 10px;">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('trip-sheet.index') }}">Trip Sheet List</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Print Preview</li>
        </ol>
        <div class="ms-auto">
            <button onclick="window.print()" class="btn btn-sm btn-success text-white">
                <i class="ri-printer-line"></i> Print Trip Sheet
            </button>
            <a href="{{ route('trip-sheet.index') }}" class="btn btn-sm btn-primary text-white">
                <i class="ri-arrow-go-back-line"></i> Back
            </a>
        </div>
    </div>

    <div class="app-body">
        <div class="print-container">
            <!-- Premium Company Header -->
            <div class="company-header">
                @if($companyDetails)
                    @if($companyDetails->faith_line)
                        <div class="faith-line">{{ $companyDetails->faith_line }}</div>
                    @endif
                    <h1 class="company-name">{{ $companyDetails->company_name }}</h1>
                    @if($companyDetails->tag_line)
                        <div class="company-tagline">{{ $companyDetails->tag_line }}</div>
                    @endif
                    <div class="header-meta">
                        <div class="address-box">
                            {{ $companyDetails->address }}<br>
                            {{ $companyDetails->district }},
                            {{ optional($companyDetails->state)->state_name }} - {{ $companyDetails->pin_code }}
                            @if($companyDetails->gst_no || $companyDetails->pan_no)
                                <div style="margin-top: 4px; font-weight: bold;">
                                    @if($companyDetails->gst_no) GST: {{ $companyDetails->gst_no }} @endif
                                    @if($companyDetails->gst_no && $companyDetails->pan_no) | @endif
                                    @if($companyDetails->pan_no) PAN: {{ $companyDetails->pan_no }} @endif
                                </div>
                            @endif
                        </div>
                        <div class="contact-box">
                            @if($companyDetails->mobile_no)
                                <span><i class="ri-phone-line"></i> {{ $companyDetails->mobile_no }}</span><br>
                            @endif
                            @if($companyDetails->email)
                                <span><i class="ri-mail-line"></i> {{ $companyDetails->email }}</span>
                            @endif
                        </div>
                    </div>
                @else
                    <h1 class="company-name">TRIP SHEET SUMMARY</h1>
                @endif
            </div>

            <!-- Doc Title and Status -->
            <div class="doc-title-container">
                <h2 class="doc-title">Trip Sheet</h2>
                @php
                    $statusClass = 'status-draft';
                    if ($tripSheet->status === 'Completed') {
                        $statusClass = 'status-completed';
                    } elseif ($tripSheet->status === 'In Progress') {
                        $statusClass = 'status-inprogress';
                    }
                @endphp
                <span class="status-badge {{ $statusClass }}">{{ $tripSheet->status }}</span>
            </div>

            <!-- Info Grid -->
            <div class="info-grid">
                <!-- Left Info Card -->
                <div class="info-card">
                    <div class="info-title">Trip Information</div>
                    <div class="info-row">
                        <span class="info-label">Trip Sheet No:</span>
                        <span class="info-val">#{{ $tripSheet->trip_sheet_no }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Date:</span>
                        <span class="info-val">{{ \Carbon\Carbon::parse($tripSheet->date)->format('d-M-Y') }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Vehicle No:</span>
                        <span class="info-val">{{ $tripSheet->vehicle->vehicle_no ?? 'N/A' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Driver Name:</span>
                        <span class="info-val">{{ $tripSheet->driver->employee_name ?? $tripSheet->driver_name ?? 'N/A' }}</span>
                    </div>
                </div>

                <!-- Right Info Card -->
                <div class="info-card">
                    <div class="info-title">Route & Logistics</div>
                    <div class="info-row">
                        <span class="info-label">Route:</span>
                        <span class="info-val">{{ $tripSheet->from_location }} → {{ $tripSheet->to_location }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Linked LR No:</span>
                        <span class="info-val">{{ $tripSheet->freightEntry ? 'LR-' . $tripSheet->freightEntry->lr_no : 'N/A' }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">KM Reading:</span>
                        <span class="info-val">
                            {{ $tripSheet->start_km ?? '-' }} → {{ $tripSheet->end_km ?? '-' }}
                            @if($tripSheet->total_km) ({{ $tripSheet->total_km }} km) @endif
                        </span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Trip Duration:</span>
                        <span class="info-val">
                            @if($tripSheet->start_time) {{ $tripSheet->start_time->format('d/m H:i') }} @else - @endif
                            →
                            @if($tripSheet->end_time) {{ $tripSheet->end_time->format('d/m H:i') }} @else - @endif
                        </span>
                    </div>
                </div>
            </div>

            <!-- Expenses Section -->
            <div class="section-title">
                <i class="ri-money-dollar-circle-line"></i> Trip Expenses
            </div>
            <div class="table-container">
                <table class="print-table">
                    <thead>
                        <tr>
                            <th width="40" class="text-center">#</th>
                            <th>Expense Type</th>
                            <th width="120">Date</th>
                            <th>Remarks / Details</th>
                            <th width="120" class="text-right">Amount (₹)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tripSheet->expenses as $index => $expense)
                            <tr>
                                <td class="text-center">{{ $index + 1 }}</td>
                                <td><span class="fw-bold">{{ $expense->expense_type }}</span></td>
                                <td>{{ \Carbon\Carbon::parse($expense->expense_date)->format('d-M-Y') }}</td>
                                <td>{{ $expense->remarks ?? '-' }}</td>
                                <td class="text-right fw-bold">{{ number_format($expense->amount, 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted" style="padding: 15px;">No expenses recorded.</td>
                            </tr>
                        @endforelse
                    </tbody>
                    <tfoot>
                        <tr class="fw-bold" style="background-color: #fafafa;">
                            <td colspan="4" class="text-right">Total Trip Expenses:</td>
                            <td class="text-right text-danger">₹ {{ number_format($tripSheet->total_expense, 2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- Profitability and Remarks -->
            <div class="summary-wrapper">
                <!-- Remarks -->
                <div class="summary-card" style="display: flex; flex-direction: column; justify-content: space-between;">
                    <div>
                        <div class="fw-bold" style="color: #1e3a8a; font-size: 11px; text-transform: uppercase; margin-bottom: 6px;">
                            Remarks / Notes
                        </div>
                        <p style="margin: 0; font-size: 11px; color: #4b5563; white-space: pre-line;">{{ $tripSheet->remarks ?: 'No remarks or special notes entered for this trip.' }}</p>
                    </div>

                    @if($tripSheet->total_km && $tripSheet->total_km > 0)
                        <div style="border-top: 1px dashed #d1d5db; margin-top: 15px; padding-top: 10px; font-size: 10px; color: #6b7280;">
                            <table style="width: 100%;">
                                <tr>
                                    <td>Cost Per KM: <b>₹ {{ number_format($tripSheet->total_expense / $tripSheet->total_km, 2) }}</b></td>
                                    <td>Income Per KM: <b>₹ {{ number_format($tripSheet->freight_amount / $tripSheet->total_km, 2) }}</b></td>
                                </tr>
                            </table>
                        </div>
                    @endif
                </div>

                <!-- Profit Summary -->
                <div class="summary-card">
                    <div class="fw-bold" style="color: #1e3a8a; font-size: 11px; text-transform: uppercase; margin-bottom: 6px; border-bottom: 1px dashed #e5e7eb; padding-bottom: 4px;">
                        Financial Summary
                    </div>
                    <div class="summary-row">
                        <span>Freight Income</span>
                        <span class="fw-bold text-primary">₹ {{ number_format($tripSheet->freight_amount, 2) }}</span>
                    </div>
                    <div class="summary-row">
                        <span>Total Expenses</span>
                        <span class="fw-bold text-danger">₹ {{ number_format($tripSheet->total_expense, 2) }}</span>
                    </div>
                    @php $pl = $tripSheet->profit_loss; @endphp
                    <div class="summary-row summary-total">
                        <span>Net PL</span>
                        <span class="{{ $pl >= 0 ? 'text-success' : 'text-danger' }}">
                            {{ $pl >= 0 ? '+' : '' }}₹ {{ number_format($pl, 2) }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Signatures -->
            <div class="signature-section">
                <div class="sig-box">Prepared By / Driver</div>
                <div class="sig-box">Authorized Signature</div>
            </div>
        </div>
    </div>
@endsection