@extends('garage.layouts.app')

@section('title', 'Sales')

@section('content')
<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div>
            <h1 class="h4 mb-0"><i class="bi bi-shop-window me-2 text-success"></i>Sales</h1>
            <p class="text-muted small mb-0">Counter and customer sales</p>
        </div>
        <div class="d-flex gap-2">
            @include('garage.partials.trash-link', ['trashType' => 'sales'])
            <a href="{{ route('garage.sales.create') }}" class="btn btn-success"><i class="bi bi-plus-lg"></i> New sale</a>
        </div>
    </div>

    <form method="GET" action="{{ route('garage.sales.index') }}" class="row g-2 mb-3">
        <div class="col-auto flex-grow-1" style="min-width:12rem;">
            <input type="search" name="search" value="{{ $search }}" class="form-control form-control-sm" placeholder="Sale no. or customer…">
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-sm btn-outline-secondary">Search</button>
        </div>
    </form>

    <div class="table-responsive border rounded bg-white">
        <table class="table table-sm table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Sale no.</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Vehicle</th>
                    <th class="text-end">Meter (km)</th>
                    <th>Served by</th>
                    <th class="text-end">Subtotal</th>
                    <th class="text-end">Discount</th>
                    <th class="text-end">After discount</th>
                    <th class="text-end">Grand total</th>
                    <th>Status</th>
                    <th>Receipt</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($sales as $s)
                    @php
                        $subBefore = (float) ($s->subtotal_calc ?? 0);
                        $after = (float) ($s->grand_total ?? 0) - (float) ($s->tax_amount ?? 0) - (float) ($s->freight_amount ?? 0);
                        if ($after < 0) $after = (float) ($s->subtotal ?? 0);

                        // Always derive applied header discount from the totals we show.
                        $discApplied = max(0, $subBefore - $after);
                    @endphp
                    <tr>
                        <td class="font-monospace fw-semibold">{{ $s->sale_number }}</td>
                        <td>{{ $s->sale_date }}</td>
                        <td>
                            @if(!empty($s->customer_ledger_id))
                                <a href="{{ route('garage.customers.show', $s->customer_ledger_id) }}"
                                   class="text-decoration-none">
                                    {{ $s->customer_name ?? '—' }}
                                </a>
                            @else
                                {{ $s->customer_name ?? '—' }}
                            @endif
                        </td>
                        <td class="small">
                            @if(!empty($s->vehicle_registration))
                                {{ $s->vehicle_registration }}
                                @if($s->vehicle_make || $s->vehicle_model)
                                    <span class="text-muted">({{ trim(($s->vehicle_make ?? '').' '.($s->vehicle_model ?? '')) }})</span>
                                @endif
                            @else
                                —
                            @endif
                        </td>
                        @include('garage.partials.index-meter-reading-cell', ['meter' => $s->meter_reading ?? null])
                        <td class="small text-muted">{{ $s->served_by_name ?? '—' }}</td>
                        <td class="text-end">PKR {{ number_format((float) $subBefore, 2) }}</td>
                        <td class="text-end">
                            PKR {{ number_format((float) $discApplied, 2) }}
                            <div class="text-muted small">{{ $s->discount_type ?? 'fixed' }}</div>
                        </td>
                        <td class="text-end">PKR {{ number_format((float) $after, 2) }}</td>
                        <td class="text-end fw-semibold">PKR {{ number_format((float) $s->grand_total, 2) }}</td>
                        <td><span class="badge bg-secondary">{{ $s->status }}</span></td>
                        <td class="text-nowrap">
                            @if(($s->sale_kind ?? null) !== 'customer_sale' || ($s->status ?? null) !== 'completed')
                                <span class="text-muted small">—</span>
                            @elseif(!empty($s->receipt_voucher_id) || (($s->payment_status ?? 'unpaid') === 'paid'))
                                <span class="badge bg-success-subtle text-success border border-success-subtle">Done</span>
                            @else
                                <span class="badge bg-warning-subtle text-warning border border-warning-subtle">Pending</span>
                            @endif
                        </td>
                        <td class="text-nowrap">
                            <a href="{{ route('garage.sales.show', $s->id) }}" class="btn btn-sm btn-outline-primary">View</a>
                            <a href="{{ route('garage.sales.print.thermal', $s->id) }}" target="_blank" class="btn btn-sm btn-outline-dark">Print Thermal</a>
                            <a href="{{ route('garage.sales.print.a4', $s->id) }}" target="_blank" class="btn btn-sm btn-outline-dark">Print A4</a>
                            @if(!empty($s->journal_voucher_id) || !empty($s->receipt_voucher_id))
                                <button type="button"
                                        class="btn btn-sm btn-outline-primary"
                                        data-bs-toggle="modal"
                                        data-bs-target="#saleVouchersModal"
                                        data-sale-id="{{ $s->id }}"
                                        data-sale-no="{{ $s->sale_number }}">
                                    Vouchers
                                </button>
                            @endif
                            @if(in_array($s->status, ['draft','held']))
                                <a href="{{ route('garage.sales.edit', $s->id) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
                            @else
                                <button type="button" class="btn btn-sm btn-outline-secondary" disabled title="Only draft/held sales can be edited">Edit</button>
                            @endif
                            @if(($s->sale_kind ?? null) === 'customer_sale' && ($s->payment_status ?? 'unpaid') !== 'paid')
                                @if(in_array(($s->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="{{ $s->id }}"
                                            data-sale-no="{{ $s->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
                            @endif
                            <form action="{{ route('garage.sales.destroy', $s->id) }}" method="POST" class="d-inline" 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>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="13" class="text-center text-muted py-4">No sales yet. <a href="{{ route('garage.sales.create') }}">Create a sale</a>.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($sales->hasPages())
        <div class="mt-3">{{ $sales->withQueryString()->links() }}</div>
    @endif

    @push('styles')
        <style>
            .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; }
            .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 sub = document.getElementById('saleReceiptModalSub');
            if (sub) sub.textContent = 'Record payment and post receipt voucher for ' + 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