{% extends "layouts/base_full_screen.html" %}

{% load static %}

{% block title %} Landing Page {% endblock title %}

{% block body_attributes %} {% endblock body_attributes %}

{% block stylesheet %}
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&amp;display=swap">
    <!-- AOS CSS CDN -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
    <!-- Bootstrap icon CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/formvalidation@0.6.2-dev/dist/css/formValidation.min.css"> -->
    <!-- Swiper CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
    <!-- Glightbox CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/landing.css' %}"/>
{% endblock stylesheet %}

{% block content %}
    <!-- begin :: Header -->
    <header id="header" class="header fixed-top" data-scrollto-offset="0">
        <div class="container-fluid d-flex align-items-center justify-content-between">
            <!-- begin :: logo -->
            <a href="{% url 'landing:index' %}" class="logo d-flex align-items-center scrollto me-auto me-lg-0">
                <img src="{% static 'images/logos/logo-black.png' %}" alt="" class="img-fluid">
            </a>
            <!-- end :: navbar -->
            <!-- begin :: navbar -->
            <nav id="navbar" class="navbar">
                <ul>
                    <li> <a class="nav-link scrollto" href="#demo"> Demo </a> </li>
                    <li> <a class="nav-link scrollto" href="#guides"> Guides </a> </li>
                    <li> <a class="nav-link scrollto" href="#pricing"> Pricing </a> </li>
                    <li> <a class="nav-link scrollto" href="#contact"> Contact Us </a> </li>
                    <li> <a class="nav-link scrollto" href="#"> About Us </a> </li>

                </ul>
                <i class="bi bi-list mobile-nav-toggle d-none"></i>
            </nav>
            <!-- end :: navbar -->
            <div>
                <a class="btn-getstarted me-2" href="{% url 'accounts:signin' %}"> Sign In </a>
                <a class="btn-getstarted scrollto" href="#pricing"> Get Started </a>
            </div>
        </div>
    </header>
    <!-- end :: Header -->
    <!-- end :: hero -->
    <section id="hero-fullscreen" class="hero-fullscreen d-flex align-items-center" style="background-image: url('{% static 'images/patterns/back.png' %}');">
        <!-- div class="container d-flex flex-column align-items-center position-relative" data-aos="zoom-out">
            <h2> Welcome to <span> UseVoice <span>.</span></span> </h2>
            <p> Use Our Service to separate the vocals and background music from any <strong>audio</strong> & <strong>video</strong> file. </p>
            <div class="d-flex">
                <a href="#demo" class="btn-get-started scrollto"> Try It! </a>
                <a href="https://www.youtube.com/watch?v=LXb3EKWsInQ" class="glightbox btn-watch-video d-flex align-items-center">
                    <i class="bi bi-play-circle"></i>
                    <span> Watch Video </span>
                </a>
            </div>
        </div -->
    </section>
    <!-- end :: Header -->
    <!-- begin :: main -->
    <main id="main">
        <!-- begin :: Demo Section -->
        <section id="demo" class="featured-services">
            <div class="container" data-aos="zoom-out">
                <!-- <div class="section-header">
                    <h2> How to remove background music from media file ? </h2>
                </div> -->
                <form action="{% url 'demo_process' %}" method="POST" id="post-form" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row g-3 cta">
                        <div class="container">
                            <!-- <h2> How to remove background music from media file ? </h2> -->
                            <div>
                                <label for="formFileLg" class="form-label" id="label_info">Large file input example</label>
                                <input class="form-control form-control-lg" id="formFileLg" type="file" name="file" accept=".mp4">
                            </div>
                            <button type="submit" class="btn btn-primary mt-5" id="submit-button">Submit</button>
                        </div>
                    </div>
                </form>

            </div>
        </section>
        <!-- end :: Demo Section -->
        <!-- begin :: Guides Section -->
        <section id="guides" class="featured-services">
            <div class="container aos-init aos-animate" data-aos="fade-up">
                <div class="section-header">
                    <h2> How to remove background music from media file ? </h2>
                    <p> It is easy to use, just with only 3 steps to achieve a Soundless media file. </p>
                </div>
                <div class="row gy-4">
                    <div class="col-xl-4 col-md-6 d-flex" data-aos="zoom-out">
                        <div class="service-item position-relative">
                            <div class="icon"> <i class="bi bi-upload icon"></i> </div>
                            <h4><a class="stretched-link"> 1. Upload Audio/Video File </a></h4>
                            <p>Click on upload button to select audio or video file, or you can drag the file directly to the upload area.</p>
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-xl-4 col-md-6 d-flex" data-aos="zoom-out">
                        <div class="service-item position-relative">
                            <div class="icon"><i class="bi bi-check2-circle icon"></i></div>
                            <h4><a class="stretched-link"> 2. Remove Vocal </a></h4>
                            <p>The AI algorithm will accurately separate the vocal and instrumental from the media file.</p>
                        </div>
                    </div><!-- End Service Item -->

                    <div class="col-xl-4 col-md-6 d-flex" data-aos="zoom-out">
                        <div class="service-item position-relative">
                            <div class="icon"> <i class="bi bi-download icon"></i></div>
                            <h4><a  class="stretched-link"> 3. Download Vocal/Instrumental </a></h4>
                            <p> Download the extracted vocals or instrumental sounds according to your needs.</p>
                        </div>
                    </div><!-- End Service Item -->
                </div>
            </div>
        </section>
        <!-- end :: Guides Section -->
        <!-- begin :: Client Section -->
        <section id="clients" class="clients">
            <div class="container" data-aos="zoom-out">
                <div class="clients-slider swiper">
                    <div class="swiper-wrapper align-items-center">
                        <div class="swiper-slide"><img src="{% static 'images/clients/client-1.png' %}" class="img-fluid" alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'images/clients/client-2.png' %}" class="img-fluid" alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'images/clients/client-3.png' %}" class="img-fluid" alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'images/clients/client-4.png' %}" class="img-fluid" alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'images/clients/client-5.png' %}" class="img-fluid" alt=""></div>
                        <div class="swiper-slide"><img src="{% static 'images/clients/client-6.png' %}" class="img-fluid" alt=""></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end :: Client Section -->
        <!-- begin :: Services Section  -->

        <!-- begin :: Services Section -->
        <!-- begin :: Pricing Section -->
        <section id="pricing" class="pricing">
            <div class="container" data-aos="fade-up">
                <div class="section-header">
                    <h2> Our Pricing Plans </h2>
                    <p> Capture valuable information from each <strong>Media</strong> file. </p>
                </div>
                <div class="row gy-4">
                    {% for plan in plans %}
                        <!-- begin :: Pricing Item -->
                        <div class="col-lg-4" data-aos="zoom-in" data-aos-delay="{{ plans.counter|add:'350' }}">
                            <div class="pricing-item featured">
                                <div class="pricing-header">
                                    <h3>{{ plan.plan_name }}</h3>
                                    <h4><sup>$</sup> {{ plan.price }} <span> / month</span></h4>
                                </div>
                                <ul>
                                    {{ plan.describe|safe }}
                                </ul>
                                <div class="text-center mt-auto">
                                    <a type="button" class="buy-btn" id='buy' pay-id="{{ plan.plan_id }}" > Buy Now </a>
                                </div>
                            </div>
                        </div>
                        <!-- end :: Pricing Item -->
                    {% empty %}
                    <div class="container" data-aos="zoom-out">
                        <div class="section-header">
                                <h2> We don't have a plans right now </h2>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <!-- end :: Pricing Section -->
        <!-- begin :: F.A.Q Section -->
        <section id="faq" class="faq">
            <div class="container-fluid" data-aos="fade-up">
                <div class="row gy-4">
                    <div class="col-lg-7 d-flex flex-column justify-content-center align-items-stretch  order-2 order-lg-1">
                        <div class="content px-xl-5">
                            <h3>Frequently Asked <strong>Questions</strong></h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                Duis aute irure dolor in reprehenderit
                            </p>
                        </div>
                        <!-- begin :: Faq item -->
                        <div class="accordion accordion-flush px-xl-5" id="faqlist">
                            <div class="accordion-item" data-aos="fade-up" data-aos-delay="200">
                                <h3 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">
                                        <i class="bi bi-question-circle question-icon"></i>
                                        Non consectetur a erat nam at lectus urna duis?
                                    </button>
                                </h3>
                                <div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    Feugiat pretium nibh ipsum consequat.
                                    Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida.
                                    Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
                                </div>
                            </div>
                        </div>
                        <!-- end :: Faq item -->
                        <!-- begin :: Faq item -->
                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="300">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-2">
                                    <i class="bi bi-question-circle question-icon"></i>
                                    Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?
                                </button>
                            </h3>
                            <div id="faq-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi.
                                    Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium.
                                    Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
                                </div>
                            </div>
                        </div>
                        <!-- end :: Faq item -->
                        <!-- begin :: Faq item -->
                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="400">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-3">
                                    <i class="bi bi-question-circle question-icon"></i>
                                    Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi?
                                </button>
                            </h3>
                            <div id="faq-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci.
                                    Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit.
                                    Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus.
                                    Urna molestie at elementum eu facilisis sed odio morbi quis
                                </div>
                            </div>
                        </div>
                        <!-- end :: Faq item -->
                        <!-- begin :: Faq item -->
                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="500">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-4">
                                    <i class="bi bi-question-circle question-icon"></i>
                                    Ac odio tempor orci dapibus. Aliquam eleifend mi in nulla?
                                </button>
                            </h3>
                            <div id="faq-content-4" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    <i class="bi bi-question-circle question-icon"></i>
                                    Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi.
                                    Id interdum velit laoreet id donec ultrices.
                                    Fringilla phasellus faucibus scelerisque eleifend donec pretium.
                                    Est pellentesque elit ullamcorper dignissim.
                                    Mauris ultrices eros in cursus turpis massa tincidunt dui.
                                </div>
                            </div>
                        </div>
                        <!-- end :: Faq item -->
                        <!-- begin :: Faq item -->
                        <div class="accordion-item" data-aos="fade-up" data-aos-delay="600">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-5">
                                    <i class="bi bi-question-circle question-icon"></i>
                                    Tempus quam pellentesque nec nam aliquam sem et tortor consequat?
                                </button>
                            </h3>
                            <div id="faq-content-5" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                                <div class="accordion-body">
                                    Molestie a iaculis at erat pellentesque adipiscing commodo.
                                    Dignissim suspendisse in est ante in.
                                    Nunc vel risus commodo viverra maecenas accumsan.
                                    Sit amet nisl suscipit adipiscing bibendum est.
                                    Purus gravida quis blandit turpis cursus in
                                </div>
                            </div>
                        </div>
                        <!-- end :: Faq item -->
                    </div>
                </div>
                <div class="col-lg-5 align-items-stretch order-1 order-lg-2 img" style="background-image: url('{% static 'images/patterns/faq.jpg' %}');">&nbsp;</div>
            </div>

            </div>
        </section>
        <!-- end :: F.A.Q Section -->
        <!-- begin :: Contact Section -->
        <section id="contact" class="contact">
            <div class="container">
                <div class="section-header">
                    <h2>Contact Us</h2>
                    <p>Ea vitae aspernatur deserunt voluptatem impedit deserunt magnam occaecati dssumenda quas ut ad dolores adipisci aliquam.</p>
                </div>
            </div>
            <!-- begin :: Google Maps Infor -->
            <!-- <div class="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1911.594442260913!2d-6.881060482833542!3d33.96401885524666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x24cef657d0b33dbc!2sSecteur%2021!5e0!3m2!1sen!2sma!4v1661790826898!5m2!1sen!2sma" frameborder="0" allowfullscreen></iframe>
            </div> -->
            <!-- end :: Google Maps Infor -->
            <div class="container">
                <div class="row gy-5 gx-lg-5">
                    <div class="col-lg-4">
                        <div class="info">
                            <h3> Feel free to connect with Us </h3>
                            <p> It is an absolute pleasure to receive your comments.</p>
                            <!-- begin :: Info Item -->
                            <!-- <div class="info-item d-flex">
                                <i class="bi bi-geo-alt flex-shrink-0"></i>
                                <div>
                                    <h4>Our Head Office:</h4>
                                    <p> Villa N° 3, TP, Rabat، Av. Annakhil, Rabat 10000 </p>
                                </div>
                            </div> -->
                            <!-- begin :: Info Item -->
                            <!-- end :: Info Item -->
                            <div class="info-item d-flex">
                                <i class="bi bi-envelope flex-shrink-0"></i>
                                <div>
                                    <h4> Mail us: </h4>
                                    <p> support@usevoice.io </p>
                                </div>
                            </div>
                            <!-- begin :: Info Item -->
                            <!-- end :: Info Item -->
                            <!-- <div class="info-item d-flex">
                                <i class="bi bi-phone flex-shrink-0"></i>
                                <div>
                                    <h4> Let’s Speak: </h4>
                                    <p> +212 5 55 44 33 22 11 </p>
                                </div>
                            </div> -->
                            <!-- end :: Info Item -->
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <!-- begin ::  Contact Form -->
                        <form role="form" class="form php-email-form" id="kt_contact_us_form">
                            {% csrf_token %}
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <input type="text" name="name" id="name" placeholder="Your Name" class="form-control bg-transparent" maxlength="100" required="">
                                </div>
                                <div class="col-md-6 form-group mt-3 mt-md-0">
                                    <input type="email" placeholder="Your Email" name="email" id="email" autocomplete="off" class="form-control bg-transparent" maxlength="100" required="">
                                </div>
                            </div>
                            <div class="form-group mt-3">
                                <input type="text" class="form-control bg-transparent" name="subject" id="subject" placeholder="Subject" required>
                            </div>
                            <div class="form-group mt-3">
                                <textarea class="form-control bg-transparent" name="message" placeholder="Message" required></textarea>
                            </div>
                            <div class="my-3">
                                <div class="loading">Loading</div>
                                <div class="error-message"></div>
                                <div class="sent-message">Your message has been sent. Thank you!</div>
                            </div>
                            <div class="text-center">
                                <button type="submit" id="kt_contact_us_submit" class="btn btn-primary">Send Message</button>
                            </div>
                        </form>
                    </div>
                    <!-- end ::  Contact Form -->
                </div>
            </div>
        </section>
        <!-- end :: Contact Section -->
    </main>

    <a href="#" class="scroll-top d-flex align-items-center justify-content-center">
        <i class="bi bi-arrow-up-short"></i>
    </a>

    <div id="preloader"></div>
{% endblock content %}

