<?php
/*
Template Name: Support
*/

get_header('new');
?>

<section class="section support-banner no-lazy">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <div class="text-cont text-center slide-right">
                    <h1 class="banner-heading"><?php echo get_the_title(); ?></h1>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section support-cards-sec bg-white">
    <div class="container">
        <h2 class="section-title text-center pb-lg-2"><?php echo get_field('support_resources_heading'); ?></h2>

        <?php $support_resources = get_field('support_resources'); ?>
        <?php if (is_array($support_resources) && count($support_resources)) : ?>
            <div class="row mt-4 mt-lg-5">
                <?php $links = [
                     '#submit-ticket',
                     '#video-tutorials',
                     false
                ]; ?>
                <?php for ($i=0; $i < count($support_resources); $i++) : ?>
                    <div class="col-lg-4">
                        <?php if ($links[$i]) : ?>
                            <a href="<?php echo get_the_permalink(); ?><?php echo $links[$i]; ?>" class="text-cont">
                        <?php else : ?>
                            <div class="text-cont" style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1;">
                        <?php endif; ?>
                            <div class="icon">
                                <img src="<?php echo $support_resources[$i]['icon']; ?>" alt="<?php echo $support_resources[$i]['heading']; ?>">
                            </div>
                            <h3><?php echo $support_resources[$i]['heading']; ?></h3>
                            <?php echo wpautop( $support_resources[$i]['description'] ); ?>
                        <?php if ($links[$i]) : ?>
                            </a>
                        <?php else : ?>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endfor; ?>

            </div>
        <?php endif; ?>

    </div>
</section>

<section class="section help-topics bg-white" id="video-tutorials">
    <div class="container">
        <div class="text-box text-center slide-left">
            <h2 class="section-title"><?php echo get_field('support_topics_heading'); ?></h2>
            <div class="search-box">
                <button class="search-btn" aria-label="Search Button">
                    <svg width="25" height="25" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.82 4.812c-2.632 0-4.765 2.031-4.765 4.537s2.133 4.537 4.764 4.537 4.764-2.031 4.764-4.537S12.45 4.812 9.82 4.812M3.693 9.349c0-3.222 2.743-5.833 6.125-5.833s6.125 2.611 6.125 5.833-2.742 5.833-6.125 5.833-6.125-2.611-6.125-5.833" fill="#C8BABA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.51 13.823a.705.705 0 0 1 .963 0l1.633 1.555a.627.627 0 0 1 0 .917.705.705 0 0 1-.962 0l-1.634-1.556a.626.626 0 0 1 0-.916" fill="#8488B7"/></svg>
                </button>
                <input type="text" class="form-control" placeholder="<?php echo get_field('support_topics_searchbar_placeholder'); ?>">
            </div>
        </div>

        <?php $support_topics = get_field('support_topics'); ?>
        <?php if (is_array($support_topics) && count($support_topics)) : ?>
        <div class="card-waraper slide-down heading">
            <div class="row">
                <?php foreach ($support_topics as $topic) : ?>
                    <div class="col-lg-4 col-md-6">
                        <div class="card">
                            <div class="icon">
                                <img src="<?php echo $topic['icon']; ?>" alt="<?php echo $topic['heading']; ?>">
                            </div>
                            <h3><?php echo $topic['heading']; ?></h3>
                            <?php echo wpautop( $topic['description'] ); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>
    </div>
</section>


<section class="section submit-ticket-sec bg-white" id="submit-ticket">
    <div class="container">
        <div class="text-box">
            <h2 class="section-title">Submit a Ticket</h2>
        </div>
        <div class="support-ticket-form">
            <div class="row">
                <div class="col-lg-10">

                    <?php echo do_shortcode('[contact-form-7 id="03cff77"]'); ?>

                </div>
            </div>
        </div>
    </div>
</section>


<?php
    get_footer();
?>

<script>
jQuery(document).ready(function ($) {

    $('#fileUploadBtn').click(function() {
        $('#file').click();
    });

    $('#file').change(function() {
        var fileList = $('#fileList');
        fileList.empty();
        var files = $(this)[0].files;
        for (var i = 0; i < files.length; i++) {
            fileList.append('<p class="mt-2 mb-0 file-name">' + files[i].name + '</p>');
        }
    });

    // Attach a keyup event to the search input
    var section = $('div.heading');
    var searchValues;

    $('.search-box input[type="text"]').on('keyup', function () {
        searchValues = $(this).val().toLowerCase(); // Get the search value in lowercase
        searchValues = searchValues.split(' ');

        // Iterate through each section with a list of logos
        var sectionVisible = false; // Flag to check if any logo in this section matches

        section.find('.row').find('.col-lg-4').each(function () {
            var listItem = $(this);
            var logoName = listItem.text().toLowerCase(); // Get the text of the logo in lowercase

            if (searchValues.every(item => logoName.includes(item))) {
                listItem.show(); // Show matching logos
                sectionVisible = true; // Mark the section as visible if a match is found
            } else {
                listItem.hide(); // Hide non-matching logos
            }
        });


        // Show or hide the entire section including heading and description
        if (sectionVisible) {
            section.show(); // Show the heading and description
            section.next('.row').show(); // Show the entire list
        } else {
            section.hide(); // Hide the heading and description if no logos match
            section.next('.row').hide(); // Hide the list if no logos are visible
        }
    });
});
</script>