@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-start">
        @include('layouts.left-menu')
        
        <div class="col-xs-11 col-sm-11 col-md-11 col-lg-10 col-xl-10 col-xxl-10">
            <div class="row pt-2">
                <div class="col ps-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h1 class="display-6 mb-0">
                            <i class="bi bi-currency-exchange"></i> Payment Records
                        </h1>
                        @if(auth()->user()->role == 'admin')
                            <a href="{{ route('payments.settings') }}" class="btn btn-primary">
                                <i class="bi bi-gear-fill"></i> Settings
                            </a>
                        @endif
                    </div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Payments</li>
                        </ol>
                    </nav>
                    @include('session-messages')

                    <!-- Stats Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card theme-card-primary shadow-sm">
                                <div class="card-body text-center p-3">
                                    <i class="bi bi-calculator-fill fs-2 mb-2"></i>
                                    <h5 class="fw-bold mb-0">{{ number_format($totalAmountOwed, 2) }}</h5>
                                    <small>Total Owed (PKR)</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card theme-card-success shadow-sm">
                                <div class="card-body text-center p-3">
                                    <i class="bi bi-check-circle-fill fs-2 mb-2"></i>
                                    <h5 class="fw-bold mb-0">{{ number_format($totalPaid, 2) }}</h5>
                                    <small>Total Paid (PKR)</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card theme-card-danger shadow-sm">
                                <div class="card-body text-center p-3">
                                    <i class="bi bi-exclamation-triangle-fill fs-2 mb-2"></i>
                                    <h5 class="fw-bold mb-0">{{ number_format($totalRemaining, 2) }}</h5>
                                    <small>Balance Remaining (PKR)</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card theme-card-info shadow-sm">
                                <div class="card-body text-center p-3">
                                    <i class="bi bi-people-fill fs-2 mb-2"></i>
                                    <h5 class="fw-bold mb-0">{{ $admissionsCount }}</h5>
                                    <small>Total Students</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Filters -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h6 class="mb-0"><i class="bi bi-funnel"></i> Filter Payments</h6>
                        </div>
                        <div class="card-body">
                            <form method="GET" action="{{ route('payments.list') }}" class="row g-3">
                                <div class="col-md-3">
                                    <label for="start_date" class="form-label fw-bold">Start Date</label>
                                    <input type="date" name="start_date" id="start_date" class="form-control"
                                        value="{{ request('start_date') }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="end_date" class="form-label fw-bold">End Date</label>
                                    <input type="date" name="end_date" id="end_date" class="form-control"
                                        value="{{ request('end_date') }}">
                                </div>
                                <div class="col-md-2">
                                    <label for="payment_type" class="form-label fw-bold">Payment Type</label>
                                    <select name="payment_type" id="payment_type" class="form-select">
                                        <option value="all" {{ request('payment_type') == 'all' ? 'selected' : '' }}>All Types</option>
                                        <option value="0" {{ request('payment_type') == '0' ? 'selected' : '' }}>Free</option>
                                        <option value="1" {{ request('payment_type') == '1' ? 'selected' : '' }}>Monthly</option>
                                        <option value="2" {{ request('payment_type') == '2' ? 'selected' : '' }}>Annual</option>
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label for="payment_status" class="form-label fw-bold">Status</label>
                                    <select name="payment_status" id="payment_status" class="form-select">
                                        <option value="" {{ request('payment_status') == '' ? 'selected' : '' }}>All Status</option>
                                        <option value="paid" {{ request('payment_status') == 'paid' ? 'selected' : '' }}>Paid</option>
                                        <option value="unpaid" {{ request('payment_status') == 'unpaid' ? 'selected' : '' }}>Unpaid</option>
                                        <option value="partial" {{ request('payment_status') == 'partial' ? 'selected' : '' }}>Partial</option>
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="bi bi-search"></i> Filter
                                    </button>
                                </div>
                            </form>
                            <div class="row mt-3">
                                <div class="col-md-10">
                                    <input type="text" name="search" class="form-control" 
                                        placeholder="Search by student name, email, or voucher number..."
                                        value="{{ request('search') }}"
                                        form="search-form">
                                </div>
                                <div class="col-md-2">
                                    <form id="search-form" method="GET" action="{{ route('payments.list') }}">
                                        @if(request('start_date'))<input type="hidden" name="start_date" value="{{ request('start_date') }}">@endif
                                        @if(request('end_date'))<input type="hidden" name="end_date" value="{{ request('end_date') }}">@endif
                                        @if(request('payment_type'))<input type="hidden" name="payment_type" value="{{ request('payment_type') }}">@endif
                                        @if(request('payment_status'))<input type="hidden" name="payment_status" value="{{ request('payment_status') }}">@endif
                                        <button type="submit" class="btn btn-secondary w-100">
                                            <i class="bi bi-search"></i> Search
                                        </button>
                                    </form>
                                </div>
                            </div>
                            @if(request()->hasAny(['start_date', 'end_date', 'payment_type', 'payment_status', 'search']))
                                <div class="mt-3">
                                    <a href="{{ route('payments.list') }}" class="btn btn-sm btn-outline-secondary">
                                        <i class="bi bi-x-circle"></i> Clear All Filters
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Payment List -->
                    <div class="bg-white border shadow-sm p-3">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">
                                <i class="bi bi-list-ul"></i> Payment Records 
                                <span class="badge bg-primary">{{ $payments->total() }}</span>
                            </h5>
                            <small class="text-muted">
                                Showing {{ $payments->firstItem() ?? 0 }} to {{ $payments->lastItem() ?? 0 }} of {{ $payments->total() }}
                            </small>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col">Voucher</th>
                                        <th scope="col">Student</th>
                                        <th scope="col">Class</th>
                                        <th scope="col">Payment Type</th>
                                        <th scope="col">Total Owed</th>
                                        <th scope="col">Paid</th>
                                        <th scope="col">Balance</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($payments as $payment)
                                    <tr>
                                        <td class="fw-bold text-primary">
                                            <small>{{ $payment->admission_voucher_number ?? 'N/A' }}</small>
                                        </td>
                                        <td>
                                            <strong>
                                                {{ $payment->student->first_name ?? 'N/A' }} 
                                                {{ $payment->student->last_name ?? '' }}
                                            </strong>
                                        </td>
                                        <td>{{ $payment->promotion->schoolClass->class_name ?? 'N/A' }}</td>
                                        <td>
                                            @if($payment->payment_type == 0)
                                                <span class="badge bg-info">🎁 Free</span>
                                            @elseif($payment->payment_type == 1)
                                                <span class="badge bg-primary">📅 Monthly</span>
                                            @else
                                                <span class="badge bg-warning">📅 Annual</span>
                                            @endif
                                        </td>
                                        <td class="fw-bold">{{ number_format($payment->total_amount_owed, 2) }}</td>
                                        <td class="text-success">{{ number_format($payment->total_amount_paid, 2) }}</td>
                                        <td>
                                            <span class="fw-bold {{ $payment->balance_remaining > 0 ? 'text-danger' : 'text-success' }}">
                                                {{ number_format($payment->balance_remaining, 2) }}
                                            </span>
                                        </td>
                                        <td>
                                            @if($payment->balance_remaining <= 0)
                                                <span class="badge bg-success">✅ Paid</span>
                                            @elseif($payment->total_amount_paid > 0)
                                                <span class="badge bg-warning">⚠️ Partial</span>
                                            @else
                                                <span class="badge bg-danger">❌ Unpaid</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group-vertical btn-group-sm" role="group">
                                                <a href="{{ route('payments.show', $payment->id) }}" 
                                                   class="btn btn-sm btn-info" title="View Details">
                                                    <i class="bi bi-eye"></i> View
                                                </a>
                                                @if(auth()->user()->role == 'admin' && $payment->balance_remaining > 0)
                                                    <a href="{{ route('payments.edit', $payment->student_id) }}" 
                                                       class="btn btn-sm btn-success" title="Record Payment">
                                                        <i class="bi bi-cash-coin"></i> Pay
                                                    </a>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9" class="text-center text-muted py-5">
                                            <i class="bi bi-inbox" style="font-size: 3rem;"></i>
                                            <p class="mt-2 mb-0">No payment records found</p>
                                            @if(request()->hasAny(['start_date', 'end_date', 'payment_type', 'payment_status', 'search']))
                                                <p><small>Try adjusting your filters</small></p>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

                        <!-- Pagination -->
                        <div class="d-flex justify-content-center mt-4">
                            {{ $payments->links() }}
                        </div>
                    </div>
                </div>
            </div>
            @include('layouts.footer')
        </div>
    </div>
</div>

<style>
    .theme-card-primary {
        background: linear-gradient(-45deg, #1054a9, #179ceb);
        color: white;
    }
    .theme-card-success {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: white;
    }
    .theme-card-danger {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: white;
    }
    .theme-card-info {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    .card {
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-3px);
    }
</style>
@endsection