@extends(env("CLIENT_PATH").".welcome")
@section("content")
<!-- Forms Section -->
<!-- Form Section -->
<?php $CampaignArticles = LMS::getCampaignArticlesByCampaignAlias($Campaign->alias); ?>
<div class="navbar justify-content-center pt-4">
    <nav class="navbar-expand-lg">
        <div class="collapse navbar-collapse clearfix" id="navbarSupportedContent">
            <div class="logo float-start" style="padding: 10px 0px;">
                <a class="navbar-brand" href="#">
                    <img src="{!! template('img/logorm.png')!!}" alt="Trust Education" width="150" height="auto">
                </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <?php foreach ($CampaignArticles as $CampaignArticle) : ?>
                    <li class="nav-item">
                        <a class="nav-link" href="#<?php echo $CampaignArticle->alias; ?>"><?php echo $CampaignArticle->title; ?></a>
                    </li>
                <?php endforeach; ?>

                <li class="nav-item">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
            </ul>
            <!-- Search Field -->
            <!-- <div class="search-container">
                <form action="/search" method="get">
                    <input class="search" id="searchleft" type="search" name="q" placeholder="Search">
                    <label class="button searchbutton" for="searchleft"><span class="mglass">&#9906;</span></label>
                </form>
            </div> -->
        </div>
    </nav>
</div>
<div class="slider-desc pt-4 position-absolute top-50 start-50 translate-middle">
    <div class="container">
        <div class="row d-flex pt-5">
            <div class="col-lg-6 col-md-12 col-sm-12 pt-3">

                <form class="form row g-3 form-group" method="post" action="#" id="enquiry-form">
                    @csrf
                    <input type="hidden" name="countries_id" value="1" />
                    <input type="hidden" name="sources_id" value="3" />
                    <input type="hidden" name="campaigns_id" value="<?php echo $Campaign->campaign_id; ?>" />
                    <div class="form-row">
                        <h2 style="color: #0e5783; text-align: center;">Start Your Application Now</h2>
                    </div>
                    <div class="form-row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="form-group">
                                <!-- <label for="from-name">Name</label><span class="required-input">*</span> -->
                                <input class="form-control" type="text" id="from-name" name="name" required="" placeholder="Your Full Name">
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="form-group">
                                <!-- <label for="from-name">Name</label><span class="required-input">*</span> -->
                                <input class="form-control" type="email" id="from-email" name="email" required="" placeholder="Your Email Address">
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="form-group">
                                <!-- <label for="from-phone">Mobile Number</label><span class="required-input">*</span> -->
                                <input class="form-control" type="text" id="from-phone" name="mobile" required pattern="9\d{9}" placeholder="Your Mobile Number">
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="row">
                            <div class="col-6 col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <!-- <label for="from-qualifications">Highest Qualification</label><span class="required-input">*</span> -->
                                    <select class="form-control" id="from-qualifications" type="text" name="qualification" required="">
                                        <option value="">Select Qualification</option>
                                        <?php foreach (LMS::getQualifications() as $key) : ?>
                                            <option value="{{$key->alias}}">{{$key->title}}</option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6 col-sm-6 col-md-6 col-lg-6">
                                <div class="form-group">
                                    <!-- <label for="highest_year">Passed Year:</label><span class="required-input">*</span> -->
                                    <div class="input-group">
                                        <input class="form-control" type="text" id="highest_year" name="highest_year" autocomplete="off" placeholder="Passed Year">
                                    </div>
                                </div>
                                <input type="hidden" name="preferred_destination" value="sweden">
                            </div>
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="row">
                        <div class="col-6 col-sm-6 col-md-6 col-lg-6">
                            <div class="form-group"><!--label for="board">University / Board:</label><span class="required-input">*</span-->
                                <div class="input-group">
                                    <input class="form-control" type="text" id="board" name="board" autocomplete="off" placeholder="University / Board">
                                </div>
                            </div>
                        </div>
                        <div class="col-6 col-sm-6 col-md-6 col-lg-6">
                            <div class="form-group"><!--label for="board">University / Board:</label><span class="required-input">*</span-->
                                <div class="input-group">
                                    <input class="form-control" type="text" id="preparation_score" name="preparation_score" autocomplete="off" placeholder="IELTS/PTE Score (0 for none)" required>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="form-group">
                                <!-- <label for="from-calltime">Message / Enquiry</label> -->
                                <textarea name="message" class="form-control" rows="5" placeholder="Additional Enquiry / Message"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <input type="hidden" name="g-recaptcha-response" value="">
                            <div class="col"><button class="btn btn-success btn-block" type="submit" id="submitButton">Apply</button></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Slider Section -->
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
    <!-- The slideshow/carousel -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="{{$Campaign->cover_photo}}" alt="{{$Campaign->title}}" class="d-block" style="width:100%">
        </div>
    </div>
