@extends('layouts.frontend.master')
@section('title')
    {{ __('UNIGUIDE | e-Learning website') }}
@endsection
@push('css')
    <link href="{{asset('frontend/css/select2.min.css')}}" rel="stylesheet" />
@endpush

@section('content')


    <!-- Header Start -->
    <div class="container-fluid bg-primary py-5 mb-5 page-header uniH">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <h1 class="display-3 text-white animated slideInDown">
                        Programs
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item">
                                <a class="text-white" href="{{route('home')}}">{{__('Home')}}</a>
                            </li>
                            <li
                                class="breadcrumb-item text-white active"
                                aria-current="page"
                            >
                                {{__('Programs')}}
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->



    <!-- Programs Start -->
    <section class="programs">
        <div class="container">
            <div class="row">
                <div class="col-md-12 search">
                    <div class='search-box'>
                        <form class='search-form' id="filterForm">
                            <input class='form-control' id="searchInput" placeholder='Search University By Name...' type='text'>
                            <button class='btn btn-primary' type='button' id="searchButton">
                                <i class='fas fa-search'></i>
                            </button>
                        </form>
                    </div>
                </div>

                <div class="col-md-12 filters">
                    <div class="btn-group">
                        <select class="js-example-basic-single" name="degree_id" id="degree_id">
                            <option value="" selected disabled>Study Level</option>
                            @foreach($degrees as $degree)
                                <option value="{{$degree->id}}">{{$degree->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="btn-group">
                        <select class="js-example-basic-single" name="college_id" id="college_id"
                                onchange="getAcademicSpecializations()">
                            <option value="" selected disabled>College</option>
                            @foreach($colleges as $college)
                                <option value="{{$college->id}}">{{$college->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="btn-group">
                        <select class="js-example-basic-single" name="academic_specialization_id" id="academic_specialization_id">
                            <option value="" selected disabled>Study Major</option>
                        </select>
                    </div>
                    <div class="btn-group">
                        <select class="js-example-basic-single" name="language_id" id="lang">
                            <option value="" selected disabled>Languages</option>
                            @foreach($academicLanguages as $academicLanguage)
                                <option value="{{$academicLanguage->id}}">{{$academicLanguage->name}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="btn-group">
                        <select class="js-example-basic-single" name="Year_number" id="Year_number">
                            <option value="" selected disabled>Study Duration</option>
                            <option value="1">1 Year</option>
                            <option value="2">2 Years</option>
                            <option value="3">3 Years</option>
                            <option value="4">4 Years</option>
                        </select>
                    </div>
                    <div class="btn-group">
                        <select class="js-example-basic-single" name="price" id="price">
                            <option value="" selected disabled>Fees</option>
                            <option value="1000-2000">1000$ - 2000$</option>
                            <option value="2000-3000">2000$ - 3000$</option>
                            <option value="3000-4000">3000$ - 4000$</option>
                            <option value="4000-5000">4000$ - 5000$</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-12 mt-5 pt-5 filteredItems allwrps">
                    @foreach($universities as $university)
                        <a href="{{route('frontend.programs.show',$university->slug)}}">
                            <div data-menu="iran" class="card new">
                                <img src="{{$university->imagePath}}" alt="uni1" />
                                <span class="majorr"><i class="fas fa-tag"></i>50% Off</span>
                                <div class="llogo">
                                    <img src="{{$university->logo}}" alt="logo">
                                </div>
                                <div class="card-body">
                                    <div class="top">
                                        <div>
                                            <h5 class="card-title new">{{$university->name}} University</h5>
                                            <p class="place"><i class="fas fa-map-marker-alt"></i>{{$university->country->name}}</p>
                                        </div>
                                        <div class="info">
                                            <p><i class="fas fa-user-friends"></i>5000 <span>Students</span></p>
                                            <p><i class="fas fa-graduation-cap"></i>
                                                {{ $university->universityDegrees->pluck('universityColleges')->flatten()->pluck('universityPrograms')->flatten()->count() }}
                                                <span>Programs</span></p>
                                        </div>
                                    </div>
                                    <div class="price pt-3 pb-2"><p><span class="text-black-50">Starting From</span>${{$university->price_after_discount}}</p> <a href="{{route('frontend.programs.show',$university->slug)}}" class="btn btn-primary viewIt">View Details</a></div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <!-- Programs End -->



    @push('scripts')
        <script src="{{asset('frontend/js/select2.min.js')}}"></script>
        <script>$(document).ready(function() {
                $('.js-example-basic-single').select2();
            });
        </script>
        <script src="{{asset('frontend/js/details.js')}}"></script>
        <script src="{{asset('frontend/js/filterSide.js')}}"></script>

        <script>
            function getAcademicSpecializations() {
                var college_id = $('#college_id').val();
                $.ajax({
                    url: '/dashboard/get-academic-specialization/' + college_id,
                    method: 'GET',
                    success: function(data) {
                        $('#academic_specialization_id').empty();
                        $.each(data, function(key, value) {
                            $('#academic_specialization_id').append('<option value="' + value.id + '">' +
                                value.name + '</option>');
                        });
                    }
                });
            }
        </script>

        <script>
            function filter_data(){
                $('.filter_data').html('<div id="loading"></div>');
                var minimum_price = $('#hidden_minimum_price').val();
                var maximum_price = $('#hidden_maximum_price').val();
                var brand = get_filter('brand');
                var size = get_filter('size');
                var color = get_filter('color');
                var cat = $('#cat').val();
                var orderby = $('.orderby').val();
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/filter-programs',
                    type: 'get',
                    data: {minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, size:size, orderby:orderby,color:color, cat:cat},
                    success:function(data){
                        $('.filter_data').html(data);
                    }
                });
            }

        </script>


    @endpush


@endsection