@extends('layouts.layout-horizontal')

@section('title', 'View Purchase Bill')

@section('css')
<style>
    /* Page tint — purchases (light amber) */
    body, .pc-container, .pc-content { background: #ffe4bf !important; }
</style>
@endsection

@section('content')
    <div class="py-3">

        {{-- Header --}}
        <div class="card mb-3">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="mb-0">View Purchase Bill</h5>
                <div class="d-flex align-items-center gap-2">
                    @if($purchase->mode === 'cash' && $purchase->items->count() > 0)
                        <button type="button" class="btn btn-info btn-sm" id="transferBtn" title="Transfer to Bill Company">
                            <i class="ph-duotone ph-arrow-square-right"></i> Transfer
                        </button>
                    @endif
                    <a href="{{ route('purchase.index') }}" class="btn btn-secondary">Back</a>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="detail-meta">
                        <h6 class="text-muted">Party</h6>
                        <p class="mb-2">{{ $purchase->party->name ?? '—' }}</p>

                        <h6 class="text-muted">Invoice Date</h6>
                        <p class="mb-0">{{ $purchase->invoice_date->format('d-M-Y') }}</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-meta">
                        <h6 class="text-muted">Bill No</h6>
                        <p class="mb-2">{{ $purchase->bill_no ?: '—' }}</p>

                        <h6 class="text-muted">GST Number</h6>
                        <p class="mb-0">{{ $purchase->party->gst_number ?? '—' }}</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-meta">
                        <h6 class="text-muted">Mode</h6>
                        <p>
                            <span class="badge {{ $purchase->mode === 'cash' ? 'bg-success' : 'bg-secondary' }}">
                                {{ ucfirst($purchase->mode) }}
                            </span>
                        </p>
                        <h6 class="text-muted">Created At</h6>
                        <p class="mb-0">{{ $purchase->created_at->format('d-M-Y h:i A') }}</p>
                        </div>
                    </div>
                </div>
                @if($purchase->mode === 'cash' && ($purchase->foreign_party_name || $purchase->foreign_invoice_no || $purchase->shipping_party_name || $purchase->shipping_invoice_no || $purchase->foreign_currency || $purchase->conversion_rate || $purchase->overseas_narration))
                <hr />
                <div class="row g-3">
                    <div class="col-md-3"><h6 class="text-muted">Foreign Party</h6><p class="mb-0">{{ $purchase->foreign_party_name ?: '-' }}</p></div>
                    <div class="col-md-2"><h6 class="text-muted">Foreign Invoice</h6><p class="mb-0">{{ $purchase->foreign_invoice_no ?: '-' }}</p></div>
                    <div class="col-md-3"><h6 class="text-muted">Shipping Party</h6><p class="mb-0">{{ $purchase->shipping_party_name ?: '-' }}</p></div>
                    <div class="col-md-2"><h6 class="text-muted">Shipping Invoice</h6><p class="mb-0">{{ $purchase->shipping_invoice_no ?: '-' }}</p></div>
                    <div class="col-md-2"><h6 class="text-muted">Currency / Conversion</h6><p class="mb-0">{{ $purchase->foreign_currency ?: '-' }} {{ $purchase->conversion_rate ? '@ ' . indian_number($purchase->conversion_rate, 6) : '' }}</p></div>
                    @if($purchase->overseas_narration)
                        <div class="col-12"><h6 class="text-muted">Overseas Narration</h6><p class="mb-0">{{ $purchase->overseas_narration }}</p></div>
                    @endif
                </div>
                @endif
                <hr />
                <div>
                    <form action="{{ route('purchase.destroy', $purchase->id) }}" method="POST" class="d-inline"
                        onsubmit="return confirm('Delete this purchase invoice? This cannot be undone.')">
                        @csrf @method('DELETE')
                        <button class="btn btn-sm btn-danger">
                            <i class="ph-duotone ph-trash"></i> Delete
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- Items Table --}}
        <div class="card mb-3">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="mb-0">Items</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-sm align-middle mb-0">
                        @php
                            $hasForeignRates = $purchase->items->contains(fn($item) => $item->foreign_rate || $item->foreign_conversion_rate);
                            $showTaxColumns = $purchase->mode !== 'cash';
                        @endphp
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Product</th>
                                <th>HSN</th>
                                <th>Unit</th>
                                <th class="text-end">Qty</th>
                                @if($hasForeignRates)
                                    <th class="text-end">Fgn Rate</th>
                                    <th class="text-end">Conv</th>
                                @endif
                                <th class="text-end">Rate</th>
                                @if($showTaxColumns)
                                    <th class="text-end">Tax %</th>
                                @endif
                                <th class="text-end">Total Excl. Tax</th>
                                @if($showTaxColumns)
                                    <th class="text-end">Tax</th>
                                @endif
                                <th class="text-end">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($purchase->items as $item)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $item->product->name ?? '—' }}</td>
                                    <td>{{ $item->hsn ?? '—' }}</td>
                                    <td>{{ $item->unit ?? '—' }}</td>
                                    <td class="text-end">{{ indian_number($item->qty, 2) }}</td>
                                    @if($hasForeignRates)
                                        <td class="text-end">{{ $item->foreign_rate ? indian_number($item->foreign_rate, 4) : '-' }}</td>
                                        <td class="text-end">{{ $item->foreign_conversion_rate ? indian_number($item->foreign_conversion_rate, 6) : '-' }}</td>
                                    @endif
                                    <td class="text-end">{{ indian_number($item->rate, 2) }}</td>
                                    @if($showTaxColumns)
                                        <td class="text-end">{{ indian_number($item->tax_percent, 2) }}</td>
                                    @endif
                                    <td class="text-end">{{ indian_number($item->line_amount, 2) }}</td>
                                    @if($showTaxColumns)
                                        <td class="text-end">{{ indian_number($item->line_tax_amount, 2) }}</td>
                                    @endif
                                    <td class="text-end fw-bold">{{ indian_number($item->line_total, 2) }}</td>
                                </tr>
                            @endforeach
                            <tr class="table-light">
                                <td colspan="{{ $hasForeignRates ? ($showTaxColumns ? 12 : 10) : ($showTaxColumns ? 10 : 8) }}" class="text-center text-muted fw-semibold">Table End</td>
                            </tr>
                        </tbody>
                        <tfoot class="table-light">
                            <tr>
                                <th colspan="{{ $hasForeignRates ? ($showTaxColumns ? 9 : 8) : ($showTaxColumns ? 7 : 6) }}" class="text-end">Totals:</th>
                                <th class="text-end">{{ indian_number($purchase->amount_total, 2) }}</th>
                                @if($showTaxColumns)
                                    <th class="text-end">{{ indian_number($purchase->tax_total, 2) }}</th>
                                @endif
                                <th class="text-end fw-bold">{{ indian_number($purchase->grand_total, 2) }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        {{-- Summary --}}
        <div class="card">
            <div class="card-body text-end">
                <div class="row justify-content-end">
                    <div class="col-md-4">
                        <table class="table table-borderless mb-0">
                            <tr>
                                <th>Total Excl. Tax:</th>
                                <td class="text-end">{{ indian_number($purchase->amount_total, 2) }}</td>
                            </tr>
                            @if($showTaxColumns)
                            <tr>
                                <th>Tax Total:</th>
                                <td class="text-end">{{ indian_number($purchase->tax_total, 2) }}</td>
                            </tr>
                            @endif
                            @if($purchase->pf_amount > 0)
                            <tr>
                                <th>P&F Amount:</th>
                                <td class="text-end">{{ indian_number($purchase->pf_amount, 2) }}</td>
                            </tr>
                            @if($showTaxColumns)
                            <tr>
                                <th>P&F Tax ({{ indian_number($purchase->pf_tax_percent, 2) }}%):</th>
                                <td class="text-end">{{ indian_number($purchase->pf_tax_amount, 2) }}</td>
                            </tr>
                            @endif
                            @endif
                            <tr>
                                <th>Roundoff:</th>
                                <td class="text-end">{{ indian_number($purchase->roundoff, 2) }}</td>
                            </tr>
                            <tr class="table-active fw-bold">
                                <th>Grand Total:</th>
                                <td class="text-end">{{ indian_number($purchase->grand_total, 2) }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
@if($purchase->mode === 'cash' && $purchase->items->count() > 0)
<div class="modal fade" id="transferModal" tabindex="-1">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header py-2 px-3">
                <h6 class="modal-title mb-0">Transfer - {{ $purchase->bill_no ?: 'Purchase #' . $purchase->id }}</h6>
                <div class="d-flex align-items-center gap-2">
                    <select id="tf_company" class="form-select form-select-sm" style="width:220px">
                        <option value="">Loading...</option>
                    </select>
                    <button type="button" class="btn btn-primary btn-sm" id="tf_submit">
                        <i class="ph-duotone ph-arrow-square-right me-1"></i> Transfer
                    </button>
                    <span id="tf_status" class="small"></span>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
            </div>
            <div class="modal-body p-0" style="overflow-y:auto">
                <table class="table table-striped table-hover align-middle mb-0" style="font-size:.8rem;--bs-table-cell-padding-y:2px;--bs-table-cell-padding-x:6px">
                    <thead class="table-light" style="position:sticky;top:0;z-index:1">
                        <tr style="line-height:1">
                            <th style="width:35px;padding:6px 8px" class="ps-3"><input type="checkbox" id="tf_check_all" style="width:14px;height:14px" checked></th>
                            <th class="text-center" style="width:45px;padding:6px 8px">Sr</th>
                            <th style="padding:6px 8px">Product</th>
                            <th class="text-end" style="width:80px;padding:6px 8px">Avl</th>
                            <th style="width:100px;padding:6px 8px">Qty</th>
                            <th class="text-end" style="width:80px;padding:6px 8px">Rate</th>
                        </tr>
                    </thead>
                    <tbody id="tf_items"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
(function() {
    const createUrl = @json(route('purchase.transfer.create', $purchase->id));
    const prefillUrl = @json(route('purchase.transfer.prefill', $purchase->id));
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    const btn = document.getElementById('transferBtn');
    if (!btn) return;

    const modal = new bootstrap.Modal(document.getElementById('transferModal'));
    const compSel = document.getElementById('tf_company');
    const tbody = document.getElementById('tf_items');
    const submitBtn = document.getElementById('tf_submit');
    const statusEl = document.getElementById('tf_status');
    const checkAll = document.getElementById('tf_check_all');
    let items = [];

    btn.addEventListener('click', async function() {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Loading...</td></tr>';
        modal.show();

        const res = await fetch(createUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
        const data = await res.json();
        items = data.items || [];

        compSel.innerHTML = '<option value="">-- Select Company --</option>';
        (data.companies || []).forEach(c => {
            compSel.innerHTML += `<option value="${c.id}">${c.name}</option>`;
        });

        tbody.innerHTML = '';
        items.forEach((item, index) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td class="ps-3" style="padding:3px 8px"><input type="checkbox" class="tf-check" style="width:14px;height:14px" data-id="${item.id}" checked></td>
                <td class="text-center text-muted" style="padding:3px 8px;font-size:.8rem">${index + 1}</td>
                <td style="padding:3px 8px;font-size:.8rem"><strong>${item.name}</strong> <span class="text-muted" style="font-size:.72rem">${item.product_code || ''}</span></td>
                <td class="text-end" style="padding:3px 8px;font-size:.8rem">${item.qty}</td>
                <td style="padding:3px 8px"><input type="number" step="0.001" min="0.001" max="${item.qty}" value="${item.qty}" class="form-control form-control-sm tf-qty" style="font-size:.78rem;padding:1px 4px;height:22px" data-id="${item.id}"></td>
                <td class="text-end" style="padding:3px 8px;font-size:.8rem">${item.rate}</td>
            `;
            tbody.appendChild(tr);
        });
        tbody.insertAdjacentHTML('beforeend', '<tr class="table-light"><td colspan="6" class="text-center text-muted fw-semibold">Table End</td></tr>');
    });

    checkAll.addEventListener('change', function() {
        tbody.querySelectorAll('.tf-check').forEach(c => c.checked = this.checked);
    });

    submitBtn.addEventListener('click', function() {
        const targetCompany = compSel.value;
        if (!targetCompany) {
            statusEl.textContent = 'Select a company';
            statusEl.className = 'me-auto small text-danger';
            return;
        }

        const selected = [];
        tbody.querySelectorAll('.tf-check:checked').forEach(cb => {
            const id = cb.dataset.id;
            const qty = parseFloat(tbody.querySelector(`.tf-qty[data-id="${id}"]`).value);
            if (qty > 0) selected.push({ purchase_item_id: id, qty });
        });

        if (!selected.length) {
            statusEl.textContent = 'Select at least one item';
            statusEl.className = 'me-auto small text-danger';
            return;
        }

        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="ph-duotone ph-spinner spin"></i> Opening...';
        statusEl.textContent = '';

        const form = document.createElement('form');
        form.method = 'POST';
        form.action = prefillUrl;

        const csrfIn = document.createElement('input');
        csrfIn.type = 'hidden';
        csrfIn.name = '_token';
        csrfIn.value = csrf;
        form.appendChild(csrfIn);

        const targetIn = document.createElement('input');
        targetIn.type = 'hidden';
        targetIn.name = 'target_company_id';
        targetIn.value = targetCompany;
        form.appendChild(targetIn);

        selected.forEach((it, i) => {
            const idIn = document.createElement('input');
            idIn.type = 'hidden';
            idIn.name = `items[${i}][purchase_item_id]`;
            idIn.value = it.purchase_item_id;
            form.appendChild(idIn);

            const qtyIn = document.createElement('input');
            qtyIn.type = 'hidden';
            qtyIn.name = `items[${i}][qty]`;
            qtyIn.value = it.qty;
            form.appendChild(qtyIn);
        });

        document.body.appendChild(form);
        form.submit();
    });

    if (window.location.hash === '#transfer') btn.click();
})();
</script>
@endif
@endpush