@include("header")

<!-- Add Video.js CSS in head -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- Add this CSS to your style section to fix modal scrolling on desktop -->
<style>
    /* Modal - no scroll, everything visible */
    #registrationModal {
        overflow-y: auto;
        padding: 10px;
    }
    
    #registrationModal > div {
        margin: auto;
        max-width: 600px;
    }
    
    /* Compact form */
    #registrationModal .p-8 {
        padding: 1.5rem !important;
    }
    
    #registrationModal h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    #registrationModal .space-y-6 > * {
        margin-top: 0.75rem !important;
    }
    
    #registrationModal label {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    #registrationModal input[type="text"],
    #registrationModal input[type="email"],
    #registrationModal input[type="tel"] {
        padding: 0.625rem !important;
        font-size: 0.875rem !important;
    }
    
    #registrationModal label[class*="flex items-center p-4"] {
        padding: 0.75rem !important;
    }
    
    #registrationModal .bg-gray-50.p-4 {
        padding: 0.75rem !important;
    }
    
    #registrationModal button[type="submit"] {
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }

    @media (max-width: 768px) {
        #registrationModal .p-8 {
            padding: 1.2rem !important;
        }
    }

    @media (max-width: 480px) {
        #registrationModal .p-8 {
            padding: 0.8rem !important;
        }
    }
 
    /* Video Styling */
    .video-js {
        width: 100%;
        height: auto;
        border-radius: 1rem;
    }
    
    .video-js .vjs-big-play-button {
        border-radius: 50% !important;
        border: 3px solid #fff !important;
        width: 80px !important;
        height: 80px !important;
        line-height: 80px !important;
        font-size: 2em !important;
    }
    
    .vjs-poster {
        background-size: cover;
    }
</style>

<!-- SECTION 1: Hero Text -->
<section class="py-8 md:py-12 bg-white">
    <div class="container mx-auto px-6 max-w-6xl">
        <div class="text-center">
            <h1 class="text-4xl md:text-6xl lg:text-7xl font-black text-gray-900 mb-4 hero-text">
                BUILD A THRIVING BUSINESS IN <span class="text-blue-600">30 DAYS</span>
            </h1>
            <p class="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto">
                Ideas, Strategy & Profit: The Masterclass that changes how you see Business in Ghana
            </p>
        </div>
    </div>
</section>

<!-- SECTION 2: Video -->
<section class="py-6 bg-gray-50">
    <div class="container mx-auto px-6 max-w-4xl">
   <video id="my-video" class="video-js vjs-big-play-centered mx-auto rounded-2xl shadow-2xl w-full mb-6" controls preload="auto" playsinline>
    <source src="/dk.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

  <div class="text-center">
    <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
        <button onclick="openModal()" class="btn-primary text-white py-4 px-8 rounded-lg text-lg font-bold inline-flex items-center justify-center">
            APPLY FOR MASTERCLASS
            <i class="fas fa-arrow-right ml-3"></i>
        </button>
        
        <!-- <div class="flex flex-col items-center"> 
            <a href="/online-masterclass" class="bg-blue-500 hover:bg-blue-600 text-white py-4 px-8 rounded-lg text-lg font-bold inline-flex items-center transition">
                <i class="fas fa-laptop mr-2"></i>
                Join Online - GHS 500
            </a>
        </div> -->
    </div>
</div>
    </div>
