@extends('layouts.app')
@section('title', 'Fee Management')
@section('page-title', 'Fee Management')

@section('content')
<div class="space-y-6">

    {{-- Messages --}}
    @if(session('success'))
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-check-circle mr-1"></i> {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl text-sm">
        <i class="fas fa-exclamation-circle mr-1"></i> {{ session('error') }}
    </div>
    @endif

    {{-- Stats Cards --}}
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Total Invoices</p>
            <p class="text-2xl font-bold text-gray-800 mt-1">{{ $stats['total_invoices'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Total Billed</p>
            <p class="text-2xl font-bold text-gray-800 mt-1">₹{{ number_format($stats['total_amount'], 0) }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Collected</p>
            <p class="text-2xl font-bold text-green-600 mt-1">₹{{ number_format($stats['paid_amount'], 0) }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Pending</p>
            <p class="text-2xl font-bold text-yellow-600 mt-1">{{ $stats['pending_count'] }}</p>
        </div>
        <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 p-4">
            <p class="text-xs text-gray-500 uppercase font-medium">Overdue</p>
            <p class="text-2xl font-bold text-red-600 mt-1">{{ $stats['overdue_count'] }}</p>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="flex flex-wrap gap-3">
        <button onclick="document.getElementById('structureModal').classList.remove('hidden')"
                class="inline-flex items-center gap-2 bg-primary-700 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-primary-800 transition">
            <i class="fas fa-plus"></i> New Fee Structure
        </button>
        <a href="{{ route('fees.generate.form') }}"
           class="inline-flex items-center gap-2 bg-gray-800 text-white px-4 py-2.5 rounded-lg text-sm font-medium hover:bg-gray-900 transition">
            <i class="fas fa-file-invoice"></i> Generate Invoices
        </a>
    </div>

    {{-- Fee Structures --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-layer-group mr-2 text-gray-400"></i>Fee Structures</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Name</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Class</th>
                        <th class="px-5 py-3 text-right text-xs font-semibold text-gray-600 uppercase">Amount</th>
                        <th class="px-5 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Frequency</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Due Date</th>
                        <th class="px-5 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Invoices</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($structures as $s)
                    <tr class="hover:bg-gray-50">
                        <td class="px-5 py-3 text-sm font-medium text-gray-800">{{ $s->name }}</td>
                        <td class="px-5 py-3 text-sm text-gray-600">{{ $s->class_?->full_name ?? 'All Classes' }}</td>
                        <td class="px-5 py-3 text-sm font-semibold text-gray-800 text-right">₹{{ number_format($s->amount, 2) }}</td>
                        <td class="px-5 py-3 text-center">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 capitalize">
                                {{ str_replace('_', ' ', $s->frequency) }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-sm text-gray-600">{{ $s->due_date->format('d M Y') }}</td>
                        <td class="px-5 py-3 text-center text-sm text-gray-600">{{ $s->invoices->count() }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="px-5 py-8 text-center text-gray-500">
                            No fee structures yet. Create one to get started.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Invoices List --}}
    <div class="bg-white rounded-xl shadow-sm ring-1 ring-gray-200/60 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center justify-between">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-file-invoice mr-2 text-gray-400"></i>Invoices</h3>
        </div>

        {{-- Filters --}}
        <div class="px-6 py-3 border-b border-gray-50 bg-gray-50/30">
            <form method="GET" class="flex flex-wrap gap-3 items-end">
                <div class="flex-1 min-w-[150px]">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search student..."
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                </div>
                <div>
                    <select name="class_id" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        <option value="">All Classes</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>{{ $class->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        <option value="">All Status</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="partial" {{ request('status') === 'partial' ? 'selected' : '' }}>Partial</option>
                        <option value="paid" {{ request('status') === 'paid' ? 'selected' : '' }}>Paid</option>
                        <option value="overdue" {{ request('status') === 'overdue' ? 'selected' : '' }}>Overdue</option>
                    </select>
                </div>
                <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-900">
                    <i class="fas fa-search mr-1"></i> Filter
                </button>
                <a href="{{ route('fees.index') }}" class="text-sm text-gray-500 hover:text-gray-700 px-2 py-2">Clear</a>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full min-w-[900px]">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Invoice #</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Student</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Fee Type</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">Total</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">Paid</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase">Balance</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Due</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Status</th>
                        <th class="px-4 py-3 text-center text-xs font-semibold text-gray-600 uppercase">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50" x-data="{ payingInvoice: null }">
                    @forelse($invoices as $inv)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-xs font-mono text-gray-600">{{ $inv->invoice_number }}</td>
                        <td class="px-4 py-3">
                            <span class="text-sm font-medium text-gray-800">{{ $inv->student?->name ?? 'Deleted' }}</span>
                            <p class="text-xs text-gray-400">{{ $inv->student?->studentProfile?->class_?->full_name ?? '' }}</p>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-600">{{ $inv->feeStructure?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-sm font-semibold text-gray-800 text-right">₹{{ number_format($inv->total, 2) }}</td>
                        <td class="px-4 py-3 text-sm text-green-600 text-right">₹{{ number_format($inv->paid_amount, 2) }}</td>
                        <td class="px-4 py-3 text-sm font-semibold text-right {{ $inv->balance > 0 ? 'text-red-600' : 'text-green-600' }}">
                            ₹{{ number_format($inv->balance, 2) }}
                        </td>
                        <td class="px-4 py-3 text-xs text-gray-500">{{ $inv->due_date->format('d M Y') }}</td>
                        <td class="px-4 py-3 text-center">
                            @php
                                $statusColors = [
                                    'paid' => 'bg-green-100 text-green-700',
                                    'partial' => 'bg-blue-100 text-blue-700',
                                    'pending' => 'bg-yellow-100 text-yellow-700',
                                    'overdue' => 'bg-red-100 text-red-700',
                                ];
                            @endphp
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold {{ $statusColors[$inv->status] ?? 'bg-gray-100 text-gray-700' }}">
                                {{ ucfirst($inv->status) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <div class="flex items-center justify-center gap-1.5">
                                @if($inv->balance > 0)
                                <button @click="payingInvoice = payingInvoice === {{ $inv->id }} ? null : {{ $inv->id }}"
                                        class="text-xs bg-green-50 text-green-700 px-2 py-1 rounded-lg hover:bg-green-100 font-medium">
                                    <i class="fas fa-money-bill-wave mr-0.5"></i> Record
                                </button>
                                @endif
                                @foreach($inv->payments->where('status', 'success')->take(1) as $p)
                                <a href="{{ route('fees.receipt', $p) }}" class="text-xs text-blue-600 hover:text-blue-800" title="Download Receipt">
                                    <i class="fas fa-receipt"></i>
                                </a>
                                @endforeach
                                @if($inv->payments->where('status', 'success')->isEmpty())
                                <form method="POST" action="{{ route('fees.invoice.destroy', $inv) }}" class="inline"
                                      onsubmit="return confirm('Delete this invoice?')">
                                    @csrf @method('DELETE')
                                    <button class="text-xs text-red-400 hover:text-red-600" title="Delete"><i class="fas fa-trash-can"></i></button>
                                </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    {{-- Inline Payment Form --}}
                    <tr x-show="payingInvoice === {{ $inv->id }}" x-transition>
                        <td colspan="9" class="px-4 py-3 bg-green-50/50">
                            <form method="POST" action="{{ route('fees.pay', $inv) }}" class="flex flex-wrap items-end gap-3">
                                @csrf
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Amount (max: ₹{{ number_format($inv->balance, 2) }})</label>
                                    <input type="number" name="amount" step="0.01" min="1" max="{{ $inv->balance }}" value="{{ $inv->balance }}" required
                                           class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-36">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Method</label>
                                    <select name="method" required class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
                                        <option value="cash">Cash</option>
                                        <option value="cheque">Cheque</option>
                                        <option value="bank_transfer">Bank Transfer</option>
                                        <option value="online">Online</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-gray-600 mb-1">Transaction/Cheque #</label>
                                    <input type="text" name="transaction_id" placeholder="Optional"
                                           class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-40">
                                </div>
                                <button type="submit" class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700">
                                    <i class="fas fa-check mr-1"></i> Record Payment
                                </button>
                                <button type="button" @click="payingInvoice = null" class="text-gray-500 hover:text-gray-700 text-sm px-2 py-2">Cancel</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-4 py-12 text-center text-gray-500">
                            <i class="fas fa-file-invoice text-4xl mb-3 block text-gray-300"></i>
                            No invoices found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($invoices->hasPages())
        <div class="px-6 py-4 border-t border-gray-100">{{ $invoices->links() }}</div>
        @endif
    </div>
</div>

{{-- Create Fee Structure Modal --}}
<div id="structureModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg">
        <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="font-semibold text-gray-800">Create Fee Structure</h3>
            <button onclick="document.getElementById('structureModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" action="{{ route('fees.structure.store') }}" class="p-6 space-y-4">
            @csrf
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Name <span class="text-red-400">*</span></label>
                    <input type="text" name="name" required placeholder="e.g. Tuition Fee - Term 1"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Amount <span class="text-red-400">*</span></label>
                    <input type="number" name="amount" required step="0.01" min="0" placeholder="5000"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Class</label>
                    <select name="class_id" class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                        <option value="">All Classes</option>
                        @foreach($classes as $class)
                            <option value="{{ $class->id }}">{{ $class->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Frequency <span class="text-red-400">*</span></label>
                    <select name="frequency" required class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                        <option value="one_time">One Time</option>
                        <option value="monthly">Monthly</option>
                        <option value="quarterly">Quarterly</option>
                        <option value="term">Per Term</option>
                        <option value="annual">Annual</option>
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Due Date <span class="text-red-400">*</span></label>
                    <input type="date" name="due_date" required class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Academic Year</label>
                    <input type="hidden" name="academic_year_id" value="{{ $academicYear?->id }}">
                    <input type="text" value="{{ $academicYear?->name ?? 'Not Set' }}" disabled
                           class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-gray-50">
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="2" placeholder="Optional description..."
                          class="w-full border border-gray-300 rounded-lg px-3 py-2.5 text-sm resize-none"></textarea>
            </div>
            <div class="flex justify-end gap-3 pt-2">
                <button type="button" onclick="document.getElementById('structureModal').classList.add('hidden')"
                        class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancel</button>
                <button type="submit" class="px-5 py-2.5 bg-primary-700 text-white text-sm font-medium rounded-lg hover:bg-primary-800">
                    <i class="fas fa-plus mr-1"></i> Create
                </button>
            </div>
        </form>
    </div>
</div>
@endsection