@extends('layouts.app')

@section('title', 'Debt Tracker')
@section('page_title', 'Receivables & Debt Aging')

@section('content')
<div class="row g-3 mb-4">
    <div class="col-md-2 col-6">
        <div class="stat-card p-3">
            <h6 class="text-secondary small fw-bold mb-1">CURRENT</h6>
            <h5 class="fw-bold mb-0 text-success">{{ number_format($agingBuckets['current'] ?? 0) }} UGX</h5>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="stat-card p-3">
            <h6 class="text-secondary small fw-bold mb-1">1 - 30 DAYS</h6>
            <h5 class="fw-bold mb-0 text-warning">{{ number_format($agingBuckets['d1_30'] ?? 0) }} UGX</h5>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="stat-card p-3">
            <h6 class="text-secondary small fw-bold mb-1">31 - 60 DAYS</h6>
            <h5 class="fw-bold mb-0 text-danger">{{ number_format($agingBuckets['d31_60'] ?? 0) }} UGX</h5>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="stat-card p-3">
            <h6 class="text-secondary small fw-bold mb-1">61 - 90 DAYS</h6>
            <h5 class="fw-bold mb-0 text-danger">{{ number_format($agingBuckets['d61_90'] ?? 0) }} UGX</h5>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="stat-card p-3">
            <h6 class="text-secondary small fw-bold mb-1">90+ DAYS</h6>
            <h5 class="fw-bold mb-0 text-danger">{{ number_format($agingBuckets['d90_plus'] ?? 0) }} UGX</h5>
        </div>
    </div>
    <div class="col-md-2 col-6">
        <div class="stat-card p-3 bg-primary bg-opacity-10">
            <h6 class="text-primary small fw-bold mb-1">TOTAL DEBT</h6>
            <h5 class="fw-bold mb-0 text-primary">{{ number_format($agingBuckets['total'] ?? 0) }} UGX</h5>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm p-4">
    <div class="d-flex align-items-center justify-content-between mb-4 pb-2 border-bottom">
        <nav class="nav nav-pills" id="debtTabs" role="tablist">
            <button class="nav-link active me-2" id="debts-tab" data-bs-toggle="tab" data-bs-target="#debtsPanel" type="button">
                <i class="bi bi-calendar-x"></i> Overdue Invoices
            </button>
            <button class="nav-link" id="waivers-tab" data-bs-toggle="tab" data-bs-target="#waiversPanel" type="button">
                <i class="bi bi-file-earmark-check"></i> Debt Waivers Log
            </button>
        </nav>
    </div>

    <div class="tab-content" id="debtTabsContent">
        <!-- Overdue Invoices Panel -->
        <div class="tab-pane fade show active" id="debtsPanel">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Invoice #</th>
                            <th>Customer</th>
                            <th>Due Date</th>
                            <th>Days Overdue</th>
                            <th class="text-end">Original Amount</th>
                            <th class="text-end">Outstanding Debt</th>
                            <th class="text-end no-print">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($debts as $d)
                            <tr class="{{ $d->days_overdue > 30 ? 'table-danger-subtle' : '' }}">
                                <td class="fw-bold">{{ $d->invoice->invoice_number }}</td>
                                <td>
                                    <div class="fw-semibold text-dark">{{ $d->client->full_name }}</div>
                                    <small class="text-secondary small">{{ $d->client->client_code }}</small>
                                </td>
                                <td>{{ $d->due_date ? \Carbon\Carbon::parse($d->due_date)->format('M d, Y') : '-' }}</td>
                                <td>
                                    @if($d->days_overdue > 60)
                                        <span class="badge bg-danger fs-6">{{ $d->days_overdue }} days</span>
                                    @elseif($d->days_overdue > 0)
                                        <span class="badge bg-warning text-dark fs-6">{{ $d->days_overdue }} days</span>
                                    @else
                                        <span class="badge bg-success fs-6">Current</span>
                                    @endif
                                </td>
                                <td class="text-end text-secondary">{{ number_format($d->original_amount) }} UGX</td>
                                <td class="text-end fw-bold text-danger">{{ number_format($d->outstanding_balance) }} UGX</td>
                                <td class="text-end no-print">
                                    <button class="btn btn-sm btn-outline-danger" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#requestWaiverModal"
                                            data-id="{{ $d->id }}"
                                            data-invoice="{{ $d->invoice->invoice_number }}"
                                            data-client="{{ $d->client->full_name }}"
                                            data-balance="{{ $d->outstanding_balance }}">
                                        <i class="bi bi-file-earmark-check"></i> Request Waiver
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5 text-muted">No outstanding customer debts!</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Waivers Log Panel -->
        <div class="tab-pane fade" id="waiversPanel">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Waiver ID</th>
                            <th>Customer</th>
                            <th>Invoice</th>
                            <th class="text-end">Waived Amount</th>
                            <th>Reason</th>
                            <th>Requested By</th>
                            <th>Status</th>
                            <th class="text-end no-print">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($waivers as $w)
                            <tr>
                                <td class="fw-bold">WAIVER-{{ $w->id }}</td>
                                <td>{{ $w->client->full_name }}</td>
                                <td><code class="small">{{ $w->debt->invoice->invoice_number }}</code></td>
                                <td class="text-end fw-bold text-success">-{{ number_format($w->waived_amount) }} UGX</td>
                                <td class="small">{{ $w->reason }}</td>
                                <td>
                                    <div class="small">{{ $w->requestedBy->full_name }}</div>
                                    <small class="text-secondary small">{{ $w->created_at->format('M d, Y') }}</small>
                                </td>
                                <td>
                                    <span class="badge bg-{{ $w->status === 'approved' ? 'success' : 'warning' }}">
                                        {{ ucfirst($w->status) }}
                                    </span>
                                </td>
                                <td class="text-end no-print">
                                    @if($w->status === 'pending' && (auth()->user()->isManager() || auth()->user()->isSuperAdmin()))
                                        <form action="{{ route('debts.waiver.approve', $w->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-success">
                                                <i class="bi bi-check-lg"></i> Approve Waiver
                                            </button>
                                        </form>
                                    @elseif($w->status === 'approved')
                                        <small class="text-secondary">Approved by {{ $w->approvedBy->full_name }}</small>
                                    @else
                                        -
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center py-5 text-muted">No debt waivers logged yet.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Request Waiver Modal -->
<div class="modal fade" id="requestWaiverModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title fw-bold">Request Debt Waiver</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('debts.waiver.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="debt_id" id="waiverDebtId">
                    <div class="bg-light p-3 rounded mb-3">
                        <div>Customer: <span class="fw-bold" id="waiverCustomerName">-</span></div>
                        <div>Invoice: <span class="fw-bold" id="waiverInvoiceNum">-</span></div>
                        <div>Outstanding Balance: <span class="fw-bold text-danger" id="waiverDebtBalance">0</span></div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">WAIVER AMOUNT (UGX) *</label>
                        <input type="number" class="form-control" name="waived_amount" id="waiverAmountInput" required min="1">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary small fw-bold">REASON FOR WAIVER *</label>
                        <textarea class="form-control" name="reason" rows="3" required placeholder="e.g. Compensation for damaged delivery, client business dissolution agreement..."></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">Submit Request</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const waiverModal = document.getElementById('requestWaiverModal');
    waiverModal.addEventListener('show.bs.modal', function(e) {
        const btn = e.relatedTarget;
        const id = btn.getAttribute('data-id');
        const invoice = btn.getAttribute('data-invoice');
        const client = btn.getAttribute('data-client');
        const balance = btn.getAttribute('data-balance');

        document.getElementById('waiverDebtId').value = id;
        document.getElementById('waiverCustomerName').innerText = client;
        document.getElementById('waiverInvoiceNum').innerText = invoice;
        document.getElementById('waiverDebtBalance').innerText = parseFloat(balance).toLocaleString() + ' UGX';
        
        const amountInput = document.getElementById('waiverAmountInput');
        amountInput.max = balance;
        amountInput.value = balance;
    });
</script>
@endsection