</div>
</section>
<!-- Why Us -->

<?php if (isset($CampaignArticles[0])) : ?>
    <section class="why-us" id="{{ $CampaignArticles[0]->alias }}">
        <div class="background-layer-one" style=""></div>
        <div class="headings container">
            <h2 class="text-center">{{$CampaignArticles[0]->title}}</h2>
            <div class="s"></div>
            <div class="row">
                <?php foreach ($CampaignArticles[0]->ChildArticles as $Article) : ?>
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="card ">
                            <img src="{{$Article->thumb}}" class="card-img" alt="...">
                            <div class="card-body">
                                <p class="h4">{{$Article->title}}</p>
                                <p class="card-text">{!!$Article->text!!}</p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>
<!-- Success Stories -->
<?php if (isset($CampaignArticles[1])) : ?>
    <section class="stories" id="{{ $CampaignArticles[1]->alias }}">
        <div class="icon-layer-one" style="background-image:url({!! template('img/icon-8.png')!!})"></div>
        <div class="headings container">
            <h2 class="text-center">{{$CampaignArticles[1]->title}}</h2>
        </div>
        <div class="container">
            <div class="owl-carousel owl-carousel-four owl-theme">
                <?php foreach ($CampaignArticles[1]->ChildArticles as $Article) : ?>
                    <div class="item"><img src="{{$Article->thumb}}" alt="{!$Article->title!}}"></div>
                <?php endforeach; ?>
                <!-- Add more items for each image -->
            </div>
        </div>
    </section>
<?php endif; ?>
<?php if (isset($CampaignArticles[4])) : ?>
    <!-- Videos -->
    <section class="videos" id="{{ $CampaignArticles[4]->alias }}">
        <div class="headings text-center">
            <h2>{{ $CampaignArticles[4]->title }}</h2>
            <div class="s"></div>
            <div class="container">
                <?php $Rows = array_chunk($CampaignArticles[4]->ChildArticles->toArray(), 4); ?>
                <?php foreach ($Rows as $Row) : ?>
                    <div class="row">
                        <?php foreach ($Row as $Article) : ?>
                            <?php
                            $pattern = '/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/';
                            preg_match($pattern, $Article->link, $Matches);
                            $videoID = isset($Matches[1]) ? $Matches[1] : '';
                            ?>
                            <div class="col-4">
                                <iframe width="100%" src="https://www.youtube.com/embed/{!!$videoID!!}" height="300" title="{!!$Article->title!!}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
<?php endif; ?>
<!-- Univresity -->
<?php if (isset($CampaignArticles[2])) : ?>
    <section class="container-fluid universities headings text-center" id="{{ $CampaignArticles[2]->alias }}">
        <div class="headings">
            <h2 style="color: #fff;">{{ $CampaignArticles[2]->title }}</h2>
        </div>
        <div class="container">
            <div class="owl-carousel owl-carousel-six owl-theme">
                <?php foreach ($CampaignArticles[2]->ChildArticles as $Article) : ?>
                    <div class="item uni-logos" style="background-color: #fff;padding:10px"><img src="{{$Article->thumb}}" alt="{!$Article->title!}}"></div>
                <?php endforeach; ?>
                <!-- Add more items for each image -->
            </div>
        </div>
    </section>
<?php endif; ?>

<!-- Testimonials -->
<?php if (isset($CampaignArticles[3])) : ?>
    <section class="container headings text-center testimonials" id="{{$CampaignArticles[3]->alias}}">
        <div class="headings">
            <h2>{{$CampaignArticles[3]->title}} <i class="bi bi-chat-left-quote"></i></h2>
        </div>
        <div class="s"></div>
        <div class="owl-carousel  owl-carousel-four owl-theme">
            <?php foreach ($CampaignArticles[3]->ChildArticles as $Article) : ?>
                <div class="item uni-logos" style="background-color: #fff;">
                    <div class="card testimonial-card mt-2 mb-3">
                        <div class="card-up aqua-gradient"></div>
                        <div class="avatar mx-auto white">
                            <img src="{{$Article->thumb}}" class="rounded-circle img-fluid" alt="woman avatar">
                            <div class="card-body text-center">
                                <h4 class="card-title font-weight-bold">{{$Article->title}}</h4>
                                <hr>
                                <p><i class="bi bi-quote"></i> {!!$Article->text!!}</p>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
            <!-- Add more items for each image -->
        </div>
    </section>
