<?php
/*
Template Name: Strona główa
*/
?>

<?php
    $menuButtonColor = get_field('menu_button_color', 'option');

    $twitterUrl = get_field('twitter', 'option');
    $fbUrl = get_field('facebook', 'option');
    $instagramUrl =  get_field('instagram', 'option');
    $googleUrl = get_field('google_plus', 'option');
?>

<?php get_header(); ?>
    <button style="<?= $menuButtonColor ? 'background : '. $menuButtonColor : ''; ?>;" class="c-hamburger c-hamburger--htx"><span>toggle menu</span></button>

    <div class="sidemenu">
        <div class="sidemenu-inner">
            <?= wp_nav_menu(array('theme_location' => 'main')) ?>
        </div>
         <?php if ($twitterUrl || $fbUrl || $instagramUrl || $googleUrl): ?>
        <div class="simple-socials">
            <?php if ($twitterUrl): ?>
            <a target="_blank" title="" href="<?= $twitterUrl; ?>"><i class="fa fa-twitter"></i></a>
        <?php endif; ?>
            <?php if ($fbUrl): ?>
            <a target="_blank" title="" href="<?= $fbUrl; ?>"><i
                    class="fa fa-facebook"></i></a>
        <?php endif; ?>
            <?php if ($instagramUrl): ?>
            <a target="_blank" title="" href="<?= $instagramUrl; ?>"><i class="fa fa-instagram"></i></a>
        <?php endif; ?>
            <?php if ($googleUrl): ?>
            <a target="_blank" title="" href="<?= $googleUrl; ?>"><i
                    class="fa fa-google-plus"></i></a>
        <?php endif; ?>
        </div>
        <?php endif; ?>
    </div>
    <section id="home">
        <div class="block no-padding">
            <div class="row">
                <div class="col s12 m12 l12 column">
                    <div class="creative-slider">
                        <div id="rev_slider_4_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container"
                             data-alias="classicslider1">
                            <div id="rev_slider_4_1" class="rev_slider fullwidthabanner" style="display:none;">
                                <ul>
                                    <?php $sliderImages = get_field('banner'); ?>
                                    <?php if ($sliderImages): ?>
                                    <?php foreach ($sliderImages as $k => $img): ?>
                                        <li class="slide<?= $k; ?>" data-index="rs-<?= $k; ?>"
                                            data-title="<?= $img['title']; ?>" data-transition="fade"
                                            data-slotamount="7" data-easein="Power4.easeInOut"
                                            data-easeout="Power4.easeInOut" data-masterspeed="2000">

                                            <img tite="<?= $img['image']['title']; ?>" src="<?= $img['image']['url']; ?>" alt="<?= $img['image']['alt']; ?>"
                                                 data-bgposition="center center"
                                                 data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10"
                                                 class="rev-slidebg" data-no-retina>

                                            <div class="tp-caption layer1 tp-resizeme"
                                                 id="slide-1-layer-1"
                                                 data-x="0" data-hoffset=""
                                                 data-y="350" data-voffset="-70"
                                                 data-width="['auto','auto','auto','auto']"
                                                 data-height="['auto','auto','auto','auto']"
                                                 data-transform_idle="o:1;"
                                                 data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;"
                                                 data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
                                                 data-start="2000"
                                                 data-splitin="none"
                                                 data-splitout="none"
                                                 data-responsive_offset="on"
                                                 data-elementdelay="0.05"
                                                 style="font-size:60px;letter-spacing:-1px">
                                                <?= $img['first_text']; ?>
                                            </div>

                                            <?php if ($img['secound_text']) :?>
                                                <div class="tp-caption layer1 tp-resizeme"
                                                     id="slide-1-layer-2"
                                                     data-x="0" data-hoffset=""
                                                     data-y="440" data-voffset="-70"
                                                     data-width="['auto','auto','auto','auto']"
                                                     data-height="['auto','auto','auto','auto']"
                                                     data-transform_idle="o:1;"
                                                     data-transform_in="y:50px;opacity:0;s:1500;e:Power3.easeOut;"
                                                     data-transform_out="s:1000;e:Power3.easeInOut;s:1000;e:Power3.easeInOut;"
                                                     data-start="3000"
                                                     data-splitin="none"
                                                     data-splitout="none"
                                                     data-responsive_offset="on"
                                                     data-elementdelay="0.05"
                                                     style="font-size:60px;letter-spacing:-1px">
                                                    <?= $img['secound_text']; ?>
                                                </div>
                                            <?php endif; ?>
                                        </li>
                                    <?php endforeach; ?>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        </div>
                        <div class="down-arrow">
                            <div class="container">
                                <a href="#about" title=""><i class="fa fa-long-arrow-down"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section id="about">
        <div class="block">
            <div class="container">
                <div class="row">
                    <div class="col s12 m12 l12 column">
                        <div class="big-title">
                            <div class="row">
                                <div class="col s12 m12 l5"><h2><?= get_field('about_us_title'); ?></h2></div>
                                <div class="col s12 m12 l7">
                                    <?= get_field('about_us_description'); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="row">
                    <div class="col s12 m12 l12 column">
                        <div class="big-title">
                            <div class="row">
                                <div class="col s12 m12 l5"><h2><?= get_field('clients_title'); ?></h2></div>
                            </div>
                        </div>

                        <div class="sponsors-carousel">
                        <?php $client_logos = get_field('clients_logo'); ?>
                            <?php if ($client_logos): ?>
                            <?php foreach ($client_logos as $logo): ?>
                                <a target="_blank" class="customer-logo-link" rel="nofollow" href="<?= $logo['link']; ?>">
                                    <img title="<?= $logo['logo']['url'] ?>" src="<?= $logo['logo']['url'] ?>" alt="<?= $logo['logo']['alt']; ?>"/>
                                </a>
                            <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <section id="work">
        <div class="block">
            <div class="container">
                <div class="row">
                    <div class="col s12 m12 l12 column">
                        <div class="big-title style2">
                            <div class="row">
                                <div class="col s12 m12 l12"><h2>Nasze realizacje</h2></div>
                            </div>
                        </div>
                        <section id="options" class="options">
                            <div class="option-isotop">
                                <ul id="filter" class="option-set filters-nav" data-option-key="filter">
                                    <li><a class="selected" href="" data-option-value="*">Wszystkie</a></li>
                                    <?php foreach (artzone_get_portfolio_categories() as $k => $category): ?>
                                        <li><a href=""
                                               data-option-value=".<?= str_replace(' ', '_', $category); ?>"><?= $category; ?></a>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        </section>
                    </div>
                </div>
            </div>

            <div class="row without-gap">
                <div class="masonary">
                    <?php foreach (artzone_get_posts_by_type('portfolio', -1, null, 'date') as $item): ?>
                        <?php $itemFields = get_fields($item->ID); ?>
                        <?php $category = get_the_terms($item->ID, 'portfolio_cat'); ?>
                        <div class="col s12 m6 l3 <?= artzone_get_portfolio_category_classes($category); ?>">
                            <div class="work">
                                <img title="<?= $itemFields['list_image']['title']; ?>" class="red-img" src="<?= $itemFields['list_image']['url']; ?>"
                                     alt="<?= $itemFields['list_image']['alt']; ?>"/>

                                <img title="<?= $itemFields['list_image_black']['title']; ?>" class="black-img" src="<?= $itemFields['list_image_black']['url']; ?>"
                                     alt="<?= $itemFields['list_image_black']['alt']; ?>"/>

                                <div class="work-hover">
                                    <h5><?= $item->post_title; ?></h5>
                                    <span><?= $itemFields['category_name']; ?></span>
                                    <a href="<?= get_permalink($item->ID); ?>" title=""><i
                                            class="fa fa-long-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </section>

    <section id="service">
        <div class="block">
            <div class="container">
                <div class="row">
                    <div class="col s12 m12 l4 column">
                        <div class="column-title">
                            <h2>Nasze usługi</h2>
                        </div>
                    </div>
                    <div class="col s12 m12 l8 column">
                        <div class="innovative-services">
                            <?php
                                $servicesRows = array_chunk(artzone_get_posts_by_type('service', -1, null, 'date'), 2);
                                $servicesTitleColor = get_field('services_title_color', 'option');
                            ?>
                            <?php $i = 1; ?>
                            <?php foreach ($servicesRows as $serviceRow): ?>
                                <div class="row">
                                    <?php foreach ($serviceRow as $service): ?>
                                        <?php $serviceFields = get_fields($service->ID); ?>
                                        <div class="col s12 m6 l6">
                                            <div class="innovative-service">
                                                <img title="<?= $serviceFields['icon']['title']; ?>" src="<?= $serviceFields['icon']['url']; ?>"
                                                     alt="<?= $serviceFields['icon']['alt']; ?>"/>

                                                <?php if (get_field('service_show_popup', 'option')): ?>
                                                    <h4 style="<?= $servicesTitleColor ? 'color : '. $servicesTitleColor : ''; ?>;" data-modal="service-<?= $i; ?>"><?= $service->post_title; ?></h4>
                                                <?php else: ?>
                                                    <h4 style="cursor: default; <?= $servicesTitleColor ? 'color : '. $servicesTitleColor : ''; ?>;"><?= $service->post_title; ?></h4>
                                                <?php endif; ?>

                                                <?php if ($serviceFields['list_description']): ?>
                                                    <?= $serviceFields['list_description']; ?>
                                                <?php endif; ?>

                                                <?php if ($serviceFields['list']): ?>
                                                    <ul>
                                                        <?php foreach ($serviceFields['list'] as $listItem): ?>
                                                            <li><span><?= $listItem['item']; ?></span></li>
                                                        <?php endforeach; ?>
                                                    </ul>
                                                <?php endif; ?>

                                            </div>
                                        </div>
                                        <?php $i++; ?>
                                    <?php endforeach; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


