@extends('layouts.frontend')

@section('title', '| TikTok Campaign 2')
@section('content')
<div id="page">
    <section id="header">
        <div class="container">
            @include('layouts.inc.menu')
        </div>
    </section>
    
    <section id="form">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="contact mb-5">
                       <h4>Contact us</h4>
                       <a href="tel:1234567890" class="d-none">(123) 456-7890</a>
                       <a href="mailto:hello@meetthedrapers.com">hello@meetthedrapers.com</a>
                    </div>
                </div>
                <div class="col-md-6">
                    <h2>Your Ticket to the Meet The Drapers Stage</h2>
                    <p>Fill out the form below to complete your application. Make sure to meet all eligibility criteria.</p>
                    <form id="submissionForm" onsubmit="event.preventDefault(); submitForm();">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="Adam Smith" required>
                        </div>
                        <div class="form-group">
                            <label for="email">E-mail</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="adam@meetthedrapers.com" required>
                        </div>
                        <div class="form-group">
                            <label for="tiktokHandle">TikTok Handle</label>
                            <input type="text" class="form-control" id="tiktokHandle" name="tiktokHandle" placeholder="@meetthedrapers" required>
                        </div>
                        <div class="form-group">
                            <label>Eligibility Criteria (must tick all)</label>
                            <div class="checkbox-label">
                                <input type="checkbox" id="startupStage" name="startupStage" required>
                                <label for="startupStage">I am a woman based in the USA.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="checkbox" id="publicTikTok" name="publicTikTok" required>
                                <label for="publicTikTok">I have a public TikTok account.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="checkbox" id="submissionDeadline" name="submissionDeadline" required>
                                <label for="submissionDeadline">I am available to travel to San Francisco from April 2-4, 2025.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="checkbox" id="travelCommitment" name="travelCommitment" required>
                                <label for="travelCommitment">I understand that Meet The Drapers will cover my flight and accommodation only.</label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-custom mt-5">Submit Application</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
<!-- Loading Modal -->
<div class="modal" id="loadingModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content m-5 p-5">
            <div class="modal-body text-center">
                <p class="text-dark">Please wait...</p>
                <div class="spinner-border text-warning" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div class="modal" id="successModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content m-5 p-5">
            <div class="modal-body text-center">
                <p class="text-success">Form submitted successfully!</p>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="redirectToPage()">OK</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
    function submitForm() {
        // Validate form
        var form = document.getElementById('submissionForm');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }
    
        var formData = {
            name: document.getElementById('name').value,
            email: document.getElementById('email').value,
            tiktokHandle: document.getElementById('tiktokHandle').value,
            publicTikTok: document.getElementById('publicTikTok').checked,
            submissionDeadline: document.getElementById('submissionDeadline').checked,
            travelCommitment: document.getElementById('travelCommitment').checked,
            campaign: "TikTok Campaign 2",
            submissionDate: new Date().toISOString()
        };
    
        $('#loadingModal').modal('show');
    
        // Original working fetch request
        fetch('https://script.google.com/macros/s/AKfycbwzlRmSafCX5ItQFS4QAWu1X7pO_ZErtLccregr5rpJoWQ4j8t9qGjkCCmWdY_yn5SJ/exec', {
            method: 'POST',
            contentType: 'application/json',  // Keeping original format since it was working before
            body: JSON.stringify(formData)
        })
        .then(response => response.text())
        .then(result => {
            $('#loadingModal').modal('hide');
            $('#successModal').modal('show');
            document.getElementById('submissionForm').reset();
        })
        .catch(error => {
            $('#loadingModal').modal('hide');
            console.error('Error:', error);
            alert('There was an error submitting your form. Please try again later.');
        });
    }
    
    function redirectToPage() {
        window.location.href = 'tiktok#show-us-what';
    }
    </script>
@endsection