<?php endif; ?>

<section style="padding-bottom: 0px;" id="contact">
    <!-- Footer -->
    <footer class="text-center text-lg-start bg-light text-muted">
        <!-- Section: Social media -->
        <section class="container d-flex justify-content-center justify-content-lg-between p-4 border-bottom">
            <!-- Left -->

            <!-- Right -->
            <div class="text=center">
                <a href="https://www.facebook.com/trusteducation.com.np" target="_blank" class="me-4 text-reset">
                    <i class="fab fa-facebook-f"></i>
                </a>

                <a href="https://maps.app.goo.gl/VF8NK9mf1Z2MMdfY7" target="_blank" class="me-4 text-reset">
                    <i class="fab fa-google"></i>
                </a>
                <a href="https://www.instagram.com/trusteducationfoundation/" target="_blank" class="me-4 text-reset">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/company/trust-education-foundationn/" target="_blank" class="me-4 text-reset">
                    <i class="fab fa-linkedin"></i>
                </a>

            </div>
            <!-- Right -->
        </section>
        <!-- Section: Social media -->

        <!-- Section: Links  -->
        <section class="footer-row-2">
            <div class="container text-center text-md-start mt-5">
                <!-- Grid row -->
                <div class="row mt-3">
                    <!-- Grid column -->
                    <div class="col-md-3">
                        <!-- Content -->
                        <h6 class="text-uppercase fw-bold mb-4">
                            <!--img src="{{template('img/logorm.png')}}" alt="Trust Education" width="150" height="auto"-->
                            Dream Europe Trust Us
                        </h6>
                        <p>
                            We help students achieve their international education goals with personalized guidance and support for study abroad programs, including application assistance, visa counseling, and academic planning.

                        </p>
                    </div>
                    <!-- Grid column -->
                    <div class="col-2">
                        <!-- Links -->
                        <h6 class="text-uppercase fw-bold mb-4">
                            Useful links
                        </h6>
                        <ul>
                            <li>
                                <a class="nav-link" aria-current="page" href="#">Home</a>
                            </li>
                            <li>
                                <a class="nav-link" href="#stories">Success Stories </a>
                            </li>
                            <li>
                                <a class="nav-link" href="#videos">Our Videos </a>
                            </li>
                            <li>
                                <a class="nav-link" href="#uni">Our Universities </a>
                            </li>
                            <li>
                                <a class="nav-link" href="#test">Testimonials</a>
                            </li>
                        </ul>

                    </div>
                    <div class="col-2">
                        <h6 class="text-uppercase fw-bold mb-4">
                            Study Abroad
                        </h6>
                        <ul>
                            <li><a class="nav-link" href="https://trusteducation.net/studydestinations/sweden">Sweden</a></li>
                            <li><a class="nav-link" href="https://trusteducation.net/studydestinations/denmark">Denmark</a></li>
                            <li><a class="nav-link" href="https://trusteducation.net/studydestinations/uk">UK</a></li>
                            <li><a class="nav-link" href="https://trusteducation.net/studydestinations/norway">Norway</a></li>
                            <li><a class="nav-link" href="https://trusteducation.net/studydestinations/finland">Finland</a></li>
                            <li><a class="nav-link" href="https://trusteducation.net/studydestinations/australia">Australia</a></li>
                            <li><a class="nav-link" href="https://trusteducation.net/studydestinations/canada">Canada</a></li>
                        </ul>

                    </div>
                    <!-- Grid column -->

                    <!-- Grid column -->
                    <div class="col-md-3">
                        <!-- Links -->
                        <h6 class="text-uppercase fw-bold mb-4">Contact Us</h6>

                        <p><i class="fas fa-home me-3"></i> Trust Education Foundation<br />
                            <i class="fas fa-home me-3"></i> New Baneshwor, Kathmandu, Nepal<br />
                            <i class="fas fa-envelope me-3"></i>info@trusteducation.net<br />
                            <i class="fas fa-viber me-3"></i> 9810330674<br />
                            <i class="fas fa-phone me-3"></i> 01-4793143<br />
                            <i class="fas fa-globe me-3"></i> www.trusteducation.net<br />
                        </p>
                    </div>
                    <!-- Grid column -->
                </div>
                <!-- Grid row -->
            </div>
        </section>
        <!-- Section: Links  -->

        <!-- Copyright -->
        <div class="text-center p-4" style="background-color:  #0e5783; color: #fff;">
            © 2023 Copyright:
            <a class="text-reset fw-bold" href="https://trusteducation.net/">Trust Education Foundation</a>
        </div>
        <!-- Copyright -->
    </footer>
    <!-- Footer -->

