@extends('layouts.layout-horizontal')
@section('title', 'Ledger')

@section('content')
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Party Ledger</h5>
        <span class="badge {{ $companyMode === 'cash' ? 'bg-dark' : 'bg-primary' }} rounded-pill">
            {{ ucfirst($companyMode) }} Mode
        </span>
    </div>
    <div class="card-body">
        <form method="GET" action="{{ route('ledger.show') }}" class="row g-3 align-items-end">
            <div class="col-md-4">
                <label class="form-label">Select Party <span class="text-danger">*</span></label>
                <select name="party_id" class="form-select" required id="partySelect">
                    <option value="">-- Select Party --</option>
                    @foreach($parties as $party)
                        <option value="{{ $party->id }}" data-type="{{ $party->party_type }}" data-gst="{{ $party->gst_number }}">
                            {{ $party->name }}
                            @if($party->city) ({{ $party->city }}) @endif
                            @if($party->party_type === 'both') [Both] @endif
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">From Date</label>
                <input type="date" name="start_date" class="form-control" value="{{ $startDate }}">
            </div>
            <div class="col-md-3">
                <label class="form-label">To Date</label>
                <input type="date" name="end_date" class="form-control" value="{{ $endDate }}">
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary w-100">
                    <i class="ph-duotone ph-magnifying-glass me-1"></i> View Ledger
                </button>
            </div>
        </form>

        <hr class="my-4">

        {{-- Quick Summary Cards --}}
        <div class="row g-3">
            <div class="col-md-4">
                <div class="card border-start border-primary border-3">
                    <div class="card-body p-3">
                        <h6 class="text-muted mb-1">Total Parties</h6>
                        <h4 class="mb-0">{{ $parties->count() }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-start border-success border-3">
                    <div class="card-body p-3">
                        <h6 class="text-muted mb-1">Sales Parties</h6>
                        <h4 class="mb-0">{{ $parties->whereIn('party_type', ['sales', 'both'])->count() }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-start border-warning border-3">
                    <div class="card-body p-3">
                        <h6 class="text-muted mb-1">Purchase Parties</h6>
                        <h4 class="mb-0">{{ $parties->whereIn('party_type', ['purchase', 'both'])->count() }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-start border-danger border-3">
                    <div class="card-body p-3">
                        <h6 class="text-muted mb-1">Receivable Outstanding</h6>
                        <h4 class="mb-0 text-danger">{{ indian_number($parties->sum(fn($p) => max($p->ledger_outstanding, 0)), 2) }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-start border-info border-3">
                    <div class="card-body p-3">
                        <h6 class="text-muted mb-1">Payable Outstanding</h6>
                        <h4 class="mb-0 text-info">{{ indian_number(abs($parties->sum(fn($p) => min($p->ledger_outstanding, 0))), 2) }}</h4>
                    </div>
                </div>
            </div>
        </div>

        {{-- Batch Print Button --}}
        <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
            <h6 class="mb-0">Party List</h6>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="batchPrintBtn" disabled>
                <i class="ph-duotone ph-printer me-1"></i> Print Selected (<span id="selectedCount">0</span>)
            </button>
        </div>

        {{-- Party List Table --}}
        <div data-st data-st-export="excel,print">
            <div class="table-responsive">
            <table class="table table-bordered table-hover table-sm align-middle" id="partyTable">
                <thead class="table-light">
                    <tr>
                        <th width="40"><input type="checkbox" id="selectAll" class="form-check-input"></th>
                        <th>Party Name</th>
                        <th>Type</th>
                        <th>City / Location</th>
                        <th>Mobile</th>
                        <th>GSTIN</th>
                        <th class="text-end">Outstanding</th>
                        <th class="text-center" width="100">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($parties as $party)
                    <tr>
                        <td><input type="checkbox" class="form-check-input party-check" value="{{ $party->id }}"></td>
                        <td>
                            <strong>{{ $party->name }}</strong>
                        </td>
                        <td>
                            <form method="POST" action="{{ route('ledger.party-type.update', $party) }}">
                                @csrf
                                <select name="party_type" class="form-select form-select-sm" onchange="this.form.submit()" style="min-width:110px">
                                    <option value="sales" @selected($party->party_type === 'sales')>Sales</option>
                                    <option value="purchase" @selected($party->party_type === 'purchase')>Purchase</option>
                                    <option value="both" @selected($party->party_type === 'both')>Both</option>
                                </select>
                            </form>
                        </td>
                        <td>{{ $party->ledger_location }}</td>
                        <td>{{ $party->mobile ?? '-' }}</td>
                        <td>{{ $party->gst_number ?? '-' }}</td>
                        <td class="text-end">
                            @php $os = (float) $party->ledger_outstanding; @endphp
                            @if(abs($os) > 0.5)
                                <span class="{{ $os > 0 ? 'text-danger' : 'text-info' }} fw-semibold">
                                    {{ indian_number(abs($os), 2) }} {{ $os > 0 ? 'Dr' : 'Cr' }}
                                </span>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                        <td class="text-center">
                            <a href="{{ route('ledger.show', ['party_id' => $party->id, 'start_date' => $startDate, 'end_date' => $endDate]) }}"
                               class="btn btn-sm btn-outline-primary">
                                <i class="ph-duotone ph-book-open"></i> Ledger
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Batch print - select all
        const selectAll = document.getElementById('selectAll');
        const batchPrintBtn = document.getElementById('batchPrintBtn');
        const selectedCount = document.getElementById('selectedCount');

        function updateBatchBtn() {
            const checked = document.querySelectorAll('.party-check:checked');
            selectedCount.textContent = checked.length;
            batchPrintBtn.disabled = checked.length === 0;
        }

        selectAll?.addEventListener('change', function() {
            document.querySelectorAll('.party-check').forEach(cb => cb.checked = this.checked);
            updateBatchBtn();
        });

        document.addEventListener('change', function(e) {
            if (e.target.classList.contains('party-check')) updateBatchBtn();
        });

        batchPrintBtn?.addEventListener('click', function() {
            const ids = Array.from(document.querySelectorAll('.party-check:checked')).map(cb => cb.value);
            if (ids.length === 0) return;
            const startDate = document.querySelector('input[name="start_date"]').value;
            const endDate = document.querySelector('input[name="end_date"]').value;
            const url = `{{ route('ledger.batch-print') }}?party_ids=${ids.join(',')}&start_date=${startDate}&end_date=${endDate}`;
            window.open(url, '_blank');
        });

        // Party TomSelect
        const partySelect = document.getElementById('partySelect');
        const tomPartySelect = new TomSelect('#partySelect', {
            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 = ''; if (this.setTextboxValue) this.setTextboxValue(''); }
        });

        // Remember last selected party
        const lastParty = localStorage.getItem('ledger_last_party');
        if (lastParty) {
            tomPartySelect.setValue(lastParty);
        }

        // Save selection on form submit
        partySelect?.closest('form')?.addEventListener('submit', function() {
            if (tomPartySelect.getValue()) {
                localStorage.setItem('ledger_last_party', tomPartySelect.getValue());
            }
        });
    });
</script>
@endpush