@extends('layouts.app')

@section('title', 'Enroll in '.$course->title.' | English Bloom')
@section('meta_description', 'Complete your details and securely enroll in '.$course->title.'.')

@section('content')
<section class="ees-enrollment-page">
    <div class="container">
        <a href="{{ route('courses') }}" class="ees-enrollment-back">← Back to Courses</a>
        <div class="row g-4 g-lg-5 align-items-start">
            <div class="col-lg-5">
                <aside class="ees-enrollment-summary">
                    <span class="ees-enrollment-label">YOU ARE ENROLLING IN</span>
                    <h1>{{ $course->title }}</h1>
                    <p>{{ $course->short_description }}</p>
                    <dl>
                        <div><dt>Duration</dt><dd>{{ $course->duration ?: 'Flexible' }}</dd></div>
                        <div><dt>Amount payable</dt><dd>₹{{ number_format((float) $course->fee, 2) }}</dd></div>
                    </dl>
                    <div class="ees-payment-trust"><strong>Secure online payment</strong><span>Payments are processed securely by Razorpay.</span></div>
                </aside>
            </div>

            <div class="col-lg-7">
                <div class="ees-enrollment-form-card">
                    <span class="ees-enrollment-label">STUDENT DETAILS</span>
                    <h2>Tell Us About Yourself</h2>
                    <p class="text-muted">Enter accurate details; they will appear in your enrollment record.</p>

                    @unless ($paymentConfigured)
                        <div class="alert alert-warning">Online payment is being configured. Please contact the academy to enroll.</div>
                    @endunless
                    <div id="paymentMessage" class="alert d-none" role="alert"></div>

                    <form id="enrollmentForm" action="{{ route('courses.enroll.order', $course) }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6"><label for="name" class="form-label">Full Name *</label><input id="name" name="name" type="text" class="form-control" maxlength="150" required></div>
                            <div class="col-md-6"><label for="email" class="form-label">Email Address *</label><input id="email" name="email" type="email" class="form-control" maxlength="150" required></div>
                            <div class="col-md-6"><label for="phone" class="form-label">Phone Number *</label><input id="phone" name="phone" type="tel" class="form-control" maxlength="30" required></div>
                            <div class="col-md-6"><label for="city" class="form-label">City</label><input id="city" name="city" type="text" class="form-control" maxlength="100"></div>
                            <div class="col-12"><label for="goal" class="form-label">What would you like to improve?</label><textarea id="goal" name="goal" rows="4" class="form-control" maxlength="1000" placeholder="For example: spoken fluency, interviews or workplace communication"></textarea></div>
                        </div>

                        <button type="submit" id="payButton" class="ees-pay-button" {{ $paymentConfigured ? '' : 'disabled' }}>
                            <span>Continue to Secure Payment</span><strong>₹{{ number_format((float) $course->fee, 2) }} →</strong>
                        </button>
                        <p class="ees-payment-note">By continuing, you confirm that the details entered are correct.</p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('#enrollmentForm');
    const button = document.querySelector('#payButton');
    const message = document.querySelector('#paymentMessage');
    const csrf = form.querySelector('input[name="_token"]').value;
    const showMessage = (text, type = 'danger') => { message.textContent = text; message.className = `alert alert-${type}`; };
    const responseMessage = async (response) => {
        const body = await response.json().catch(() => ({}));
        return body.errors ? Object.values(body.errors).flat().join(' ') : (body.message || 'Something went wrong. Please try again.');
    };

    form.addEventListener('submit', async (event) => {
        event.preventDefault(); button.disabled = true; message.classList.add('d-none');
        try {
            const formData = new FormData(form); formData.delete('_token');
            const orderResponse = await fetch(form.action, {
                method: 'POST', headers: {'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf},
                body: JSON.stringify(Object.fromEntries(formData.entries())),
            });
            if (!orderResponse.ok) throw new Error(await responseMessage(orderResponse));
            const order = await orderResponse.json();
            const checkout = new Razorpay({
                key: order.key, amount: order.amount, currency: order.currency, name: order.name,
                description: order.description, order_id: order.order_id, prefill: order.prefill,
                theme: {color: '#1769ff'}, modal: {ondismiss: () => { button.disabled = false; }},
                handler: async (payment) => {
                    try {
                        showMessage('Confirming your payment...', 'info');
                        const verifyResponse = await fetch('{{ route('enrollments.verify') }}', {
                            method: 'POST', headers: {'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf},
                            body: JSON.stringify({enrollment_token: order.enrollment_token, ...payment}),
                        });
                        if (!verifyResponse.ok) throw new Error(await responseMessage(verifyResponse));
                        const result = await verifyResponse.json(); showMessage(result.message, 'success');
                        window.location.assign(result.receipt_url);
                    } catch (error) {
                        showMessage(error.message || 'Payment confirmation failed. Please contact support with your payment ID.');
                        button.disabled = false;
                    }
                },
            });
            checkout.on('payment.failed', (response) => { showMessage(response.error.description || 'Payment failed. Please try again.'); button.disabled = false; });
            checkout.open();
        } catch (error) { showMessage(error.message || 'Something went wrong. Please try again.'); button.disabled = false; }
    });
});
</script>
@endpush