</section>
<!-- SECTION 3: Event Details -->
<section class="py-8 bg-white">
    <div class="container mx-auto px-6 max-w-4xl">
        <div class="text-center mb-8">
                      <div class="inline-block bg-gradient-to-r from-blue-600 to-blue-800 text-white px-8 py-4 rounded-2xl shadow-xl mb-4">
                <p class="text-sm font-semibold mb-2">EVENT STARTS IN</p>
                <div id="countdown" class="flex justify-center space-x-4 text-center">
                    <div>
                        <span id="days" class="text-3xl font-bold block">00</span>
                        <span class="text-xs">DAYS</span>
                    </div>
                    <div class="text-3xl font-bold">:</div>
                    <div>
                        <span id="hours" class="text-3xl font-bold block">00</span>
                        <span class="text-xs">HOURS</span>
                    </div>
                    <div class="text-3xl font-bold">:</div>
                    <div>
                        <span id="minutes" class="text-3xl font-bold block">00</span>
                        <span class="text-xs">MINS</span>
                    </div>
                    <div class="text-3xl font-bold">:</div>
                    <div>
                        <span id="seconds" class="text-3xl font-bold block">00</span>
                        <span class="text-xs">SECS</span>
                    </div>
                </div>
            </div>
            <h2 class="text-3xl md:text-5xl font-bold text-gray-900 mb-3">
                The Ghana Business Masterclass
            </h2>
            <p class="text-xl text-gray-600">
                Ideas, Strategy & Profit: The Masterclass that changes how you see Business in Ghana
            </p>
        </div>

        <!-- Event Info Card -->
        <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8">
            <div class="grid md:grid-cols-2 gap-6 items-center">
                <!-- Image -->
                <div>
                    <img src="/konnected.png" alt="Ghana Business Masterclass" class="rounded-2xl shadow-2xl w-full">
                </div>
                
                <!-- Event Details -->
                <div>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-calendar text-blue-600 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 font-semibold">Date</p>
                                <p class="text-lg font-bold text-gray-900">January 2nd, 2026</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-clock text-blue-600 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 font-semibold">Time</p>
                                <p class="text-lg font-bold text-gray-900">3:00 PM</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-users text-blue-600 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 font-semibold">Seats Available</p>
                                <p class="text-lg font-bold text-red-600">Only 70 Seats</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-user text-blue-600 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-xs text-gray-500 font-semibold">Host</p>
                                <p class="text-lg font-bold text-gray-900">Derrick Abaitey</p>
                            </div>
                        </div>

                        <!-- CTA Button -->
                        <div class="pt-4">
                            <button onclick="openModal()" class="btn-primary text-white w-full py-3 rounded-lg text-base font-bold inline-flex items-center justify-center">
                                SECURE YOUR SPOT NOW
                                <i class="fas fa-arrow-right ml-3"></i>
                            </button>
                            <p class="text-xs text-gray-500 mt-2 text-center">
                                Contact: +233 24 980 0839 | celien@abaitey.com
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Registration Modal -->
<div id="registrationModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl max-w-2xl w-full">
        <div class="p-8">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-3xl font-bold text-gray-900">Apply for Masterclass</h3>
                <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>

            <!-- Success Message -->
            <div id="successMessage" class="hidden bg-green-50 border-l-4 border-green-400 p-4 mb-6 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-check-circle text-green-600 text-xl mr-3"></i>
                    <p class="text-green-700 font-semibold">Registration successful! Redirecting to payment...</p>
                </div>
            </div>

            <!-- Error Message -->
            <div id="errorMessage" class="hidden bg-red-50 border-l-4 border-red-400 p-4 mb-6 rounded-lg">
                <div class="flex items-center">
                    <i class="fas fa-exclamation-circle text-red-600 text-xl mr-3"></i>
                    <p class="text-red-700 font-semibold" id="errorText"></p>
                </div>
            </div>

            <form id="masterclassForm" class="space-y-6">
                <!-- Full Name -->
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Full Name *</label>
                    <input type="text" name="full_name" id="full_name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- Email -->
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Email Address *</label>
                    <input type="email" name="email" id="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- Phone -->
                <div>
                    <label class="block text-gray-700 font-semibold mb-2">Phone Number *</label>
                    <input type="tel" name="phone" id="phone" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- Installment Plan -->
               <!-- Installment Plan -->
 <div>
    <label class="block text-gray-700 font-semibold mb-3">Select Payment Plan *</label>
    <div class="space-y-3">
        <label class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 transition">
            <input type="radio" name="installment_plan" value="2" required class="w-5 h-5 text-blue-600">
            <span class="ml-3 flex-1">
                <span class="font-semibold text-gray-900">2 Installments</span>
                <span class="block text-sm text-gray-600">GHS 1,250 × 2</span>
            </span>
        </label>

        <label class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 transition">
            <input type="radio" name="installment_plan" value="3" class="w-5 h-5 text-blue-600">
            <span class="ml-3 flex-1">
                <span class="font-semibold text-gray-900">3 Installments</span>
                <span class="block text-sm text-gray-600">GHS 833 × 3</span>
            </span>
        </label>

        <label class="flex items-center p-4 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-blue-500 transition">
            <input type="radio" name="installment_plan" value="5" class="w-5 h-5 text-blue-600">
            <span class="ml-3 flex-1">
                <span class="font-semibold text-gray-900">5 Installments</span>
                <span class="block text-sm text-gray-600">GHS 500 × 5</span>
            </span>
        </label>
    </div>
</div>

                <!-- Terms Acceptance -->
                <div class="bg-gray-50 p-4 rounded-lg">
                    <label class="flex items-start cursor-pointer">
                        <input type="checkbox" name="accept_terms" id="accept_terms" required class="w-5 h-5 text-blue-600 mt-1">
                        <span class="ml-3 text-sm text-gray-700">
                            I understand that access is granted only after 100% payment, and incomplete payments are non-refundable but will defer me to the next masterclass.
                        </span>
                    </label>
                </div>

                <!-- Submit Button -->
                <button type="submit" id="submitBtn" class="w-full btn-primary text-white py-4 rounded-lg text-lg font-bold">
                    <span id="btnText">Submit & Pay First Installment</span>
                    <span id="btnLoader" class="hidden">
                        <i class="fas fa-spinner fa-spin mr-2"></i> Processing...
                    </span>
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Scripts -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="https://js.paystack.co/v1/inline.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
// Initialize Video.js ONLY ONCE
if (!videojs.getPlayer('my-video')) {
    var player = videojs('my-video', {
        fluid: true,
        aspectRatio: '16:9',
        preload: 'auto',
        playsinline: true,
        controls: true
    });

    // Force thumbnail generation on iPhone
    player.ready(function() {
        this.load();
    });
}
 
 

function openModal() {
    document.getElementById('registrationModal').classList.remove('hidden');
    document.getElementById('registrationModal').classList.add('flex');
    document.body.style.overflow = 'hidden';
}

