<?php if ($active_banner_slider == 'yes'): ?> 
  <!-- SLIDER -->
  <section class="section-slider height-v">
      <div id="index12" class="owl-carousel  owl-theme">
      <?php if ($about): ?>
      <?php  
        $ar_img = explode(' | ', $about->img_name);
      ?> 
      <?php for($i=0; $i<count($ar_img); $i++): ?>
        <div class="item">
            <img alt="" src="<?= base_url(); ?>uploads/banners/<?= $ar_img[$i]; ?>" class="img-responsive">
        </div>
      <?php endfor; ?>  
      <?php endif ?>  
      </div>
  </section>
  <!-- END / SLIDER --> 
<?php else: ?>
  <!-- BANNER -->
  <section class="text-center" style="padding-top: 160px; padding-bottom: 40px;
    background: url('<?= base_url(); ?>uploads/banners/<?= $about->img_banner; ?>') no-repeat; background-size: cover; background-position: center;"> 
      <div class="container">
          <div class="banner-content">
              <h2></h2>
              <p></p>
          </div>
      </div>
  </section>
  <!-- END-BANNER --> 
<?php endif; ?>
 
<?php if ($active_content == 'yes'): ?>
    <!-- ABOUT-US -->
    <section class="about about-v2" style="margin-bottom:50px;">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-10 col-lg-offset-1">
                    <div class="about-centent">
                      <h2 class="about-title text-center"><?= $this->session->userdata('site_lang') == 'english' ? ucwords($about->header_text_en) : ucwords($about->header_text); ?></h2>
                      <div class="line-v2"></div> 
                    </div>
                    <div class="about-centent">
                      <?= $this->session->userdata('site_lang') == 'english' ? $about->body_text_en : $about->body_text; ?> 
                    </div>
                </div>
            </div>  
        </div>
    </section>
  <!-- END/ ABOUT-US--> 
 
<?php endif; ?>

<section class="about about-v2" style="margin-top:10px;margin-bottom:50px;">
    <div class="container">
        <div class="row">
            <div style="margin-bottom: 30px;" class="col-xs-10 col-xs-offset-1">
                <div class="about-centent" style="">
                  <h2 style="" class="about-title text-center">Job Vacancy</h2>
                  <div style="margin-top: 15px;margin-bottom: 20px;" class="line-v2"></div> 
                </div>
            </div>
        </div>
        <div class="row"> 
            <div class="col-xs-3 col-xs-offset-1">
                <div class="about-centent">

<nav class="nav-job-vacancy" id="nav-job-vacancy">
  <ul class="ul-job-vacancy">
    <?php $cntr=0; ?>
    <?php foreach ($q_career_type as $key): ?>
    <?php 
        $cntr++;
        $t_class = '';
        if ($cntr == 1){
            $t_class = 'current';
        }
    ?> 
        <li>
            <a class="<?= $t_class; ?>" href="#section-job-vacancy-<?= $cntr; ?>">
                <?= ucwords($key->name); ?>
            </a>
        </li>
    <?php endforeach; ?> 
  </ul>
</nav>

                </div>
            </div>  

            <div class="col-xs-7">  
                <div class="about-centent">
                

<div class="parent-job-vacancy" id="parent-job-vacancy">
    <?php $cntr=0; ?>
    <?php foreach ($q_career_type as $key): ?>
    <?php 
        $cntr++;
        $t_class = ''; 
        $q_career = $this->db->get_where("career",array(
            "active"=>"yes",
            "career_type"=>$key->id
        ));
    ?> 
        <div id="section-job-vacancy-<?= $cntr; ?>" class="item-job-vacancy">
            <div class="title-job-vacancy">
                <?= ucwords($key->name); ?>
            </div> 

            <?php if ($q_career->num_rows()==0): ?>
                <div class="notfound-job-vacancy">
                    No items found.
                </div>
            <?php else: ?>   
                <div class="found-job-vacancy">
                <?php foreach ($q_career->result() as $key2): ?>
                    <div class="item-found-job-vacancy">
                        <div class="title-found-job-vacancy">
                            <?= ucwords($key2->name); ?>
                        </div>
                        <div style="margin-bottom:10px; cursor: pointer;" class="avaible-found-job-vacancy">
                            <span data-toggle="modal" data-target="#modal-job-vacancy-<?= $key2->id; ?>">
                                See requirements
                            </span>
                            <!-- <ul>
                                <li>Hotel A</li>
                            </ul> -->
                        </div>
                        <div class="btn-found-job-vacancy">
                            <a href="<?= base_url(); ?>career/<?= text_to_url($key2->name); ?>">APPLY NOW</a>
                        </div>
                    </div> 

                    <div class="modal fade" id="modal-job-vacancy-<?= $key2->id; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title">
                                <?= ucwords($key2->name); ?>
                            </h5> 
                          </div>
                          <div class="modal-body">
                            <?= $key2->detail_reqs; ?>
                          </div>
                          <div class="modal-footer"> 
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>
                <?php endforeach; ?>
                </div>
            <?php endif; ?>

        </div>
    <?php endforeach; ?>   

