@extends('website.layouts.layout')

@section('content')
    
        
      <style>
        .location-btn {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            letter-spacing: 0.125px;
            line-height: 1.5rem;
            color: rgb(54, 59, 81);
            font-weight: 300;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            border: 1px solid rgb(169, 177, 204);
            padding: 12px;
        }

        .location-btn span {
            margin-left: 10px;
        }

        .location-btn i {
            font-size: 24px;
        }

        .dropdown-div {
            position: absolute;
            padding: 10px 0px 10px 16px;
            max-height: 300px;
            overflow-y: auto;
            background-color: rgb(255, 255, 255);
            box-shadow: rgba(54, 59, 81, 0.18) 0px 2px 8px, rgba(54, 59, 81, 0.14) 0px 0px 2px, rgba(54, 59, 81, 0.12) 0px 2px 4px;
            z-index: 1;
        }

        [type=checkbox] {
            min-height: 24px;
            min-width: 24px;
            margin-right: 10px;
        }

        .heading-text 
        {
            display: flex;
            font-size: 1rem;
            letter-spacing: normal;
            line-height: 1.5rem;
            font-weight: 400;
            text-align: start;
            color: rgb(54, 59, 81);
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: normal;
           /* white-space: pre-wrap;*/
       }

        .arrow-btn {
            border: 0;
            background-color: #fff;
            margin-left: 20px;
        }

        .arrow-btn i {
            color: rgb(97, 109, 146);
            font-size: 24px;
        }

        .ptb-6 {
            padding: 15px 0;
        }

        .rotate {
            -moz-transition: all 0.1s linear;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .rotate.down {
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .rotate1 {
            -moz-transition: all 0.1s linear;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .rotate1.down {
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .rotate2 {
            -moz-transition: all 0.1s linear;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .rotate2.down {
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .rotate3 {
            -moz-transition: all 0.1s linear;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .rotate3.down {
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .rotate4 {
            -moz-transition: all 0.1s linear;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .rotate4.down {
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .rotate5 {
            -moz-transition: all 0.1s linear;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
        }

        .rotate5.down {
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .div-hide {
            display: none;
        }

        .blue-dot,
        .blue-dot1,
        .blue-dot2,
        .blue-dot3,
        .blue-dot4,
        .blue-dot5,
        .blue-dot6 {
            background-color: rgb(30, 109, 235);
            fill: rgb(30, 109, 235);
            flex-shrink: 0;
            height: 10px;
            width: 10px;
            border-radius: 50%;
        }

        .sub-dropdown-div {
            position: relative;
            padding: 10px 0px 10px 16px;
            max-height: 300px;
            overflow-y: auto;
            background-color: rgb(255, 255, 255);
            box-shadow: rgba(54, 59, 81, 0.18) 0px 2px 8px, rgba(54, 59, 81, 0.14) 0px 0px 2px, rgba(54, 59, 81, 0.12) 0px 2px 4px;
            z-index: 1;
        }

        .location-name {
            background-color: rgb(255, 255, 255);
            box-shadow: rgba(54, 59, 81, 0.18) 0px 2px 8px, rgba(54, 59, 81, 0.14) 0px 0px 2px, rgba(54, 59, 81, 0.12) 0px 2px 4px;
            padding: 10px 16px 10px 16px;
            border: 2px solid;
            border-radius: 5px;
        }

        .location-name span {
            margin-right: 20px;
        }

        .sub-div-hide {
            display: none;
        }

        .s-drop-div {
            position: absolute;
            z-index: 1;
        }

        .back-btn {
            background-color: #fff;
            border: 0;
        }

        .g-10 {
            display: flex;
            gap: 10px;
        }

        .program-btn {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            letter-spacing: 0.125px;
            line-height: 1.5rem;
            color: rgb(54, 59, 81);
            font-weight: 300;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            border: 1px solid rgb(169, 177, 204);
            padding: 12px;
        }

        .program-btn span {
            margin-left: 10px;
        }

        .program-btn i {
            font-size: 24px;
        }

        .discipline-btn {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            letter-spacing: 0.125px;
            line-height: 1.5rem;
            color: rgb(54, 59, 81);
            font-weight: 300;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            border: 1px solid rgb(169, 177, 204);
            padding: 12px;
        }

        .discipline-btn span {
            margin-left: 10px;
        }

        .discipline-btn i {
            font-size: 24px;
        }

        .tuition-btn {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            letter-spacing: 0.125px;
            line-height: 1.5rem;
            color: rgb(54, 59, 81);
            font-weight: 300;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            border: 1px solid rgb(169, 177, 204);
            padding: 12px;
        }

        .tuition-btn span {
            margin-left: 10px;
        }

        .tuition-btn i {
            font-size: 24px;
        }

        .intakes-btn {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            letter-spacing: 0.125px;
            line-height: 1.5rem;
            color: rgb(54, 59, 81);
            font-weight: 300;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            border: 1px solid rgb(169, 177, 204);
            padding: 12px;
        }

        .intakes-btn span {
            margin-left: 10px;
        }

        .intakes-btn i {
            font-size: 24px;
        }

        .duration-btn {
            display: flex;
            align-items: center;
            font-size: 0.875rem;
            letter-spacing: 0.125px;
            line-height: 1.5rem;
            color: rgb(54, 59, 81);
            font-weight: 300;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            border: 1px solid rgb(169, 177, 204);
            padding: 12px;
        }

        .duration-btn span {
            margin-left: 10px;
        }

        .duration-btn i {
            font-size: 24px;
        }

        @media screen and (max-width: 431px) {
            .sm-fx-d-col {
                display: flex;
                flex-direction: column;
            }

            .location-btn,
            .program-btn,
            .discipline-btn,
            .tuition-btn,
            .intakes-btn,
            .duration-btn {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
        }
    </style>    
    
        <section class="pxp-page-header-simple">
        <div class="pxp-container">
            <h1>Search Program / University</h1>
            <div class="pxp-hero-subtitle pxp-text-light">Search your education opportunity through <strong>
            {{ !empty($programCount) ?  $programCount : '' }}</strong>
                programs</div>
            <div class="pxp-hero-form pxp-hero-form-round pxp-large pxp-has-border mt-3 mt-lg-4">
                <form class="row gx-3 align-items-center">
                    <div class="col-12 col-lg">
                        <div class="input-group mb-3 mb-lg-0">
                            <span class="input-group-text"><span class="fa fa-search"></span></span>
                            <input type="text" class="form-control" placeholder="Course Title">
                        </div>
                    </div>
                    <div class="col-12 col-lg pxp-has-left-border">
                        <div class="input-group mb-3 mb-lg-0">
                            <span class="input-group-text"><span class="fa fa-globe"></span></span>
                            <input type="text" class="form-control" placeholder="University">
                        </div>
                    </div>
                   
                    <div class="col-12 col-lg-auto">
                        <button>Search</button>
                    </div>
                </form>
            </div>
            <div class="custom-filter mt-4">
                <div class="row">
                    <div class="col-md-12 d-flex g-10 sm-fx-d-col">
                        <div class="location-filter">
                            <div>
                                <button class="location-btn" id="locationData">
                                    Location 
                                    <span class="blue-dot d-none"></span> 
                                    <span><i class="fa fa-angle-down rotate" aria-hidden="true"></i></span>
                                </button>
                                <div class="dropdown-div div-hide" id="locationDropdown">
                                    @if(!empty($countries))
                                        @foreach ($countries as $county)
                                            <div class="justify-content-between mt-2">
                                                <label class="heading-text" id="checkBox_{{ $county['id'] }}">
                                                <input type="checkbox" name="county[]" value="{{ $county['id'] }}" 
                                                class="checkbox">  
                                                    {{ $county['name'] }}
                                                </label>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="Program-filter">
                            <div>
                                <button class="program-btn" id="programData">Program level <span
                                        class="blue-dot1 d-none"></span> <span><i class="fa fa-angle-down rotate1"
                                            aria-hidden="true"></i></span></button>
                                <div class="dropdown-div div-hide" id="programDropdown" style="width: 320px">
                                    @if(!empty($educationLevels))
                                        @foreach ($educationLevels as $item)
                                            <div class="justify-content-between mt-2">
                                                <label class="heading-text" id="checkBox">
                                                    <input type="checkbox" name="checkbox"
                                                        value="{{ $item['level_name'] }}" class="checkbox1">
                                                        {{ $item['level_name'] }}
                                                </label>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="discipline-filter">
                            <div>
                                <button class="discipline-btn" id="disciplineData">Discipline <span
                                        class="blue-dot2 d-none"></span> <span><i class="fa fa-angle-down rotate2"
                                            aria-hidden="true"></i></span></button>
                                <div class="dropdown-div div-hide" id="disciplineDropdown" style="width: 320px">
                                    @if(!empty($secondaryCategories))
                                        @foreach ($secondaryCategories as $category)
                                            <div class="justify-content-between mt-2">
                                                <label class="heading-text" id="checkBox">
                                                    <input type="checkbox" name="checkbox"
                                                        value="{{ $category['id'] }}" class="checkbox2">{{ $category['name'] }}
                                                </label>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="tuition-filter">
                            <div>
                                <button class="tuition-btn" id="tuitionData">Tuition fee (USD) <span
                                        class="blue-dot3 d-none"></span> <span><i class="fa fa-angle-down rotate3"
                                            aria-hidden="true"></i></span></button>
                                <div class="dropdown-div div-hide" id="tuitionDropdown" style="width: 300px">
                                    
                                    <div class="justify-content-between">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox3">0 - $10,000 / year</label>
                                    </div>

                                    <div class="justify-content-between mt-2">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox3">$10,000 - $20,000 / year</label>
                                    </div>

                                    <div class="justify-content-between mt-2">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox3">$20,000 - $30,000 / year</label>
                                    </div>

                                    <div class="justify-content-between mt-2">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox3">Over $30,000 / year</label>
                                    </div>


                                </div>
                            </div>
                        </div>
                        
                        <div class="intakes-filter">
                            <div>
                                <button class="intakes-btn" id="intakesData">Intakes <span class="blue-dot4 d-none"></span> 
                                    <span><i class="fa fa-angle-down rotate4" aria-hidden="true"></i></span>
                                </button>

                                <div class="dropdown-div div-hide" id="intakesDropdown" style="width: 200px">
                                    
                                    <div class="justify-content-between">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox4">2024</label>
                                    </div>

                                    <div class="justify-content-between mt-2">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox4">2025</label>
                                    </div>

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

                        <div class="duration-filter">
                            <div>
                                <button class="duration-btn" id="durationData">Duration 
                                    <span class="blue-dot5 d-none"></span> 
                                    <span><i class="fa fa-angle-down rotate5" aria-hidden="true"></i></span>
                                </button>

                                <div class="dropdown-div div-hide" id="durationDropdown" style="width: 200px">
                                    
                                    <div class="justify-content-between">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox5">Duration</label>
                                    </div>

                                    <div class="justify-content-between mt-2">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox5">1 Year or less</label>
                                    </div>

                                    <div class="justify-content-between mt-2">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox5">1 - 2 years</label>
                                    </div>

                                    <div class="justify-content-between mt-2">
                                        <label class="heading-text" id="checkBox"><input type="checkbox" name="checkbox"
                                                value="value" class="checkbox5">2 years</label>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section>
        <div class="pxp-container">
            <div class="row">
                <div class="col-lg-5 col-xl-4 col-xxl-4">
                    <div class="row">
                        <style type="text/css">
                          * {
                            scrollbar-width: none;
                            scrollbar-color: #8f54a0 #ffffff;
                          }
                          *::-webkit-scrollbar {
                            width: 16px;
                          }
                            
                            *::-webkit-scrollbar-track {
                            background: #ffffff;
                          }

                          *::-webkit-scrollbar-thumb {
                            background-color: #8f54a0;
                            border-radius: 10px;
                            border: 3px solid #ffffff;
                          }
                        </style>
                        <div class="col-xxl-12">
                            <div class="pxp-jobs-list-single-column nav mt-4 mt-xxl-0" role="tablist" 
                                id="loadmoreList"  style="height: 1000px;overflow: scroll;">
                                @if(!empty($programs))
                                    @foreach ($programs as $keyss => $program)    
                                        @if($keyss != 0)
                                            <a class="pxp-jobs-card-4 pxp-has-border loadmore "
                                            onclick="programsActive(this)" 
                                            data-id="{{ $program['id'] }}" id="job-{{ $program['id'] }}" data-bs-toggle="tab"
                                            data-bs-target="#job_details_{{ $program['id'] }}" role="tab" aria-controls="job-details-1"
                                            aria-selected="true">
                                        @else
                                            <a class="pxp-jobs-card-4 pxp-has-border active loadmore "
                                            onclick="programsActive(this)" 
                                            data-id="{{ $program['id'] }}" id="job-{{ $program['id'] }}" data-bs-toggle="tab"
                                            data-bs-target="#job_details_{{ $program['id'] }}" role="tab" aria-controls="job-details-1"
                                            aria-selected="true">
                                        @endif
                                            
                                            <div class="pxp-jobs-card-4-company-top">
                                                @if($keyss == 0)
                                                <div class="pxp-jobs-card-4-company-logo"
                                                    style="background-image: url(https://uniwolc.com/storage/6/Screenshot-2023-07-07-114710.png);"></div>
                                                @else
                                                <div class="pxp-jobs-card-4-company-logo"
                                                    style="background-image: url(images/company-logo-1.png);"></div>
                                                @endif

                                                <div class="pxp-jobs-card-4-info">
                                                    <div class="pxp-jobs-card-4-title">
                                                        {{ substr( $program['program_title'], 0, 50).'...'; }}
                                                    </div>
                                                    <div class="pxp-jobs-card-4-details">
                                                        <div class="pxp-jobs-card-4-location pxp-text-light">
                                                            <span class="fa fa-globe"></span>
                                                            @if(!empty($program['universityData'][0]['location']))
                                                                                                                            @else
                                                                No location
                                                            @endif
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="pxp-jobs-card-4-company-bottom">
                                                <div class="pxp-jobs-card-4-category">
                                                    <span class="pxp-jobs-card-4-company">
                                                        @if(!empty($program['universityData'][0]['university_name']))
                                                            {{ substr($program['universityData'][0]['university_name'], 0, 30).'...'; }}
                                                        @else
                                                            No University Name
                                                        @endif
                                                    </span>
                                                </div>
                                                <div class="pxp-jobs-card-4-bottom-right">
                                                    <span class="pxp-jobs-card-4-date pxp-text-light">
                                                       {{ !empty($program['created_at']) ? date('d-M-Y', strtotime($program['created_at'])) : '' }}
                                                              
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                            
                                        <input type="hidden" name="programId[]" value="{{ $program['id'] }}">

                                    @endforeach
                                @endif
                            </div>  
                            <div class="mt-4 w-100" >
                                <a href="javascript:void(0)" id="loadmorebtn" 
                                onclick="loadMore({{ $program['id'] }})" 
                                class="btn rounded-pill pxp-section-cta d-block">
                                Show me More</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7 col-xl-8 col-xxl-8">
                    <div class="tab-content pxp-jobs-tab-content" id="programcontent">
                        @if(!empty($programs))
                            @foreach ($programs as $keys=> $program)
                                @if($keys == 0)
                                <div class="tab-pane active" id="job_details_content_{{ $program['id'] }}" 
                                    role="tabpanel" aria-labelledby="job-1">
                                
                                    <div class="pxp-jobs-tab-pane-cover pxp-cover" style="background-image: url('https://uniwolc.com/storage/6/Screenshot-2023-07-07-114710.png');"></div>
                                        
                                    <div class="pxp-jobs-tab-pane-logo" style="background-image: url('https://uniwolc.com/storage/6/Screenshot-2023-07-07-114710.png');">
                                    </div>
                                    
                                    <div class="pxp-jobs-tab-pane-content">
                                        <div class="row justify-content-between align-items-center">
                                            <div class="col-xl-6">
                                                <h3>{{ substr( $program['program_title'], 0, 50).'...'; }}</h3>
                                                <div class="pxp-jobs-tab-pane-company-location">
                                                    <a href="javascript:void(0)" class="pxp-jobs-tab-pane-company">
                                                        @if(!empty($program['universityData'][0]['university_name']))
                                                            {{ substr($program['universityData'][0]['university_name'], 0, 30).'...'; }}
                                                        @else
                                                            No University Name
                                                        @endif
                                                    </a> 
                                                </div>
                                            </div>
                                            <div class="col-xl-auto">
                                                <div class="pxp-jobs-tab-pane-options mt-4 mt-xl-0">
                                                    <button class="btn pxp-jobs-tab-pane-save-btn"><span
                                                            class="fa fa-heart-o"></span></button>
                                                    <div class="dropdown ms-2">
                                                        <button class="btn pxp-jobs-tab-pane-share-btn dropdown-toggle"
                                                            type="button" id="socialShareBtn-1" data-bs-toggle="dropdown"
                                                            aria-expanded="false">
                                                            <span class="fa fa-share-alt"></span>
                                                        </button>
                                                        <ul class="dropdown-menu pxp-jobs-tab-pane-share-dropdown"
                                                            aria-labelledby="socialShareBtn-1">
                                                            <li><a class="dropdown-item" href="#"><span
                                                                        class="fa fa-facebook"></span> Facebook</a></li>
                                                            <li><a class="dropdown-item" href="#"><span
                                                                        class="fa fa-twitter"></span> Twitter</a></li>
                                                            <li><a class="dropdown-item" href="#"><span
                                                                        class="fa fa-pinterest"></span> Pinterest</a></li>
                                                            <li><a class="dropdown-item" href="#"><span
                                                                        class="fa fa-linkedin"></span> LinkedIn</a></li>
                                                        </ul>
                                                    </div>
                                                    <button class="btn ms-2 pxp-jobs-tab-pane-apply-btn rounded-pill">
                                                        Apply Now
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-4 justify-content-between align-items-center">
                                            <div class="col-6">
                                                <a href="javascript:void(0)" class="pxp-jobs-tab-pane-category">
                                                        
                                                    <div class="pxp-jobs-tab-pane-category-icon">
                                                        <span class="fa fa-globe"></span>
                                                    </div>
                                                    <div class="pxp-jobs-tab-pane-category-label">
                                                        @if(!empty($program['universityData'][0]['location']))
                                                            {{ substr($program['universityData'][0]['location'], 0, 30).'...'; }}
                                                        @else
                                                            No University Name
                                                        @endif
                                                    </div>

                                                </a>

                                            </div>
                                            <div class="col-auto">
                                                <div class="pxp-jobs-tab-pane-date pxp-text-light">
                                                    {{ !empty($program['created_at']) ? 
                                                    date('d-M-Y', strtotime($program['created_at'])) : '' }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-4 mt-lg-5 align-items-center">

                                            <div class="col-6">
                                                <div>
                                                   <!--  <div class="pxp-jobs-tab-pane-content-info-label pxp-text-light">Experience
                                                    </div> -->
                                                    <div class="pxp-jobs-tab-pane-content-info-data"> 
                                                        {{ !empty($program['program_level']) ? $program['program_level'] : '' }}
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div>
                                                    <!-- <div class="pxp-jobs-tab-pane-content-info-label pxp-text-light">Work Level
                                                    </div> -->
                                                    <div class="pxp-jobs-tab-pane-content-info-data">
                                                        {{ !empty($program['program_length']) ? $program['program_length'] : '' }}
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="mt-4">
                                                    <div class="pxp-jobs-tab-pane-content-info-label pxp-text-light">Tuition Fees
                                                    </div>
                                                    <div class="pxp-jobs-tab-pane-content-info-data">  
                                                        @if(!empty($program['universityData'][0]['country']))
                                                            {{ get_currency($program['universityData'][0]['country']) }}
                                                        @endif

                                                        {{ !empty($program['gross_tuition']) ?  $program['gross_tuition'] : '' }}   
                                                        
                                                        @if(!empty($program['universityData'][0]['country']))
                                                            {{ get_payment_currency($program['universityData'][0]['country']) }}
                                                        @endif

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

                                            <div class="col-6">
                                                <div class="mt-4">
                                                    <div class="pxp-jobs-tab-pane-content-info-label pxp-text-light">Application Fee
                                                    </div>
                                                    <div class="pxp-jobs-tab-pane-content-info-data">
                                                        @if(!empty($program['universityData'][0]['country']))
                                                            {{ get_currency($program['universityData'][0]['country']) }}
                                                        @endif

                                                        {{ !empty($program['application_fee']) ?  $program['application_fee'] : '' }}
                                                        
                                                        @if(!empty($program['universityData'][0]['country']))
                                                            {{ get_payment_currency($program['universityData'][0]['country']) }}
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="pxp-jobs-tab-pane-content-details mt-4 mt-lg-5">
                                            <h4>Program Detail</h4>
                                            <p>{{ !empty($program['program_summary']) ? $program['program_summary'] : ''  }}</p>
                                            
                                            <div class="mt-4 mt-lg-5">
                                                <a href="javascript:void(0)" class="btn rounded-pill pxp-section-cta">Apply Now</a>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <button class="btn rounded-pill pxp-jobs-tab-pane-close-btn d-inline-block d-lg-none">
                                        <span class="fa fa-angle-left"></span> Back
                                    </button>
                                </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('pagescriptcode')

<script>
    
    function loadMore(id=0) 
    {   

        $('#loadmorebtn').prop('disabled', true);
        $('#loadmorebtn').html("<i class='fa fa-circle-o-notch fa-spin'></i>");
        var start = $(".loadmore").length;
        $.ajax({
            url: "{{ route('programs.loadmore') }}",
            method: 'GET',
            data: {
                id: id,
                start:start
            },
            success: function success(data) 
            {   
                $('#loadmorebtn').prop('disabled', false);
                $('#loadmorebtn').html("Show me More");
                $('#loadmoreList').append(data.html);
            }
        });
    }   

    function programsActive(elem) 
    {                                   
        $('.tab-pane').removeClass('active');
        var id = $(elem).attr("data-id");
        $.ajax({
            url: "{{ route('programs.details') }}",
            method: 'GET',
            data: {
                id: id,
            },
            success: function success(data) 
            {
                $('#programcontent').html(data.html);
            }
        });
        
        $('#job_details_content_'+id).addClass('active');

    }
    
    $(document).ready(function () {
        $(".location-btn").click(function () {
            $('.rotate').toggleClass("down");
        });
        $("#locationData").click(function () {
            $('#locationDropdown').toggle();
        });

        $(".checkbox").change(function () {
            if (this.checked) {
                $('.blue-dot').removeClass('d-none');
            } else {
                $('.blue-dot').addClass('d-none');
            }
        });

        $('.arrow-btn').on('click', function () {
            $('#sublocationDropdown').toggle();
            $('#locationDropdown').hide();
        });
        $('.back-btn').on('click', function () {
            $('#sublocationDropdown').hide();
            $('#locationDropdown').show();
        });
    });

    $(document).ready(function () {
        $(".program-btn").click(function () {
            $('.rotate1').toggleClass("down");
        });
        $("#programData").click(function () {
            $('#programDropdown').toggle();
        });

        $(".checkbox1").change(function () {
            if (this.checked) {
                $('.blue-dot1').removeClass('d-none');
            } else {
                $('.blue-dot1').addClass('d-none');
            }
        });
    });

    $(document).ready(function () {
        $(".discipline-btn").click(function () {
            $('.rotate2').toggleClass("down");
        });
        $("#disciplineData").click(function () {
            $('#disciplineDropdown').toggle();
        });



        $(".checkbox2").change(function () {
            if (this.checked) {
                $('.blue-dot2').removeClass('d-none');
            } else {
                $('.blue-dot2').addClass('d-none');
            }
        });
    });

    $(document).ready(function () {
        $(".tuition-btn").click(function () {
            $('.rotate3').toggleClass("down");
        });
        $("#tuitionData").click(function () {
            $('#tuitionDropdown').toggle();
        });



        $(".checkbox3").change(function () {
            if (this.checked) {
                $('.blue-dot3').removeClass('d-none');
            } else {
                $('.blue-dot3').addClass('d-none');
            }
        });
    });

    $(document).ready(function () {
        $(".intakes -btn").click(function () {
            $('.rotate4').toggleClass("down");
        });
        $("#intakesData").click(function () {
            $('#intakesDropdown').toggle();
        });



        $(".checkbox4").change(function () {
            if (this.checked) {
                $('.blue-dot4').removeClass('d-none');
            } else {
                $('.blue-dot4').addClass('d-none');
            }
        });
    });

    $(document).ready(function () {
        $(".duration-btn").click(function () {
            $('.rotate5').toggleClass("down");
        });
        $("#durationData").click(function () {
            $('#durationDropdown').toggle();
        });



        $(".checkbox5").change(function () {
            if (this.checked) {
                $('.blue-dot5').removeClass('d-none');
            } else {
                $('.blue-dot5').addClass('d-none');
            }
        });
    });

    $(document).mouseup(function (e) {
        var container = $("#locationDropdown");

        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.hide();
        }

        var container2 = $("#programDropdown");

        if (!container2.is(e.target) && container2.has(e.target).length === 0) {
            container2.hide();
        }

        var container3 = $("#disciplineDropdown");

        if (!container3.is(e.target) && container3.has(e.target).length === 0) {
            container3.hide();
        }

        var container4 = $("#tuitionDropdown");

        if (!container4.is(e.target) && container4.has(e.target).length === 0) {
            container4.hide();
        }

        var container5 = $("#intakesDropdown");

        if (!container5.is(e.target) && container5.has(e.target).length === 0) {
            container5.hide();
        }

        var container6 = $("#durationDropdown");

        if (!container6.is(e.target) && container6.has(e.target).length === 0) {
            container6.hide();
        }

    });

    </script>

@endsection