@extends('layouts.app')
@section('title', 'Generate Invoices')
@section('page-title', 'Generate Dues Invoices')

@section('content')

<div class="page-header">
    <div>
        <h1>Generate Dues Invoices</h1>
        @if($settings)
            <p class="text-muted mb-0" style="font-size:14px">Active rates: {{ $settings->fiscal_year }}</p>
        @endif
    </div>
    <a href="{{ route('dues.invoices') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back to Invoices
    </a>
</div>

@if(!$settings)
<div class="alert alert-warning">
    <i class="bi bi-exclamation-triangle me-2"></i>
    No active dues settings found. <a href="{{ route('dues.settings') }}" class="fw-bold">Set up dues rates →</a>
</div>
@else

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5><i class="bi bi-file-earmark-plus me-2" style="color:var(--lions-gold)"></i>Invoice Configuration</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('dues.invoices.store') }}">
                    @csrf

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Billing Period <span class="text-danger">*</span></label>
                            <select name="billing_period" class="form-select">
                                <option value="semi_annual_july">Semi-Annual — July (Fiscal Year Start)</option>
                                <option value="semi_annual_january">Semi-Annual — January (Mid-Year)</option>
                                <option value="annual">Annual (Full Year)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Due Date <span class="text-danger">*</span></label>
                            <input type="date" name="due_date" class="form-control"
                                   value="{{ date('Y-m-d', strtotime('+30 days')) }}" required>
                        </div>
                    </div>

                    {{-- Member Selection --}}
                    <div class="mb-3 d-flex justify-content-between align-items-center">
                        <label class="form-label mb-0">Select Members <span class="text-danger">*</span></label>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAll()">
                                Select All
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="clearAll()">
                                Clear
                            </button>
                        </div>
                    </div>

                    <div style="max-height:380px;overflow-y:auto;border:1px solid #e8ecf4;border-radius:8px">
                        <table class="table table-sm mb-0">
                            <thead style="position:sticky;top:0;background:#f8f9fc;z-index:1">
                                <tr>
                                    <th width="40"></th>
                                    <th>Member</th>
                                    <th>Category</th>
                                    <th class="text-end">Est. Amount</th>
                                </tr>
                            </thead>
                            <tbody id="memberList">
                                @foreach($members as $member)
                                @php
                                    $period = 'semi_annual_july';
                                    $calc   = $settings->calculateDues($member->member_category, $period);
                                @endphp
                                <tr>
                                    <td>
                                        <input class="form-check-input member-checkbox" type="checkbox"
                                               name="member_ids[]" value="{{ $member->id }}"
                                               id="m{{ $member->id }}"
                                               {{ request()->has('member_ids') && in_array($member->id, request('member_ids', [])) ? 'checked' : '' }}>
                                    </td>
                                    <td>
                                        <label for="m{{ $member->id }}" class="cursor-pointer">
                                            <strong style="font-size:13px">{{ $member->full_name }}</strong>
                                            @if($member->email)
                                                <div style="font-size:11px;color:#6b7280">{{ $member->email }}</div>
                                            @endif
                                        </label>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary" style="font-size:10px">
                                            {{ $member->category_display }}
                                        </span>
                                        @if($member->hasLciDiscount())
                                            <span class="badge" style="font-size:10px;background:#fef3c7;color:#92400e">50% off LCI</span>
                                        @endif
                                    </td>
                                    <td class="text-end fw-semibold" style="font-size:13px" data-amount="{{ $calc['total_amount'] }}">
                                        ${{ number_format($calc['total_amount'], 2) }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- Selection Summary --}}
                    <div class="mt-3 p-3 rounded d-flex justify-content-between"
                         style="background:#eff6ff;border:1px solid #bfdbfe">
                        <div>
                            <span id="selectedCount" class="fw-bold" style="color:var(--lions-blue)">0</span>
                            <span style="font-size:13px;color:#6b7280"> members selected</span>
                        </div>
                        <div>
                            <span style="font-size:13px;color:#6b7280">Estimated Total: </span>
                            <span id="selectedTotal" class="fw-bold" style="color:var(--lions-blue)">$0.00</span>
                        </div>
                    </div>

                    <div class="mt-4 d-flex justify-content-end gap-2">
                        <a href="{{ route('dues.invoices') }}" class="btn btn-outline-secondary">Cancel</a>
                        <button type="submit" class="btn btn-lions">
                            <i class="bi bi-file-earmark-plus me-1"></i> Generate Invoices
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Rate Summary Sidebar --}}
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header"><h5>Active Rate Summary</h5></div>
            <div class="card-body" style="font-size:13px">
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">LCI Base Dues</span>
                    <span class="fw-semibold">${{ number_format($settings->lci_base_dues_annual, 2) }}/yr</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">District Dues</span>
                    <span class="fw-semibold">${{ number_format($settings->district_dues_annual, 2) }}/yr</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">MD Dues</span>
                    <span class="fw-semibold">${{ number_format($settings->multiple_district_dues_annual, 2) }}/yr</span>
                </div>
                <div class="d-flex justify-content-between py-1 border-bottom">
                    <span class="text-muted">Club Dues</span>
                    <span class="fw-semibold">${{ number_format($settings->club_dues_annual, 2) }}/yr</span>
                </div>
                <div class="d-flex justify-content-between py-2 mt-1">
                    <span class="fw-bold">Regular Total</span>
                    <span class="fw-bold" style="color:var(--lions-blue)">
                        ${{ number_format($settings->lci_base_dues_annual + $settings->district_dues_annual + $settings->multiple_district_dues_annual + $settings->club_dues_annual, 2) }}/yr
                    </span>
                </div>
                <div class="alert" style="background:#fef3c7;border:none;font-size:12px;color:#78350f;margin-top:8px;border-radius:6px;padding:10px">
                    <i class="bi bi-tag-fill me-1"></i>
                    Family, Student &amp; Leo-to-Lion members receive <strong>{{ $settings->family_lci_discount_pct }}%</strong> discount on the LCI portion.
                </div>
            </div>
        </div>
    </div>
</div>

@endif

@endsection

@push('scripts')
<script>
function updateSummary() {
    const checkboxes  = document.querySelectorAll('.member-checkbox:checked');
    let total         = 0;
    document.getElementById('selectedCount').textContent = checkboxes.length;

    checkboxes.forEach(cb => {
        const row    = cb.closest('tr');
        const amount = parseFloat(row.querySelector('[data-amount]')?.dataset.amount || 0);
        total += amount;
    });

    document.getElementById('selectedTotal').textContent = '$' + total.toFixed(2);
}

function selectAll() {
    document.querySelectorAll('.member-checkbox').forEach(cb => cb.checked = true);
    updateSummary();
}

function clearAll() {
    document.querySelectorAll('.member-checkbox').forEach(cb => cb.checked = false);
    updateSummary();
}

document.querySelectorAll('.member-checkbox').forEach(cb => {
    cb.addEventListener('change', updateSummary);
});

// Auto-recalculate when period changes (approximate, uses first-row amounts)
document.querySelector('[name="billing_period"]')?.addEventListener('change', function() {
    // Real re-calc would require AJAX; this is client-side approximation
    const isSemiAnnual = this.value !== 'annual';
    document.querySelectorAll('[data-amount]').forEach(cell => {
        // Reset display only — server calculates true values
        cell.style.opacity = '0.6';
    });
});

updateSummary(); // Init on load
</script>
@endpush