@extends('garage.layouts.app')

@section('title', 'Service reminder')

@section('content')
@php
    $garageName = trim((string) (($garage->name ?? '') ?: 'Garage'));
    $fareedMotorsLogoPath = public_path('images/fareed-motors-logo.png');
    $useFareedMotorsLogo = is_file($fareedMotorsLogoPath) && stripos($garageName, 'fareed') !== false;
    $logoUrl = $useFareedMotorsLogo ? asset('images/fareed-motors-logo.png') : null;
    $fmtDate = function ($d) {
        if (! $d) return '—';
        try {
            return \Carbon\Carbon::parse($d)->format('d-m-Y');
        } catch (\Throwable $e) {
            return (string) $d;
        }
    };
@endphp

<style>
    .thermal-wrap { max-width: 300px; margin: 0 auto; }
    .thermal-card {
        background: #fff;
        color: #111;
        border: 1px solid #ddd;
        padding: 8px 10px;
        font-family: "Consolas", "Courier New", monospace;
        font-size: 11px;
        line-height: 1.35;
    }
    .t-brand {
        background: #4a4a4a;
        color: #fff;
        text-align: center;
        font-weight: 800;
        font-size: 13px;
        padding: 6px 8px;
        margin: -8px -10px 8px;
        letter-spacing: 0.02em;
    }
    .t-brand img {
        display: block;
        margin: 0 auto 4px;
        max-height: 56px;
        max-width: 100%;
        object-fit: contain;
        filter: brightness(0) invert(1);
    }
    .t-row {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin: 3px 0;
    }
    .t-row .k { color: #333; }
    .t-row .v { font-weight: 700; text-align: right; }
    .t-vehicle {
        font-weight: 700;
        margin: 6px 0 4px;
        line-height: 1.3;
    }
    .t-line { border-top: 1px dashed #888; margin: 8px 0; }
    .t-checks {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        font-size: 10px;
    }
    .t-check { display: inline-flex; align-items: center; gap: 4px; }
    .t-box {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 1px solid #111;
    }
    @media print {
        .top-header, .sidebar, .btn, .no-print { display: none !important; }
        .main-content { margin-left: 0 !important; }
        .container-fluid { padding: 0 !important; }
        @page { size: 80mm auto; margin: 2mm; }
        .thermal-wrap { max-width: none; margin: 0; }
        .thermal-card { border: 0; padding: 0; }
    }
</style>

<div class="container-fluid px-2 py-2">
    <div class="thermal-wrap">
        <div class="d-flex justify-content-between mb-2 no-print">
            <a href="javascript:history.back()" class="btn btn-sm btn-outline-secondary">Back</a>
            <button type="button" class="btn btn-sm btn-dark" onclick="window.print()">Print reminder</button>
        </div>

        <div class="thermal-card">
            <div class="t-brand">
                @if($logoUrl)
                    <img src="{{ $logoUrl }}" alt="{{ $garageName }}">
                @else
                    {{ strtoupper($garageName) }}
                @endif
            </div>

            <div class="t-row"><span class="k">Vehicle Number:</span></div>
            <div class="t-vehicle">
                {{ $print['vehicle_line1'] ?? ($print['vehicle_label'] ?? '—') }}
                @if(!empty($print['vehicle_line2']))
                    <br>{{ $print['vehicle_line2'] }}
                @endif
            </div>

            <div class="t-line"></div>

            <div class="t-row">
                <span class="k">Current Reading:</span>
                <span class="v">{{ $print['current_reading'] !== null ? \App\Support\GarageMeterReading::format($print['current_reading']) . ' km' : '—' }}</span>
            </div>
            <div class="t-row">
                <span class="k">Next Oil Change :</span>
                <span class="v">{{ $print['next_reading'] !== null ? \App\Support\GarageMeterReading::format($print['next_reading']) . ' km' : '—' }}</span>
            </div>
            <div class="t-row">
                <span class="k">Oil Change Date:</span>
                <span class="v">{{ $fmtDate($print['service_date'] ?? null) }}</span>
            </div>
            <div class="t-row">
                <span class="k">Next Oil Change Date:</span>
                <span class="v">{{ $fmtDate($print['next_service_date'] ?? null) }}</span>
            </div>

            <div class="t-line"></div>

            <div class="t-row"><span class="k">Oil Name:</span></div>
            <div class="t-vehicle" style="font-size:12px;">{{ $print['oil_name'] ?? '—' }}</div>

            <div class="t-checks">
                <span class="t-check"><span class="t-box"></span> A/F</span>
                <span class="t-check"><span class="t-box"></span> O/F</span>
                <span class="t-check"><span class="t-box"></span> A/c/F</span>
            </div>
        </div>
    </div>
</div>
@endsection