{% block javascripts %}
    <!-- Jquery JS CDN -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <!-- Popper Bootstrap JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"></script>
    <!-- SweetAlert JS CDN -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <!-- AOS JS CDN -->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <!-- Swiper JS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <!-- Glightbox JS CDN -->
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <!-- Isotope JS CDN -->
    <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
    <!-- Form Validation JS CDN -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/formvalidation@0.6.2-dev/dist/js/formValidation.min.js"></script> -->
    <!-- Custom JS -->
    <script src="{% static 'js/app.js' %}"></script>
    <!-- <script src="{% static 'js/demo_handle.js' %}"></script> -->


    <script>
        var buy_button = document.querySelectorAll("#buy");
        buy_button.forEach(
            function( element ) {
                element.addEventListener( 'click', function( e ) {
                    $.ajax({
                        type: 'POST',
                        url: "{% url 'accounts:signup' %}",
                        data: {
                            'membership': element.getAttribute('pay-id'),
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                        },
                        success: function (response) {
                            if (response['result'] == 'Not Found'){
                                location.href="/#pricing"
                            }else{
                                location.href = "{% url 'accounts:signup' %}"
                            }
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert(xhr.status);
                            alert(thrownError);
                        }
                    });
                });
            }
        );
    </script>
    <!-- IP ADRESS INFO -->
    <script src="{% static 'js/custom/contact_us.js' %}"></script>

    <script>
        // On document ready
        KTUtil.onDOMContentLoaded(function() {
            KTContactUsGeneral.init();
        });
    </script>
{% endblock javascripts %}