@extends('layouts.frontend')

@section('title', '| Startup')
@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>From TikTok to $1M investment. Your startup’s next chapter starts here.</h2>
                    <p>Fill out the form below to begin your application. Make sure to <br> meet all the 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="startupName">Startup Name</label>
                            <input type="text" class="form-control" id="startupName" name="startupName" placeholder="Meet The Drapers" required>
                        </div>
                        <div class="form-group">
                            <label for="startupWebsite">Startup/Business Website (if available)</label>
                            <input type="url" class="form-control" id="startupWebsite" name="startupWebsite" placeholder="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>Checkbox business stage (tick one)</label>
                            <div class="checkbox-label">
                                <input type="radio" id="preSeed" name="businessStage" value="preSeed" required>
                                <label for="preSeed">Pre-seed, Seed to Series A startup worldwide.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="radio" id="usBased" name="businessStage" value="usBased" required>
                                <label for="usBased">US/Canada-based small businesses</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Checkbox Criteria (must tick all)</label>
                            <div class="checkbox-label">
                                <input type="checkbox" id="startupStage" name="startupStage">
                                <label for="startupStage">Startup Stage: My startup is in Seed to Series A stage.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="checkbox" id="publicTikTok" name="publicTikTok">
                                <label for="publicTikTok">Public TikTok Account: My TikTok account is set to public.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="checkbox" id="submissionDeadline" name="submissionDeadline">
                                <label for="submissionDeadline">Submission Deadline: I understand that I must submit my <br> TikTok pitch video by 11:59 PM Pacific Time, September 30, 2024.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="checkbox" id="travelCommitment" name="travelCommitment">
                                <label for="travelCommitment">Travel Commitment: If selected, I can travel to San Francisco <br> from October 15-18, 2024.</label>
                            </div>
                            <div class="checkbox-label">
                                <input type="checkbox" id="expenseCoverage" name="expenseCoverage">
                                <label for="expenseCoverage">Expense Coverage: If selected, I understand that my </br> accommodation will be covered, but I am responsible for my <br> flight and personal expenses.</label>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-custom mt-5">Submit Application</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <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>
</div>
@endsection
@section('js')
<script>
    function submitForm() {
      var formData = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        startupName: document.getElementById('startupName').value,
        startupWebsite: document.getElementById('startupWebsite').value,
        tiktokHandle: document.getElementById('tiktokHandle').value,
        startupStage: document.getElementById('startupStage').checked,
        publicTikTok: document.getElementById('publicTikTok').checked,
        submissionDeadline: document.getElementById('submissionDeadline').checked,
        travelCommitment: document.getElementById('travelCommitment').checked,
        expenseCoverage: document.getElementById('expenseCoverage').checked,
        businessStage: document.querySelector('input[name="businessStage"]:checked') ? document.querySelector('input[name="businessStage"]:checked').value : null
      };
      $('#loadingModal').modal('show');
      fetch('https://script.google.com/macros/s/AKfycbwx4hQU53Ocea4Rlt7fW8dladKU9DVGjCpXrApDOYFfVgRUNx5lzvuW9DIipPDv1-5P/exec', {
        method: 'POST',
        contentType: 'application/json',
        body: JSON.stringify(formData)
      })
      .then(response => response.text())
      .then(result => {
        $('#loadingModal').modal('hide');
        alert('Form submitted successfully');
        document.getElementById('submissionForm').reset();
        window.location.href = 'tiktok#show-us-what';
      })
      .catch(error => {
        console.error('Error:', error);
      });
    }
  </script>
@endsection