</section>


<div class="modal fade" id="success-modal" tabindex="-1" role="dialog" aria-labelledby="success-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="display: none;">
                <h5 class="modal-title" id="success-modal-label">Success</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="modal-text-area">
                </div>
                <div id="success-modal-qr">
                </div>
                <div id="canvas-area">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="downloadButton" class="btn btn-success full-width" style="width: 100%;">Download</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-labelledby="error-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="error-modal-label">Form Validation Errors</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Error messages will be displayed here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection
@push("js")
<script>
    $(document).ready(function() {
        // Owl Carousel for 4 slides
        $(".owl-carousel-four").owlCarousel({
            items: 4,
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 4
                }
            }
        });

        // Owl Carousel for 6 slides
        $(".owl-carousel-six").owlCarousel({
            items: 6,
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 6
                }
            }
        });
    });
</script>
@endpush
@push("js")
<script>
    $(document).ready(function() {
        $('#enquiry-form').submit(function(e) {
            e.preventDefault();
            var formData = $(this).serialize();
            var response = "";
            $.ajax({
                type: 'POST',
                url: '<?php echo route("registration.submit"); ?>',
                data: formData,
                success: function(response) {
                    // fbq('trackCustom', 'EventRegistration', {promotion: 'astro_solutions'});
                    //fbq('track', 'PageView');
                    if (response.status) {
                        $('#registration-id').text(response.registration_id);
                        $('#success-modal-label').text("Registration is successful");
                        // $('#success-modal-qr').html("<p class='text-center' style='    text-align: center!important;background-color: #830404;color: white;padding: 10px;font-weight: 600;'>Please download/save this PRESIDENTIAL PASS. You must present this to participate in the event.</p><img src='" + response.qr_code + "' class='img-fluid' />");
                        $('#success-modal-qr').html("<img src='" + response.qr_code + "' class='img-fluid' />");
                        var downloadLink = document.createElement('a');
                        downloadLink.href = response.qr_code;
                        downloadLink.download = 'qr_code.png'; // Set the desired file name
                        //    downloadLink.click();
                        $('#success-modal').modal('show');
                        $form[0].reset();
                    } else if (response.message == 'Mobile number already exists. Returning existing data.') {
                        var existingRegistrationData = response.registration;
                        //$('#modal-text-area').html(JSON.stringify(existingRegistrationData));
                        var downloadLink = document.createElement('a');
                        downloadLink.href = response.qr_code;
                        downloadLink.download = 'qr_code.png'; // Set the desired file name
                        //downloadLink.click();
                        $('#success-modal-label').text(response.message);
                        $('#success-modal-qr').html("<img src='" + response.qr_code + "' class='img-fluid' />");
                        $('#success-modal').modal('show');
                    } else {
                        var errorMessages = '';
                        $.each(response.errors, function(field, errors) {
                            errorMessages += errors.join('<br>');
                        });
                        $('#error-modal .modal-body').html(errorMessages);
                        $('#error-modal').modal('show');
                    }
                }
            });
        });
        $('#success-modal').on('hidden.bs.modal', function() {
            $('#enquiry-form')[0].reset(); // Reset the form
        });
        $('#downloadButton').on('click', function() {
            // Trigger the download when the button is clicked
            var downloadLink = document.createElement('a');
            downloadLink.href = $('#success-modal-qr img').attr('src');
            downloadLink.download = 'qr_code.png';
            downloadLink.click();
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('.customer-logos').slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 1500,
            arrows: false,
            dots: false,
            pauseOnHover: false,
            responsive: [{
                breakpoint: 768,
                settings: {
                    slidesToShow: 4
                }
            }, {
                breakpoint: 520,
                settings: {
                    slidesToShow: 3
                }
            }]
        });
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
@endpush