@extends('layouts.admin.master')

@section('title')
    University Details
    {{ $title }}
@endsection

@push('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/photoswipe.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/datatable-extension.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/prism.css') }}">
    <style>
        .iframe-container {
            position: relative;
            display: inline-block;
        }

        .close_overlay {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 10;
            background: rgba(255, 0, 0, 0.7);
            color: white;
            border: none;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            cursor: pointer;
        }

        .close_overlay:hover {
            background: rgba(255, 0, 0, 1);
        }
    </style>
@endpush

@section('content')
    @component('components.breadcrumb')
        @slot('breadcrumb_title')
            <h3>University Details</h3>
        @endslot
        <li class="breadcrumb-item">University</li>
        <li class="breadcrumb-item active">Details</li>
    @endcomponent

    <style>
        .social-tab ul {
            justify-content: flex-start;
            gap: 15px;
        }

        .social-tab ul li {
            /* margin-bottom: 15px; */
            margin-left: 0 !important;
        }

        .social-tab ul li a:hover {
            background-color: #3f1194;
            color: #fff;
        }

        .social-tab ul li a:hover svg {
            color: #fff;
        }

        .social-tab ul li a {
            width: 100%;
        }

        .tab-content .row.gene {
            flex-direction: column-reverse;
        }
    </style>

    <div class="container-fluid">
        <div class="user-profile social-app-profile">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card profile-header">
                        <div class="cover_upload">
                            <a id="updateUniversityImage1Modal" data-bs-toggle="modal"
                                data-bs-target=".addImageModalImage1Model" data-university1_id="{{ $university->id }}">
                                <i class="icofont icofont-pencil-alt-5"></i>
                            </a>
                        </div>

                        @include('dashbord.include.image', [
                            'model_id' => 'addImageModalImage1Model',
                            'type' => 'radio',
                            'name' => 'image_id',
                            'button_name' => 'Logo',
                            'route' => 'universities.updateImage',
                            'hiddenInput' => ['university_id' => $university->id],
                        ])


                        <img class="img-fluid bg-img-cover" src="{{ $university->imagePath }}" alt="" />
                        <div class="profile-img-wrrap">
                            <img class="img-fluid bg-img-cover" src="{{ $university->imagePath }}" alt="" />
                        </div>
                        <div class="userpro-box">
                            <div class="img-wrraper">
                                <div class="img-wrraper">
                                    <div class="avatar">
                                        <img class="img-fluid" alt="" src="{{ $university->logo }}" />
                                    </div>
                                    <a class="icon-wrapper" id="updateUniversityLogoModal" data-bs-toggle="modal"
                                        data-bs-target=".addImageModalLogoModel"
                                        data-university2_id="{{ $university->id }}">
                                        <i class="icofont icofont-pencil-alt-5"></i>
                                    </a>
                                </div>

                                @include('dashbord.include.image', [
                                    'model_id' => 'addImageModalLogoModel',
                                    'type' => 'radio',
                                    'name' => 'logo_id',
                                    'button_name' => 'Logo',
                                    'route' => 'universities.updateImage',
                                    'hiddenInput' => ['university_id' => $university->id],
                                ])

                                <div class="user-designation">
                                    <div class="title">
                                        <a target="_blank" href="">
                                            <h4>{{ $university->name }}</h4>
                                            {{-- <h6>{{ $university->colleges->name }}</h6> --}}
                                        </a>
                                    </div>
                                    <div class="follow">
                                        <ul class="follow-list">
                                            <li>
                                                <div class="follow-num counter">
                                                    {{ $university->universityDegrees->pluck('universityColleges')->flatten()->pluck('universityPrograms')->flatten()->count() }}
                                                </div>
                                                <span>{{ __('Program') }}</span>

                                            </li>
                                            {{-- <li>
                                                <div class="follow-num counter">{{ $university->testimonials->count() }}
                                                </div>
                                                <span>Testimonial</span>
                                            </li> --}}
                                            <li>
                                                <div class="follow-num counter">{{ $university->Dormitories->count() }}
                                                </div>
                                                <span>{{ __('Dormitory') }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  user profile first-style start-->
                @php
                    if (
                        !session('activeFormTestimonial') &&
                        !session('activeFormAbout') &&
                        !session('activeFormGeneral') &&
                        !session('activeFormFriends') &&
                        !session('activeFormPrograms') &&
                        !session('activeFormDormitory') &&
                        !session('activeFormVideo') &&
                        !session('activeFormPhotos')
                    ) {
                        $defilt_active = 'show active';
                    } else {
                        $defilt_active = null;
                    }
                @endphp
                <div class="col-sm-12 box-col-12">
                    <div class="card">
                        <div class="social-tab">
                            <ul class="nav nav-tabs" id="top-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link {{ session('activeFormGeneral') ?? ($defilt_active ?? null) }}"
                                        id="top-timeline" data-bs-toggle="tab" href="#timeline" role="tab"
                                        aria-controls="timeline" aria-selected="true"><i
                                            data-feather="info"></i>{{ __('General Information') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ session('activeFormAbout') ?? null }}" id="top-about"
                                        data-bs-toggle="tab" href="#about" role="tab" aria-controls="about"
                                        aria-selected="false"><i data-feather="award"></i>{{ __('Campus') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ session('activeFormFriends') ?? null }}" id="top-friends"
                                        data-bs-toggle="tab" href="#friends" role="tab" aria-controls="friends"
                                        aria-selected="false"><i data-feather="check-circle"></i>{{ __('Confession') }}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ session('activeFormPhotos') ?? null }}" id="top-photos"
                                        data-bs-toggle="tab" href="#photos" role="tab" aria-controls="photos"
                                        aria-selected="false"><i data-feather="image"></i>{{ __('Photos') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link  {{ session('activeFormPrograms') ?? null }}" id="top-programs"
                                        data-bs-toggle="tab" href="#programs" role="tab" aria-controls="programs"
                                        aria-selected="false"><i data-feather="layers"></i>{{ __('Programs') }}</a>
                                </li>
                                {{--                                 <li class="nav-item"> --}}
                                {{--                                    <a class="nav-link {{ session('activeFormTestimonial') ?? null }}" --}}
                                {{--                                        id="top-testimonial" data-bs-toggle="tab" href="#testimonial" role="tab" --}}
                                {{--                                        aria-controls="testimonial" aria-selected="false"><i --}}
                                {{--                                            data-feather="layers"></i>{{ __('Testimonial') }}</a> --}}
                                {{--                                </li> --}}

                                <li class="nav-item">
                                    <a class="nav-link {{ session('activeFormDormitory') ?? null }}" id="top-dormitory"
                                        data-bs-toggle="tab" href="#dormitory" role="tab" aria-controls="dormitory"
                                        aria-selected="false"><i data-feather="home"></i>{{ __('Dormitory') }}</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ session('activeFormVideo') ?? null }}" id="top-video"
                                        data-bs-toggle="tab" href="#video" role="tab" aria-controls="video"
                                        aria-selected="false"><i data-feather="video"></i>{{ __('video') }}</a>
                                </li>
                            </ul>
                            {{-- <div class="input-group">
                                <input class="form-control" type="text" placeholder="Search......." /><span
                                    class="input-group-text"> <i class="fa fa-search"></i></span>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-content" id="top-tabContent">
                <div class="tab-pane fade {{ session('activeFormGeneral') ?? ($defilt_active ?? null) }}" id="timeline"
                    role="tabpanel" aria-labelledby="timeline">
                    <div class="row gene">
                        <div class="col-xl-12 xl-100 box-col-12">
                            <div class="default-according style-1 faq-accordion job-accordion" id="accordionoc11">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5 class="p-0">
                                                    <a class="btn btn-outline-primary-2x add-images-btn float-end p_absolute"
                                                        href="{{ route('universities.editDescription', $university->id) }}">
                                                        {{ __('Edit Description') }}
                                                    </a>
                                                    <button class="btn btn-link ps-0" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseicon22" aria-expanded="true"
                                                        aria-controls="collapseicon22">{{ __('Description') }}
                                                    </button>

                                                </h5>
                                            </div>
                                            <div class="card-body">
                                                <div class="collapse show" id="collapseicon22"
                                                    aria-labelledby="collapseicon22" data-parent="#accordion">
                                                    <div class="card-body filter-cards-view">
                                                        <div class="filter-view-group">
                                                            {!! $university->description !!}
                                                        </div>
                                                    </div>
                                                </div>


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

                        <div class="col-xl-12 xl-100 box-col-12">
                            <div class="default-according style-1 faq-accordion job-accordion" id="accordionoc1">
                                <div class="row">
                                    <div class="col-sm-12 sm-50">
                                        <div class="card">
                                            <div class="card-header">


                                                <h5 class="p-0">
                                                    <a class="btn btn-outline-primary-2x add-images-btn float-end p_absolute"
                                                        href="{{ route('universities.edit', $university->id) }}">
                                                        {{ __('Edit University') }}
                                                    </a>
                                                    <button class="btn btn-link ps-0" data-bs-toggle="collapse"
                                                        data-bs-target="#collapseicon2" aria-expanded="true"
                                                        aria-controls="collapseicon2">{{ __('Details') }}
                                                    </button>

                                                </h5>
                                            </div>
                                            <div class="collapse show" id="collapseicon2" aria-labelledby="collapseicon2"
                                                data-parent="#accordion">
                                                <div class="card-body filter-cards-view">
                                                    <div class="filter-view-group">
                                                        <strong>{{ __('Status') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            <span
                                                                class="status-dot {{ $university->status == 'active' ? 'status-active' : 'status-inactive' }}"></span>
                                                            {{ $university->status == 'active' ? 'Activated' : 'Not Activated' }}
                                                        </span>
                                                    </div>
                                                    <div class="filter-view-group">
                                                        <strong>{{ __('Country') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            {{ $university->country->name }}
                                                        </span>
                                                    </div>
                                                    <div class="filter-view-group">
                                                        <strong>{{ __('Language') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            {{ $university->language->name }}
                                                        </span>
                                                    </div>
                                                    <div class="filter-view-group">
                                                        <strong>{{ __('University Type') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            {{ $university->university_type }}
                                                        </span>
                                                    </div>
                                                    <div class="filter-view-group">
                                                        <strong>{{ __('Price') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            {{ $university->price }}
                                                        </span>
                                                    </div>


                                                    {{--                                                    <div class="filter-view-group"> --}}
                                                    {{--                                                        <strong>{{ __('Discount') }} :</strong> --}}
                                                    {{--                                                        <br> --}}
                                                    {{--                                                        <span class="f-w-600"> --}}
                                                    {{--                                                            {{ $discount }} --}}
                                                    {{--                                                        </span> --}}
                                                    {{--                                                    </div> --}}


                                                    <div class="filter-view-group">
                                                        <strong>{{ __('Price After Discount') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            {{ $university->price_after_discount }}
                                                        </span>
                                                    </div>
                                                    <div class="filter-view-group">
                                                        <strong>{{ __('Global Rank') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            {{ $university->global_rank }}
                                                        </span>
                                                    </div>
                                                    <div class="filter-view-group">
                                                        <strong>{{ __('Local Rank') }} :</strong>
                                                        <br>
                                                        <span class="f-w-600">
                                                            {{ $university->local_rank }}
                                                        </span>
                                                    </div>

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


                <div class="tab-pane fade {{ session('activeFormAbout') ?? null }}" id="about" role="tabpanel"
                    aria-labelledby="about">
                    <div class="row">
                        <div class="col-xl-12 xl-100 col-lg-12 col-md-12 box-col-12">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header header_flex">
                                            <h5>{{ __('Campus Details') }}</h5>

                                            <form method="GET"
                                                action="{{ route('universities.editCampus', $university->id) }}">
                                                @csrf
                                                <button class="btn btn-outline-primary-2x">{{ __('Edit') }}</button>
                                            </form>


                                        </div>
                                        <div class="card-body">
                                            <p>
                                                {!! $university->campus !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="tab-pane fade {{ session('activeFormFriends') ?? null }} " id="friends" role="tabpanel"
                    aria-labelledby="friends">
                    <div class="row">
                        <div class="col-xl-12 xl-100 col-lg-12 col-md-12 box-col-12">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-header header_flex">
                                            <h5>Confessions Details</h5>
                                            <form method="GET"
                                                action="{{ route('universities.editConfession', $university->id) }}">
                                                @csrf
                                                <button class="btn btn-outline-primary-2x">{{ __('Edit') }}</button>
                                            </form>
                                        </div>
                                        <div class="card-body">
                                            <p>
                                                {!! $university->confessions !!}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>


                <div class="tab-pane fade {{ session('activeFormPhotos') ?? null }}" id="photos" role="tabpanel"
                    aria-labelledby="photos">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="card-header header_flex">
                                    <h5>Photos</h5>
                                    <a class="btn btn-outline-primary-2x" data-bs-toggle="modal"
                                        data-bs-target=".addImagesModall" data-university_id="{{ $university->id }}">
                                        {{ __('Add Images') }}
                                    </a>


                                </div>
                                @include('dashbord.include.image', [
                                    'model_id' => 'addImagesModall',
                                    'type' => 'checkbox',
                                    'name' => 'images_id[]',
                                    'button_name' => 'Add Image',
                                    'route' => 'universities.addImages',
                                    'hiddenInput' => ['university_id' => $university->id],
                                ])

                                <div class="my-gallery card-body row gallery-with-description" itemscope="">
                                    @foreach ($university->universityImages()->get() as $item)
                                        <figure class="col-xl-3 col-sm-6 img_overlay" itemprop="associatedMedia"
                                            itemscope="">
                                            <a href="{{ $item->imagePath }}" itemprop="contentUrl">
                                                <img src="{{ $item->imagePath }}" itemprop="thumbnail"
                                                    alt="Image description" />
                                            </a>
                                            <form id="deleteForm-Image-{{ $item->id }}"
                                                action="{{ route('universities.deleteUniversityImage') }}" method="POST"
                                                style="display:inline;">
                                                @csrf
                                                <input hidden name="university_id" value="{{ $university->id }}">
                                                <input hidden name="image_id" value="{{ $item->id }}">
                                                <button type="submit" class="btn btn-danger close_overlay"
                                                    onclick="confirmDelete('Image', {{ $item->id }})">
                                                    X
                                                </button>
                                            </form>
                                        </figure>
                                    @endforeach
                                </div>


                                <!-- Root element of PhotoSwipe. Must have class pswp.-->
                                <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

                                    <div class="pswp__bg"></div>
                                    <!-- Slides wrapper with overflow:hidden.-->
                                    <div class="pswp__scroll-wrap">
                                        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.-->
                                        <!-- don't modify these 3 pswp__item elements, data is added later on.-->
                                        <div class="pswp__container">
                                            <div class="pswp__item"></div>
                                            <div class="pswp__item"></div>
                                            <div class="pswp__item"></div>
                                        </div>
                                        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.-->
                                        <div class="pswp__ui pswp__ui--hidden">
                                            <div class="pswp__top-bar">
                                                <!-- Controls are self-explanatory. Order can be changed.-->
                                                <div class="pswp__counter"></div>
                                                <button class="pswp__button pswp__button--close"
                                                    title="Close (Esc)"></button>
                                                <button class="pswp__button pswp__button--share" title="Share"></button>
                                                <button class="pswp__button pswp__button--fs"
                                                    title="Toggle fullscreen"></button>
                                                <button class="pswp__button pswp__button--zoom"
                                                    title="Zoom in/out"></button>
                                                <div class="pswp__preloader">
                                                    <div class="pswp__preloader__icn">
                                                        <div class="pswp__preloader__cut">
                                                            <div class="pswp__preloader__donut"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                                                <div class="pswp__share-tooltip"></div>
                                            </div>
                                            <button class="pswp__button pswp__button--arrow--left"
                                                title="Previous (arrow left)"></button>
                                            <button class="pswp__button pswp__button--arrow--right"
                                                title="Next (arrow right)"></button>
                                            <div class="pswp__caption">
                                                <div class="pswp__caption__center"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="tab-pane fade {{ session('activeFormPrograms') ?? null }}" id="programs" role="tabpanel"
                    aria-labelledby="programs">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="card">
                                <div class="card-header header_flex">
                                    <h5>Programs</h5>
                                    <a class="btn btn-outline-primary-2x add-program-btn" href="#"
                                        data-bs-toggle="modal"
                                        data-bs-target="#UpladeExl-program">{{ __('Uplade Excel') }}</a>


                                    <a class="btn btn-outline-primary-2x add-program-btn" href="#"
                                        data-bs-toggle="modal" data-bs-target="#addProgramModal"
                                        data-university_id="{{ $university->id }}">{{ __('Add Program') }}</a>
                                </div>

                                @include('dashbord.include.addProgram')
                                @include('dashbord.include.UpladeExl', [
                                    'model_id' => 'program',
                                    'form' => 'importProgram',
                                    'university_id' => $university->id,
                                ])

                            </div>
                        </div>


                        @foreach ($university->universityDegrees()->get() as $universityDegree)
                            <div class="row">
                                <div class="card">
                                    <div class="card-header header_flex">
                                        <h2>{{ $universityDegree->degree->name }}</h2>
                                        <hr>
                                    </div>
                                    @foreach ($universityDegree->universityColleges()->get() as $universityCollege)
                                        <div class="card-body">
                                            <h4>{{ $universityCollege->college->name }}</h4>
                                            <div class="dormi mt-3">
                                                <table class="display" id="responsive2">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col">{{ __('Academic Specialization') }}</th>
                                                            <th scope="col">{{ __('Years Number') }}</th>
                                                            <th scope="col">{{ __('Academic Language') }}</th>
                                                            <th scope="col">{{ __('Cost') }}</th>
                                                            <th scope="col">{{ __('Action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($universityCollege->universityPrograms()->get() as $universityProgram)
                                                            <tr>
                                                                <td data-label="Academic Specialization">
                                                                    {{ $universityProgram->academicSpecialization->name }}
                                                                </td>
                                                                <td data-label="Years Number">
                                                                    {{ $universityProgram->year_number }}
                                                                </td>
                                                                <td data-label="Academic Language">
                                                                    {{ $universityProgram->academicLanguage->name }}
                                                                </td>

                                                                <td data-label="Cost">
                                                                    @foreach ($universityProgram->universityProgramPrices()->get() as $universityProgramPrice)
                                                                        <ul class="list-unstyled priceList"
                                                                            style="padding-bottom: 5px">
                                                                            <li>
                                                                                <div class="price">
                                                                                    {{ $loop->iteration }}st
                                                                                    Year
                                                                                    <i
                                                                                        class="fas fa-exchange-alt"></i>{{ $universityProgramPrice->price_after_price }}
                                                                                    <span>$</span>/
                                                                                    {{ __('year') }}
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                    @endforeach
                                                                </td>
                                                                <td data-label="Action1">
                                                                    <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;">
                                                                        <form
                                                                            action="{{ route('universities.editProgram', $universityProgram->id) }}"
                                                                            method="GET">
                                                                            <button class="btn btn-outline-primary-2x"
                                                                                type="submit">
                                                                                {{ __('Edit') }}
                                                                            </button>
                                                                        </form>

                                                                        <form
                                                                            action="{{ route('universities.changeStatusProgram') }}"
                                                                            method="POST">
                                                                            @csrf
                                                                            <input type="hidden"
                                                                                value="{{ $university->id }}"
                                                                                name="university_id">
                                                                            <input type="hidden"
                                                                                value="{{ $universityProgram->id }}"
                                                                                name="universityProgram_id">
                                                                            @if ($universityProgram->status == 'active')
                                                                                <input
                                                                                    style="border-color: #24c710; margin-left: 2px;margin-right: 2px"
                                                                                    class="btn btn-outline-success-2x"
                                                                                    value="{{ __('Status') }}"
                                                                                    type="submit">
                                                                            @else
                                                                                <input
                                                                                    style="border-color: #afc00b; margin-left: 2px;margin-right: 2px"
                                                                                    class="btn btn-outline-warning-2x"
                                                                                    value="{{ __('Status') }}"
                                                                                    type="submit">
                                                                            @endif
                                                                        </form>

                                                                        <form
                                                                            id="deleteForm-universityProgram-{{ $universityProgram->id }}"
                                                                            action="{{ route('universities.deleteUniversityProgram', $universityProgram->id) }}"
                                                                            method="POST">
                                                                            @csrf
                                                                            @method('DELETE')
                                                                            <input value="{{ $university->id }}"
                                                                                name="university_id" type="hidden">
                                                                            <input value="{{ $universityProgram->id }}"
                                                                                name="universityProgram_id"
                                                                                type="hidden">
                                                                            <input style="border-color: #d22d3d;"
                                                                                onclick="confirmDelete('universityProgram', {{ $universityProgram->id }})"
                                                                                class="btn btn-outline-danger-2x"
                                                                                value="{{ __('Delete') }}"
                                                                                type="button">
                                                                        </form>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach

                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>




                <div class="tab-pane fade {{ session('activeFormDormitory') ?? null }}" id="dormitory" role="tabpanel"
                    aria-labelledby="dormitory">
                    <div class="row">
                        <div class="col-sm-12">
                            @include('dashbord.dormitories.index')
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade {{ session('activeFormVideo') ?? null }}" id="video" role="tabpanel"
                    aria-labelledby="video">
                    <div class="row">
                        <div class="col-sm-12">
                            @php
                                $youtube_id = extractYouTubeVideoId($university->video_link);
                            @endphp
                            @if ($youtube_id)
                                <form id="deleteForm-Video-{{ $university->id }}"
                                    action="{{ route('universities.deleteUniversityVideo') }}" method="POST"
                                    style="display:inline;">
                                    @csrf
                                    <div class="iframe-container">
                                        <iframe class="comment" src="https://www.youtube.com/embed/{{ $youtube_id }}"
                                            title="YouTube video player" frameborder="0"
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                            allowfullscreen></iframe>
                                        <button type="button" class="btn btn-danger close_overlay"
                                            onclick="confirmDelete('Video', {{ $university->id }})">X</button>
                                    </div>
                                    <input hidden name="university_id" value="{{ $university->id }}">
                                </form>
                            @endif

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


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

    @push('scripts')
        <script>
            $(document).ready(function() {
                $('.add-dormitory-images-btn').click(function() {
                    var dormitoryId = $(this).data('dormitory_id');
                    $('#modal-dormitory-id').val(dormitoryId);
                });
            });
            $(document).ready(function() {
                $('#addUniversityImagesModal').click(function() {
                    var universityId = $(this).data('university_id');
                    $('#modal-university-id').val(universityId);
                });
            });
            $(document).ready(function() {
                $('#updateUniversityImage1Modal').click(function() {
                    var universityId = $(this).data('university1_id');
                    $('#Image1Model').val(universityId);
                });

                $('#updateUniversityLogoModal').click(function() {
                    var universityId = $(this).data('university2_id');
                    $('#LogoModel').val(universityId);
                });
            });
        </script>

        <script>
            $(document).ready(function() {
                $('.add-program-btn').click(function() {
                    var universityId = $(this).data('university_id');
                    $('#modal-university-id').val(universityId);
                    $('#modal2-university-id').val(universityId);
                });
            });
        </script>
        <script src="{{ asset('assets/js/photoswipe/photoswipe.min.js') }}"></script>
        <script src="{{ asset('assets/js/photoswipe/photoswipe-ui-default.min.js') }}"></script>
        <script src="{{ asset('assets/js/photoswipe/photoswipe.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/jszip.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.colVis.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/pdfmake.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/vfs_fonts.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.autoFill.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.select.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.bootstrap4.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/buttons.print.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.bootstrap4.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/responsive.bootstrap4.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.keyTable.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.colReorder.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.fixedHeader.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.rowReorder.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/dataTables.scroller.min.js') }}"></script>
        <script src="{{ asset('assets/js/datatable/datatable-extension/custom.js') }}"></script>
        <script src="{{ asset('assets/js/prism/prism.min.js') }}"></script>
        <script src="{{ asset('assets/js/clipboard/clipboard.min.js') }}"></script>
        <script src="{{ asset('assets/js/custom-card/custom-card.js') }}"></script>
        @include('dashbord.include.custom-datatable')

        {{--        staet add program --}}
        <script>
            $(document).ready(function() {
                let yearsList = [];

                // Function to create a new row
                function createNewRow() {
                    return `
                <div class="row">
                    <div class="col-3">
                                                            <div class="form-group">
                                        <label for="f1-type">{{ __('Type') }}</label>
                                        <select name="type" class="form-select" id="f1-type">
                                            <option selected="" value="">{{ __('Select') }}</option>
                                            <option value="percentage"
                                                {{ old('type') ? (old('type') == 'percentage' ? 'selected' : '') : '' }}>
                                                {{ __('percentage') }}</option>
                                            <option value="amount"
                                                {{ old('type') ? (old('type') == 'amount' ? 'selected' : '') : '' }}>
                                                {{ __('amount') }}</option>
                                        </select>
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>

                    </div>
                    <div class="col-2">
                        <div class="form-group discount-group">
                                        <label for="f1-discount">{{ __('Discount') }}</label>
                                        <input class="form-control" id="f1-discount" type="number"
                                               value="{{ old('discount') }}" name="discount" placeholder="{{ __('Discount') }}">
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>

                    </div>
                    <div class="col-2">
                        <div class="form-group">
                                        <label for="f1-price_year">{{ __('Price') }}</label>
                                        <input class="form-control" required id="f1-price_year" type="number"
                                               value="{{ old('price_year') }}" name="price_year" placeholder="{{ __('Price') }}">
                                        <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                        <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                                    </div>
                    </div>
                    <div class="col-2">
                        <!-- Minus button for all rows except the first -->
                        <label for="f1-btn-">btn-</label><br>
                        <a class="btn btn-danger buttonMin">-</a>
                    </div>
                    <div class="col-2">
                        <label for="f1-btn+">btn+</label><br>
                        <a class="btn btn-primary buttonPlus">+</a>
                    </div>
                </div>
            `;
                }

                // Function to update the yearsList array
                function updateYearsList() {
                    yearsList = [];
                    $('#rowContainer .row').each(function() {
                        const type = $(this).find('#f1-type').val();
                        const discount = $(this).find('#f1-discount').val();
                        const priceYear = $(this).find('#f1-price_year').val();
                        if (type || discount || priceYear) {
                            yearsList.push({
                                type: type,
                                discount: parseFloat(discount),
                                priceYear: parseFloat(priceYear)
                            });
                        }
                    });
                    // console.log(yearsList); // Debug: Print the array to console
                }


                // Initial update of yearsList for existing rows (should be just one initially)
                updateYearsList();

                // Add new row when + button is clicked
                $(document).on('click', '.buttonPlus', function() {
                    $('#rowContainer').append(createNewRow());
                    updateYearsList();
                });

                // Remove row when - button is clicked
                $(document).on('click', '.buttonMin', function() {
                    $(this).closest('.row').remove();
                    updateYearsList();
                });

                // Function to create a discount select element for percentage type
                function createDiscountSelect() {
                    let options = '';
                    for (let i = 0; i <= 100; i++) {
                        options += `<option value="${i}">${i}</option>`;
                    }
                    return `
                <label for="f1-discount">{{ __('Discount') }}</label>
                <select id="f1-discount" class="form-control"  name="discount">
                    ${options}
                </select>
            `;
                }

                // Update discount input based on type selection
                $(document).on('change', '#f1-type', function() {
                    const discountGroup = $(this).closest('.row').find('.discount-group');
                    if ($(this).val() === 'percentage') {
                        discountGroup.html(createDiscountSelect());
                    } else {
                        discountGroup.html('<label for="f1-discount">{{ __('Discount') }}</label>' +
                            '<input id="f1-discount" class="form-control" type="number" name="discount" placeholder="{{ __('Discount') }}">'
                        );
                    }
                    updateYearsList();
                });

                // Update yearsList when input values change
                $(document).on('change', '#f1-type, #f1-discount, #f1-price_year', function() {
                    updateYearsList();
                });

                // Update hidden input field before form submission
                $('#addProgramForm').submit(function(event) {
                    updateYearsList(); // Ensure yearsList is up-to-date
                    $('#yearsListInput').val(JSON.stringify(yearsList));
                });
            });
        </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>
        {{--        end add program --}}
    @endpush
@endsection