@extends('layouts.app')
@section('title', 'Invoice ' . $invoice->invoice_number)
@section('page-title', 'Dues Invoice')

@section('content')

<div class="page-header">
    <div>
        <h1>{{ $invoice->invoice_number }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dues.invoices') }}">Dues Invoices</a></li>
                <li class="breadcrumb-item active">{{ $invoice->invoice_number }}</li>
            </ol>
        </nav>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('dues.invoices.print', $invoice) }}" target="_blank" class="btn btn-outline-primary">
            <i class="bi bi-printer me-1"></i> Print
        </a>
        @if(in_array($invoice->status, ['unpaid','partial']))
            <button class="btn btn-lions" data-bs-toggle="modal" data-bs-target="#payModal">
                <i class="bi bi-cash me-1"></i> Record Payment
            </button>
        @endif
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-receipt me-2" style="color:var(--lions-gold)"></i>Invoice Details</h5>
                <span class="badge {{ $invoice->status_badge_class }}" style="font-size:13px;padding:6px 14px">
                    {{ ucfirst($invoice->status) }}
                </span>
            </div>
            <div class="card-body">
                <div class="row g-3 mb-4">
                    <div class="col-sm-6">
                        <div style="font-size:11px;color:#9ca3af;font-weight:600;text-transform:uppercase">Member</div>
                        <div class="fw-bold" style="font-size:17px">{{ $invoice->member->full_name }}</div>
                        <div style="font-size:12px;color:#6b7280">{{ $invoice->member->category_display }}
                            @if($invoice->member->lci_member_id) · LCI {{ $invoice->member->lci_member_id }} @endif
                        </div>
                    </div>
                    <div class="col-sm-6 text-sm-end">
                        <div style="font-size:11px;color:#9ca3af;font-weight:600;text-transform:uppercase">Invoice Number</div>
                        <div class="fw-bold" style="font-size:17px;font-family:monospace">{{ $invoice->invoice_number }}</div>
                        <div style="font-size:12px;color:#6b7280">{{ $invoice->fiscal_year }} · {{ $invoice->billing_period_display }}</div>
                    </div>
                </div>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Component</th>
                            <th class="text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                LCI International Dues
                                @if($invoice->member->hasLciDiscount())
                                    <span class="badge" style="background:#fef3c7;color:#92400e;font-size:10px">50% Discount</span>
                                @endif
                            </td>
                            <td class="text-end fw-semibold">${{ number_format($invoice->lci_amount, 2) }}</td>
                        </tr>
                        <tr>
                            <td>District 306 B2 Dues</td>
                            <td class="text-end fw-semibold">${{ number_format($invoice->district_amount, 2) }}</td>
                        </tr>
                        <tr>
                            <td>Multiple District Dues</td>
                            <td class="text-end fw-semibold">${{ number_format($invoice->md_amount, 2) }}</td>
                        </tr>
                        <tr>
                            <td>Club Dues</td>
                            <td class="text-end fw-semibold">${{ number_format($invoice->club_amount, 2) }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="table-light">
                            <td class="fw-bold">Total Invoice</td>
                            <td class="text-end fw-bold">${{ number_format($invoice->total_amount, 2) }}</td>
                        </tr>
                        @if($invoice->amount_paid > 0)
                        <tr>
                            <td class="text-muted" style="font-size:13px">Amount Paid</td>
                            <td class="text-end text-success fw-semibold">−${{ number_format($invoice->amount_paid, 2) }}</td>
                        </tr>
                        @endif
                        <tr style="border-top:2px solid var(--lions-blue)">
                            <td class="fw-bold" style="font-size:16px">Balance Due</td>
                            <td class="text-end fw-bold" style="font-size:20px;color:{{ $invoice->balance_due > 0 ? '#c0392b' : '#059669' }}">
                                ${{ number_format($invoice->balance_due, 2) }}
                            </td>
                        </tr>
                    </tfoot>
                </table>

                @if($invoice->lci_compliance_flag)
                <div class="alert alert-compliance mt-3">
                    <i class="bi bi-shield-exclamation me-2"></i>
                    <strong>Good Standing Alert:</strong> {{ $invoice->lci_compliance_flag }}
                </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header"><h5>Payment Summary</h5></div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted" style="font-size:13px">Due Date</span>
                    <span class="fw-semibold">{{ $invoice->due_date?->format('d M Y') ?? '—' }}</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted" style="font-size:13px">Amount Paid</span>
                    <span class="fw-semibold text-success">${{ number_format($invoice->amount_paid, 2) }}</span>
                </div>
                @if($invoice->paid_date)
                <div class="d-flex justify-content-between mb-2">
                    <span class="text-muted" style="font-size:13px">Date Paid</span>
                    <span class="fw-semibold">{{ $invoice->paid_date->format('d M Y') }}</span>
                </div>
                @endif
                @if($invoice->is_overdue)
                <div class="alert alert-danger py-2 mt-2" style="font-size:12px">
                    <i class="bi bi-clock-history me-1"></i>
                    Overdue by <strong>{{ $invoice->days_overdue }} days</strong>
                </div>
                @endif
                @if($invoice->notes)
                <div class="mt-2 pt-2 border-top">
                    <div style="font-size:11px;color:#9ca3af;font-weight:600;text-transform:uppercase">Notes</div>
                    <div style="font-size:13px">{{ $invoice->notes }}</div>
                </div>
                @endif
                <div class="mt-3 pt-2 border-top" style="font-size:11px;color:#9ca3af">
                    <div>Created: {{ $invoice->created_at->format('d M Y') }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Payment Modal --}}
@if(in_array($invoice->status, ['unpaid','partial']))
<div class="modal fade" id="payModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Record Payment — {{ $invoice->invoice_number }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('dues.invoices.payment', $invoice) }}">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Amount Paid</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" name="amount_paid" class="form-control"
                                   step="0.01" min="0.01" value="{{ $invoice->balance_due }}" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Payment Date</label>
                        <input type="date" name="paid_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="mb-0">
                        <label class="form-label">Notes</label>
                        <input type="text" name="notes" class="form-control" placeholder="Payment method, reference…">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-lions">Record Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@endsection