@extends('layouts.frontend.master')
@section('title')
    {{ __('UNIGUIDE | e-Learning website') }}
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('frontend/css/blog.css') }}">
@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">
                        {{ $university->name }} University
                    </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">
                                <a class="text-white"
                                   href="{{ route('frontend.programs.index') }}">{{ __('Universities') }}</a>
                            </li>
                            <li class="breadcrumb-item text-white active" aria-current="page">
                                {{ __('Details') }}
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->

    <!-- details Start-->


    <main class="page-container">
        <section class="container py-3 mb-3">
            <div class="modal fade LgImgModal" id="LgImgModal" tabindex="-1" role="dialog"
                 aria-labelledby="GalleryModal"
                 aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                    <div class="modal-content my-5">
                        <div class="modal-body p-0 position-relative">
                            <span class="loader"></span>
                            <button type="button" class="btn-close close abs-pos" data-dismiss="modal"
                                    aria-label="Close"></button>
                            <div class="img-wrap text-center position-relative"></div>
                        </div>
                    </div>
                </div>
            </div>
            <section class="explore-details hasTheDetails pr-md-0 py-1 py-md-4">
                <div class="row mb-3">
                    <div class="col-md-8 my-2 pr-md-4">
                        <div class="uni8">
                            <div class="imgbutton imgbox height" data-bs-toggle="modal" data-bs-target="#videoModal">
                                {{--                                <img src="{{$university->imagePath}}" alt="uni8" class="uimg" /> --}}
                                <img src="{{$university->imagePath}}" alt="uni8" class="uimg"/>
                                <i class="fas fa-play-circle play"></i>
                                <button class="btn viewPhotos" data-bs-toggle="modal" data-bs-target="#photoModal">
                                    {{__('View Photos')}} <i class="fas fa-images"></i>
                                </button>
                            </div>
                            <div class="content rmd pb-2">
                                <div class="info">
                                    <!-- <img src="img/التعليم.webp" alt="unimg" class="unimg"> -->
                                    <h2>{{ $university->name }} University</h2>
                                </div>
                                <div class="det d-flex gap-5">
                                    <p><a href=""><span><i class="fas fa-university"></i>University
                                                Type</span><br/>{{ $university->university_type }}
                                        </a></p>
                                    <p><a href=""><span><i
                                                    class="fas fa-map-marker-alt"></i>Location</span><br/>{{ $university->country->name }}
                                        </a></p>
                                </div>
                            </div>
                        </div>
                        <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true"
                             class="scrollspy-example" tabindex="0">
                            <div class="detUniversity" id="topic1">
                                <h2 dir="ltr">
                                    <span><strong>About {{ $university->name }} University</strong></span>
                                </h2>
                                <p dir="ltr">
                                    {!! $university->description !!}
                                </p>

                            </div>
                            @if ($university->universityDegrees()->count() != 0)
                                <div class="detUniversity" id="topic2">
                                    <h2 dir="ltr">
                                        <span><strong>{{ __('Programs') }}</strong></span>
                                    </h2>
                                    <ul class="info-list2 justify-content-around mt-3" id="t2">
                                        @foreach ($university->universityDegrees()->get() as $universityDegree)
                                            @if ($loop->index == 0)
                                                <li data-class="{{ $loop->index }}class" class="active">
                                                    {{ $universityDegree->degree->name }}</li>
                                            @else
                                                <li data-class="{{ $loop->index }}class">
                                                    {{ $universityDegree->degree->name }}</li>
                                            @endif
                                        @endforeach
                                    </ul>
                                    <div class="info-content2">
                                        @foreach ($university->universityDegrees()->get() as $universityDegree)
                                            @if ($loop->index == 0)
                                                <div class="{{ $loop->index }}class remo">
                                                    @foreach ($universityDegree->universityColleges()->get() as $universityCollege)
                                                        <h5 class="title"><img
                                                                src="{{ asset('frontend/img/engineering.png') }}"
                                                                alt="{{ $universityCollege->college->name }}"/>{{ $universityCollege->college->name }}
                                                        </h5>
                                                        @foreach ($universityCollege->universityPrograms()->get() as $universityProgram)
                                                            <div class="unibox">
                                                                <div class="name">
                                                                    {{ $universityProgram->academicSpecialization->name }}
                                                                </div>
                                                                <div
                                                                    class="period">{{ $universityProgram->year_number }}
                                                                    years
                                                                </div>
                                                                <div class="country"><img
                                                                        src="{{ asset('frontend/img/flag.png') }}"
                                                                        alt="country">{{ $universityProgram->academicLanguage->name }}
                                                                </div>
                                                                <ul class="list-unstyled priceList">
                                                                    @foreach ($universityProgram->universityProgramPrices()->get() as $universityProgramPrice)
                                                                        <li>
                                                                            <div class="price">{{ $loop->index + 1 }}st
                                                                                Year
                                                                                <i
                                                                                    class="fas fa-exchange-alt"></i>{{ $universityProgramPrice->price_after_price }}
                                                                                $
                                                                                <span>{{ $universityProgramPrice->price }}$</span>/
                                                                                year
                                                                            </div>
                                                                        </li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            @else
                                                <div class="{{ $loop->index }}class removes remo remos">
                                                    @foreach ($universityDegree->universityColleges()->get() as $universityCollege)
                                                        <h5 class="title"><img
                                                                src="{{ asset('frontend/img/engineering.png') }}"
                                                                alt="{{ $universityCollege->college->name }}"/>{{ $universityCollege->college->name }}
                                                        </h5>
                                                        @foreach ($universityCollege->universityPrograms()->get() as $universityProgram)
                                                            <div class="unibox">
                                                                <div class="name">
                                                                    {{ $universityProgram->academicSpecialization->name }}
                                                                </div>
                                                                <div
                                                                    class="period">{{ $universityProgram->year_number }}
                                                                    years
                                                                </div>
                                                                <div class="country"><img
                                                                        src="{{ asset('frontend/img/flag.png') }}"
                                                                        alt="country">{{ $universityProgram->academicLanguage->name }}
                                                                </div>
                                                                <ul class="list-unstyled priceList">
                                                                    @foreach ($universityProgram->universityProgramPrices()->get() as $universityProgramPrice)
                                                                        <li>
                                                                            <div class="price">{{ $loop->index + 1 }}st
                                                                                Year
                                                                                <i
                                                                                    class="fas fa-exchange-alt"></i>{{ $universityProgramPrice->price_after_price }}
                                                                                $
                                                                                <span>{{ $universityProgramPrice->price }}$</span>/
                                                                                year
                                                                            </div>
                                                                        </li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            @if ($university->Dormitories()->count() != 0)
                                <div class="detUniversity" id="topic3">
                                    <h2 dir="ltr">
                                        <span><strong>Dormitories</strong></span>
                                    </h2>
                                    <div class="dormi mt-3">
                                        <table>
                                            <thead>
                                            <tr>
                                                <th scope="col">{{__('Room Name')}}</th>
                                                <th scope="col">{{__('Capacity')}}</th>
                                                <th scope="col">{{__('Gender')}}</th>
                                                <th scope="col">{{__('Cost')}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach ($university->Dormitories()->get() as $dormitory)
                                                <tr>
                                                    <td data-label="Room Name">{{ $dormitory->room_name }}</td>
                                                    <td data-label="Capacity"><i
                                                            class="fas fa-user"></i>{{ $dormitory->capacity }}</td>
                                                    <td data-label="Gender"><i
                                                            class="fa fa-venus"></i>{{ $dormitory->gender }}</td>
                                                    <td data-label="Cost">USD {{ $dormitory->cost }}/month</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif
                            @if ($university->campus)
                                <div class="detUniversity" id="topic4">
                                    <h2 dir="ltr"><span><strong>{{__('Campuses of Ain-Shams University and the available specializations')}}:</strong>
                                        </span></h2>
                                    <div>
                                        {!! $university->campus !!}

                                    </div>
                                </div>
                            @endif
                            @if ($university->confessions)
                                <div class="detUniversity" id="topic5">
                                    <h2 dir="ltr">
                                        <span><strong>{{__('Confessions')}}&nbsp;</strong></span>
                                    </h2>
                                    <div>
                                        {!! $university->confessions !!}

                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4 my-2 pl-md-4 mb-3 mb-md-2 order-md-last order-first left-side">
                        <div class="d-md-block d-none sticky inner">
                            <div class="contents-menu boxed overflow-hidden p-4 mb-3">
                                <span class="title d-block mb-3"> {{__('Categories')}} : </span>
                                <div class="menu list-group" id="list-example">
                                    <p style="text-align: left" class="active">
                                        <a href="#topic1" title="About University" id="link1"><u>{{__('About University')}}</u></a>
                                    </p>
                                    @if ($university->universityDegrees()->count() != 0)
                                        <p style="text-align: left">
                                            <a href="#topic2" title="Programs" id="link2"><u>{{__('Programs')}}</u></a>
                                        </p>
                                    @endif
                                    @if ($university->Dormitories()->count() != 0)
                                        <p style="text-align: left">
                                            <a href="#topic3" title="Dormitories" id="link3"><u>{{__('Dormitories')}}</u></a>
                                        </p>
                                    @endif
                                    @if ($university->campus != null)
                                        <p style="text-align: left">
                                            <a href="#topic4" title="Campus" id="link4"><u>{{__('Campus')}}</u></a>
                                        </p>
                                    @endif
                                    @if ($university->confessions != null)
                                        <p style="text-align: left">
                                            <a href="#topic5" title="Confessions" id="link5"><u>{{__('Confessions')}}</u></a>
                                        </p>
                                    @endif

                                </div>
                            </div>
                            <div class="boxed overflow-hidden p-4 mb-3">
                                <span class="title d-block mb-2">
                                    {{__('Are you ready for the next big event now in your life?')}}</span>
                                <span class="d-block my-2">
                                    {{__('Register now and save your time')}}</span>
                                <a href="{{route('frontend.register.create')}}" class="btn btn-primary regp w-100 mt-md-0 my-2">{{__('Register Now')}}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-5 pt-5">
                    <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
                        <h6 class="section-title bg-white text-center text-primary px-3">
                            Related
                        </h6>
                        <h1 class="mb-5">{{__('Universities')}}</h1>
                    </div>
                    <div class="allwrps det">
                        @foreach ($universities as $item)
                            <a href="{{ route('frontend.programs.show', $item->slug) }}">
                                <div data-menu="iran" class="card new">
                                    <img src="{{ $item->imagePath }}" alt="uni1"/>
                                    <span class="majorr"><i class="fas fa-tag"></i>50% Off</span>
                                    <div class="llogo">
                                        <img src="{{ $item->logo }}" alt="logo">
                                    </div>
                                    <div class="card-body">
                                        <div class="top">
                                            <div>
                                                <h5 class="card-title new">{{ $item->name }} University</h5>
                                                <p class="place"><i
                                                        class="fas fa-map-marker-alt"></i>{{ $item->country->name }}</p>
                                            </div>
                                            <div class="info">
                                                <p><i class="fas fa-user-friends"></i>27423 <span>Students</span></p>
                                                <p><i class="fas fa-graduation-cap"></i>
                                                    {{ $item->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>${{ $item->price_after_discount }}
                                            </p> <a href="{{ route('frontend.programs.show', $item->slug) }}"
                                                    class="btn btn-primary viewIt">View Details</a>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </section>
        </section>
    </main>

    <!-- details End-->


    <!-- Video Modal -->
    <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    @if ($university->video_id != null)
                        {{-- Embed the video if video_id is not null --}}
                        <video id="universityVideo" width="100%" controls>
                            <source src="{{ $university->video_id }}" type="video/mp4"/>
                        </video>
                    @elseif($university->video_link != null)
                        @php
                            $youtube_id = extractYouTubeVideoId($university->video_link);
                        @endphp
                        @if ($youtube_id)
                            {{-- Embed YouTube video if youtube_id is available --}}
                            <iframe id="universityVideo" class="comment"
                                    src="https://www.youtube.com/embed/{{ $youtube_id }}?enablejsapi=1"
                                    title="YouTube video player" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                    allowfullscreen></iframe>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Photos Modal -->
    <div class="modal fade" id="photoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="carouselExampleIndicators" class="carousel slide">
                        <div class="carousel-indicators">
                            @foreach ($university->universityImages as $index => $image)
                                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $index }}"
                                        class="{{ $index == 0 ? 'active' : '' }}" aria-current="{{ $index == 0 ? 'true' : 'false' }}"
                                        aria-label="Slide {{ $index + 1 }}"></button>
                            @endforeach
                        </div>
                        <div class="carousel-inner">
                            @foreach ($university->universityImages as $index => $image)
                                <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                    <img src="{{ $image->imagePath }}" class="d-block w-100" alt="Image {{ $index + 1 }}"/>
                                </div>
                            @endforeach
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')

        <script src="https://www.youtube.com/iframe_api"></script>
        <script>
            let firstPlay = true;
            let player;

            function onYouTubeIframeAPIReady() {
                player = new YT.Player('universityVideo', {
                    events: {
                        'onReady': onPlayerReady,
                    }
                });
            }

            function onPlayerReady(event) {
                document.getElementById('videoModal').addEventListener('shown.bs.modal', function () {
                    if (firstPlay) {
                        player.mute();
                        firstPlay = false;
                    }
                    player.playVideo();
                });

                document.getElementById('videoModal').addEventListener('hidden.bs.modal', function () {
                    player.pauseVideo();
                });
            }

            document.getElementById('videoModal').addEventListener('shown.bs.modal', function () {
                var video = document.getElementById('universityVideo');
                if (video && video.tagName.toLowerCase() === 'video') {
                    if (firstPlay) {
                        video.muted = true;
                        firstPlay = false;
                    }
                    video.play();
                }
            });

            document.getElementById('videoModal').addEventListener('hidden.bs.modal', function () {
                var video = document.getElementById('universityVideo');
                if (video && video.tagName.toLowerCase() === 'video') {
                    video.pause();
                }
            });
        </script>
        <script src="{{ asset('frontend/js/details.js') }}"></script>
        <script src="{{ asset('frontend/js/scrollFixer.js') }}"></script>
        <script src="{{ asset('frontend/js/filterSide.js') }}"></script>
    @endpush

@endsection