@extends('garage.layouts.app')

@section('title', 'Sale vouchers')

@section('content')
@php($embed = request()->boolean('embed'))
@php($firstVoucherId = ($vouchers ?? collect())->first()->id ?? null)
<div class="container-fluid px-2 px-lg-3 py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
        <div>
            <h1 class="h5 mb-1"><i class="bi bi-link-45deg me-2 text-primary"></i>Sale vouchers</h1>
            <div class="text-muted small">Sale: <span class="font-monospace fw-semibold">{{ $sale->sale_number }}</span> · {{ $sale->sale_date }}</div>
        </div>
        @if(!$embed)
            <div class="d-flex gap-2">
                <a href="{{ route('garage.sales.index') }}" class="btn btn-sm btn-outline-secondary">History</a>
                <a href="{{ route('garage.sales.show', $sale->id) }}" class="btn btn-sm btn-outline-secondary">Sale detail</a>
                @if(($sale->sale_kind ?? null) === 'customer_sale' && in_array(($sale->status ?? null), ['held','completed'], true) && ($sale->payment_status ?? 'unpaid') !== 'paid' && empty($sale->receipt_voucher_id))
                    <a href="{{ route('garage.sales.receipt.form', $sale->id) }}" class="btn btn-sm btn-outline-success">Make receipt</a>
                @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>
        @endif
    </div>

    @if($embed)
        <style>
            .sv-embed { display:grid; grid-template-columns: 360px 1fr; gap:.75rem; align-items: stretch; }
            @media (max-width: 992px) { .sv-embed { grid-template-columns: 1fr; } }
            .sv-list { border:1px solid #e2e8f0; border-radius: 12px; overflow:hidden; background:#fff; box-shadow: 0 8px 24px rgba(15,23,42,0.06); }
            .sv-list-hd { position: sticky; top: 0; z-index: 2; background: #f8fafc; border-bottom: 1px solid #eef2f7; padding: .6rem .7rem; }
            .sv-list-hd .t { font-weight: 900; letter-spacing: -0.02em; font-size: .9rem; }
            .sv-search { width: 100%; border: 1px solid #e2e8f0; border-radius: 10px; padding: .4rem .55rem; font-size: .85rem; }
            .sv-search:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12); }
            .sv-list-bd { max-height: 58vh; overflow: auto; }

            .sv-view { border:1px solid #e2e8f0; border-radius: 12px; overflow:hidden; background:#fff; box-shadow: 0 8px 24px rgba(15,23,42,0.06); min-height: 520px; }
            .sv-row { display:flex; justify-content:space-between; gap:.6rem; padding:.45rem .6rem; border-bottom:1px solid #f1f5f9; text-decoration:none; color:inherit; }
            .sv-row:hover { background:#f8fafc; }
            .sv-row.active { background: rgba(var(--bs-primary-rgb), .08); }
            .sv-no { font-family: ui-monospace, monospace; font-weight: 900; color:#0f172a; font-size:.82rem; }
            .sv-meta { font-size:.74rem; color:#64748b; }
            .sv-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.08rem .45rem; border-radius:999px; border:1px solid #e2e8f0; background:#fff; font-size:.68rem; font-weight:800; color:#334155; }
        </style>
        <div class="sv-embed">
            <div class="sv-list">
                <div class="sv-list-hd">
                    <div class="d-flex align-items-center justify-content-between gap-2">
                        <div class="t">Vouchers</div>
                        <span class="sv-chip">{{ ($vouchers ?? collect())->count() }} total</span>
                    </div>
                    <div class="mt-2">
                        <input class="sv-search" id="svSearch" type="search" placeholder="Search voucher no / type / status…">
                    </div>
                </div>
                <div class="sv-list-bd" id="svList">
                    @forelse($vouchers as $v)
                        <a href="#"
                           class="sv-row js-sv-row {{ $firstVoucherId === $v->id ? 'active' : '' }}"
                           data-voucher-id="{{ $v->id }}"
                           data-search="{{ strtolower(trim(($v->voucher_no ?? '').' '.($v->voucher_type ?? '').' '.($v->status ?? ''))) }}">
                            <div>
                                <div class="sv-no">{{ $v->voucher_no }}</div>
                                <div class="sv-meta">{{ $v->voucher_date }} · {{ $v->voucher_type }} · {{ $v->status }}</div>
                            </div>
                            <div class="text-end sv-meta">PKR {{ number_format((float) $v->total_amount, 2) }}</div>
                        </a>
                    @empty
                        <div class="p-3 text-muted small">No vouchers linked to this sale.</div>
                    @endforelse
                </div>
            </div>
            <div class="sv-view">
                <iframe id="svVoucherFrame" src="{{ $firstVoucherId ? route('garage.vouchers.show', $firstVoucherId).'?embed=1' : 'about:blank' }}" style="border:0;width:100%;height:100%;min-height:520px;"></iframe>
            </div>
        </div>

        <script>
            (function () {
                var frame = document.getElementById('svVoucherFrame');
                if (!frame) return;

                var search = document.getElementById('svSearch');
                var list = document.getElementById('svList');
                if (search && list) {
                    search.addEventListener('input', function () {
                        var q = (search.value || '').toLowerCase().trim();
                        list.querySelectorAll('.js-sv-row').forEach(function (row) {
                            var hay = (row.getAttribute('data-search') || '');
                            row.style.display = (q === '' || hay.indexOf(q) !== -1) ? '' : 'none';
                        });
                    });
                }

                document.querySelectorAll('.js-sv-row').forEach(function (row) {
                    row.addEventListener('click', function (e) {
                        e.preventDefault();
                        document.querySelectorAll('.js-sv-row').forEach(function (r) { r.classList.remove('active'); });
                        row.classList.add('active');
                        var id = row.getAttribute('data-voucher-id');
                        frame.src = "{{ route('garage.vouchers.show', '__ID__') }}".replace('__ID__', id) + '?embed=1';
                    });
                });
            })();
        </script>
    @else
        <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>Voucher</th>
                        <th>Date</th>
                        <th>Type</th>
                        @if(Schema::hasColumn('garage_sale_vouchers', 'purpose'))
                        <th>Link</th>
                        @endif
                        <th>Status</th>
                        <th class="text-end">Amount</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($vouchers as $v)
                        <tr>
                            <td class="font-monospace fw-semibold">{{ $v->voucher_no }}</td>
                            <td class="text-muted">{{ $v->voucher_date }}</td>
                            <td><span class="badge bg-secondary">{{ $v->voucher_type }}</span></td>
                            @if(Schema::hasColumn('garage_sale_vouchers', 'purpose'))
                            <td>
                                @if(($v->purpose ?? 'sale') === 'advance')
                                    <span class="badge bg-info text-dark">Order advance</span>
                                @elseif(($v->purpose ?? '') === 'receipt')
                                    <span class="badge bg-success">Sale receipt</span>
                                @else
                                    <span class="badge bg-light text-dark border">Sale journal</span>
                                @endif
                            </td>
                            @endif
                            <td><span class="badge bg-{{ $v->status === 'posted' ? 'success' : ($v->status === 'draft' ? 'warning' : 'danger') }}">{{ $v->status }}</span></td>
                            <td class="text-end">PKR {{ number_format((float) $v->total_amount, 2) }}</td>
                            <td class="text-end">
                                <a class="btn btn-sm btn-outline-primary" href="{{ route('garage.vouchers.show', $v->id) }}">Open</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="{{ Schema::hasColumn('garage_sale_vouchers', 'purpose') ? 7 : 6 }}" class="text-center text-muted py-4">No vouchers linked to this sale.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection