@extends('layouts.app')

@section('title', 'Admission – Fee Payment')

@section('content')

    {{-- Stepper --}}
    <div class="step-indicator mt-4">
        <div class="step-item">
            <div class="step-circle completed"><i class="bi bi-check-lg"></i></div>
            <span class="step-label completed">Admission Form</span>
        </div>
        <div class="step-connector completed"></div>
        <div class="step-item">
            <div class="step-circle completed"><i class="bi bi-check-lg"></i></div>
            <span class="step-label completed">Document Upload</span>
        </div>
        <div class="step-connector completed"></div>
        <div class="step-item">
            <div class="step-circle active">3</div>
            <span class="step-label active">Payment</span>
        </div>
    </div>

    {{-- Info bar --}}
    <div class="form-topbar mb-0">
        <div class="form-number-badge">
            Form No: <strong>{{ $application->form_number }}</strong>
        </div>
        <div style="font-size:0.85rem;color:#6b7280;">
            <i class="bi bi-person me-1"></i>{{ $application->applicant_name }}
            &nbsp;&bull;&nbsp;
            <i class="bi bi-mortarboard me-1"></i>{{ $admission->course ?? $application->course }}
        </div>
    </div>

    {{-- Already paid check --}}
    @if ($admission->payment_status == 1)
        <div class="success-hero py-4">
            <div class="success-icon"><i class="bi bi-check2-all"></i></div>
            <h4 style="color:#15803d">Admission fee already paid.</h4>
            <a href="{{ route('application.admissionSuccess', $application->form_number) }}"
               class="btn-primary-custom text-decoration-none mt-3 d-inline-block">
                View Admission Confirmation <i class="bi bi-arrow-right ms-2"></i>
            </a>
        </div>
    @else

    <div class="hint-box mt-3 mb-4">
        <i class="bi bi-info-circle me-1"></i>
        <strong>Admission Fee Payment</strong><br>
        You are required to pay the <strong>Admission Fee of ₹{{ number_format(admissionFees($application->course, $admission->subject), 2) }}</strong> to complete your admission.
        Payment is processed securely via <strong>BillDesk</strong>.
        Please do not close or refresh the browser during payment.
    </div>

    @if (session('error'))
        <div class="alert" style="background:#fef2f2;border:1.5px solid #fca5a5;border-radius:8px;padding:12px 18px;margin-bottom:1rem;color:#b91c1c;font-size:0.88rem">
            <i class="bi bi-exclamation-circle-fill me-2"></i>{{ session('error') }}
        </div>
    @endif

    {{-- Payment summary card --}}
    <div class="form-card">
        <div class="form-card-header">
            <div class="section-icon"><i class="bi bi-credit-card-fill"></i></div>
            <h3>Payment Summary</h3>
        </div>
        {{-- @dd(admissionFees($application->course, $admission->subject)) --}}
        <div class="form-card-body">
            <table style="width:100%;font-size:0.9rem;border-collapse:collapse">
                <tr style="border-bottom:1px solid #e5e7eb">
                    <td style="padding:10px 0;color:#6b7280;width:50%">Applicant Name</td>
                    <td style="padding:10px 0;font-weight:600">{{ $application->applicant_name }}</td>
                </tr>
                <tr style="border-bottom:1px solid #e5e7eb">
                    <td style="padding:10px 0;color:#6b7280">Form Number</td>
                    <td style="padding:10px 0;font-weight:600;font-family:monospace">{{ $application->form_number }}</td>
                </tr>
                <tr style="border-bottom:1px solid #e5e7eb">
                    <td style="padding:10px 0;color:#6b7280">Course</td>
                    <td style="padding:10px 0;font-weight:600">
                        {{ $admission->course ?? $application->course }}
                        @if($admission->subject) – {{ $admission->subject }} @endif
                    </td>
                </tr>
                <tr style="border-bottom:1px solid #e5e7eb">
                    <td style="padding:10px 0;color:#6b7280">Fee Description</td>
                    <td style="padding:10px 0;font-weight:600">Admission Fee</td>
                </tr>
                <tr>
                    <td style="padding:12px 0;color:#1a3a6b;font-weight:700;font-size:1rem">Amount Payable</td>
                    <td style="padding:12px 0;font-weight:800;font-size:1.2rem;color:#1a3a6b">₹{{ number_format(admissionFees($application->course, $admission->subject), 2) }}</td>
                </tr>
            </table>

            <div style="background:#fffbeb;border:1.5px solid #f59e0b;border-radius:8px;padding:14px 18px;margin-top:20px;font-size:0.85rem;color:#92400e">
                <i class="bi bi-exclamation-triangle-fill me-2"></i>
                <strong>Important:</strong> This fee is non-refundable. Ensure all your details are correct before proceeding.
                After successful payment your student account will be created automatically.
            </div>

            <div class="d-flex justify-content-between align-items-center mt-4">
                <a href="{{ route('application.admissionDocuments', $application->form_number) }}"
                   class="btn-secondary-custom text-decoration-none">
                    <i class="bi bi-arrow-left me-2"></i>Back to Documents
                </a>

                <form action="{{ route('application.admissionPaymentPay', $application->form_number) }}"
                      method="POST" id="pay-form">
                    @csrf
                    <button type="submit" class="btn-primary-custom" id="pay-btn">
                        <i class="bi bi-shield-lock me-2"></i>Pay ₹{{ number_format(admissionFees($application->course, $admission->subject), 2) }} via BillDesk
                    </button>
                </form>
            </div>
        </div>
    </div>

    @endif

@endsection

@push('scripts')
<script>
    document.getElementById('pay-form')?.addEventListener('submit', function () {
        const btn = document.getElementById('pay-btn');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Redirecting to payment...';
        }
    });
</script>
@endpush