</div>


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

<?php 

function text_to_url($str){
    $part_str = explode('(', trim($str));
    $str = trim($part_str[0]);
    $str = strtr($str,array(
        " "=>"-",
    ));
    return $str;
}

?>
<!-- nav -->
<style>
    html {
      scroll-behavior: smooth;
    }
    nav.nav-job-vacancy {
      white-space: nowrap;
      /*background: #37474F;*/
    }
    nav#nav-job-vacancy.fixed {
        position: fixed;
        top: 100px;
        /*left: 250px;*/
    }
    nav#nav-job-vacancy-clone{
        display: none;
    }
    nav.nav-job-vacancy ul.ul-job-vacancy {
      list-style: none;
      margin: 0;
      padding: 0;
      overflow-y: auto; 
      max-height: 420px;
    }
    /* Only stick if you can fit */
    @media (min-height: 300px) {
      nav.nav-job-vacancy ul.ul-job-vacancy {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
    }
    nav.nav-job-vacancy ul.ul-job-vacancy li a {
        display: block;
        padding: 16px 40px;
        border-right: 1px solid #e5e5e5; 
        color: grey;
        font-size: 1em;
        line-height: 1.3em;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        text-align: right;
    }
    nav.nav-job-vacancy ul.ul-job-vacancy li a:hover,
    nav.nav-job-vacancy ul.ul-job-vacancy li a.current {
        border-right-width: 3px;
        color: #1f2935;
    }
</style>

<!-- content -->
<style>
    .parent-job-vacancy{
        font-family: sans-serif;
        /*margin-top: 20px;*/
    }
    .item-job-vacancy{
        text-align: left;
        margin-bottom: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e5e5e5;
    }
    .notfound-job-vacancy{
        color: grey;
        font-size: 14px;
    }
    .title-job-vacancy{
        margin-top: 0px;
        margin-bottom: 0px;
        text-transform: uppercase;
        font-size: 1.5em;
        line-height: 1.3em;
    }

    .found-job-vacancy{
        display: flex;
        justify-content: flex-start;
        /*justify-content: center;
        align-items: center;*/
        padding:10px;
    }
    .item-found-job-vacancy{
        /*margin:auto; */
        margin-right: 110px;
        margin-bottom: 15px;
    }
    .title-found-job-vacancy{
        color : #38b141;
        margin-top: 20px;
        margin-bottom: 10px; 
        font-size: 1.5em;
        line-height: 1.3em; 
    }

    .avaible-found-job-vacancy{
        
    }
    .avaible-found-job-vacancy span{
        margin-top: 10px;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 1em;
        line-height: 1.3em; 
        color: grey;
    }
    .avaible-found-job-vacancy ul li{
        color: grey;
    }

    .btn-found-job-vacancy{

    }
    .btn-found-job-vacancy a{
        display: inline-block;
        border: 0;
        text-decoration: none;
        cursor: pointer;
        border-radius: 0;

        padding: 10px 16px;
        border: solid 1px black; 
        color: black; 
        background-color: transparent; 
        font-size: 0.9em;
        line-height: 1em;
        font-weight: 700;
        text-transform: uppercase;
        /*transition: all 0.3s ease;*/
        transition: all 0.3s;
    }
    .btn-found-job-vacancy a:hover{
        border-color: #38b141;
        color: #38b141;
    }
</style>