@extends('layouts.app')

@section('title', $client->full_name)
@section('page_title', 'Customer Ledger Statement')

@section('content')
@if($errors->any())
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="alert alert-danger border-0 shadow-sm mb-0">
                <ul class="mb-0 small">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
@endif
<div class="row g-4">
    <!-- Client Profile Details -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm p-4 mb-4">
            <h5 class="fw-bold mb-3 text-dark">Customer Details</h5>
            <div class="d-flex align-items-center gap-2 mb-3">
                <span class="badge bg-primary">{{ $client->client_code }}</span>
                <span class="badge bg-{{ $client->status === 'active' ? 'success' : 'secondary' }}">{{ ucfirst($client->status) }}</span>
            </div>
            
            <div class="mb-3">
                <small class="text-secondary d-block">Full Name</small>
                <span class="fw-semibold text-dark">{{ $client->full_name }}</span>
            </div>

            <div class="mb-3">
                <small class="text-secondary d-block">Phone Number</small>
                <span class="fw-semibold text-dark">{{ $client->phone }}</span>
            </div>

            @if($client->email)
            <div class="mb-3">
                <small class="text-secondary d-block">Email</small>
                <span class="fw-semibold text-dark">{{ $client->email }}</span>
            </div>
            @endif

            @if($client->business_name)
            <div class="mb-3">
                <small class="text-secondary d-block">Business Name</small>
                <span class="fw-semibold text-dark">{{ $client->business_name }}</span>
            </div>
            @endif

            @if($client->tin)
            <div class="mb-3">
                <small class="text-secondary d-block">TIN Number</small>
                <span class="fw-semibold text-dark">{{ $client->tin }}</span>
            </div>
            @endif

            <div class="mb-3 border-top pt-3">
                <small class="text-secondary d-block">Credit Limit</small>
                <span class="fw-bold text-dark">{{ number_format($client->credit_limit) }} UGX</span>
            </div>

            <div class="mb-4">
                <small class="text-secondary d-block">Outstanding Balance</small>
                <span class="fw-bold fs-4 text-{{ $client->outstanding_balance > 0 ? 'danger' : 'success' }}">
                    {{ number_format($client->outstanding_balance) }} UGX
                </span>
            </div>

            <div class="d-grid gap-2">
                @if($client->outstanding_balance > 0)
                <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#recordPaymentModal">
                    <i class="bi bi-cash-coin"></i> Record Payment
                </button>
                @endif
                <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editClientModal">
                    <i class="bi bi-pencil"></i> Edit Profile
                </button>
                <a href="{{ route('clients.index') }}" class="btn btn-light">Back to CRM</a>
            </div>
        </div>
    </div>

    <!-- Customer Ledger History & Invoices -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm p-4 h-100">
            <div class="d-flex align-items-center justify-content-between mb-4 pb-2 border-bottom">
                <nav class="nav nav-pills" id="clientTabs" role="tablist">
                    <button class="nav-link active me-2" id="ledger-tab" data-bs-toggle="tab" data-bs-target="#ledgerPanel" type="button">
                        <i class="bi bi-journal-text"></i> Accounts Receivable Ledger
                    </button>
                    <button class="nav-link" id="invoices-tab" data-bs-toggle="tab" data-bs-target="#invoicesPanel" type="button">
                        <i class="bi bi-receipt"></i> Invoices & Sales Log
                    </button>
                </nav>
            </div>

            <div class="tab-content" id="clientTabsContent">
                <!-- Ledger panel -->
                <div class="tab-pane fade show active" id="ledgerPanel">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Reference</th>
                                    <th>Description</th>
                                    <th class="text-end">Debit (+)</th>
                                    <th class="text-end">Credit (-)</th>
                                    <th class="text-end">Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($ledgerEntries as $entry)
                                    <tr>
                                        <td>{{ $entry->created_at->format('M d, Y H:i') }}</td>
                                        <td><code class="small">{{ $entry->reference }}</code></td>
                                        <td class="small">{{ $entry->description }}</td>
                                        <td class="text-end fw-semibold text-danger">
                                            {{ $entry->debit > 0 ? number_format($entry->debit) : '-' }}
                                        </td>
                                        <td class="text-end fw-semibold text-success">
                                            {{ $entry->credit > 0 ? number_format($entry->credit) : '-' }}
                                        </td>
                                        <td class="text-end fw-bold text-dark">
                                            {{ number_format($entry->balance) }} UGX
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-5 text-muted">No ledger activities registered yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Invoices panel -->
                <div class="tab-pane fade" id="invoicesPanel">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Invoice #</th>
                                    <th>Date</th>
                                    <th class="text-end">Total</th>
                                    <th class="text-end">Paid</th>
                                    <th class="text-end">Balance Due</th>
                                    <th>Status</th>
                                    <th class="text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($client->invoices as $inv)
                                    <tr>
                                        <td>
                                            <div class="fw-bold">{{ $inv->invoice_number }}</div>
                                        </td>
                                        <td>{{ $inv->invoice_date->format('M d, Y') }}</td>
                                        <td class="text-end fw-semibold">{{ number_format($inv->total_amount) }} UGX</td>
                                        <td class="text-end text-success fw-semibold">{{ number_format($inv->amount_paid) }} UGX</td>
                                        <td class="text-end text-danger fw-semibold">{{ number_format($inv->balance_due) }} UGX</td>
                                        <td>
                                            <span class="badge bg-{{ $inv->status_badge }}">
                                                {{ ucfirst($inv->status) }}
                                            </span>
                                        </td>
                                        <td class="text-end">
                                            <a href="{{ route('invoices.show', $inv->id) }}" class="btn btn-sm btn-outline-secondary">
                                                <i class="bi bi-eye"></i> View
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-5 text-muted">No invoices generated yet.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Client Modal -->
<div class="modal fade" id="editClientModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Edit Customer Profile</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('clients.update', $client->id) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">FULL NAME *</label>
                        <input type="text" class="form-control" name="full_name" value="{{ $client->full_name }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">PHONE NUMBER *</label>
                        <input type="text" class="form-control" name="phone" value="{{ $client->phone }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">EMAIL ADDRESS</label>
                        <input type="email" class="form-control" name="email" value="{{ $client->email }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">BUSINESS NAME</label>
                        <input type="text" class="form-control" name="business_name" value="{{ $client->business_name }}">
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label text-secondary small fw-bold">TIN NUMBER</label>
                            <input type="text" class="form-control" name="tin" value="{{ $client->tin }}">
                        </div>
                        <div class="col-6">
                            <label class="form-label text-secondary small fw-bold">CREDIT LIMIT (UGX)</label>
                            <input type="number" class="form-control" name="credit_limit" value="{{ $client->credit_limit }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">STATUS</label>
                        <select class="form-select" name="status">
                            <option value="active" {{ $client->status === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ $client->status === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">ADDRESS</label>
                        <input type="text" class="form-control" name="address" value="{{ $client->address }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">NOTES</label>
                        <textarea class="form-control" name="notes" rows="3">{{ $client->notes }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Record Payment Modal -->
@if($client->outstanding_balance > 0)
<div class="modal fade" id="recordPaymentModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold text-success"><i class="bi bi-cash-coin me-2"></i>Record Client Payment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('clients.payments.store', $client->id) }}" method="POST" id="recordPaymentForm">
                @csrf
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">PAYMENT AMOUNT (UGX) *</label>
                            <input type="number" class="form-control" name="amount" id="paymentAmount" required min="1" max="{{ (float)$client->outstanding_balance }}" value="{{ (float)$client->outstanding_balance }}" oninput="updateAllocationSummary()">
                            <small class="text-muted">Max: {{ number_format($client->outstanding_balance) }} UGX</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">PAYMENT METHOD *</label>
                            <select class="form-select" name="payment_method" required>
                                <option value="cash">Cash</option>
                                <option value="mobile_money">Mobile Money</option>
                                <option value="bank_transfer">Bank Transfer</option>
                                <option value="cheque">Cheque</option>
                                <option value="card">Card Payment</option>
                            </select>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">REFERENCE (Optional)</label>
                            <input type="text" class="form-control" name="reference" placeholder="e.g. Txn ID, Check #">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-secondary small fw-bold">ALLOCATION RULE *</label>
                            <select class="form-select" name="allocation_method" id="allocationMethod" required onchange="toggleAllocationSection()">
                                <option value="fifo">FIFO (Oldest Invoices First)</option>
                                <option value="split">Split (Equally across all invoices)</option>
                                <option value="manual">Manual Allocation (Customize)</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">NOTES</label>
                        <textarea class="form-control" name="notes" rows="2" placeholder="Optional notes..."></textarea>
                    </div>

                    {{-- Manual Allocation Sub-form --}}
                    @php
                        $unpaidInvoices = $client->invoices->whereIn('status', ['unpaid', 'partial', 'overdue'])->where('balance_due', '>', 0)->sortBy('invoice_date');
                    @endphp
                    <div id="manualAllocationSection" class="mb-3" style="display: none;">
                        <label class="form-label text-secondary small fw-bold mb-2">ALLOCATE PAYMENT TO SPECIFIC INVOICES</label>
                        <div class="table-responsive border rounded p-2" style="max-height: 250px; overflow-y: auto;">
                            <table class="table table-sm align-middle table-borderless mb-0">
                                <thead>
                                    <tr class="border-bottom small text-muted">
                                        <th>Invoice #</th>
                                        <th class="text-end">Balance Due</th>
                                        <th class="text-end" style="width: 40%;">Allocate Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($unpaidInvoices as $index => $inv)
                                        <tr>
                                            <td>
                                                <div class="fw-semibold small">{{ $inv->invoice_number }}</div>
                                                <small class="text-secondary">{{ $inv->invoice_date->format('M d, Y') }}</small>
                                                <input type="hidden" name="allocations[{{ $index }}][invoice_id]" value="{{ $inv->id }}">
                                            </td>
                                            <td class="text-end text-danger small fw-semibold">
                                                {{ number_format($inv->balance_due) }} UGX
                                            </td>
                                            <td class="text-end">
                                                <input type="number" 
                                                       class="form-control form-control-sm text-end allocation-input" 
                                                       name="allocations[{{ $index }}][amount]" 
                                                       min="0" 
                                                       max="{{ (float)$inv->balance_due }}" 
                                                       data-balance="{{ (float)$inv->balance_due }}"
                                                       placeholder="0" 
                                                       oninput="updateAllocationSummary()">
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="text-center py-3 text-muted small">No unpaid invoices found.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between mt-2 px-1">
                            <span id="allocationSummaryText" class="small text-secondary fw-semibold">Allocated: 0 / 0 UGX</span>
                            <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" onclick="autoAllocateManual()">Auto-Fill Oldest</button>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Submit Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection

@section('scripts')
<script>
    function toggleAllocationSection() {
        const method = document.getElementById('allocationMethod').value;
        const section = document.getElementById('manualAllocationSection');
        if (method === 'manual') {
            section.style.display = 'block';
            updateAllocationSummary();
        } else {
            section.style.display = 'none';
        }
    }

    function updateAllocationSummary() {
        const amount = parseFloat(document.getElementById('paymentAmount').value) || 0;
        let allocatedSum = 0;
        const inputs = document.querySelectorAll('.allocation-input');
        inputs.forEach(input => {
            allocatedSum += parseFloat(input.value) || 0;
        });

        const summaryText = document.getElementById('allocationSummaryText');
        if (summaryText) {
            summaryText.innerText = "Allocated: " + allocatedSum.toLocaleString() + " / " + amount.toLocaleString() + " UGX";

            if (allocatedSum > amount) {
                summaryText.classList.remove('text-secondary', 'text-success');
                summaryText.classList.add('text-danger');
            } else if (allocatedSum === amount && amount > 0) {
                summaryText.classList.remove('text-secondary', 'text-danger');
                summaryText.classList.add('text-success');
            } else {
                summaryText.classList.remove('text-danger', 'text-success');
                summaryText.classList.add('text-secondary');
            }
        }
    }

    function autoAllocateManual() {
        const amount = parseFloat(document.getElementById('paymentAmount').value) || 0;
        let remaining = amount;
        const inputs = document.querySelectorAll('.allocation-input');

        inputs.forEach(input => {
            const balance = parseFloat(input.getAttribute('data-balance')) || 0;
            if (remaining > 0) {
                const fill = Math.min(remaining, balance);
                input.value = fill;
                remaining -= fill;
            } else {
                input.value = '';
            }
        });
        updateAllocationSummary();
    }

    if (document.getElementById('recordPaymentForm')) {
        document.getElementById('recordPaymentForm').addEventListener('submit', function(e) {
            const method = document.getElementById('allocationMethod').value;
            const amount = parseFloat(document.getElementById('paymentAmount').value) || 0;

            if (method === 'manual') {
                let allocatedSum = 0;
                const inputs = document.querySelectorAll('.allocation-input');
                inputs.forEach(input => {
                    allocatedSum += parseFloat(input.value) || 0;
                });

                if (allocatedSum > amount) {
                    e.preventDefault();
                    alert("The total manual allocations (" + allocatedSum.toLocaleString() + " UGX) cannot exceed the payment amount (" + amount.toLocaleString() + " UGX).");
                    return false;
                }

                if (allocatedSum < amount) {
                    const remaining = amount - allocatedSum;
                    const confirmProceed = confirm("The total manual allocations (" + allocatedSum.toLocaleString() + " UGX) do not match the payment amount (" + amount.toLocaleString() + " UGX).\n\nThe remaining " + remaining.toLocaleString() + " UGX will be recorded as unallocated customer credit.\n\nDo you want to proceed?");
                    if (!confirmProceed) {
                        e.preventDefault();
                        return false;
                    }
                }
            }
        });
    }
</script>
@endsection