@extends('layouts.layout-horizontal')

@section('title', 'Add Purchase Payment')

@section('content')
    <div class="row">
        {{-- Left: Payment Form --}}
        <div class="col-md-5">
            <form method="POST" action="{{ route('purchase-payments.store') }}">
              @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">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Add Purchase Payment</h5>
                    <div>
                        <a href="{{ route('purchase-payments.index') }}" class="btn btn-secondary btn-sm"><i class="ph-duotone ph-arrow-left me-1"></i> Back</a>
                    </div>
                </div>
                <div class="card-body">
                  <div class="row g-3">
                    <div class="col-md-12">
                      <label class="form-label d-flex align-items-center">Party name <a class="btn btn-primary btn-sm ms-auto" href="{{ route('customers.create') }}?from_dropdown=1" target="_blank">Add</a></label>
                      <select name="party_id" id="party_id" class="form-select @error('party_id') is-invalid @enderror" required>
                        <option value="">-- Select party --</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>

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

                    <div class="col-md-6">
                      <label class="form-label">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">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-12">
                      <label class="form-label">Pay via (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 }} @if($b->mode === 'cash') (Cash) @else (Bank) @endif
                          </option>
                        @endforeach
                      </select>
                      @error('bank_account_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-6">
                      <label class="form-label">Reference (optional)</label>
                      <input type="text" name="reference" class="form-control" value="{{ old('reference') }}"
                        placeholder="Cheque/UTR">
                    </div>

                    <div class="col-md-6">
                      <label class="form-label">Remarks (optional)</label>
                      <input type="text" name="remarks" class="form-control" value="{{ old('remarks') }}" placeholder="Notes">
                    </div>
                    <div class="col-md-12">
                      <div class="form-check">
                        <input type="checkbox" name="print_cheque" value="1" class="form-check-input" id="printCheque">
                        <label class="form-check-label" for="printCheque">
                          <i class="ph-duotone ph-check-square me-1"></i> Print Cheque after saving
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-footer">
                  <button class="btn btn-primary">Save Payment</button>
                  <a href="{{ route('purchase-payments.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
              </div>
            </form>
        </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 !== 'purchase' && 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) {
                    // Show closing row even with no transactions
                    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