<?php
$customerFeedback = get_field('customer_about');
$recommendationBackgroundColor = get_field('recommendation_background_color', 'option');
?>
<?php if ($customerFeedback): ?>
    <section id="clientsAboutUs">
        <div class="block pink" style="<?= $recommendationBackgroundColor ? 'background-color : '. $recommendationBackgroundColor . '!important' : ''; ?>;">
            <div class="container">
                <div class="row">
                    <div class="col s12 m12 l12 column">
                        <div class="sponsors-about-carousel">
                            <?php foreach ($customerFeedback as $feedback): ?>
                                <div class="opinion">
                                    <div class="text-content">
                                        <?= $feedback['content']; ?>
                                    </div>
                                    <div class="customer-name"><?= $feedback['customer_name']; ?></div>
                                </div>
                            <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>
<?php endif; ?>

    <section id="contact">
        <div class="block no-padding">
            <div class="container">
                <div class="row">
                    <div class="col s12 m12 l6 column">
                        <div class="map">
                            <div id="map-canvas"></div>
                        </div>
                    </div>
                    <div class="col s12 m12 l6 offset-l6 column">
                        <div class="get-in-touch">
                            <div class="big-title light style2">
                                <div class="row">
                                    <div class="col s12 m12 l12"><h2>Napisz do nas</h2></div>
                                </div>
                            </div>

                            <?= do_shortcode('[contact-form-7 id="4" title="Kontakt"]'); ?>

                            <div class="find-us">
                                <div class="big-title light style2">
                                    <div class="row">
                                        <div class="col s12 m12 l12"><h2>Kontakt</h2></div>
                                    </div>
                                </div>
                                <ul>
                                    <li><span>ADRES</span><i><?= get_field('address', 'option'); ?></i>
                                    </li>
                                    <li><span>TELEFON</span><i><?= get_field('phone', 'option'); ?></i></li>
                                    <li><span>EMAIL</span><i><?= get_field('email', 'option'); ?></i></li>
                                    <li>


                                    <ul class="contact-socials">
                                    <?php if ($twitterUrl): ?>
                                        <li><a target="_blank" href="<?= $twitterUrl; ?>"><div class="fa fa-twitter"></div></a></li>
                                    <?php endif; ?>
                                    <?php if ($fbUrl): ?>
                                        <li><a target="_blank" href="<?= $fbUrl; ?>"><div class="fa fa-facebook"></div></a></li>
                                    <?php endif; ?>
                                    <?php if ($instagramUrl): ?>
                                        <li><a target="_blank" href="<?= $instagramUrl; ?>"><div class="fa fa-instagram"></div></a></li>
                                    <?php endif; ?>
                                    <?php if ($googleUrl): ?>
                                        <li><a target="_blank" href="<?= $googleUrl; ?>"><div aria-hidden="true" class="fa fa-google-plus"></div></a></li>
                                    <?php endif; ?>

