@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">
                    <h1 class="display-6 mb-3">
                        <i class="bi bi-cash-coin"></i> Record Payment
                    </h1>

                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('payments.list') }}">Payments</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Record Payment</li>
                        </ol>
                    </nav>

                    @include('session-messages')

                    @if(!$activeProfile)
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                            <strong>No Active Payment Profile</strong>
                            <p class="mb-0">This student doesn't have an active payment profile. Please create one first through the promotions system.</p>
                        </div>
                        <a href="{{ route('payments.list') }}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> Back to Payments
                        </a>
                    @else
                        <!-- Student Info Card - Big and Clear -->
                        <div class="card border-primary shadow-lg mb-4">
                            <div class="card-header bg-primary text-white">
                                <h4 class="mb-0"><i class="bi bi-person-circle"></i> Student Information</h4>
                            </div>
                            <div class="card-body" style="font-size: 1.1rem;">
                                <div class="row">
                                    <div class="col-md-6">
                                        <p class="mb-2"><strong>Name:</strong> 
                                            <span class="text-primary fs-5">{{ $student->first_name }} {{ $student->last_name }}</span>
                                        </p>
                                        <p class="mb-2"><strong>Class:</strong> {{ $activeProfile->promotion->schoolClass->class_name ?? 'N/A' }}</p>
                                        <p class="mb-2"><strong>Section:</strong> {{ $activeProfile->promotion->section->section_name ?? 'N/A' }}</p>
                                    </div>
                                    <div class="col-md-6">
                                        <p class="mb-2"><strong>Payment Type:</strong> 
                                            @if($activeProfile->payment_type == 0)
                                                <span class="badge bg-info fs-6">Free Student</span>
                                            @elseif($activeProfile->payment_type == 1)
                                                <span class="badge bg-primary fs-6">Monthly Payment</span>
                                            @else
                                                <span class="badge bg-warning fs-6">Annual Payment</span>
                                            @endif
                                        </p>
                                        <p class="mb-2"><strong>Session:</strong> {{ $activeProfile->schoolSession->session_name ?? 'N/A' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Balance Card - Very Clear -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="card text-white bg-info shadow">
                                    <div class="card-body text-center p-4">
                                        <h6 class="mb-2">Total Amount Owed</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($activeProfile->total_amount_owed, 2) }} PKR</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card text-white bg-success shadow">
                                    <div class="card-body text-center p-4">
                                        <h6 class="mb-2">Already Paid</h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($activeProfile->total_amount_paid, 2) }} PKR</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card text-white {{ $activeProfile->balance_remaining > 0 ? 'bg-danger' : 'bg-success' }} shadow">
                                    <div class="card-body text-center p-4">
                                        <h6 class="mb-2">
                                            <i class="bi bi-exclamation-circle-fill"></i> Remaining Balance
                                        </h6>
                                        <h2 class="mb-0 fw-bold">{{ number_format($activeProfile->balance_remaining, 2) }} PKR</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($activeProfile->balance_remaining <= 0)
                            <!-- Fully Paid Message -->
                            <div class="alert alert-success alert-dismissible fade show shadow" role="alert">
                                <h4 class="alert-heading"><i class="bi bi-check-circle-fill"></i> Payment Complete!</h4>
                                <p class="mb-0">This student has paid all their fees. No payment needed at this time.</p>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                            <a href="{{ route('payments.list') }}" class="btn btn-primary btn-lg">
                                <i class="bi bi-arrow-left"></i> Back to Payments
                            </a>
                        @else
                            <!-- Payment Form - Super Simple -->
                            <div class="card shadow-lg border-success">
                                <div class="card-header bg-success text-white">
                                    <h4 class="mb-0"><i class="bi bi-cash-stack"></i> Record New Payment</h4>
                                </div>
                                <div class="card-body p-4">
                                    <form action="{{ route('payments.update', $activeProfile->id) }}" method="POST" id="paymentForm">
                                        @csrf

                                        <!-- Amount Input - Big and Clear -->
                                        <div class="mb-4">
                                            <label for="amount_paid" class="form-label fs-5 fw-bold">
                                                <i class="bi bi-currency-exchange"></i> How much is the student paying today?
                                            </label>
                                            <div class="input-group input-group-lg">
                                                <span class="input-group-text bg-primary text-white fs-4">PKR</span>
                                                <input 
                                                    type="number" 
                                                    class="form-control form-control-lg @error('amount_paid') is-invalid @enderror" 
                                                    id="amount_paid" 
                                                    name="amount_paid" 
                                                    placeholder="Enter amount (e.g., 1000)"
                                                    step="0.01"
                                                    min="0.01"
                                                    max="{{ $activeProfile->balance_remaining }}"
                                                    value="{{ old('amount_paid') }}"
                                                    required
                                                    style="font-size: 1.5rem; font-weight: bold;"
                                                >
                                                @error('amount_paid')
                                                    <div class="invalid-feedback fs-6">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <small class="form-text text-muted fs-6">
                                                <i class="bi bi-info-circle"></i> Maximum you can enter: <strong>{{ number_format($activeProfile->balance_remaining, 2) }} PKR</strong>
                                            </small>
                                        </div>

                                        <!-- Payment Type Selection - Simple Icons -->
                                        <div class="mb-4">
                                            <label class="form-label fs-5 fw-bold">
                                                <i class="bi bi-tag-fill"></i> What type of payment is this?
                                            </label>
                                            <div class="row g-3">
                                                @if(!$activeProfile->admission_fee_paid)
                                                    <div class="col-md-4">
                                                        <input type="radio" class="btn-check" name="transaction_type" id="type_admission" value="1" checked required>
                                                        <label class="btn btn-outline-primary btn-lg w-100 p-4" for="type_admission">
                                                            <i class="bi bi-door-open fs-1 d-block mb-2"></i>
                                                            <strong>Admission Fee</strong>
                                                            <br><small>One-time entrance fee</small>
                                                        </label>
                                                    </div>
                                                @endif
                                                @if($activeProfile->payment_type == 1)
                                                    <div class="col-md-4">
                                                        <input type="radio" class="btn-check" name="transaction_type" id="type_monthly" value="2" {{ $activeProfile->admission_fee_paid ? 'checked' : '' }} required>
                                                        <label class="btn btn-outline-primary btn-lg w-100 p-4" for="type_monthly">
                                                            <i class="bi bi-calendar-month fs-1 d-block mb-2"></i>
                                                            <strong>Monthly Fee</strong>
                                                            <br><small>Regular monthly payment</small>
                                                        </label>
                                                    </div>
                                                @endif
                                                @if($activeProfile->payment_type == 2)
                                                    <div class="col-md-4">
                                                        <input type="radio" class="btn-check" name="transaction_type" id="type_annual" value="3" {{ $activeProfile->admission_fee_paid ? 'checked' : '' }} required>
                                                        <label class="btn btn-outline-primary btn-lg w-100 p-4" for="type_annual">
                                                            <i class="bi bi-calendar-year fs-1 d-block mb-2"></i>
                                                            <strong>Annual Fee</strong>
                                                            <br><small>Yearly payment</small>
                                                        </label>
                                                    </div>
                                                @endif
                                            </div>
                                            @error('transaction_type')
                                                <div class="text-danger mt-2">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Payment Method - Simple Icons -->
                                        <div class="mb-4">
                                            <label class="form-label fs-5 fw-bold">
                                                <i class="bi bi-wallet2"></i> How are they paying?
                                            </label>
                                            <div class="row g-3">
                                                <div class="col-md-3">
                                                    <input type="radio" class="btn-check" name="payment_method" id="method_cash" value="1" checked required>
                                                    <label class="btn btn-outline-success btn-lg w-100 p-4" for="method_cash">
                                                        <i class="bi bi-cash-stack fs-1 d-block mb-2"></i>
                                                        <strong>Cash</strong>
                                                    </label>
                                                </div>
                                                <div class="col-md-3">
                                                    <input type="radio" class="btn-check" name="payment_method" id="method_cheque" value="2" required>
                                                    <label class="btn btn-outline-success btn-lg w-100 p-4" for="method_cheque">
                                                        <i class="bi bi-file-text fs-1 d-block mb-2"></i>
                                                        <strong>Cheque</strong>
                                                    </label>
                                                </div>
                                                <div class="col-md-3">
                                                    <input type="radio" class="btn-check" name="payment_method" id="method_bank" value="3" required>
                                                    <label class="btn btn-outline-success btn-lg w-100 p-4" for="method_bank">
                                                        <i class="bi bi-bank fs-1 d-block mb-2"></i>
                                                        <strong>Bank Transfer</strong>
                                                    </label>
                                                </div>
                                                <div class="col-md-3">
                                                    <input type="radio" class="btn-check" name="payment_method" id="method_online" value="4" required>
                                                    <label class="btn btn-outline-success btn-lg w-100 p-4" for="method_online">
                                                        <i class="bi bi-phone fs-1 d-block mb-2"></i>
                                                        <strong>Online</strong>
                                                    </label>
                                                </div>
                                            </div>
                                            @error('payment_method')
                                                <div class="text-danger mt-2">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Date -->
                                        <div class="mb-4">
                                            <label for="transaction_date" class="form-label fs-5 fw-bold">
                                                <i class="bi bi-calendar-check"></i> Payment Date
                                            </label>
                                            <input 
                                                type="date" 
                                                class="form-control form-control-lg @error('transaction_date') is-invalid @enderror" 
                                                id="transaction_date" 
                                                name="transaction_date" 
                                                value="{{ old('transaction_date', date('Y-m-d')) }}"
                                                max="{{ date('Y-m-d') }}"
                                                required
                                            >
                                            @error('transaction_date')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <!-- Notes (Optional) -->
                                        <div class="mb-4">
                                            <label for="remarks" class="form-label fs-5">
                                                <i class="bi bi-pencil-square"></i> Notes (Optional)
                                            </label>
                                            <textarea 
                                                class="form-control" 
                                                id="remarks" 
                                                name="remarks" 
                                                rows="2" 
                                                placeholder="Add any notes about this payment (optional)"
                                            >{{ old('remarks') }}</textarea>
                                        </div>

                                        <hr class="my-4">

                                        <!-- Action Buttons - Big and Clear -->
                                        <div class="d-flex justify-content-between align-items-center">
                                            <a href="{{ route('payments.list') }}" class="btn btn-secondary btn-lg">
                                                <i class="bi bi-x-circle"></i> Cancel
                                            </a>
                                            <button type="submit" class="btn btn-success btn-lg px-5" id="submitBtn">
                                                <i class="bi bi-check-circle-fill"></i> Record Payment
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        @endif

                        <!-- Payment History -->
                        @if($activeProfile->transactions && $activeProfile->transactions->count() > 0)
                            <div class="card shadow mt-4">
                                <div class="card-header bg-light">
                                    <h5 class="mb-0"><i class="bi bi-clock-history"></i> Recent Payments</h5>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>Receipt #</th>
                                                    <th>Date</th>
                                                    <th>Type</th>
                                                    <th>Amount</th>
                                                    <th>Method</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($activeProfile->transactions->take(5) as $transaction)
                                                <tr>
                                                    <td><strong>{{ $transaction->transaction_number }}</strong></td>
                                                    <td>{{ $transaction->transaction_date->format('d M Y') }}</td>
                                                    <td>
                                                        @if($transaction->transaction_type == 1)
                                                            <span class="badge bg-primary">Admission</span>
                                                        @elseif($transaction->transaction_type == 2)
                                                            <span class="badge bg-info">Monthly</span>
                                                        @else
                                                            <span class="badge bg-warning">Annual</span>
                                                        @endif
                                                    </td>
                                                    <td><strong>{{ number_format($transaction->amount_paid, 2) }} PKR</strong></td>
                                                    <td>
                                                        @if($transaction->payment_method == 1)
                                                            Cash
                                                        @elseif($transaction->payment_method == 2)
                                                            Cheque
                                                        @elseif($transaction->payment_method == 3)
                                                            Bank Transfer
                                                        @else
                                                            Online
                                                        @endif
                                                    </td>
                                                </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endif
                    @endif
                </div>
            </div>
            @include('layouts.footer')
        </div>
    </div>
</div>

<script>
// Simple validation to help users
document.getElementById('paymentForm')?.addEventListener('submit', function(e) {
    const amount = parseFloat(document.getElementById('amount_paid').value);
    const maxAmount = parseFloat({{ $activeProfile->balance_remaining ?? 0 }});
    
    if (amount > maxAmount) {
        e.preventDefault();
        alert('⚠️ Amount cannot be more than the remaining balance of ' + maxAmount.toFixed(2) + ' PKR');
        return false;
    }
    
    if (amount <= 0) {
        e.preventDefault();
        alert('⚠️ Please enter an amount greater than 0');
        return false;
    }
    
    // Confirm before submitting
    if (!confirm('✅ Record payment of ' + amount.toFixed(2) + ' PKR for this student?')) {
        e.preventDefault();
        return false;
    }
    
    // Disable submit button to prevent double submission
    document.getElementById('submitBtn').disabled = true;
    document.getElementById('submitBtn').innerHTML = '<i class="bi bi-hourglass-split"></i> Processing...';
});
</script>

<style>
.btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.btn-check:checked + .btn-outline-success {
    background-color: #198754;
    color: white;
    border-color: #198754;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
}
</style>

@endsection