@extends('layout.layout')

@section('content')
    <div class="course-pay-page">
        <div class="course-pay-shell">
            @include('components.alert')

            @php
                $invoice = $course['invoice'] ?? [];
                $transaction = $course['transaction'] ?? [];
                $pricing = $course['pricing'] ?? [];
                $amountDue = (float) data_get($invoice, 'amount_due', data_get($pricing, 'amount_due', 0));
                $isPaid = ($invoice['payment_status'] ?? null) === 'paid' || $amountDue <= 0;
                $isDepositInvoice = in_array(($invoice['payment_status'] ?? null), ['deposite', 'paid_deposite'], true);
                $hasPendingOnlinePayment = ($transaction['payment_type'] ?? null) === 'online'
                    && in_array(($transaction['status'] ?? null), ['pending', 'created'], true)
                    && filled($transaction['payment_url'] ?? null);
            @endphp

            <div class="course-pay-top">
                <a href="{{ route('student.schedule.index') }}" class="course-pay-back">
                    <i class="fa-solid fa-arrow-left"></i>
                    <span>Back to schedule</span>
                </a>
                <a href="{{ route('student.payments.index') }}" class="course-pay-link">
                    <i class="fa-regular fa-credit-card"></i>
                    <span>All payments</span>
                </a>
            </div>

            <section class="course-pay-hero">
                <div>
                    <span class="course-pay-eyebrow">Course Booking</span>
                    <h1>{{ $course['course_name'] ?? 'Course payment' }}</h1>
                    <p>
                        Complete the course payment to unlock the included free placement test for this enrollment.
                    </p>
                    <div class="course-pay-pills">
                        <span><i class="fa-solid fa-user-graduate"></i>{{ $student->full_name }}</span>
                        @if($course['package_name'])
                            <span><i class="fa-solid fa-layer-group"></i>{{ $course['package_name'] }}</span>
                        @endif
                        <span><i class="fa-solid fa-shield-halved"></i>Placement test included</span>
                    </div>
                </div>
                <div class="course-pay-total">
                    <span>Amount due</span>
                    <strong id="course-payment-due" data-currency-base-amount="{{ $amountDue }}">{{ number_format($amountDue, 2) }} {{ $pricing['currency'] ?? $invoice['currency'] ?? '' }}</strong>
                    <small>{{ $isPaid ? 'Payment completed' : ($isDepositInvoice ? 'Deposit paid, remaining balance due' : 'No extra placement-test fee') }}</small>
                </div>
            </section>

            <div class="course-pay-grid">
                <section class="course-pay-panel">
                    <div class="panel-head">
                        <div>
                            <h2>Booking Details</h2>
                            <p>Course, teacher, schedule, and invoice information.</p>
                        </div>
                        <span class="status-pill {{ $isPaid ? 'status-pill--paid' : 'status-pill--pending' }}">
                            {{ $isPaid ? 'Paid' : ($isDepositInvoice ? 'Deposit invoice' : 'Payment pending') }}
                        </span>
                    </div>

                    <div class="details-list">
                        <div>
                            <span>Course type</span>
                            <strong>{{ ucfirst($course['course_type'] ?? 'Course') }}</strong>
                        </div>
                        <div>
                            <span>Level</span>
                            <strong>
                                @if(!empty($course['covered_levels']))
                                    {{ implode(', ', $course['covered_levels']) }}
                                @else
                                    {{ $course['level_name'] ?? '-' }}
                                @endif
                            </strong>
                        </div>
                        <div>
                            <span>Teacher</span>
                            <strong>{{ $course['teacher_name'] ?? '-' }} <span class="badge bg-light text-dark">{{ $course['teacher_type_label'] ?? 'Native-like' }}</span></strong>
                        </div>
                        <div>
                            <span>Schedule</span>
                            <strong>{{ $course['start_date'] ?? '-' }} to {{ $course['end_date'] ?? '-' }}</strong>
                        </div>
                        <div>
                            <span>Next session</span>
                            <strong>{{ $course['next_session_at'] ?? 'No upcoming session' }}</strong>
                        </div>
                        <div>
                            <span>Invoice</span>
                            <strong>{{ $invoice['invoice_number'] ?? '-' }}</strong>
                            @if($isDepositInvoice)
                                <small>Remaining {{ number_format($amountDue, 2) }} {{ $pricing['currency'] ?? $invoice['currency'] ?? '' }}</small>
                            @endif
                        </div>
                    </div>
                </section>

                <section class="course-pay-panel course-pay-panel--payment">
                    <div class="panel-head">
                        <div>
                            <h2>{{ $isPaid ? 'Placement Test' : ($isDepositInvoice ? 'Pay Remaining Balance' : 'Pay Course') }}</h2>
                            <p>{{ $isPaid ? 'Your course payment is complete.' : ($isDepositInvoice ? 'This invoice is partially paid. Complete the remaining balance on the same invoice.' : 'Choose a payment method to finish enrollment.') }}</p>
                        </div>
                    </div>

                    @if($isPaid && data_get($course, 'placement_test.show_pending_action') && $placementRedirectUrl)
                        <a href="{{ $placementRedirectUrl }}" class="primary-pay-action">
                            <i class="fa-regular fa-calendar-check"></i>
                            <span>Pending Placement Test</span>
                        </a>
                    @elseif($isPaid && data_get($course, 'placement_test.waiting_report'))
                        <div class="payment-action-note">
                            Waiting report
                        </div>
                    @elseif($isPaid)
                        <div class="payment-action-note">
                            No action needed
                        </div>
                    @else
                        @if($hasPendingOnlinePayment)
                            <a href="{{ $transaction['payment_url'] }}" class="primary-pay-action">
                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                                <span>Continue Online Payment</span>
                            </a>
                            <div class="payment-divider"><span>or change method</span></div>
                        @endif

                        <form method="POST" action="{{ route('student.invoices.make') }}" enctype="multipart/form-data" class="course-payment-form">
                            @csrf
                            <input type="hidden" name="staff_scheduleds_id" value="{{ $course['course_id'] }}">
                            <input type="hidden" name="enrollment_id" value="{{ $enrollment->id }}">
                            <input type="hidden" name="after_payment" value="placement_test">

                            <label>
                                <span>Payment method</span>
                                <select name="payment_type" id="coursePaymentType" required>
                                    <option value="online">Online payment</option>
                                    <option value="instapay">InstaPay receipt</option>
                                </select>
                            </label>

                            <label data-online-field>
                                <span>Gateway</span>
                                <select name="payment_gateway">
                                    @foreach($paymentGateways as $gateway)
                                        <option value="{{ $gateway['value'] }}" data-currency="{{ $gateway['currency'] }}" @selected(($transaction['gateway'] ?? null) === $gateway['value'])>{{ $gateway['label'] }}</option>
                                    @endforeach
                                </select>
                            </label>

                            <label>
                                <span>Payment amount</span>
                                <input type="number" name="deposite" min="1" step="0.01" max="{{ $amountDue }}" placeholder="{{ number_format($amountDue, 2, '.', '') }}">
                            </label>

                            <label>
                                <span>Promo code</span>
                                <input type="text" name="promocode_id" value="{{ old('promocode_id') }}" placeholder="Optional">
                            </label>

                            @if(!empty($referralOptions) && $referralOptions->isNotEmpty())
                                <label>
                                    <span>Referral reward</span>
                                    <select name="referral_discount_id">
                                        <option value="">No referral reward</option>
                                        @foreach($referralOptions as $referral)
                                            <option value="{{ $referral->id }}">{{ $referral->name ?? ('Reward #'.$referral->id) }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            @endif

                            @if($canUseReferralPromoCode)
                                <label>
                                    <span>Referral promo code</span>
                                    <input type="text" name="referral_promo_code" value="{{ old('referral_promo_code') }}" placeholder="Optional">
                                </label>
                            @endif

                            @include('components.currency-pricing', ['currencyWidgetId' => 'course-payment-currency', 'currencyAmount' => $amountDue, 'currencyScopeSelector' => '.course-pay-shell', 'currencyPaymentSelectors' => ['#course-payment-due'], 'currencyContext' => ['currency' => $pricing['currency'], 'rates' => $pricing['currency_rates']]])
                            <label data-instapay-field class="d-none">
                                <span>Treasury</span>
                                <select name="treasury_id">
                                    <option value="">Select treasury</option>
                                    @foreach($treasuries as $treasury)
                                        <option value="{{ $treasury['id'] }}" data-currency="{{ $treasury['currency'] }}">{{ $treasury['name'] }} ({{ $treasury['currency'] }})</option>
                                    @endforeach
                                </select>
                            </label>
                            <label data-instapay-field class="d-none">
                                <span>Receipt image</span>
                                <input type="file" name="invoice_img" accept="image/*">
                            </label>

                            <button type="submit" class="primary-pay-action">
                                <i class="fa-solid fa-lock"></i>
                                <span>{{ $isDepositInvoice ? 'Pay Remaining Balance' : 'Pay Course' }}</span>
                            </button>
                        </form>
                    @endif
                </section>
            </div>
        </div>
    </div>

    <style>
        .course-pay-page {
            min-height: 100vh;
            background: linear-gradient(180deg, #eef5ff 0%, #ffffff 46%, #f7fbff 100%);
            padding: 20px 14px 38px;
            color: #0a2240;
        }

        .course-pay-shell {
            max-width: 1180px;
            margin: 0 auto;
        }

        .course-pay-top,
        .course-pay-pills,
        .panel-head,
        .primary-pay-action {
            display: flex;
            align-items: center;
        }

        .course-pay-top {
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .course-pay-back,
        .course-pay-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #0f1724;
            font-size: 12px;
            font-weight: 800;
            text-decoration: none;
        }

        .course-pay-hero,
        .course-pay-panel {
            background: #ffffff;
            border: 1px solid #dbe8f7;
            box-shadow: 0 18px 48px rgba(10, 34, 64, .08);
        }

        .course-pay-hero {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 280px;
            gap: 18px;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 18px;
        }

        .course-pay-eyebrow {
            color: #0b76d1;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        .course-pay-hero h1 {
            margin: 8px 0 10px;
            font-size: 22px;
            line-height: 1.15;
            font-weight: 900;
            color: #061b36;
        }

        .course-pay-hero p {
            max-width: 680px;
            color: #4b6380;
            font-size: 12px;
            margin: 0;
        }

        .course-pay-pills {
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }

        .course-pay-pills span,
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            padding: 6px 9px;
            font-size: 10px;
            font-weight: 800;
            background: #edf6ff;
            color: #0f1724;
        }

        .course-pay-total {
            border-radius: 8px;
            background: #072654;
            color: #ffffff;
            padding: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 116px;
        }

        .course-pay-total span,
        .course-pay-total small {
            color: #b9d4ff;
            font-size: 11px;
            font-weight: 700;
        }

        .course-pay-total strong {
            font-size: 22px;
            line-height: 1.1;
            margin: 8px 0;
        }

        .course-pay-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
            gap: 16px;
        }

        .course-pay-panel {
            border-radius: 8px;
            padding: 18px;
        }

        .panel-head {
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 14px;
        }

        .panel-head h2 {
            margin: 0 0 4px;
            font-size: 16px;
            font-weight: 900;
            color: #061b36;
        }

        .panel-head p {
            margin: 0;
            color: #607892;
            font-size: 11px;
        }

        .status-pill--paid {
            background: #e8f8ee;
            color: #16803a;
        }

        .status-pill--pending {
            background: #fff7e6;
            color: #9a5b00;
        }

        .details-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .details-list div {
            border: 1px solid #e1ebf6;
            border-radius: 8px;
            padding: 12px;
            background: #fbfdff;
            min-height: 64px;
        }

        .details-list span,
        .course-payment-form label span {
            display: block;
            color: #607892;
            font-size: 10px;
            font-weight: 800;
            margin-bottom: 6px;
        }

        .details-list strong {
            color: #0a2240;
            font-size: 12px;
            font-weight: 900;
        }

        .course-payment-form {
            display: grid;
            gap: 12px;
        }

        .course-payment-form input,
        .course-payment-form select {
            width: 100%;
            border: 1px solid #cddced;
            border-radius: 8px;
            padding: 10px 12px;
            color: #0a2240;
            font-size: 12px;
            font-weight: 700;
            background: #ffffff;
        }

        .primary-pay-action {
            width: 100%;
            justify-content: center;
            gap: 8px;
            border: 0;
            border-radius: 8px;
            padding: 10px 12px;
            background: #0f1724;
            color: #ffffff;
            font-size: 12px;
            font-weight: 900;
            text-decoration: none;
            transition: .18s ease;
        }

        .primary-pay-action:hover {
            background: #083b93;
            color: #ffffff;
            transform: translateY(-1px);
        }

        .payment-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            color: #7c8fa5;
            font-size: 10px;
            font-weight: 800;
            margin: 14px 0;
        }

        .payment-divider::before,
        .payment-divider::after {
            content: "";
            height: 1px;
            background: #dce7f3;
            flex: 1;
        }

        @media (max-width: 900px) {
            .course-pay-hero,
            .course-pay-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .course-pay-page {
                padding: 16px 12px 32px;
            }

            .course-pay-hero,
            .course-pay-panel {
                padding: 16px;
            }

            .course-pay-hero h1 {
                font-size: 20px;
            }

            .details-list {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const typeSelect = document.getElementById('coursePaymentType');
            const onlineFields = document.querySelectorAll('[data-online-field]');
            const instapayFields = document.querySelectorAll('[data-instapay-field]');

            function syncPaymentFields() {
                const isOnline = typeSelect?.value === 'online';
                onlineFields.forEach(field => field.classList.toggle('d-none', !isOnline));
                instapayFields.forEach(field => field.classList.toggle('d-none', isOnline));
            }

            typeSelect?.addEventListener('change', syncPaymentFields);
            syncPaymentFields();
        });
    </script>
@endsection