@extends('garage.layouts.app')

@section('title', 'Sale '.$sale->sale_number)

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3">
    @php
        $partsSub = 0.0;
        $servicesSub = 0.0;
        $tax = 0.0;

        foreach (($items ?? []) as $it) {
            $qty = (float) ($it->quantity ?? 0);
            $unit = (float) ($it->unit_price ?? 0);
            $gross = $qty * $unit;
            $disc = (float) ($it->discount_amount ?? 0); // already applied PKR on item
            $net = max(0, $gross - $disc);
            $partsSub += $net;
            $tax += (float) ($it->tax_amount ?? 0);
        }
        foreach (($services ?? []) as $s) {
            $lt = (float) ($s->line_total ?? 0);
            if ($lt <= 0) $lt = (float) ($s->hours ?? 0) * (float) ($s->rate ?? 0);
            $servicesSub += $lt;
        }

        $subBefore = $partsSub + $servicesSub;
        $after = (float) ($sale->grand_total ?? 0) - (float) ($sale->tax_amount ?? 0) - (float) ($sale->freight_amount ?? 0);
        if ($after < 0) $after = (float) ($sale->subtotal ?? 0);
        $discApplied = max(0, $subBefore - $after);
    @endphp

    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="h4 mb-0 font-monospace">{{ $sale->sale_number }}</h1>
            <p class="text-muted small mb-0">{{ $sale->sale_date }} · <span class="badge bg-secondary">{{ $sale->status }}</span></p>
        </div>
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('garage.sales.index') }}" class="btn btn-sm btn-outline-secondary">All sales</a>
            @if(!empty($canReturn))
                <a href="{{ route('garage.sale-returns.create', ['garage_sale_id' => $sale->id]) }}" class="btn btn-sm btn-outline-danger">
                    <i class="bi bi-arrow-return-right me-1"></i>Record return
                </a>
            @endif
            @if(!empty($sale->journal_voucher_id) || !empty($sale->receipt_voucher_id))
                <button type="button"
                        class="btn btn-sm btn-outline-primary"
                        data-bs-toggle="modal"
                        data-bs-target="#saleVouchersModal"
                        data-sale-id="{{ $sale->id }}"
                        data-sale-no="{{ $sale->sale_number }}">
                    Vouchers
                </button>
            @endif
            @if(in_array($sale->status, ['draft','held']))
                <a href="{{ route('garage.sales.edit', $sale->id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
            @endif
            <div class="dropdown">
                <button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Print Invoice
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="{{ route('garage.sales.print.thermal', $sale->id) }}" target="_blank">
                            <i class="bi bi-receipt me-2"></i>Thermal (58/80mm)
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('garage.sales.print.a4', $sale->id) }}" target="_blank">
                            <i class="bi bi-file-earmark-text me-2"></i>A4 Invoice
                        </a>
                    </li>
                    @if(!empty($hasDocumentServices))
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <a class="dropdown-item" href="{{ route('garage.sales.print.service-reminder', $sale->id) }}" target="_blank">
                            <i class="bi bi-tag me-2"></i>Service reminder sticker
                        </a>
                    </li>
                    @endif
                </ul>
            </div>
            <form action="{{ route('garage.sales.destroy', $sale->id) }}" method="POST" onsubmit="return confirm('Delete this sale? Completed sales will restore stock.');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
            </form>
            @php
                $salePaySummary = app(\App\Services\GarageRepairOrderSaleInvoiceService::class)->salePaymentSummary($sale);
            @endphp
            @if(($sale->sale_kind ?? null) === 'customer_sale' && !($salePaySummary['is_fully_settled'] ?? false))
                @if(in_array(($sale->status ?? null), ['held','completed'], true))
                    <button type="button"
                            class="btn btn-sm btn-outline-success"
                            data-bs-toggle="modal"
                            data-bs-target="#saleReceiptModal"
                            data-sale-id="{{ $sale->id }}"
                            data-sale-no="{{ $sale->sale_number }}">
                        Make receipt
                    </button>
                @else
                    <button type="button" class="btn btn-sm btn-outline-success" disabled
                            title="Receipt can be created only for held/completed sales.">
                        Make receipt
                    </button>
                @endif
            @elseif(($sale->payment_status ?? 'unpaid') === 'paid' && !empty($sale->receipt_voucher_id))
                <a href="{{ route('garage.sales.gate-pass', $sale->id) }}" class="btn btn-sm btn-primary" target="_blank">Gate pass</a>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success py-2">{{ session('success') }}</div>
    @endif

    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="small text-muted text-uppercase">Customer</div>
            <div class="d-flex flex-wrap align-items-center gap-2">
                <span>{{ $sale->customer_name ?? 'Walk-in / cash' }}</span>
                @if(!empty($sale->customer_ledger_id))
                    <a class="btn btn-sm btn-outline-primary py-0"
                       href="{{ route('garage.customers.show', $sale->customer_ledger_id) }}"
                       title="Open ledger statement">
                        Ledger statement
                    </a>
                @endif
            </div>
        </div>
        <div class="col-md-3">
            <div class="small text-muted text-uppercase">Vehicle</div>
            <div>
                @if(!empty($sale->vehicle_registration))
                    <strong>{{ $sale->vehicle_registration }}</strong>
                    @if(!empty($subLedger) && !empty($subLedger->id))
                        <div class="mt-1">
                            <a class="btn btn-sm btn-outline-primary py-0"
                               href="{{ route('garage.ledger-reports.sub-ledger', $subLedger->id) }}"
                               title="Open sub-ledger statement">
                                Sub-ledger statement
                            </a>
                        </div>
                    @endif
                    @if($sale->vehicle_make || $sale->vehicle_model || $sale->vehicle_year)
                        <div class="small text-muted">{{ trim(($sale->vehicle_make ?? '').' '.($sale->vehicle_model ?? '').' '.($sale->vehicle_year ?? '')) }}</div>
                    @endif
                @else
                    —
                @endif
            </div>
        </div>
        <div class="col-md-3">
            <div class="small text-muted text-uppercase">Served by</div>
            <div>{{ $sale->served_by_name ?? '—' }}</div>
        </div>
        <div class="col-md-3">
            <div class="small text-muted text-uppercase">Sale kind</div>
            <div>{{ str_replace('_', ' ', $sale->sale_kind) }}</div>
        </div>
        @if(!empty($hasDocumentServices))
        <div class="col-md-3">
            <div class="small text-muted text-uppercase">Current reading</div>
            <div class="fw-semibold">
                @if(!empty($sale->meter_reading))
                    {{ \App\Support\GarageMeterReading::format($sale->meter_reading) }} km
                @else
                    —
                @endif
            </div>
        </div>
        <div class="col-md-3">
            <div class="small text-muted text-uppercase">Next reading</div>
            <div class="fw-semibold">
                @if(!empty($sale->next_meter_reading))
                    {{ \App\Support\GarageMeterReading::format($sale->next_meter_reading) }} km
                @else
                    —
                @endif
            </div>
        </div>
        <div class="col-md-3">
            <div class="small text-muted text-uppercase">Next service date</div>
            <div class="fw-semibold">
                @if(!empty($sale->next_service_date))
                    {{ \Carbon\Carbon::parse($sale->next_service_date)->format('d M Y') }}
                @else
                    —
                @endif
            </div>
        </div>
        @endif
        @if($sale->comments)
            <div class="col-12">
                <div class="small text-muted text-uppercase">Comments</div>
                <div>{{ $sale->comments }}</div>
            </div>
        @endif
    </div>

    @include('garage.partials.vehicle-mileage-history', [
        'mileageTimeline' => $mileageTimeline ?? collect(),
        'vehicleOdometer' => $vehicleOdometer ?? null,
    ])

    <h2 class="h6 text-uppercase text-muted mb-2">Lines</h2>
    <div class="table-responsive border rounded bg-white mb-3">
        <table class="table table-sm mb-0">
            <thead class="table-light">
                <tr>
                    <th>Code</th>
                    <th>Product</th>
                    <th class="text-end">Qty</th>
                    <th class="text-end">Price</th>
                    <th class="text-end">Tax</th>
                    <th class="text-end">Line total</th>
                </tr>
            </thead>
            <tbody>
                @foreach($items as $row)
                    <tr>
                        <td class="font-monospace small">{{ $row->inventory_code_snapshot ?? '—' }}</td>
                        <td>{{ $row->product_name ?? $row->description ?? '—' }}</td>
                        <td class="text-end">{{ $row->quantity }}</td>
                        <td class="text-end">PKR {{ number_format((float) $row->unit_price, 2) }}</td>
                        <td class="text-end small">PKR {{ number_format((float) $row->tax_amount, 2) }}</td>
                        <td class="text-end fw-semibold">PKR {{ number_format((float) $row->line_total, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    @if(!empty($services) && count($services))
        <h2 class="h6 text-uppercase text-muted mb-2">Services</h2>
        <div class="table-responsive border rounded bg-white mb-3">
            <table class="table table-sm mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Service</th>
                        <th class="text-end">Qty</th>
                        <th class="text-end">Rate</th>
                        <th class="text-end">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($services as $s)
                        @php
                            $svcLine = (float) ($s->line_total ?? 0);
                            if ($svcLine <= 0) $svcLine = (float) ($s->hours ?? 0) * (float) ($s->rate ?? 0);
                        @endphp
                        <tr>
                            <td>{{ $s->service_name ?? $s->title ?? 'Service' }}</td>
                            <td class="text-end">{{ number_format((float) ($s->hours ?? 0), 0) }}</td>
                            <td class="text-end">PKR {{ number_format((float) ($s->rate ?? 0), 2) }}</td>
                            <td class="text-end fw-semibold">PKR {{ number_format((float) $svcLine, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

    <div class="row justify-content-end">
        <div class="col-md-4">
            <table class="table table-sm">
                <tr><td>Parts total</td><td class="text-end">PKR {{ number_format((float) $partsSub, 2) }}</td></tr>
                <tr><td>Services total</td><td class="text-end">PKR {{ number_format((float) $servicesSub, 2) }}</td></tr>
                <tr><td>Subtotal</td><td class="text-end">PKR {{ number_format((float) $subBefore, 2) }}</td></tr>
                <tr><td>Discount (applied)</td><td class="text-end">PKR {{ number_format((float) $discApplied, 2) }}</td></tr>
                <tr><td>After discount</td><td class="text-end">PKR {{ number_format((float) $after, 2) }}</td></tr>
                <tr><td>Tax</td><td class="text-end">PKR {{ number_format((float) ($sale->tax_amount ?? $tax), 2) }}</td></tr>
                <tr><td>Freight</td><td class="text-end">PKR {{ number_format((float) $sale->freight_amount, 2) }}</td></tr>
                @php
                    $roAdvance = (float) ($sale->repair_order_advance_amount ?? 0);
                    if ($roAdvance <= 0 && !empty($sale->garage_repair_order_id) && \Illuminate\Support\Facades\Schema::hasColumn('garage_repair_orders', 'advance_amount')) {
                        $roAdvance = (float) (\Illuminate\Support\Facades\DB::table('garage_repair_orders')->where('id', (int) $sale->garage_repair_order_id)->value('advance_amount') ?? 0);
                    }
                    $paidOnSaleShow = (float) ($sale->amount_paid ?? 0);
                    $roBalance = max(0, (float) $sale->grand_total - $roAdvance - $paidOnSaleShow);
                @endphp
                @if($roAdvance > 0)
                <tr><td class="text-muted">Order advance (receipt)</td><td class="text-end text-muted">PKR {{ number_format($roAdvance, 2) }}</td></tr>
                @endif
                @if($paidOnSaleShow > 0)
                <tr><td class="text-muted">Paid on sale (receipts)</td><td class="text-end text-muted">PKR {{ number_format($paidOnSaleShow, 2) }}</td></tr>
                @endif
                @if($roAdvance > 0 || $paidOnSaleShow > 0)
                <tr><td class="text-muted">Balance due</td><td class="text-end text-muted">PKR {{ number_format($roBalance, 2) }}</td></tr>
                @endif
                <tr class="fw-bold fs-5 text-success"><td>Total</td><td class="text-end">PKR {{ number_format((float) $sale->grand_total, 2) }}</td></tr>
            </table>
        </div>
    </div>

    @if(!empty($saleReturns) && $saleReturns->count())
    <div class="card border-0 shadow-sm mt-3">
        <div class="card-header bg-white fw-semibold">Sale returns</div>
        <div class="table-responsive">
            <table class="table table-sm mb-0">
                <thead class="table-light">
                    <tr><th>Return #</th><th>Date</th><th class="text-end">Amount</th><th></th></tr>
                </thead>
                <tbody>
                    @foreach($saleReturns as $sr)
                    <tr>
                        <td class="font-monospace">{{ $sr->return_number }}</td>
                        <td>{{ $sr->return_date }}</td>
                        <td class="text-end">{{ number_format($sr->total_amount, 2) }}</td>
                        <td class="text-end"><a href="{{ route('garage.sale-returns.show', $sr->id) }}" class="btn btn-sm btn-outline-primary py-0">View</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    @push('styles')
        <style>
            /* Sale vouchers modal: cleaner + larger without feeling cramped */
            .svm-dialog { max-width: min(980px, 94vw) !important; }
            .svm-content { border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 14px 44px rgba(15, 23, 42, 0.18) !important; }
            .svm-header { background: var(--garage-header-bg) !important; color: #fff !important; border-bottom: 0 !important; }
            .svm-title { font-weight: 900 !important; letter-spacing: -0.02em !important; font-size: .92rem !important; line-height: 1.12 !important; }
            .svm-sub { font-size: .72rem !important; color: #64748b !important; }
            .svm-body { padding: 0 !important; height: min(62vh, 620px) !important; background: #fff !important; overflow: hidden !important; }
            .svm-frame { border: 0 !important; width: 100% !important; height: 100% !important; background: #fff !important; }
            .svm-footer { background: #fff !important; border-top: 1px solid #eef2f7 !important; }
            /* tighter spacing */
            .modal-header.svm-header { padding: .45rem .6rem !important; }
            .modal-footer.svm-footer { padding: .4rem .6rem !important; }
            @media (max-width: 576px) {
                .svm-dialog { max-width: 96vw !important; }
                .svm-body { height: 74vh !important; }
            }
        </style>
    @endpush

    <div class="modal fade" id="saleVouchersModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered svm-dialog">
            <div class="modal-content svm-content">
                <div class="modal-header svm-header">
                    <div>
                        <div class="modal-title svm-title" id="saleVouchersModalTitle">Sale vouchers</div>
                        <div class="svm-sub" id="saleVouchersModalSub">View linked journal/receipt vouchers</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body svm-body">
                    <iframe id="saleVouchersFrame" src="about:blank" class="svm-frame"></iframe>
                </div>
                <div class="modal-footer svm-footer">
                    <a id="saleVouchersOpenFull" class="btn btn-sm btn-outline-secondary" href="#" target="_blank" rel="noopener">Open full page</a>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="saleReceiptModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered svm-dialog">
            <div class="modal-content svm-content">
                <div class="modal-header svm-header">
                    <div>
                        <div class="modal-title svm-title" id="saleReceiptModalTitle">Make receipt</div>
                        <div class="svm-sub" id="saleReceiptModalSub">Record payment (cash/bank/online) and post receipt voucher</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body svm-body">
                    <iframe id="saleReceiptFrame" src="about:blank" class="svm-frame"></iframe>
                </div>
                <div class="modal-footer svm-footer">
                    <a id="saleReceiptOpenFull" class="btn btn-sm btn-outline-secondary" href="#" target="_blank" rel="noopener">Open full page</a>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function () {
        var modal = document.getElementById('saleVouchersModal');
        if (!modal) return;

        modal.addEventListener('show.bs.modal', function (ev) {
            var btn = ev.relatedTarget;
            if (!btn) return;
            var saleId = btn.getAttribute('data-sale-id');
            var saleNo = btn.getAttribute('data-sale-no') || '';
            var url = "{{ route('garage.sales.vouchers', '__ID__') }}".replace('__ID__', saleId) + '?embed=1';

            var title = document.getElementById('saleVouchersModalTitle');
            if (title) title.textContent = 'Sale vouchers · ' + saleNo;
            var sub = document.getElementById('saleVouchersModalSub');
            if (sub) sub.textContent = 'Preview vouchers for ' + saleNo;

            var frame = document.getElementById('saleVouchersFrame');
            if (frame) frame.src = url;

            var full = document.getElementById('saleVouchersOpenFull');
            if (full) full.href = "{{ route('garage.sales.vouchers', '__ID__') }}".replace('__ID__', saleId);
        });

        modal.addEventListener('hidden.bs.modal', function () {
            var frame = document.getElementById('saleVouchersFrame');
            if (frame) frame.src = 'about:blank';
        });
    })();
</script>
<script>
    (function () {
        var modal = document.getElementById('saleReceiptModal');
        if (!modal) return;

        modal.addEventListener('show.bs.modal', function (ev) {
            var btn = ev.relatedTarget;
            if (!btn) return;
            var saleId = btn.getAttribute('data-sale-id');
            var saleNo = btn.getAttribute('data-sale-no') || '';
            var url = "{{ route('garage.sales.receipt.form', '__ID__') }}".replace('__ID__', saleId) + '?embed=1';

            var title = document.getElementById('saleReceiptModalTitle');
            if (title) title.textContent = 'Make receipt · ' + saleNo;

            var frame = document.getElementById('saleReceiptFrame');
            if (frame) frame.src = url;

            var full = document.getElementById('saleReceiptOpenFull');
            if (full) full.href = "{{ route('garage.sales.receipt.form', '__ID__') }}".replace('__ID__', saleId);
        });

        modal.addEventListener('hidden.bs.modal', function () {
            var frame = document.getElementById('saleReceiptFrame');
            if (frame) frame.src = 'about:blank';
        });

        window.addEventListener('message', function (e) {
            if (!e || !e.data) return;
            if (e.data.type === 'close-receipt-modal') {
                try {
                    var inst = window.bootstrap && window.bootstrap.Modal ? window.bootstrap.Modal.getInstance(modal) : null;
                    if (inst) inst.hide();
                } catch (err) {}
            }
        });
    })();
</script>
@endpush