<?php
    get_header();

    $title = get_field('careers_title', 'careers-page');
    $desc = get_field('careers_desc', 'careers-page');
    $image = get_field('careers_image', 'careers-page');

    $features = get_field('careers_features', 'careers-page');
    $contacts = get_field('careers_form', 'careers-page');

    $form_cv = get_field('form-for-careers', 'option');
?>

<main id="content" class="content">
    <div class="vacancy-top" style="background-image: url('<?=$image?>');">
        <div class="container">
            <div class="vacancy-top-wrapper">
                <h1 class="vacancy-top-title"><?=$title?></h1>

                <div class="vacancy-top-desc"><?=$desc?></div>

                <!-- <a class="vacancy-top-link" href="#">Send CV</a> -->
            </div>
        </div>
    </div>

    <?php                 
        $post_args = array(
            'posts_per_page' => -1,
            'post_type' => 'vacancy',
            'post_status' => 'publish',
            'order' => 'ASC',
        ); 
        
        $posts = new WP_Query($post_args);
    ?>

    <?php if ($posts->have_posts()) : ?>
        <div class="vacancies">
            <div class="container">
                <h2 class="title vacancies--title">Open Positions</h2>

                <div class="vacancies-accordion">
                    <?php 
                        while ($posts->have_posts()) :
                            $posts->the_post();
                            $current_post_link = get_permalink();
                            $current_post_title = get_the_title();
                            $current_post_id = get_the_ID();
                            $current_post_form_title = get_field('vacancy_form_title');
                            $vacancy_city = get_field('vacancy_city');
                    ?>
                    <div class="vacancies-accordion--item">
                        <h3 class="vacancies-accordion--item-title"><?php the_title(); ?></h3>

                        <div class="vacancies-accordion--item-desc">
                            <?=get_the_content()?>

                            <div class="vacancies-accordion--links clearfix">
                                <div class="vacancies-accordion--links-buttons">
                                    <a href="#modal-send-cv-<?=$current_post_id?>" class="form--button js-send-cv-box">Send CV</a>
                                    <a href="<?=$current_post_link?>" class="form--button">Read full</a>
                                </div>

                                <div class="vacancies-accordion--links-share">
                                    <span class="vacancies-accordion--links-share-title">Share this vacancy:</span>

                                    <a href="https://www.facebook.com/share.php?u=<?=$current_post_link?>" target="_blank" rel="nofollow" class="vacancies-accordion--links-share-link vacancies-accordion--links-share-link_facebook">facebook</a>
                                    <a  href="https://www.linkedin.com/shareArticle?mini=true&url=<?=$current_post_link?>&title=<?=$current_post_title?>&source=LinkedIn" target="_blank" rel="nofollow" class="vacancies-accordion--links-share-link vacancies-accordion--links-share-link_linkedin">linkedin</a>
                                </div>
                            </div>

                            <?php if ($form_cv) : ?>
                                <div id="modal-send-cv-<?=$current_post_id?>" class="modal-box mfp-hide">
                                    <p class="modal-box--title modal-box-career--title"><?php the_title(); ?></p>

                                    <p><a class="modal-box--subtitle vacancy-title-archive" href="<?=$current_post_link?>"><?=get_the_title()?></a></p>

                                    <br>

                                    <?=$form_cv?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endwhile; ?>
                </div>
            </div>
        </div>
    <?php endif; ?>


    <?php if ($features) : ?>
        <div class="features">
            <div class="container">
                <h2 class="title"><?=$features['title']?></h2>

                <div class="features-desc"><?=$features['desc']?></div>

                <?php if ($features['slider']) : ?>
                    <div class="features-slider">
                        <?php foreach ($features['slider'] as $item) : ?>
                            <div class="features-slider--item">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="features-slider--item-text">
                                            <p class="features-slider--item-text-num"><?=$item['num']?></p>
                                            <p class="features-slider--item-text-info"><?=$item['title']?></p>
                                        </div>
                                    </div>
                                    <div class="col-lg-8">
                                        <img class="features-slider--item-img" src="<?=$item['image']?>" alt="<?=$item['title']?>" title="<?=$item['title']?>">
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <div class="features-info">
                    <p>People behind the names of companies do matter for us as much as good quality code!</p>
                </div>

                <hr class="features-line">
            </div>
        </div>
    <?php endif; ?>

    <?php if ($contacts) : ?>
        <div class="contacts">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <h2 class="title contacts--title"><?=$contacts['title']?></h2>

                        <?=$contacts['form']?>
                    </div>
                    <div class="col-lg-6">
                        <div class="contacts--info">
                            <div class="contacts--info-text"><?=$contacts['info_text']?></div>

                            <img src="<?=$contacts['image']?>" alt="<?=$contacts['title']?>" title="<?=$contacts['title']?>" class="contacts--info-img">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>    
</main>

<div class="modal-box modal-box-answer mfp-hide js-vacancy-answer">
    <p class="modal-box--title">Thank you for contacting G2P</p>

    <p class="modal-box--subtitle">Your request has been received.</p>

    <button class="form--button js-answer-btn">ok</button>
</div>

<?php get_footer(); ?>