@extends('layouts.front')
@section('title', 'Buy Course')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/css/intlTelInput.css">
@endpush

@section('content')
<div class="container checkout-container">
    <div class="row">
        <div class="col-md-7">
            <h3 class="mb-4 fw-bold">BUYING A COURSE</h3>

            <h5 class="fw-semibold">{{ $course->title }}</h5>
            <p class="text-muted">{{ $course->description }}</p>
            <div class="fw-bold fs-5 mb-3">{{ $course->price }} AED</div>

          <form id="checkout-form" action="{{ route('course.stripecheckout', $course->id) }}" method="POST">
    @csrf
    <div class="row mb-3">
        <div class="col-md-6">
            <label class="form-label">NAME</label>
            <input type="text" id="name" name="name" class="form-control" placeholder="Name" required>
        </div>
        <div class="col-md-6">
            <label class="form-label">E-MAIL</label>
            <input type="email" id="email" name="email" class="form-control" placeholder="e-mail" required>
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label">PHONE</label>
        <input type="tel" id="phone" class="form-control phone" placeholder="Phone number" required>
    </div>

    @if($course->category && $course->category->category_name === 'Gift')
        <div class="row mb-3">
            <div class="col-md-6">
                <label class="form-label">RECIPIENT NAME</label>
                <input type="text" name="recipient_name" class="form-control" placeholder="Recipient Name" required>
            </div>
            <div class="col-md-6">
                <label class="form-label">RECIPIENT E-MAIL</label>
                <input type="email" name="recipient_email" class="form-control" placeholder="Recipient Email" required>
            </div>
        </div>
    @endif
</form>

        </div>

        <div class="col-md-5">
            <div class="summary-box">
                <h6 class="fw-bold mb-3">TOTAL TO PAY:</h6>
                <div class="fs-5 fw-bold mb-3">{{ $course->price }} AED</div>

                <input type="text" class="form-control mb-3" placeholder="Enter the promo code for discount">

                <button class="buy-btn" onclick="submitCheckout()">BUY</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/js/intlTelInput.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    let iti;

    document.addEventListener('DOMContentLoaded', function () {
        const input = document.querySelector(".phone");

        iti = window.intlTelInput(input, {
            initialCountry: "ae",
            separateDialCode: true,
            preferredCountries: ['ae', 'sa', 'qa', 'om', 'bh', 'kw'],
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/js/utils.js"
        });
    });

    function submitCheckout() {
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const phone = document.getElementById('phone').value.trim();
        const country_code = iti.getSelectedCountryData().dialCode;

        if (!name || !email) {
            Swal.fire({
                icon: 'warning',
                title: 'Missing or invalid info',
                text: 'Please enter a valid name, email',
                confirmButtonText: 'OK'
            });
            return false;
        }

        // Create or update hidden phone field
        let hiddenPhone = document.getElementById('full_phone');
        if (!hiddenPhone) {
            hiddenPhone = document.createElement('input');
            hiddenPhone.type = 'hidden';
            hiddenPhone.name = 'phone';
            hiddenPhone.id = 'full_phone';
            document.getElementById('checkout-form').appendChild(hiddenPhone);
        }

        hiddenPhone.value = country_code + phone;

        document.getElementById('checkout-form').submit();
    }
</script>
@endpush