@extends('layouts.website_layout')
@section('meta_title', $meta_data->meta_title)
@section('meta_description', $meta_data->meta_description)
@section('canonical_tag', $meta_data->canonical_tag)
@section('banner_image', "banners/".$banner->banner_image)
@section('content')
<main>
    <article class="container-fluid innerBanner p-0">
        <figure>
            <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image}}" alt="{{$meta_data->page_name}}" class="img-fluid desktop_image">
            <img src="{{url('/')}}/assets/images/banners/{{$banner->banner_image_mobile}}" alt="{{$meta_data->page_name}}" class="img-fluid mobile_image">
            <figcaption class="custom__row slider-heading">
                {!!nl2br($banner->banner_caption)!!}
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{$meta_data->page_name}}</li>
                    </ol>
                </nav>
            </figcaption>
        </figure>
    </article>
    <article class="container-fluid linkNav">
        <nav class="row custom__row text-center">
            <ul class="m-auto">
                <li><a href="{{url('/')}}/people">Welcome</a></li>
                <li><a href="{{url('/')}}/campus-connect">Campus Connect</a></li>
                <li><a href="{{url('/')}}/careers" class="active">Careers</a></li>
                <li><a href="{{url('/')}}/initiatives">Initiatives</a></li>
            </ul>
        </nav>
    </article>

    <article class="container-fluid servicesRange mb-0">
        <div class="row custom__row">
            <section class="col-12 col-md-8 m-auto title text-left">
                <h2 class="secondary-heading">{!!nl2br($career_overviews->career_overview_title)!!}</h2>
                <p class="paragraph">{!!nl2br($career_overviews->career_overview_description)!!} </p>
            </section>
        </div>
        <div class="row">
            <div class="col-12 p-0">
                <img src="{{url('/')}}/assets/images/careers/{{$career_overviews->career_overview_image}}" alt="{{$career_overviews->career_overview_title}}" class="img-fluid">
            </div>
        </div>
    </article>
    @if(!empty(count($career_departments)))
    <article class="container-fluid sectionIntro initiatives__slider careers mt-0">
        <section class=" row custom__row justify-content-center mb-4">
            <header class="col-12 text-left">
                <h2 class="secondary-heading mb-2 black">Our Functions</h2>
            </header>
            <!-- <div class="col-12 col-md-6 col-lg-6 text-right arrows">
                <div class="arrows__block">
                    <img src="{{url('/')}}/assets/images/initiative/left-arrow.png" alt="Slide Left">
                    <img src="{{url('/')}}/assets/images/initiative/right-arrow.png" alt="Slide Right">
                </div>
            </div> -->
        </section>
        <section class="row custom__row pr-0">
            <div class="initiatives__slider__section owl-carousel" id="initiatives__slider">
                @foreach($career_departments as $career_department_row)
                <figure class="item">
                    <img src="{{url('/')}}/assets/images/careers/{{$career_department_row->career_department_thumbnail}}" alt="{{$career_department_row->career_department_caption}}" class="img-fluid">
                    <figcaption>
                        <h3 class="product-title">{{$career_department_row->career_department_caption}}</h3>
                        <p>{!!nl2br($career_department_row->career_department_description)!!}</p>
                    </figcaption>
                </figure>
                @endforeach
            </div>
        </section>
    </article>
    @endif
    @if(!empty(count($career_frameworks)))
    <article class="container-fluid serviceList py-5">
        <div class="row custom__row">
            <div class="col-12 title mb-5">
                <h2 class="secondary-heading black">RPG Capability Framework</h2>
            </div>
        </div>
        <div class="row custom__row m-0">
            @foreach($career_frameworks as $career_framework_row)
            <div class="col-12 col-md-4 col-lg-3 serviceList__block careers">
                <div class="inner">
                    <img src="{{url('/')}}/assets/images/careers/{{$career_framework_row->career_framework_thumbnail}}" alt="{{$career_framework_row->career_framework_caption}}" class="img-fluid">
                    <h3>{{$career_framework_row->career_framework_caption}}</h3>
                    <p class="paragraph">{!!nl2br($career_framework_row->career_framework_description)!!}</p>
                </div>
            </div>
            @endforeach
        </div>
    </article>
    @endif
    @if(!empty(count($career_success_stories)))
    <article class="container-fluid servicesRange mb-5 careers mt-0">
        <div class="row custom__row">
            <div class="col-12 title text-center mb-5">
                <h2 class="secondary-heading black">Success Stories</h2>
            </div>
        </div>
        <div class="row">
            <section class="col-12 p-0">
                <div class="caseStudySlider owl-carousel owl-theme">
                    @foreach($career_success_stories as $career_success_story_row)
                    <div class="item @if(!empty($career_success_story_row->career_success_story_youtube_id)) welcome__video__inner play__icon @endif" @if(!empty($career_success_story_row->career_success_story_youtube_id)) data-youtube-id="{{$career_success_story_row->career_success_story_youtube_id}}" @endif>
                        <figure>
                            <img src="{{url('/')}}/assets/images/careers/{{$career_success_story_row->career_success_story_image}}" alt="{{$career_success_story_row->career_success_story_caption}}" class="img-fluid">
                            <figcaption>
                                <h3 class="secondary-heading">{{$career_success_story_row->career_success_story_caption}}</h3>
                                <p class="paragraph">{!!nl2br($career_success_story_row->career_success_story_description)!!}</p>
                                <div class="nav">
                                    <div class="left"><img src="{{url('/')}}/assets/images/global/left-white.png" alt="Slide Left" class="img-fluid"></div>
                                    <div class="counter"></div>
                                    <div class="right"><img src="{{url('/')}}/assets/images/global/right-white.png" alt="Slide Right" class="img-fluid"></div>
                                </div>
                            </figcaption>
                        </figure>
                    </div>
                    @endforeach
                </div>
            </section>
        </div>
    </article>
    @endif
    @if(!empty(count((array) $career_developments_object)))
    <div class="container-fluid newsUpdates learning__evelopment pb-5 careers">
        <div class="row custom__row justify-content-center">
            <div class="col-12 col-md-10 col-lg-10 padding">
                <div class="row">
                    <div class="col-12 text-center title mb-4">
                        <h4 class="secondary-heading m-0 black">Learning & Development</h4>
                    </div>
                </div>
                @php
                $i = 0;
                @endphp
                @foreach($career_developments_object as $career_developments_single_object)
                @if(empty($i % 2))
                <div class="row learning left">
                    @php
                    $j = 0;
                    @endphp
                    @foreach($career_developments_single_object as $career_developments_row)
                    @if(empty($j))
                    <div class="col-12 col-md-6 col-lg-6 big">
                        <div class="inner hover__block">
                            <img src="{{url('/')}}/assets/images/careers/{{$career_developments_row->career_development_thumbnail}}" alt="{{$career_developments_row->career_development_caption}}" class="img-fluid">
                            <div class="caption">
                                <h3>{{$career_developments_row->career_development_caption}}</h3>
                                <div class="paragraph">{!!nl2br($career_developments_row->career_development_description)!!}</div>
                            </div>
                        </div>
                    </div>
                    @php
                    $j++;
                    @endphp
                    @endif
                    @endforeach
                    <div class="col-12 col-md-6 col-lg-6">
                        <div class="row">
                            @php
                            $j = 0;
                            @endphp
                            @foreach($career_developments_single_object as $career_developments_row)
                            @if(!empty($j))
                            <div class="col-12 small hover__block">
                                <div class="inner">
                                    <img src="{{url('/')}}/assets/images/careers/{{$career_developments_row->career_development_thumbnail}}" alt="{{$career_developments_row->career_development_caption}}" class="img-fluid">
                                    <div class="caption">
                                        <h3>{{$career_developments_row->career_development_caption}}</h3>
                                        <div class="paragraph">{!!nl2br($career_developments_row->career_development_description)!!}</div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @php
                            $j++;
                            @endphp
                            @endforeach
                        </div>
                    </div>                  
                </div>
                @else
                <div class="row learning right">
                    <div class="col-12 col-md-6 col-lg-12">
                        <div class="row">
                            @php
                            $j = 0;
                            @endphp
                            @foreach($career_developments_single_object as $career_developments_row)
                            @if($j < 2)
                            <div class="col-12 col-md-12 col-lg-6 small hover__block">
                                <div class="inner">
                                    <img src="{{url('/')}}/assets/images/careers/{{$career_developments_row->career_development_thumbnail}}" alt="{{$career_developments_row->career_development_caption}}" class="img-fluid">
                                    <div class="caption">
                                        <h3>{{$career_developments_row->career_development_caption}}</h3>
                                        <div class="paragraph">{!!nl2br($career_developments_row->career_development_description)!!}</div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @php
                            $j++;
                            @endphp
                            @endforeach
                        </div>
                    </div>
                    @php
                    $j = 0;
                    @endphp
                    @foreach($career_developments_single_object as $career_developments_row)
                    @if($j == 2)
                    <div class="col-12 col-md-6 col-lg-6 big">
                        <div class="inner">
                            <img src="{{url('/')}}/assets/images/careers/{{$career_developments_row->career_development_thumbnail}}" alt="{{$career_developments_row->career_development_caption}}" class="img-fluid">
                            <div class="caption">
                                <h3>{{$career_developments_row->career_development_caption}}</h3>
                                <div class="paragraph">{!!nl2br($career_developments_row->career_development_description)!!}</div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @php
                    $j++;
                    @endphp
                    @endforeach
                </div>
                @endif
                @php
                $i++;
                @endphp
                @endforeach
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <a class="download-program-guide" href="{{url('/')}}/assets/pdfs/Program-Guide-Brochure.pdf" target="_blank">Download Program Guide</a>
                </div>
            </div>
        </div>
    </div>
    @endif
    @if(!empty(count($career_program_stories)))
    <article class="container-fluid">
        <div class="row custom__row justify-content-center">
            <div class="col-12 col-md-10 col-lg-10">
                <div class="row">
                    <div class="col-12 title mb-4 text-center">
                        <h2 class=" secondary-heading black">People Stories</h2>
                    </div>
                    <div class="col-12 owl-carousel stories">
                        @foreach($career_program_stories as $career_program_story_row)
                        <div class="item">
                            <div class="row m-0">
                                <div class="col-12 col-md-12 col-lg-7 text">
                                    <h5>{{$career_program_story_row->career_program_story_title}}</h5>
                                    <p class="paragraph">{!!nl2br($career_program_story_row->career_program_story_description)!!}</p>
                                    <h6 class="paragraph">{{$career_program_story_row->career_program_story_name}}</h6>
                                </div>
                                <div class="col-12 col-md-12 col-lg-5 image">
                                    <div class="wrapper">
                                        <span></span>
                                        <img src="{{url('/')}}/assets/images/careers/{{$career_program_story_row->career_program_story_image}}" alt="{{$career_program_story_row->career_program_story_name}}" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </article>
    @endif
    @if(!empty(count($career_job_postings)))
    <article class="container-fluid productIntro pt-0 pb-0" id="jobs">
        <section class="row custom__row justify-content-center">
            <header class="col-12 col-md-10 col-lg-8 text-center">
                <h2 class="secondary-heading mb-4">Join the Raychem Family</h2>
            </header>
        </section>
        <section class="row custom__row justify-content-center productIntro__filter">
            <div class="col-12 col-md-8 col-lg-7 text-center">
                <div class="row">
                    <div class="col-12 col-md-6 productIntro__filter__block">
                        <div class="productIntro__filter__block__dropdown">
                            Search by Location <span><img src="{{url('/')}}/assets/images/global/dorpdown-arrow.png" alt="Filter Product" class="img-fluid"></span>
                        </div>
                        <div class="productIntro__filter__block__list">
                            <div class="reset d-none reset_career_filter">
                                <div><span><i class="fa fa-times" aria-hidden="true"></i></span> Reset</div>
                            </div>
                            <div class="product__family">
                                @foreach($career_job_posting_locations as $career_job_posting_location_row)
                                <label class="label">{{$career_job_posting_location_row->career_job_posting_location}}
                                    <input type="checkbox" class="checkbox career_filter_by_location" value="{{Str::slug($career_job_posting_location_row->career_job_posting_location)}}">
                                    <span class="checkmark"></span>
                                </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 productIntro__filter__block">
                        <div class="productIntro__filter__block__dropdown">
                            Search by Function <span><img src="{{url('/')}}/assets/images/global/dorpdown-arrow.png" alt="Filter Product" class="img-fluid"></span>
                        </div>
                        <div class="productIntro__filter__block__list">
                            <div class="reset d-none reset_career_filter">
                                <div><span><i class="fa fa-times" aria-hidden="true"></i></span> Reset</div>
                            </div>
                            <div class="product__family">
                                @foreach($career_job_posting_departments as $career_job_posting_department_row)
                                <label class="label">{{$career_job_posting_department_row->career_job_posting_department}}
                                    <input type="checkbox" class="checkbox career_filter_by_department" value="{{Str::slug($career_job_posting_department_row->career_job_posting_department)}}">
                                    <span class="checkmark"></span>
                                </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="row custom__row faqs mt-4 pt-4 pb-0">
            <div class="col-12 col-md-10 m-auto">
                <section class="row faqs__content jobs  d-flex">
                    @php
                    $i = 0;
                    @endphp
                    @foreach($career_job_postings as $career_job_posting_row)
                    <header class="col-12  job_summary_block" data-location="{{Str::slug($career_job_posting_row->career_job_posting_location)}}" data-department="{{Str::slug($career_job_posting_row->career_job_posting_department)}}">
                        <div class="jobs__header">
                            <h5>{{$career_job_posting_row->career_job_posting_title}}</h5>
                            <h6 class="paragraph">Date Posted - {{date('d F Y', strtotime($career_job_posting_row->career_job_posting_date))}} @if(!empty($career_job_posting_row->career_job_posting_location)) | Location: {{$career_job_posting_row->career_job_posting_location}} @endif @if(!empty($career_job_posting_row->career_job_posting_department)) | Function: {{$career_job_posting_row->career_job_posting_department}} @endif</h6>
                            <span></span>
                        </div>
                        <details @if(!empty($i)) style="display: none;" @endif>
                            <summary>
                                <h3>Job Profile +</h3>
                                {!!$career_job_posting_row->career_job_posting_description!!}
                                <h3>Skills Required</h3>
                                <p class="paragraph">{{$career_job_posting_row->career_job_posting_skills}}</p>
                                <a href="https://career8.successfactors.com/career?career_ns=job_listing&company=C0014469929P&career_job_req_id={{$career_job_posting_row->career_job_posting_api_id}}" target="_blank">Apply Now</a>
                            </summary>
                        </details>
                    </header>
                    @php
                    $i++;
                    @endphp
                    @endforeach
                </section>
            </div>
        </section>
    </article>
    @endif
    <section class="container my-5 pb-5">
        <div class="row">
            <div class="col-12 text-center">
                <a target="_blank" class="careers-link" href="https://www.rpggroup.com/careers/career-opportunities/">Click here to explore other opportunities with RPG Group!</a>
            </div>
        </div>
        
    </section>
</main>
@endsection