function closeModal() {
    document.getElementById('registrationModal').classList.add('hidden');
    document.getElementById('registrationModal').classList.remove('flex');
    document.body.style.overflow = 'auto';
    document.getElementById('masterclassForm').reset();
    document.getElementById('successMessage').classList.add('hidden');
    document.getElementById('errorMessage').classList.add('hidden');
}

document.getElementById('registrationModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeModal();
    }
});

// Paystack Payment Function
function payWithPaystack(email, amount, reference, registrationId) {
    var handler = PaystackPop.setup({
        key: 'pk_live_37083e6b9e224d31946b2fb03a7e95b70650a63f',
        email: email,
        amount: amount * 100,
        currency: 'GHS',
        ref: reference,
        metadata: {
            type: 'physical',  // Added this
            registration_id: registrationId,
            custom_fields: [
                {
                    display_name: "Registration ID",
                    variable_name: "registration_id",
                    value: registrationId
                }
            ]
        },
        callback: function(response) {
            verifyPayment(response.reference, registrationId);
        },
        onClose: function() {
            Swal.fire({
                icon: 'info',
                title: 'Payment Cancelled',
                text: 'Payment window closed. You can complete payment later from your email.',
                confirmButtonColor: '#3b82f6'
            });
        }
    });
    handler.openIframe();
}


// Verify Payment
function verifyPayment(reference, registrationId) {
    Swal.fire({
        title: 'Verifying Payment',
        text: 'Please wait...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    $.ajax({
        url: '/masterclass/verify-payment',
        type: 'POST',
        data: {
            reference: reference,
            registration_id: registrationId,
            _token: '{{csrf_token()}}'
        },
        success: function(response) {
            if(response.success) {
                Swal.fire({
                    icon: 'success',
                    title: 'Payment Successful!',
                    text: 'You will receive an email with next steps.',
                    confirmButtonColor: '#3b82f6'
                }).then(() => {
                    closeModal();
                });
            }
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Verification Failed',
                text: 'Payment verification failed. Please contact support.',
                confirmButtonColor: '#3b82f6'
            });
        }
    });
}

// Form Submission
$(document).ready(function() {
    $('#masterclassForm').on('submit', function(e) {
        e.preventDefault();
        
        $('#successMessage').addClass('hidden');
        $('#errorMessage').addClass('hidden');
        
        $('#btnText').addClass('hidden');
        $('#btnLoader').removeClass('hidden');
        $('#submitBtn').prop('disabled', true);
        
        var formData = {
            full_name: $('#full_name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            installment_plan: $('input[name="installment_plan"]:checked').val(),
            accept_terms: $('#accept_terms').is(':checked') ? 1 : 0,
            _token: '{{csrf_token()}}'
        };
        
     $.ajax({
    url: '/masterclass/register',
    type: 'POST',
    data: formData,
    dataType: 'json',
    success: function(response) {
        $('#btnText').removeClass('hidden');
        $('#btnLoader').addClass('hidden');
        $('#submitBtn').prop('disabled', false);
        
        if(response.success) {
            Swal.fire({
                icon: 'success',
                title: 'Registration Successful!',
                text: 'Redirecting to payment...',
                timer: 1500,
                showConfirmButton: false,
                allowOutsideClick: false
            }).then(() => {
                payWithPaystack(
                    response.data.email,
                    response.data.amount,
                    response.data.reference,
                    response.data.registration_id
                );
            });
        }
    },
    error: function(xhr) {
        $('#btnText').removeClass('hidden');
        $('#btnLoader').addClass('hidden');
        $('#submitBtn').prop('disabled', false);
        
        var errorMsg = 'An error occurred. Please try again.';
        
        if(xhr.responseJSON) {
            // Check if user already registered
            if(xhr.responseJSON.already_registered) {
                Swal.fire({
                    icon: 'info',
                    title: 'Already Registered',
                    text: xhr.responseJSON.message,
                    showCancelButton: true,
                    confirmButtonText: 'Go to Payment Portal',
                    cancelButtonText: 'Close',
                    confirmButtonColor: '#3b82f6'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = xhr.responseJSON.payment_portal_link;
                    }
                });
                return;
            }
            
            errorMsg = xhr.responseJSON.message || errorMsg;
        }
        
        Swal.fire({
            icon: 'error',
            title: 'Registration Failed',
            text: errorMsg,
            confirmButtonColor: '#3b82f6'
        });
    }
});
    });
});

// Countdown Timer
function updateCountdown() {
    const eventDate = new Date('January 2, 2026 15:00:00').getTime();
    const now = new Date().getTime();
    const distance = eventDate - now;

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    document.getElementById('days').textContent = String(days).padStart(2, '0');
    document.getElementById('hours').textContent = String(hours).padStart(2, '0');
    document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
    document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');

    if (distance < 0) {
        document.getElementById('countdown').innerHTML = '<p class="text-xl font-bold">EVENT HAS STARTED!</p>';
    }
}

updateCountdown();
setInterval(updateCountdown, 1000);
</script>

@include("footer")