<?php
/**
 * The Template Name: Home Page
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package Cloud Storage Services
 */

get_header(); ?>

<div id="content" >
    <?php
        $cloud_storage_services_banner = get_theme_mod('cloud_storage_services_banner', false);
        if ($cloud_storage_services_banner) { ?>
        <section id="banner-cat" class="py-4 position-relative">
            <div class="container">
                <div class="row wow zoomIn" data-wow-delay=".4s">
                    <div class="col-xl-5 col-lg-5 col-md-5 col-12 align-self-center">
                        <div class="bannerbox">
                            <div class="banner-innr-box text-lg-start text-md-start text-center">
                                <?php if (get_theme_mod('cloud_storage_services_banner_small_title') != "") { ?>
                                    <p class="bnr-sub-heading text-capitalize d-flex gap-2 align-items-center justify-content-lg-start justify-content-md-start justify-content-center"><i class="fa-solid fa-folder-closed"></i><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_small_title')); ?></p>
                                <?php } ?>
                                <?php if (get_theme_mod('cloud_storage_services_banner_main_title') != "") { ?>
                                    <h1 class="banner-heading text-capitalize mt-3 my-5"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_main_title')); ?></h1>
                                <?php } ?>
                                <?php if ( get_theme_mod('cloud_storage_services_banner_left_btn_text') != "" || get_theme_mod('cloud_storage_services_banner_right_btn_text') != "") { ?>
                                    <div class="banner-main-btn d-flex gap-3 justify-content-lg-start justify-content-md-start justify-content-center">
                                        <a href="<?php echo esc_url(get_theme_mod ('cloud_storage_services_banner_left_btn_url')); ?>" class="banner-button1"><span class="banner-btn text-capitalize"><?php echo esc_html(get_theme_mod ('cloud_storage_services_banner_left_btn_text')); ?></span><i class="fa-solid fa-arrow-right"></i></a>
                                        <a href="<?php echo esc_url(get_theme_mod ('cloud_storage_services_banner_right_btn_url')); ?>"class="banner-button2"><span class="banner-btn text-capitalize"><?php echo esc_html(get_theme_mod ('cloud_storage_services_banner_right_btn_text')); ?></span><i class="fa-solid fa-arrow-right"></i></a>
                                    </div>
                                <?php }?>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-7 col-lg-7 col-md-7 col-12 align-self-center text-center banner-right-img">
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-self-center">
                                <?php if(get_theme_mod('cloud_storage_services_video_button_url') != '') {?>
                                    <div class="video-btn mb-3 text-lg-end text-md-end text-center">
                                        <a class="openBtn d-inline-flex my-lg-0 my-md-0 my-4"><i class="fas fa-play"></i></a>
                                        <div class="overlay videoOverlay">
                                            <div class="popup">
                                                <span class="close-btn"><i class="fas fa-times"></i></span>
                                                <embed width="100%" height="100%" src="<?php echo esc_url(get_theme_mod('cloud_storage_services_video_button_url'));?>" frameborder="0" allowfullscreen></embed>
                                            </div>
                                        </div>
                                    </div>
                                <?php }?>
                                <?php if (get_theme_mod('cloud_storage_services_banner_upload_box_title') != "" || get_theme_mod('cloud_storage_services_banner_other_buyers') != "" || get_theme_mod('cloud_storage_services_banner_business_buyers') != "" ||  get_theme_mod('cloud_storage_services_banner_female_buyers') != "" || get_theme_mod('cloud_storage_services_banner_male_buyers') != "") { ?>
                                    <div class="profiles-box">
                                        <?php
                                            $cloud_storage_services_other    = intval(get_theme_mod('cloud_storage_services_banner_other_buyers', 0));
                                            $cloud_storage_services_business = intval(get_theme_mod('cloud_storage_services_banner_business_buyers', 0));
                                            $cloud_storage_services_female   = intval(get_theme_mod('cloud_storage_services_banner_female_buyers', 0));
                                            $cloud_storage_services_male     = intval(get_theme_mod('cloud_storage_services_banner_male_buyers', 0));

                                            $cloud_storage_services_business_start = $cloud_storage_services_other;
                                            $cloud_storage_services_female_start   = $cloud_storage_services_other + $cloud_storage_services_business;
                                            $cloud_storage_services_male_start     = $cloud_storage_services_other + $cloud_storage_services_business + $cloud_storage_services_female;
                                        ?>
                                        <div class="row">
                                            <h6 class="profiles-title text-start text-capitalize"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_upload_box_title')); ?></h6>
                                            <div class="col-xl-4 col-lg-5 col-md-6 col-5 align-self-center text-start">
                                                <ul>
                                                    <li class="text-capitalize other-box ps-4 mb-2"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_upload_other_title')); ?></li>
                                                    <li class="text-capitalize business-box ps-4 mb-2"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_upload_business_title')); ?></li>
                                                    <li class="text-capitalize female-box ps-4 mb-2"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_upload_female_title')); ?></li>
                                                    <li class="text-capitalize male-box ps-4 mb-2"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_upload_male_title')); ?></li>
                                                </ul>
                                            </div>
                                            <div class="col-xl-8 col-lg-7 col-md-6 col-7 align-self-center d-flex justify-content-end">
                                                <div class="pie-chart" style="--chart: #10263A 0% <?php echo $cloud_storage_services_other; ?>%, var(--third-theme-color) <?php echo $cloud_storage_services_other; ?>% <?php echo $cloud_storage_services_female_start; ?>%, #ffffff <?php echo $cloud_storage_services_female_start; ?>% <?php echo $cloud_storage_services_male_start; ?>%, var(--second-theme-color) <?php echo $cloud_storage_services_male_start; ?>% 100%;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php }?>
                                <?php if (get_theme_mod('cloud_storage_services_banner_review_count') != "" || get_theme_mod('cloud_storage_services_banner_review_text') != "") { ?>
                                    <div class="review-outer-box mt-4 me-3">
                                        <div class="review-box">
                                            <div class="row">
                                                <div class="col-xl-4 col-lg-4 col-md-4 col-4 align-self-center review-icon">
                                                    <i class="fa-solid fa-users"></i>
                                                </div>
                                                <div class="col-xl-8 col-lg-8 col-md-8 col-8 align-self-center text-start">
                                                    <h4 class="review-count mb-0"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_review_count')); ?></h4>
                                                    <p class="review-text mb-0 text-capitalize"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_review_text')); ?></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php } ?>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12 align-self-center">
                                <?php if (get_theme_mod('cloud_storage_services_banner_storage_title') != "" || get_theme_mod('cloud_storage_services_banner_storage_files') != "" || get_theme_mod('cloud_storage_services_banner_video_files') != "" || get_theme_mod('cloud_storage_services_banner_image_files') != "") { ?>
                                    <div class="upload-box p-3 mb-5">
                                        <h6 class="upload-title text-start text-capitalize mb-3"><i class="fa-solid fa-cloud-arrow-up me-2"></i><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_storage_title')); ?></h6>
                                        <?php
                                            $cloud_storage_services_storage = max(0,min(100,(int)get_theme_mod('cloud_storage_services_banner_storage_files',0)));
                                            $cloud_storage_services_video   = max(0,min(100,(int)get_theme_mod('cloud_storage_services_banner_video_files',0)));
                                            $cloud_storage_services_image   = max(0,min(100,(int)get_theme_mod('cloud_storage_services_banner_image_files',0)));
                                        ?>
                                        <div class="progress-box mb-2">
                                            <div class="progress-count d-flex justify-content-between align-items-center mb-1"><p class="mb-0"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_storage_file_title')); ?></p><p class="mb-0"><?php echo $cloud_storage_services_storage; ?><?php echo esc_html__('%','cloud-storage-services');?></p></div>
                                            <div class="progress">
                                              <div class="progress-bar" style="width:<?php echo $cloud_storage_services_storage; ?>%"></div>
                                            </div>
                                        </div>
                                        <div class="progress-box mb-2">
                                            <div class="progress-count d-flex justify-content-between align-items-center mb-1"><p class="mb-0"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_video_title')); ?></p><p class="mb-0"><?php echo $cloud_storage_services_video; ?><?php echo esc_html__('%','cloud-storage-services');?></p></div>
                                            <div class="progress">
                                              <div class="progress-bar" style="width:<?php echo $cloud_storage_services_video; ?>%"></div>
                                            </div>
                                        </div>
                                        <div class="progress-box">
                                            <div class="progress-count d-flex justify-content-between align-items-center mb-1"><p class="mb-0"><?php echo esc_html(get_theme_mod('cloud_storage_services_banner_images_title')); ?></p><p class="mb-0"><?php echo $cloud_storage_services_image; ?><?php echo esc_html__('%','cloud-storage-services');?></p></div>
                                            <div class="progress">
                                              <div class="progress-bar" style="width:<?php echo $cloud_storage_services_image; ?>%"></div>
                                            </div>
                                        </div>
                                    </div>
                                <?php }?>
                                <div class="graph-img text-lg-start text-md-start text-center">
                                    <?php if (get_theme_mod('cloud_storage_services_banner_graph_img') != "") { ?>
                                        <img src="<?php echo esc_url(get_theme_mod('cloud_storage_services_banner_graph_img')); ?>" alt="<?php echo esc_attr( 'banner', 'cloud-storage-services'); ?>"/>
                                    <?php }?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="<?php echo esc_url(get_template_directory_uri()); ?>/images/cloud.svg" class="cloud-img position-absolute" alt="<?php echo esc_attr( 'cloud-image', 'cloud-storage-services'); ?>"/>
        </section>
    <?php } ?>

    <!-- Team Section -->
    <?php
        $cloud_storage_services_hide_team_section = get_theme_mod('cloud_storage_services_disabled_team_section', false);
        if ($cloud_storage_services_hide_team_section){ ?>
        <section id="team-section" class="position-relative py-5 mt-5 wow zoomIn" data-wow-delay=".4s">
            <div class="container">
                <?php if (get_theme_mod('cloud_storage_services_team_text') != "" || get_theme_mod('cloud_storage_services_team_title') != "" || get_theme_mod('cloud_storage_services_team_desc') != "") { ?>
                    <div class="row">
                        <div class="col-xl-3 col-lg-3 col-md-5 col-12">
                            <div class="blog-bx text-lg-start text-md-start text-center">
                                <p class="team-sub-title text-capitalize mb-2 d-flex gap-2 align-items-center justify-content-lg-start justify-content-md-start justify-content-center"><i class="fa-solid fa-folder-closed"></i><?php echo esc_html(get_theme_mod('cloud_storage_services_team_text')); ?></p>
                                <h2 class="team-title text-capitalize mb-3"><?php echo esc_html(get_theme_mod('cloud_storage_services_team_title')); ?></h2>
                                <p class="team-desc text-capitalize mb-2"><?php echo esc_html(get_theme_mod('cloud_storage_services_team_desc')); ?></p>
                                <div class="custom-owl-nav d-flex gap-2 mt-5 justify-content-lg-start justify-content-md-start justify-content-center mb-lg-0 mb-md-0 mb-4">
                                    <button class="custom-prev"><i class="fa-solid fa-arrow-left"></i></button>
                                    <button class="custom-next"><i class="fa-solid fa-arrow-right"></i></button>
                                </div>
                            </div> 
                        </div>
                        <div class="col-xl-9 col-lg-9 col-md-7 col-12 align-self-center">
                            <div class="owl-carousel">
                                <?php for ($cloud_storage_services_i=0; $cloud_storage_services_i < 6; $cloud_storage_services_i++) { ?>
                                    <?php if (get_theme_mod('cloud_storage_services_team_member_img'.$cloud_storage_services_i) != "" || get_theme_mod('cloud_storage_services_team_member_name'.$cloud_storage_services_i) != "" || get_theme_mod('cloud_storage_services_team_member_designation'.$cloud_storage_services_i) != "") { ?>
                                        <div class="team-card">
                                            <div class="team-img">
                                                <?php if (get_theme_mod('cloud_storage_services_team_member_img'.$cloud_storage_services_i) != "") { ?>
                                                    <img src="<?php echo esc_url(get_theme_mod('cloud_storage_services_team_member_img'.$cloud_storage_services_i)); ?>" alt="<?php echo esc_attr( 'member', 'cloud-storage-services'); ?>"/>
                                                <?php }?>
                                            </div>
                                            <div class="team-details p-3 position-relative">
                                                <div class="row">
                                                    <div class="col-xl-10 col-lg-9 col-md-9 col-12 align-self-center">
                                                        <h4 class="member-name text-capitalize"><?php echo esc_html(get_theme_mod('cloud_storage_services_team_member_name'.$cloud_storage_services_i)); ?></h4>
                                                        <p class="member-designation text-capitalize mb-0"><?php echo esc_html(get_theme_mod('cloud_storage_services_team_member_designation'.$cloud_storage_services_i)); ?></p>
                                                    </div>
                                                    <div class="col-xl-2 col-lg-3 col-md-3 col-12 align-self-center text-end">
                                                        <?php if ( get_theme_mod('cloud_storage_services_disabled_team_social_icon'.$cloud_storage_services_i, false)) { ?> 
                                                            <div class="social-icon-box position-absolute">
                                                                <div class="social-icon pt-2 pb-3">
                                                                    <?php if ( get_theme_mod('cloud_storage_services_facebook_url'.$cloud_storage_services_i)) { ?>
                                                                        <a href="<?php echo esc_url(get_theme_mod ('cloud_storage_services_facebook_url'.$cloud_storage_services_i)); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-facebook-f"></i></a>
                                                                    <?php }?>
                                                                    <?php if ( get_theme_mod('cloud_storage_services_twitter_url'.$cloud_storage_services_i)) { ?>
                                                                        <a href="<?php echo esc_url(get_theme_mod ('cloud_storage_services_twitter_url'.$cloud_storage_services_i)); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-x-twitter"></i></a>
                                                                    <?php }?>
                                                                    <?php if ( get_theme_mod('cloud_storage_services_youtube_url'.$cloud_storage_services_i)) { ?>
                                                                        <a href="<?php echo esc_url(get_theme_mod ('cloud_storage_services_youtube_url'.$cloud_storage_services_i)); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-youtube"></i></a>
                                                                    <?php }?>
                                                                    <?php if ( get_theme_mod('cloud_storage_services_instagram_url'.$cloud_storage_services_i)) { ?>
                                                                        <a href="<?php echo esc_url(get_theme_mod ('cloud_storage_services_instagram_url'.$cloud_storage_services_i)); ?>" target="_blank" class="text-capitalize"><i class="fa-brands fa-instagram"></i></a>
                                                                    <?php }?>
                                                                </div>
                                                                <div class="share-icon"><i class="fa-solid fa-share-nodes"></i></div>
                                                            </div>
                                                        <?php }?>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    <?php }?>
                                <?php }?>
                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
        </section>
    <?php } ?>
</div>
<?php get_footer(); ?>