</ul>

</li>
                                </ul>
                            </div>

                            <div class="bottom-line">
                                <a class="logo-f" href="<?= get_home_url(); ?>"><img title="footer-logo" src="<?= get_template_directory_uri(); ?>/images/logo-footer.png" alt="footer-logo"/></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- Modals -->
    <?php if (get_field('service_show_popup', 'option')): ?>
    <div class="service-modals">
        <?php $i = 1; ?>
        <?php foreach (artzone_get_posts_by_type('service', -1, null, 'date') as $service): ?>
            <?php $serviceFields = get_fields($service->ID); ?>
            <div id="service-<?= $i; ?>" class="modal">
                <div class="close-modal-btn"></div>
                <div class="modal-content center">
                    <img alt="<?= $serviceFields['icon']['alt']; ?>" title="<?= $serviceFields['icon']['title']; ?>" src="<?= $serviceFields['icon']['url']; ?>"/>
                    <h4><?= $service->post_title; ?></h4>
                    <div class="hr"></div>
                    <div class="content">
                        <?= $service->post_content; ?>
                    </div>
                    <div class="modal-nav">
                        <!--<a class="prev">Poprzedia usługa</a>-->
                        <!--<a class="next">Następna usługa</a>-->

                        <!--<a>-->
                        <div class="post-pagi prev">
									<span>
                                        <i class="fa fa-long-arrow-left"></i>
                                        POPRZEDNIA USŁUGA
                                    </span>
                        </div>
                            <!--</a>-->

                        <!--<a>-->
                            <div class="post-pagi next">
									<span>
                                        NASTĘPNA USŁUGA
                                        <i class="fa fa-long-arrow-right"></i>
                                    </span>
                            </div>
                        <!--</a>-->

                    </div>
                    <div class="hr"></div>

                    <?php if ($serviceFields['example_projects']): ?>
                        <h4>Przykładowe realizacje</h4>

                        <div class="modal-carousel-<?= $i; ?>">
                        <?php foreach ($serviceFields['example_projects'] as $project): ?>
                            <?php $projectFields = get_fields($project->ID); ?>
                            <a href="<?= get_permalink($project->ID); ?>">
                                <img title="<?= $projectFields['list_image']['title']; ?>" src="<?= $projectFields['list_image']['url']; ?>" alt="<?= $projectFields['list_image']['alt']; ?>" />
                            </a>
                        <?php endforeach; ?>
                        </div>
                    <?php endif; ?>

                </div>
            </div>
            <?php $i++; ?>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

<?php $mapData = get_field('map', 'option'); ?>
    <div class="hiddendiv" id="mapLat"><?= $mapData['lat']; ?></div>
    <div class="hiddendiv" id="mapLng"><?= $mapData['lng']; ?></div>
    </div>
    <a href="#" class="scrollToTop"><i class="fa fa-long-arrow-up"></i></a>
    <div id="formButtonColor" data-color="<?= get_field('form_button_color', 'option'); ?>"></div>
<?php get_footer(); ?>