@extends('layouts.layout-horizontal')

@section('title', 'Record Sale Receipt')

@section('content')
    <div class="row">
        {{-- Left: Receipt Form --}}
        <div class="col-md-5">
            <div class="card">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Record Sale Receipt</h5>
                    <div>
                        <a href="{{ route('sale-receipts.index') }}" class="btn btn-secondary btn-sm"><i class="ph-duotone ph-arrow-left me-1"></i> Back</a>
                    </div>
                </div>
                <form action="{{ route('sale-receipts.store') }}" method="POST">
                    @csrf
                    @if(request('from_ledger'))
                        <input type="hidden" name="from_ledger" value="1">
                    @endif
                    @if(request('from') === 'bank-statement')
                        <input type="hidden" name="from" value="bank-statement">
                        <input type="hidden" name="bs_bank_account_id" value="{{ request('bank_account_id') }}">
                        <input type="hidden" name="bs_start_date" value="{{ request('start_date') }}">
                        <input type="hidden" name="bs_end_date" value="{{ request('end_date') }}">
                    @endif
                    <div class="card-body">
                        <div class="row g-3">

                            {{-- Party Selection --}}
                            <div class="col-md-12">
                                <label class="form-label required">Received From (Party)</label>
                                <select name="party_id" id="party_id" class="form-select @error('party_id') is-invalid @enderror" required>
                                    <option value="">-- Select Customer --</option>
                                    @foreach ($parties as $p)
                                        <option value="{{ $p->id }}" data-gst="{{ $p->gst_number }}" @selected(old('party_id', $selectedPartyId ?? '') == $p->id)>{{ $p->name }}</option>
                                    @endforeach
                                </select>
                                @error('party_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            {{-- Date --}}
                            <div class="col-md-6">
                                <label class="form-label required">Received Date</label>
                                <input type="date" name="received_at"
                                    class="form-control @error('received_at') is-invalid @enderror"
                                    value="{{ old('received_at', now()->toDateString()) }}" required>
                                @error('received_at') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            {{-- Amount --}}
                            <div class="col-md-6">
                                <label class="form-label required">Amount</label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" step="0.01" name="amount"
                                        class="form-control @error('amount') is-invalid @enderror"
                                        value="{{ old('amount') }}" placeholder="0.00" required>
                                </div>
                                @error('amount') <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                            </div>

                            {{-- Bank Selection --}}
                            <div class="col-md-12">
                                <label class="form-label required">Deposit To (Bank/Cash)</label>
                                <select name="bank_account_id" class="form-select @error('bank_account_id') is-invalid @enderror" required>
                                    <option value="">-- Select Account --</option>
                                    @foreach ($banks as $b)
                                        <option value="{{ $b->id }}" @selected(old('bank_account_id', $defaultBankId ?? '') == $b->id)>
                                            {{ $b->name }} ({{ ucfirst($b->mode) }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('bank_account_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            {{-- Reference --}}
                            <div class="col-md-6">
                                <label class="form-label">Reference No. (Optional)</label>
                                <input type="text" name="reference" class="form-control"
                                    value="{{ old('reference') }}" placeholder="e.g. Cheque No / UPI Ref">
                            </div>

                            {{-- Remarks --}}
                            <div class="col-md-6">
                                <label class="form-label">Remarks</label>
                                <input type="text" name="remarks" class="form-control"
                                    value="{{ old('remarks') }}" placeholder="Any additional notes...">
                            </div>

                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Save Receipt</button>
                        <a href="{{ route('sale-receipts.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>

        {{-- Right: Ledger Panel --}}
        <div class="col-md-7">
            <div class="card" id="ledgerCard">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0" id="ledgerTitle">Party Ledger</h5>
                    <small class="text-muted" id="ledgerPeriod"></small>
                </div>
                <div class="card-body p-0">
                    {{-- Placeholder --}}
                    <div id="ledgerPlaceholder" class="text-center text-muted py-5">
                        <i class="ph-duotone ph-book-open-text" style="font-size: 3rem;"></i>
                        <p class="mt-2 mb-0">Select a party to view their ledger</p>
                    </div>

                    {{-- Loading spinner --}}
                    <div id="ledgerLoading" class="text-center py-5 d-none">
                        <div class="spinner-border text-primary" role="status"></div>
                        <p class="mt-2 mb-0 text-muted">Loading ledger...</p>
                    </div>

                    {{-- Summary Cards --}}
                    <div id="ledgerSummary" class="d-none px-3 pt-3">
                        <div class="row g-2 mb-2">
                            <div class="col-3">
                                <div class="border rounded p-2 text-center">
                                    <small class="text-muted d-block">Opening</small>
                                    <strong id="sumOpening">-</strong>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="border rounded p-2 text-center">
                                    <small class="text-muted d-block">Total Debit</small>
                                    <strong id="sumDebit" class="text-success">-</strong>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="border rounded p-2 text-center">
                                    <small class="text-muted d-block">Total Credit</small>
                                    <strong id="sumCredit" class="text-danger">-</strong>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="border rounded p-2 text-center">
                                    <small class="text-muted d-block">Closing</small>
                                    <strong id="sumClosing">-</strong>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Ledger Table --}}
                    <div id="ledgerTableWrap" class="d-none table-responsive" style="max-height: 450px; overflow-y: auto;">
                        <table class="table table-hover table-sm align-middle mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Particulars</th>
                                    <th class="text-end">Debit</th>
                                    <th class="text-end">Credit</th>
                                    <th class="text-end">Balance</th>
                                    <th style="width:30px;"></th>
                                </tr>
                            </thead>
                            <tbody id="ledgerBody"></tbody>
                        </table>
                    </div>

                    {{-- Empty state --}}
                    <div id="ledgerEmpty" class="text-center text-muted py-4 d-none">
                        <p class="mb-0">No transactions found for this party in the current FY.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        // --- Party TomSelect ---
        const tomPartySelect = new TomSelect('#party_id', {
            maxOptions: null,
            allowEmptyOption: true,
            closeAfterSelect: true,
            placeholder: 'Search party...',
            highlight: true,
            searchField: ['text', 'gst'],
            render: {
                option: function(data, escape) {
                    const gst = data.gst ? '<span style="color:#999;font-size:.7rem;margin-left:6px">GST: ' + escape(data.gst) + '</span>' : '';
                    return '<div>' + escape(data.text) + gst + '</div>';
                },
                item: function(data, escape) {
                    return '<div>' + escape(data.text) + '</div>';
                }
            },
            onItemAdd: function() { this.control_input.value = ''; }
        });

        // Listen for new customers created from the "Add" button (new tab)
        const partyChannel = new BroadcastChannel('customer_created');
        partyChannel.onmessage = function (event) {
            const customer = event.data;
            if (customer.party_type !== 'sales' && customer.party_type !== 'both') return;
            if (tomPartySelect.options[customer.id]) return;
            tomPartySelect.addOption({ value: customer.id, text: customer.name, gst: customer.gst_number || '' });
            tomPartySelect.setValue(customer.id);
        };

        // Ledger on party change
        const partySelect = document.getElementById('party_id');
        partySelect.addEventListener('change', async function () {
            const partyId = this.value;
            const placeholder = document.getElementById('ledgerPlaceholder');
            const loading = document.getElementById('ledgerLoading');
            const summary = document.getElementById('ledgerSummary');
            const tableWrap = document.getElementById('ledgerTableWrap');
            const empty = document.getElementById('ledgerEmpty');
            const title = document.getElementById('ledgerTitle');
            const period = document.getElementById('ledgerPeriod');

            // Reset
            placeholder.classList.add('d-none');
            summary.classList.add('d-none');
            tableWrap.classList.add('d-none');
            empty.classList.add('d-none');

            if (!partyId) {
                placeholder.classList.remove('d-none');
                title.textContent = 'Party Ledger';
                period.textContent = '';
                return;
            }

            loading.classList.remove('d-none');

            try {
                const res = await fetch(`{{ url('api/parties') }}/${partyId}/ledger?company_id={{ currentCompanyId() }}`);
                const data = await res.json();

                loading.classList.add('d-none');

                const customerUrl = @json(route('customers.show', ['customer' => '__ID__']));
                const ledgerUrl = @json(route('ledger.show', ['party_id' => '__ID__']));
                title.innerHTML = data.party_name + ' — Ledger <a href="' + ledgerUrl.replace('__ID__', partyId) + '" target="_blank" class="btn btn-sm btn-outline-primary ms-2 py-0" title="Open Full Ledger"><i class="ph-duotone ph-arrow-square-out"></i></a>';
                period.textContent = data.fy_start + ' to ' + data.fy_end;

                // Summary
                const fmt = (v) => Math.abs(v).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                const drCr = (v) => v >= 0 ? fmt(v) + ' Dr' : fmt(v) + ' Cr';

                document.getElementById('sumOpening').textContent = drCr(data.opening_balance);
                document.getElementById('sumOpening').className = data.opening_balance >= 0 ? 'text-success' : 'text-danger';
                document.getElementById('sumDebit').textContent = fmt(data.total_debit);
                document.getElementById('sumCredit').textContent = fmt(data.total_credit);
                document.getElementById('sumClosing').textContent = drCr(data.closing_balance);
                document.getElementById('sumClosing').className = data.closing_balance >= 0 ? 'text-success' : 'text-danger';

                summary.classList.remove('d-none');

                // Table
                const tbody = document.getElementById('ledgerBody');
                tbody.innerHTML = '';

                // Opening row
                let running = data.opening_balance;
                const openRow = document.createElement('tr');
                openRow.className = 'table-light fw-bold';
                openRow.innerHTML = `
                    <td>-</td>
                    <td><span class="badge bg-dark bg-opacity-10 text-dark border">OPENING</span></td>
                    <td>Balance B/F</td>
                    <td class="text-end">${data.opening_balance > 0 ? fmt(data.opening_balance) : '-'}</td>
                    <td class="text-end">${data.opening_balance < 0 ? fmt(data.opening_balance) : '-'}</td>
                    <td class="text-end">${drCr(running)}</td>
                    <td class="text-center"><a href="${customerUrl.replace('__ID__', partyId)}" target="_blank" class="btn btn-sm btn-outline-primary py-0 px-1" title="Edit Opening Balance"><i class="ph-duotone ph-pencil-simple"></i></a></td>
                `;
                tbody.appendChild(openRow);

                if (data.transactions.length === 0) {
                    const closeRow = document.createElement('tr');
                    closeRow.className = 'table-dark fw-bold';
                    closeRow.innerHTML = `
                        <td colspan="3" class="text-end">Closing Balance:</td>
                        <td colspan="2" class="text-center">${drCr(running)}</td>
                        <td class="text-end">${drCr(running)}</td>
                        <td></td>
                    `;
                    tbody.appendChild(closeRow);
                    tableWrap.classList.remove('d-none');
                    return;
                }

                const badgeClass = (type) => {
                    const map = {
                        'Sale': 'bg-success bg-opacity-10 text-success',
                        'Receipt': 'bg-info bg-opacity-10 text-info',
                        'Sale Return': 'bg-warning bg-opacity-10 text-warning',
                        'Purchase': 'bg-danger bg-opacity-10 text-danger',
                        'Payment': 'bg-primary bg-opacity-10 text-primary',
                        'Purchase Return': 'bg-secondary bg-opacity-10 text-secondary',
                    };
                    return map[type] || 'bg-light text-dark';
                };

                let totalDr = 0, totalCr = 0;
                data.transactions.forEach(t => {
                    running += (t.debit - t.credit);
                    totalDr += t.debit;
                    totalCr += t.credit;

                    const editBtn = t.edit_url
                        ? `<a href="${t.edit_url}" target="_blank" class="btn btn-sm btn-outline-primary py-0 px-1" title="Edit"><i class="ph-duotone ph-pencil-simple"></i></a>`
                        : '';

                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${t.date}</td>
                        <td><span class="badge ${badgeClass(t.type)} border">${t.type}</span></td>
                        <td>${t.desc}${t.ref ? ' <small class="text-muted">' + t.ref + '</small>' : ''}</td>
                        <td class="text-end ${t.debit > 0 ? 'text-success' : ''}">${t.debit > 0 ? fmt(t.debit) : '-'}</td>
                        <td class="text-end ${t.credit > 0 ? 'text-danger' : ''}">${t.credit > 0 ? fmt(t.credit) : '-'}</td>
                        <td class="text-end fw-bold">${drCr(running)}</td>
                        <td class="text-center">${editBtn}</td>
                    `;
                    tbody.appendChild(tr);
                });

                // Totals row
                const totRow = document.createElement('tr');
                totRow.className = 'table-light fw-bold';
                totRow.innerHTML = `
                    <td colspan="3" class="text-end">Period Totals:</td>
                    <td class="text-end text-success">${fmt(totalDr)}</td>
                    <td class="text-end text-danger">${fmt(totalCr)}</td>
                    <td class="text-end">${drCr(running)}</td>
                    <td></td>
                `;
                tbody.appendChild(totRow);

                // Closing row
                const closeRow = document.createElement('tr');
                closeRow.className = 'table-dark fw-bold';
                const closingText = running >= 0
                    ? `<span class="text-success">${fmt(running)} Dr</span> <small class="text-light">(Party owes you)</small>`
                    : `<span class="text-danger">${fmt(running)} Cr</span> <small class="text-light">(You owe party)</small>`;
                closeRow.innerHTML = `
                    <td colspan="3" class="text-end">Closing Balance:</td>
                    <td colspan="2" class="text-center">${closingText}</td>
                    <td class="text-end">${drCr(running)}</td>
                    <td></td>
                `;
                tbody.appendChild(closeRow);

                tableWrap.classList.remove('d-none');

            } catch (err) {
                loading.classList.add('d-none');
                console.error('Ledger fetch error:', err);
                empty.textContent = 'Error loading ledger.';
                empty.classList.remove('d-none');
            }
        });

        // Auto-trigger if party was pre-selected (old value)
        if (partySelect.value) {
            partySelect.dispatchEvent(new Event('change'));
        }
    </script>
@endpush