@php
    // $customer = $quote->customer;
    $vehicle = $quote->vehicle;
@endphp

<div class="card">
    <h5 class="card-header border-bottom gap-3 p-3">
        Vehicle Information
    </h5>

    <div class="card-body p-0">
        <div class="row g-0" id="vrm_body">
            {{-- <div class="col-12 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-user text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Name</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $customer?->name ?: 'N/A' }}</div>
                </div>
            </div>

            <div class="col-12 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-mail text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Email</div>
                    <div class="fw-semibold text-break" style="font-size:13px;">{{ $customer?->email ?: 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-phone text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Phone</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $customer?->phone ?: 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-map-pin text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">City</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $customer?->city ?: 'N/A' }}</div>
                </div>
            </div>

            <div class="col-12 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-map-pin text-white" style="font-size:20px;"></i>
                </div>
                <div style="min-width:0;">
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Address</div>
                    <div class="fw-semibold text-truncate" style="font-size:13px;"
                        title="{{ $customer?->address ?: 'N/A' }}">{{ $customer?->address ?: 'N/A' }}</div>
                </div>
            </div> --}}

            <div class="col-12 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-car-suv text-white" style="font-size:20px;"></i>
                </div>
                <div style="min-width:0;">
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Model</div>
                    <div class="fw-semibold text-truncate" style="font-size:13px;"
                        title="{{ $vehicle?->model ?? '' }}">{{ $vehicle?->model ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-building-factory-2 text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Make</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->make ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-calendar-event text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Year</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->year ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-number text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">VRM</div>
                    <div class="fw-semibold font-monospace" style="font-size:12px;">{{ $vehicle?->vrm ?: $quote->vrm ?: 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-gas-station text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Fuel Type</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->fuel_type ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-settings-2 text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Engine Size</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->engine_size ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-engine text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Engine Code</div>
                    <div class="fw-semibold font-monospace" style="font-size:12px;">{{ $vehicle?->engine_code ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-hash text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Engine Number</div>
                    <div class="fw-semibold font-monospace" style="font-size:12px;">{{ $vehicle?->engine_number ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-barcode text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">VIN Number</div>
                    <div class="fw-semibold font-monospace" style="font-size:12px;">{{ $vehicle?->vin ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-palette text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Color</div>
                    <div class="fw-semibold d-flex align-items-center gap-2" style="font-size:13px;">
                        <span>{{ $vehicle?->color ?? 'N/A' }}</span>
                    </div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-car-garage text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Body Type</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->body_type ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-door text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Number of Doors</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->number_of_doors ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-armchair text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Seating Capacity</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->seat_capacity ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-steering-wheel text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Wheel Plan</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->wheel_plan ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-wind text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Aspiration</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->aspiration ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-bolt text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Maximum BHP</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->maximum_bhp ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-manual-gearbox text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">Transmission</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->transmission ?? 'N/A' }}</div>
                </div>
            </div>

            <div class="col-6 d-flex align-items-center gap-2 p-3 border-bottom border-end">
                <div class="rounded d-flex align-items-center justify-content-center"
                    style="width:34px;height:34px;flex-shrink:0; background: #088d50">
                    <i class="ti tabler-leaf text-white" style="font-size:20px;"></i>
                </div>
                <div>
                    <div class="text-uppercase text-muted mb-1"
                        style="font-size:10px;letter-spacing:.05em;font-weight:600;">CO2 Emissions</div>
                    <div class="fw-semibold" style="font-size:13px;">{{ $vehicle?->co2_emissions ? $vehicle->co2_emissions . ' g/km' : 'N/A' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>