@extends('home.layouts.master')
@section('content')
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script>

        $(function() {
            $('#pnProductNav a[href*=\\#]:not([href=\\#])').on('click', function() {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top-110
                    }, 1000);
                    return false;
                }
            });
        });
    </script>
    <!-- Main Container -->
    <main id="main-container">
        <div class="bg-image mt-8" style="background-image: url('{{config('filesystems.asset').'/'.'clients'.'/'.$user->name.'/banner'.'/'.$college->banner}}');">
            <div class="bg-black-25">
                <div class="content pt-5 pb-1">
                    <div class="row">
                        <div class="col-lg-9 col-12">
                            <div class="row ">
                                <div class="col-lg-3 col-3">
                                    <div class="ad_pr_logo">
                                        @php
                                            $storePath = config('filesystems.storagePath').'/'.'clients'.'/'.$college->user->name.'/'.'logo';
                                        @endphp
                                        @if(\Illuminate\Support\Facades\Storage::disk('public')->exists($storePath.'/'.$college->logo))
                                            @php
                                                $url = config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/logo'.'/'.$college->logo;
                                                $uploadedFile = pathinfo($url);
                                                $old_filename = $uploadedFile['filename'];
                                                $extension = $uploadedFile['extension'];
                                                $imageLink = config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/logo'.'/'.$old_filename.'.webp';
                                            @endphp
                                            <picture>
                                                <source type="image/webp" srcset="{{$imageLink}}">
                                                <source type="image/{{$extension}}" srcset="{{$url}}">
                                                <img class="img-avatar16" src="{{$url}}" alt="{{$college->company_name}}">
                                            </picture>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-9 col-9">
                                    <div class="name_location">
                                        <h2 class="ad_nepal_title">{{$college->company_name}}</h2>
                                        <p class="profile_page_location">
                                            @if(isset($college->district->name)){{$college->district->name}}, @endif @if(isset($college->city->name)){{$college->city->name}} {{$college->city->resident->name}}, @endif {{$college->location}}
                                        </p>
                                    </div>
                                    <div class="icon-bar">
                                        @if(isset($college->fb_link))
                                            <a href="{{$college->fb_link}}" target="_blank" class="facebook"><i class="fab fa-facebook"></i></a>
                                        @endif
                                        @if(isset($college->twitter_link))
                                            <a href="{{$college->twitter_link}}" target="_blank" class="twitter"><i class="fab fa-twitter"></i></a>
                                        @endif
                                        @if(isset($college->google_link))
                                            <a href="{{$college->google_link}}" target="_blank" class="google"><i class="fab fa-google"></i></a>
                                        @endif
                                        @if(isset($college->linkedin_link))
                                            <a href="{{$college->linkedin_link}}" target="_blank" class="linkedin"><i class="fab fa-linkedin"></i></a>
                                        @endif
                                        @if(isset($college->instagram_link))
                                            <a href="{{{$college->instagram_link}}}" target="_blank" class="instagram"><i class="fab fa-instagram"></i></a>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-lg-3 col-2">
                                    <div class="defaultloGo mt-5">
                                        <a href="{{url('edufair/scholarship')}}">
                                            <img class="img-avatar16" src="{{asset('public/scholarship/scholarship_logo.png')}}" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-12">
                            @if(count($courses))
                                <div class="OrthersFeCour">
                                    @foreach($courses as $course)
                                        @if(isset($course->course->name))
                                            <li><a href="javascript:void(0)" class="">{{$course->course->name}}</a></li>
                                        @endif
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="OtFeat pt-6 mb-0">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="OrthersFe">
                                    @if(isset($college->clientType->tour_link))
                                        <li> <a href="{{$college->clientType->tour_link}}" target="_blank" class="take_virtual_tour">Take a Virtual Tour</a></li>
                                    @else
                                        <li> <a href="javascript:void(0)" class="take_virtual_tour">Take a Virtual Tour</a></li>
                                    @endif
                                    @if(isset($chatCode))
                                        <li> <a href="https://www.messenger.com/login.php?next=https%3A%2F%2Fwww.messenger.com%2Ft%2F{{$chatCode}}%2F%3Fmessaging_source%3Dsource%253Apages%253Amessage_shortlink" target="_blank" class="chat_faculty_member">Live Chat with a Faculty Member</a></li>
                                    @else
                                        <li> <a href="https://www.messenger.com/login.php?next=https%3A%2F%2Fwww.messenger.com%2Ft%2F102450104893612%2F%3Fmessaging_source%3Dsource%253Apages%253Amessage_shortlink" target="_blank" class="chat_faculty_member">Live Chat with a Faculty Member</a></li>
                                    @endif
                                    @if(isset($college->clientType->exam_link))
                                        <li> <a href="{{$college->clientType->exam_link}}" target="_blank" class="pro_faculty_apply">Online Entrance Exam</a></li>
                                    @else
                                        <li> <a href="{{url('login')}}" class="pro_faculty_apply">Online Entrance Exam</a></li>
                                    @endif
                                    @if(isset($college->clientType->apply_link))
                                        <li> <a href="{{$college->clientType->apply_link}}" target="_blank" class="pro_faculty_apply">Apply Now</a></li>
                                    @else
                                        <li> <a href="{{url('login')}}" class="pro_faculty_apply">Apply Now</a></li>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Content -->
        <div class="dTl_p">
            <div class="content py-0">
                <div data-spy="scroll" data-target="navbarsExampleDefault" id="ad_ga">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="admission_content_listing">
                                <!-- Horizontal Navigation - Hover Normal -->
                                <div id="ad_nepal_prof" class="bg-white rounded push px-0 affix-top" data-toggle="affix" data-offset-top="300">
                                    <!-- Navigation -->
                                    <div class="content p-0" id="top">
                                        <style>
                                            .pn-ProductNav_Wrapper {
                                                box-sizing: inherit;
                                            }

                                            .pn-ProductNav_Wrapper {
                                                position: relative;
                                                padding: 0 11px;
                                                box-sizing: border-box;
                                            }

                                            .pn-ProductNav {
                                                /* Make this scrollable when needed */
                                                overflow-x: auto;
                                                /* We don't want vertical scrolling */
                                                overflow-y: hidden;
                                                /* For WebKit implementations, provide inertia scrolling */
                                                -webkit-overflow-scrolling: touch;
                                                /* We don't want internal inline elements to wrap */
                                                white-space: nowrap;
                                                /* If JS present, let's hide the default scrollbar */
                                                /* positioning context for advancers */
                                                position: relative;
                                                font-size: 0;
                                            }
                                            .js .pn-ProductNav {
                                                /* Make an auto-hiding scroller for the 3 people using a IE */
                                                -ms-overflow-style: -ms-autohiding-scrollbar;
                                                /* Remove the default scrollbar for WebKit implementations */
                                            }
                                            .js .pn-ProductNav::-webkit-scrollbar {
                                                display: none;
                                            }

                                            .pn-ProductNav_Contents {
                                                float: left;
                                                -webkit-transition: -webkit-transform .2s ease-in-out;
                                                transition: -webkit-transform .2s ease-in-out;
                                                transition: transform .2s ease-in-out;
                                                transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
                                                position: relative;
                                            }

                                            .pn-ProductNav_Contents-no-transition {
                                                -webkit-transition: none;
                                                transition: none;
                                            }

                                            .pn-ProductNav_Link {
                                                font-weight: 600;
                                                text-transform: capitalize;
                                                text-decoration: none;
                                                color: #000;
                                                font-size: 14px;
                                                font-family: -apple-system, sans-serif;
                                                display: -webkit-inline-box;
                                                display: inline-flex;
                                                -webkit-box-align: center;
                                                align-items: center;
                                                min-height: 44px;
                                                border: 1px solid transparent;
                                                padding: 15px 20px;
                                            }
                                            .pn-ProductNav_Link + .pn-ProductNav_Link {
                                                border-left-color: #eee;
                                            }
                                            .pn-ProductNav_Link[aria-selected="true"] {
                                                color: #111;
                                            }

                                            .pn-Advancer {
                                                /* Reset the button */
                                                -webkit-appearance: none;
                                                -moz-appearance: none;
                                                appearance: none;
                                                background: transparent;
                                                padding: 0;
                                                border: 0;
                                                /* Now style it as needed */
                                                position: absolute;
                                                top: 0;
                                                bottom: 0;
                                                /* Set the buttons invisible by default */
                                                opacity: 0;
                                                -webkit-transition: opacity .3s;
                                                transition: opacity .3s;
                                            }
                                            .pn-Advancer:focus {
                                                outline: 0;
                                            }
                                            .pn-Advancer:hover {
                                                cursor: pointer;
                                            }

                                            .pn-Advancer_Left {
                                                left: 0;
                                            }
                                            [data-overflowing="both"] ~ .pn-Advancer_Left, [data-overflowing="left"] ~ .pn-Advancer_Left {
                                                opacity: 1;
                                            }

                                            .pn-Advancer_Right {
                                                right: 0;
                                            }
                                            [data-overflowing="both"] ~ .pn-Advancer_Right, [data-overflowing="right"] ~ .pn-Advancer_Right {
                                                opacity: 1;
                                            }

                                            .pn-Advancer_Icon {
                                                background: #0d3759;
                                                width: 14px;
                                                height: 25px;
                                                fill: #fff;
                                                padding: 3px;
                                            }

                                            .pn-ProductNav_Indicator {
                                                position: absolute;
                                                bottom: 0;
                                                left: 0;
                                                height: 4px;
                                                width: 100px;
                                                background-color: transparent;
                                                -webkit-transform-origin: 0 0;
                                                transform-origin: 0 0;
                                                -webkit-transition: background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
                                                transition: background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
                                                transition: transform .2s ease-in-out, background-color .2s ease-in-out;
                                                transition: transform .2s ease-in-out, background-color .2s ease-in-out, -webkit-transform .2s ease-in-out;
                                            }
                                            .padd {
                                                padding-top: 140px;
                                            }
                                        </style>
                                        <div class="pn-ProductNav_Wrapper">
                                            <nav id="pnProductNav" class="pn-ProductNav" data-overflowing="none">
                                                <div id="pnProductNavContents" class="pn-ProductNav_Contents">
                                                    <a data-toggle="name" href="#Message" class="pn-ProductNav_Link">Message</a>
                                                    <a data-toggle="name" href="#about_us" class="pn-ProductNav_Link">About College</a>
                                                    <a data-toggle="name" href="#Courses" class="pn-ProductNav_Link">Courses</a>
                                                    <a data-toggle="name" href="#meet_with_faculty" class="pn-ProductNav_Link">Meet With Faculty</a>
                                                    @if(count($downloads)>0 || isset($college->brochure))
                                                        <a data-toggle="name" href="#downloads" class="pn-ProductNav_Link">Downloads</a>
                                                    @endif
                                                    <a data-toggle="name" href="#image_gallery" class="pn-ProductNav_Link">Gallery</a>
                                                    <a data-toggle="name" href="#video_gallery" class="pn-ProductNav_Link">Videos</a>
                                                    <a data-toggle="name" href="#faq" class="pn-ProductNav_Link">FAQ</a>
                                                    <span id="pnIndicator" class="pn-ProductNav_Indicator"></span>
                                                </div>
                                            </nav>
                                            <button id="pnAdvancerLeft" class="pn-Advancer pn-Advancer_Left" type="button">
                                                <svg class="pn-Advancer_Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551 1024"><path d="M445.44 38.183L-2.53 512l447.97 473.817 85.857-81.173-409.6-433.23v81.172l409.6-433.23L445.44 38.18z"></path></svg>
                                            </button>
                                            <button id="pnAdvancerRight" class="pn-Advancer pn-Advancer_Right" type="button">
                                                <svg class="pn-Advancer_Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 551 1024"><path d="M105.56 985.817L553.53 512 105.56 38.183l-85.857 81.173 409.6 433.23v-81.172l-409.6 433.23 85.856 81.174z"></path></svg>
                                            </button>
                                        </div>
                                        <script>
                                            var SETTINGS = {
                                                navBarTravelling: false,
                                                navBarTravelDirection: "",
                                                navBarTravelDistance: 150
                                            }

                                            var colours = {
                                                0: "#867100",
                                                1: "#7F4200",
                                                2: "#99813D",
                                                3: "#40FEFF",
                                                4: "#14CC99",
                                                5: "#00BAFF",
                                                6: "#0082B2",
                                                7: "#B25D7A",
                                                8: "#00FF17",
                                                9: "#006B49",
                                                10: "#00B27A",
                                                11: "#996B3D",
                                                12: "#CC7014",
                                                13: "#40FF8C",
                                                14: "#FF3400",
                                                15: "#ECBB5E",
                                                16: "#ECBB0C",
                                                17: "#B9D912",
                                                18: "#253A93",
                                                19: "#125FB9",
                                            }

                                            document.documentElement.classList.remove("no-js");
                                            document.documentElement.classList.add("js");

                                            // Out advancer buttons
                                            var pnAdvancerLeft = document.getElementById("pnAdvancerLeft");
                                            var pnAdvancerRight = document.getElementById("pnAdvancerRight");
                                            // the indicator
                                            var pnIndicator = document.getElementById("pnIndicator");

                                            var pnProductNav = document.getElementById("pnProductNav");
                                            var pnProductNavContents = document.getElementById("pnProductNavContents");

                                            pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));

                                            // Set the indicator
                                            moveIndicator(pnProductNav.querySelector("[aria-selected=\"true\"]"), colours[0]);

                                            // Handle the scroll of the horizontal container
                                            var last_known_scroll_position = 0;
                                            var ticking = false;

                                            function doSomething(scroll_pos) {
                                                pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
                                            }

                                            pnProductNav.addEventListener("scroll", function() {
                                                last_known_scroll_position = window.scrollY;
                                                if (!ticking) {
                                                    window.requestAnimationFrame(function() {
                                                        doSomething(last_known_scroll_position);
                                                        ticking = false;
                                                    });
                                                }
                                                ticking = true;
                                            });


                                            pnAdvancerLeft.addEventListener("click", function() {
                                                // If in the middle of a move return
                                                if (SETTINGS.navBarTravelling === true) {
                                                    return;
                                                }
                                                // If we have content overflowing both sides or on the left
                                                if (determineOverflow(pnProductNavContents, pnProductNav) === "left" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {
                                                    // Find how far this panel has been scrolled
                                                    var availableScrollLeft = pnProductNav.scrollLeft;
                                                    // If the space available is less than two lots of our desired distance, just move the whole amount
                                                    // otherwise, move by the amount in the settings
                                                    if (availableScrollLeft < SETTINGS.navBarTravelDistance * 2) {
                                                        pnProductNavContents.style.transform = "translateX(" + availableScrollLeft + "px)";
                                                    } else {
                                                        pnProductNavContents.style.transform = "translateX(" + SETTINGS.navBarTravelDistance + "px)";
                                                    }
                                                    // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
                                                    pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");
                                                    // Update our settings
                                                    SETTINGS.navBarTravelDirection = "left";
                                                    SETTINGS.navBarTravelling = true;
                                                }
                                                // Now update the attribute in the DOM
                                                pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
                                            });

                                            pnAdvancerRight.addEventListener("click", function() {
                                                // If in the middle of a move return
                                                if (SETTINGS.navBarTravelling === true) {
                                                    return;
                                                }
                                                // If we have content overflowing both sides or on the right
                                                if (determineOverflow(pnProductNavContents, pnProductNav) === "right" || determineOverflow(pnProductNavContents, pnProductNav) === "both") {
                                                    // Get the right edge of the container and content
                                                    var navBarRightEdge = pnProductNavContents.getBoundingClientRect().right;
                                                    var navBarScrollerRightEdge = pnProductNav.getBoundingClientRect().right;
                                                    // Now we know how much space we have available to scroll
                                                    var availableScrollRight = Math.floor(navBarRightEdge - navBarScrollerRightEdge);
                                                    // If the space available is less than two lots of our desired distance, just move the whole amount
                                                    // otherwise, move by the amount in the settings
                                                    if (availableScrollRight < SETTINGS.navBarTravelDistance * 2) {
                                                        pnProductNavContents.style.transform = "translateX(-" + availableScrollRight + "px)";
                                                    } else {
                                                        pnProductNavContents.style.transform = "translateX(-" + SETTINGS.navBarTravelDistance + "px)";
                                                    }
                                                    // We do want a transition (this is set in CSS) when moving so remove the class that would prevent that
                                                    pnProductNavContents.classList.remove("pn-ProductNav_Contents-no-transition");
                                                    // Update our settings
                                                    SETTINGS.navBarTravelDirection = "right";
                                                    SETTINGS.navBarTravelling = true;
                                                }
                                                // Now update the attribute in the DOM
                                                pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
                                            });

                                            pnProductNavContents.addEventListener(
                                                "transitionend",
                                                function() {
                                                    // get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform
                                                    var styleOfTransform = window.getComputedStyle(pnProductNavContents, null);
                                                    var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform");
                                                    // If there is no transition we want to default to 0 and not null
                                                    var amount = Math.abs(parseInt(tr.split(",")[4]) || 0);
                                                    pnProductNavContents.style.transform = "none";
                                                    pnProductNavContents.classList.add("pn-ProductNav_Contents-no-transition");
                                                    // Now lets set the scroll position
                                                    if (SETTINGS.navBarTravelDirection === "left") {
                                                        pnProductNav.scrollLeft = pnProductNav.scrollLeft - amount;
                                                    } else {
                                                        pnProductNav.scrollLeft = pnProductNav.scrollLeft + amount;
                                                    }
                                                    SETTINGS.navBarTravelling = false;
                                                },
                                                false
                                            );

                                            // Handle setting the currently active link
                                            pnProductNavContents.addEventListener("click", function(e) {
                                                var links = [].slice.call(document.querySelectorAll(".pn-ProductNav_Link"));
                                                links.forEach(function(item) {
                                                    item.setAttribute("aria-selected", "false");
                                                })
                                                e.target.setAttribute("aria-selected", "true");
                                                // Pass the clicked item and it's colour to the move indicator function
                                                moveIndicator(e.target, colours[links.indexOf(e.target)]);
                                            });

                                            // var count = 0;
                                            function moveIndicator(item, color) {
                                                // var textPosition = item.getBoundingClientRect();
                                                // var container = pnProductNavContents.getBoundingClientRect().left;
                                                // var distance = textPosition.left - container;
                                                // var scroll = pnProductNavContents.scrollLeft;
                                                // pnIndicator.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
                                                // count = count += 100;
                                                // pnIndicator.style.transform = "translateX(" + count + "px)";

                                                if (color) {
                                                    pnIndicator.style.backgroundColor = color;
                                                }
                                            }

                                            function determineOverflow(content, container) {
                                                var containerMetrics = container.getBoundingClientRect();
                                                var containerMetricsRight = Math.floor(containerMetrics.right);
                                                var containerMetricsLeft = Math.floor(containerMetrics.left);
                                                var contentMetrics = content.getBoundingClientRect();
                                                var contentMetricsRight = Math.floor(contentMetrics.right);
                                                var contentMetricsLeft = Math.floor(contentMetrics.left);
                                                if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
                                                    return "both";
                                                } else if (contentMetricsLeft < containerMetricsLeft) {
                                                    return "left";
                                                } else if (contentMetricsRight > containerMetricsRight) {
                                                    return "right";
                                                } else {
                                                    return "none";
                                                }
                                            }

                                            /**
                                             * @fileoverview  dragscroll - scroll area by dragging
                                             * @version  0.0.8
                                             *
                                             * @license  MIT, see https://github.com/asvd/dragscroll
                                             * @copyright  2015 asvd <heliosframework@gmail.com>
                                             */


                                            (function (root, factory) {
                                                if (typeof define === 'function' && define.amd) {
                                                    define(['exports'], factory);
                                                } else if (typeof exports !== 'undefined') {
                                                    factory(exports);
                                                } else {
                                                    factory((root.dragscroll = {}));
                                                }
                                            }(this, function (exports) {
                                                var _window = window;
                                                var _document = document;
                                                var mousemove = 'mousemove';
                                                var mouseup = 'mouseup';
                                                var mousedown = 'mousedown';
                                                var EventListener = 'EventListener';
                                                var addEventListener = 'add'+EventListener;
                                                var removeEventListener = 'remove'+EventListener;
                                                var newScrollX, newScrollY;

                                                var dragged = [];
                                                var reset = function(i, el) {
                                                    for (i = 0; i < dragged.length;) {
                                                        el = dragged[i++];
                                                        el = el.container || el;
                                                        el[removeEventListener](mousedown, el.md, 0);
                                                        _window[removeEventListener](mouseup, el.mu, 0);
                                                        _window[removeEventListener](mousemove, el.mm, 0);
                                                    }

                                                    // cloning into array since HTMLCollection is updated dynamically
                                                    dragged = [].slice.call(_document.getElementsByClassName('dragscroll'));
                                                    for (i = 0; i < dragged.length;) {
                                                        (function(el, lastClientX, lastClientY, pushed, scroller, cont){
                                                            (cont = el.container || el)[addEventListener](
                                                                mousedown,
                                                                cont.md = function(e) {
                                                                    if (!el.hasAttribute('nochilddrag') ||
                                                                        _document.elementFromPoint(
                                                                            e.pageX, e.pageY
                                                                        ) == cont
                                                                    ) {
                                                                        pushed = 1;
                                                                        lastClientX = e.clientX;
                                                                        lastClientY = e.clientY;

                                                                        e.preventDefault();
                                                                    }
                                                                }, 0
                                                            );

                                                            _window[addEventListener](
                                                                mouseup, cont.mu = function() {pushed = 0;}, 0
                                                            );

                                                            _window[addEventListener](
                                                                mousemove,
                                                                cont.mm = function(e) {
                                                                    if (pushed) {
                                                                        (scroller = el.scroller||el).scrollLeft -=
                                                                            newScrollX = (- lastClientX + (lastClientX=e.clientX));
                                                                        scroller.scrollTop -=
                                                                            newScrollY = (- lastClientY + (lastClientY=e.clientY));
                                                                        if (el == _document.body) {
                                                                            (scroller = _document.documentElement).scrollLeft -= newScrollX;
                                                                            scroller.scrollTop -= newScrollY;
                                                                        }
                                                                    }
                                                                }, 0
                                                            );
                                                        })(dragged[i++]);
                                                    }
                                                }


                                                if (_document.readyState == 'complete') {
                                                    reset();
                                                } else {
                                                    _window[addEventListener]('load', reset, 0);
                                                }

                                                exports.reset = reset;
                                            }));

                                        </script>
                                    </div>
                                    <!-- END Navigation -->
                                </div>
                                <!-- END Horizontal Navigation - Hover Normal -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="row">
                <div class="col-xl-8">
                    <div id="Message" class="block block-content-full">
                        <div id="accordion" role="tablist" aria-multiselectable="true">
                            @foreach($college->messages as $key=>$messageValue)
                                <div class="block block-rounded mb-1">
                                    <div class="block-header bg-primary-dark" role="tab" id="accordion_h{{$messageValue->id}}">
                                        <a class="font-w600 text-white" data-toggle="collapse" data-parent="#accordion" href="#accordion_q{{$messageValue->id}}" aria-expanded="true" aria-controls="accordion_q1">
                                            Message from {{$messageValue->designation}}
                                        </a>
                                    </div>
                                    <div id="accordion_q{{$messageValue->id}}" class="collapse @if($key==0) show @endif" role="tabpanel" aria-labelledby="accordion_h{{$messageValue->id}}" data-parent="#accordion">
                                        <div class="block-content">
                                            <div class="p-2 border-bottom">
                                                @if(isset($messageValue->photo))
                                                    <div class="col-xl-3 col-6 float-left p-0">
                                                        <div class="messageImg">
                                                            <img src="{{config('filesystems.asset').'/'.'clients'.'/'.$user->name.'/logo'.'/'.$messageValue->photo}}">
                                                        </div>
                                                    </div>
                                                @endif
                                                @if(isset($messageValue->message))
                                                    <div id="showLess_{{$messageValue->id}}" class="text-justify">
                                                        {!! \Illuminate\Support\Str::limit($messageValue->message,500) !!}
                                                        <a href="javascript:void(0)" class="badge badge-primary"  id="show_large_{{$messageValue->id}}">See More</a>
                                                    </div>
                                                    <div id="showLarge_{{$messageValue->id}}"class="text-justify" style="display: none;">
                                                        {!! $messageValue->message !!}
                                                        <a href="javascript:void(0)" class="badge badge-primary" id="show_less_{{$messageValue->id}}">See Less</a>
                                                    </div>

                                                    <span class="badge badge-info">{{$messageValue->message_by}}</span><br>
                                                    <span class="badge badge-light">{{$messageValue->designation}}</span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-xl-4">
                    <div class="block block-rounded" id="contact_details_right_fixed">
                        <div class="block-content-full p-1">
                            @if(isset($college->map_link))
                                <div class="ad_nepal_college_map">
                                    <style>
                                        iframe{width: 100%; height: 200px;}
                                        .mapouter {
                                            position: relative;
                                            text-align: right;
                                            height: 100%!important;
                                            width: 100%!important;
                                        }
                                        .gmap_canvas {
                                            overflow: hidden;
                                            background: none!important;
                                            height: 100%!important;
                                            width: 100%!important;
                                        }
                                    </style>
                                    {!! $college->map_link !!}
                                </div>
                            @endif
                        </div>
                        <div class="block-content pt-1">
                            <div class="ad_nepal_college_map">
                                <p><i class="fa fa-map-marker"></i>  @if(isset($college->city->name)){{$college->city->name}}, {{$college->city->resident->name}}, @endif {{$college->location}}</p>
                                @if(isset($college->office_contact)) <p><i class="fa fa-phone"></i> {{$college->office_contact}}</p> @endif
                                @if(isset($college->website)) <p><i class="fa fa-globe"></i> <a href="{{$college->website}}" target="_blank">{{$college->website}}</a></p> @endif
                                {{--<p>--}}
                                {{--<button class="btn btn-primary width-100" data-toggle="modal" data-target="#claimListing">Claim this listing</button>--}}
                                {{--</p>--}}
                                {{--<div class="modal fade" id="claimListing" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">--}}
                                {{--<div class="modal-dialog modal-dialog-popout" role="document">--}}
                                {{--<div class="modal-content">--}}
                                {{--<div class="block block-themed block-transparent mb-0">--}}
                                {{--<div class="block-header bg-primary-dark">--}}
                                {{--<h3 class="block-title">Claim Listing</h3>--}}
                                {{--<div class="block-options">--}}
                                {{--<button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">--}}
                                {{--<i class="fa fa-fw fa-times"></i>--}}
                                {{--</button>--}}
                                {{--</div>--}}
                                {{--</div>--}}
                                {{--<div class="block-content">--}}
                                {{--<form action="{{url()->current().'/claimListing'}}" method="post">--}}
                                {{--{{csrf_field()}}--}}
                                {{--<div class="row">--}}
                                {{--<div class="col-sm-12 form-group text-center">--}}
                                {{--<span class="text-dark">{{$college->company_name}}</span>--}}
                                {{--<hr>--}}
                                {{--</div>--}}
                                {{--<div class="col-sm-12 form-group">--}}
                                {{--<label for="">Full Name <span class="text-danger">*</span></label>--}}
                                {{--<input type="text" name="contact_person" class="form-control" required value="{{old('contact_person')}}" placeholder="Contact Person Name">--}}
                                {{--</div>--}}
                                {{--<div class="col-sm-12 form-group">--}}
                                {{--<label for="">Email Address <span class="text-danger">*</span></label>--}}
                                {{--<input type="text" name="company_email" class="form-control" required value="{{old('email')}}" placeholder="Valid Email Address">--}}
                                {{--</div>--}}
                                {{--<div class="col-sm-12 form-group">--}}
                                {{--<label for="">Contact Number <span class="text-danger">*</span></label>--}}
                                {{--<input type="text" name="contact_number" class="form-control" required value="{{old('contact_number')}}">--}}
                                {{--</div>--}}
                                {{--<div class="col-sm-12 form-group text-center">--}}
                                {{--<button type="submit" class="btn btn-primary">Claim Now</button>--}}
                                {{--</div>--}}
                                {{--</div>--}}
                                {{--</form>--}}
                                {{--</div>--}}
                                {{--</div>--}}
                                {{--</div>--}}
                                {{--</div>--}}
                                {{--</div>--}}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="about_us" class="content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                        {{--<span>Our</span>--}}
                        <h1 class="font-w700 mb-2 text-uppercase" id="f_ad_ne_main_title">
                            About College
                        </h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div id="" class="block pb-2">
                        <div class="block-content block-content-full py-2 mb-4 py-2">
                            <div class="text-justify">
                                {!! $college->company_profile !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(count($courses))
            <div id="Courses" class="content">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-2 text-uppercase" id="f_ad_ne_main_title">
                                Our Courses
                            </h1>
                            {{--<p>--}}
                            {{--Explore some of the best business from around the world from our partners and friends.--}}
                            {{--</p>--}}
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-10 push">
                        <div id="accordion2" role="tablist" aria-multiselectable="true">
                            @foreach($courses as $course)
                                <div class="block block-rounded mb-2">
                                    <div class="block-header bg-primary-dark" role="tab" id="accordion{{$course->id}}_h1">
                                        <a class="font-w600 text-white" data-toggle="collapse" data-parent="#accordion2" href="#accordion{{$course->id}}_q1" aria-expanded="true" aria-controls="accordion{{$course->id}}_q1">
                                            @if(isset($course->course->name)){{$course->course->name}}@endif
                                        </a>
                                    </div>
                                    <div id="accordion{{$course->id}}_q1" class="collapse" role="tabpanel" aria-labelledby="accordion{{$course->id}}_h1">
                                        <div class="block-content">
                                            <table class="table table-striped table-bordered">
                                                <tr>
                                                    <th>Faculty</th>
                                                    <td>@if(isset($course->faculty->name)) {{$course->faculty->name}} @endif</td>
                                                </tr>
                                                <tr>
                                                    <th>Course</th>
                                                    <td>@if(isset($course->course->name)){{$course->course->name}}@endif</td>
                                                </tr>
                                                <tr>
                                                    <th>Course Duration</th>
                                                    <td>@if(isset($course->duration->name)){{$course->duration->name}}@endif</td>
                                                </tr>
                                                <tr>
                                                    <th>Course Fees</th>
                                                    <td>NRs.{{$course->course_fees}}/-</td>
                                                </tr>
                                                <tr>
                                                    <th colspan="2">Course Description</th>
                                                </tr>
                                                <tr>
                                                    <td colspan="2">{!! $course->description !!}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div id="meet_with_faculty" class="ts-speakers" style="background-image:url('{{asset('public/theme/assets/media/img/speaker_bg.png')}}')">
            <div class="content">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="py-5 pt-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-2 text-uppercase" id="f_ad_ne_main_title">
                                Meet Our Team
                            </h1>
                        </div>
                    </div><!-- col end-->
                </div><!-- row end-->
                <div class="row">
                @foreach($college->teams as $team)
                        <div class="col-lg-3 col-md-6 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms">
                            <div class="ts-speaker">
                                <div class="speaker-img">
                                    <img class="img-fluid" src="{{config('filesystems.asset').'/'.'clients'.'/'.$user->name.'/teams'.'/'.$team->photo}}" alt="">
                                    <a type="button" data-toggle="modal" data-target="#college_teams_{{$team->id}}" class="view-speaker ts-image-popup" data-effect="mfp-zoom-in">
                                        <i class="fa fa-plus"></i>
                                    </a>
                                </div>
                                <div class="ts-speaker-info">
                                    <h3 class="ts-title"><a href="#">{{$team->name}}</a></h3>
                                    <p>
                                        ({{$team->designation}},{{$team->sector}})
                                    </p>
                                </div>
                            </div>
                        </div>
                @endforeach
                <!-- col end-->
                </div><!-- row end-->
            </div><!-- container end-->
        </div>
        @if(count($downloads)>0 || isset($college->brochure))
            <div id="downloads" class="content">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-2 text-uppercase" id="f_ad_ne_main_title">
                                Download
                            </h1>
                            {{--<p>--}}
                            {{--Explore some of the best business from around the world from our partners and friends.--}}
                            {{--</p>--}}
                        </div>
                    </div>
                </div>
                <div class="row">
                    @if(isset($college->brochure))
                        <div class="col-lg-12">
                            <div class="publication mb-2">
                                <a target="_blank" href="{{config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/brochure'.'/'.$college->brochure}}"><i class=" fa fa-download"></i> Download Brochure</a>
                            </div>
                        </div>
                    @endif
                    @foreach($courses as $course)
                        @if(isset($course->brochure) && isset($course->course->name))
                            <div class="col-lg-4">
                                <div class="publication">
                                    <a target="_blank" href="{{config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/brochure'.'/'.$course->brochure}}"><i class=" fa fa-download"></i> {{$course->course->name}}</a>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif

        <div id="image_gallery" class="content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                        <h1 class="font-w700 mb-2 text-uppercase" id="f_ad_ne_main_title">
                            Our Image Gallery
                        </h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="row gutters-tiny js-gallery img-fluid-100">
                    @foreach($college->galleries()->where('file','!=',null)->get() as $gallery)
                        @if(isset($gallery->file))
                            @php
                                $url = config('filesystems.asset').'/'.'clients'.'/'.$user->name.'/gallery'.'/'.\Illuminate\Support\Str::slug($gallery->category->name).'/'.$gallery->file;
                                $uploadedFile = pathinfo($url);
                                $old_filename = $uploadedFile['filename'];
                                $extension = $uploadedFile['extension'];
                                $imageLink = config('filesystems.asset').'/'.'clients'.'/'.$user->name.'/gallery'.'/'.\Illuminate\Support\Str::slug($gallery->category->name).'/'.$old_filename.'.webp';
                            @endphp

                            <div class="col-md-3 col-lg-3 animated fadeIn push">
                                <a class="img-link img-link-simple img-lightbox" href="{{$imageLink}}" onerror="this.onerror=null;this.src='{{$url}}';">
                                    {{--<img id="cp_g" class="img-fluid" src="{{config('filesystems.asset').'/'.'clients'.'/'.$user->name.'/gallery'.'/'.\Illuminate\Support\Str::slug($gallery->category->name).'/'.$gallery->file}}" alt="">--}}
                                    <picture>
                                        <source type="image/webp" srcset="{{$imageLink}}">
                                        <source type="image/{{$extension}}" srcset="{{$url}}">
                                        <img id="cp_g" src="{{$url}}"  class="img-fluid" alt="{{$college->company_name}}">
                                    </picture>
                                </a>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>

        </div>

        <div id="video_gallery" class="content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                        {{--<span>Our Image</span>--}}
                        <h1 class="font-w700 mb-2 text-uppercase" id="f_ad_ne_main_title">
                            Our Video Gallery
                        </h1>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach($college->videos as $video)
                    <div class="col-lg-4 col-md-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms" style="visibility: visible; animation-duration: 1.5s; animation-delay: 400ms; animation-name: fadeInUp;">
                        <div class="post">
                            <div class="post-media post-image">
                                <a type="button" data-toggle="modal" data-target="#featured_videos_{{$video->id}}" data-effect="mfp-zoom-in">
                                    <img src="https://img.youtube.com/vi/{{$video->embed_code}}/hqdefault.jpg" class="img-fluid" alt="">
                                </a>
                            </div>

                            <div class="post-body">
                                <div class="post-meta">
                           <span class="post-author">
                             <a href="#">BY {{$video->user->name}}</a>
                           </span>

                                    <div class="post-meta-date">
                                        {{date('F d, Y',strtotime($video->created_at))}}
                                    </div>
                                </div>
                                <div class="entry-header">
                                    <a class="font-size-h4" type="button" data-toggle="modal" data-target="#featured_videos_{{$video->id}}" data-effect="mfp-zoom-in">
                                        {{$video->video_title}}
                                    </a>
                                </div><!-- header end -->
                            </div><!-- post-body end -->
                        </div><!-- post end-->
                    </div>
                @endforeach
            </div>
            @foreach($college->videos as $video)
                <div class="modal fade" id="featured_videos_{{$video->id}}" tabindex="-1" role="dialog" aria-labelledby="college_teams" aria-hidden="true">
                    <div class="modal-dialog modal-lg" role="document">
                        <!--Content-->
                        <div class="modal-content">

                            <!--Body-->
                            <div class="modal-body mb-0 p-0">

                                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                    <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{$video->embed_code}}" allowfullscreen></iframe>
                                </div>

                            </div>

                            <!--Footer-->
                            <div class="modal-footer justify-content-center">
                                <span class="mr-4">Share on</span>
                                <a type="button" class="btn-floating btn-sm btn-fb"><i class="fab fa-facebook-f"></i></a>
                                <!--Twitter-->
                                <a type="button" class="btn-floating btn-sm btn-tw"><i class="fab fa-twitter"></i></a>
                                <!--Google +-->
                                <a type="button" class="btn-floating btn-sm btn-gplus"><i class="fab fa-google-plus-g"></i></a>
                                <!--Linkedin-->
                                <a type="button" class="btn-floating btn-sm btn-ins"><i class="fab fa-linkedin-in"></i></a>

                                <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

                            </div>

                        </div>
                        <!--/.Content-->

                    </div>
                </div>
            @endforeach

        </div>

        @if(count($college->faqs)>0)
            <div id="faq" class="content">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-2 text-uppercase" id="f_ad_ne_main_title">
                                Our FAQ
                            </h1>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-lg-11 push">
                        <div id="accordion" role="tablist" aria-multiselectable="true">
                            @foreach($college->faqs as $faq)
                                <div class="block block-rounded mb-1">
                                    <div class="block-header bg-primary-dark" role="tab" id="accordion_h{{$faq->id}}">
                                        <a class="font-w600 text-white" data-toggle="collapse" data-parent="#accordion" href="#accordion_q{{$faq->id}}" aria-expanded="true" aria-controls="accordion_q1">
                                            {{$faq->question}}
                                        </a>
                                    </div>
                                    <div id="accordion_q{{$faq->id}}" class="collapse" role="tabpanel" aria-labelledby="accordion_h{{$faq->id}}" data-parent="#accordion">
                                        <div class="block-content">
                                            {!! $faq->answer !!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
    <!-- END Page Content -->
        @foreach($college->teams as $team)
        <!-- Large Block Modal -->
            <div class="modal fade" id="college_teams_{{$team->id}}" aria-labelledby="college_teams_{{$team->id}}" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="block block-themed block-transparent mb-0">
                            <div class="block-content-full">
                                <div class="row">
                                    <div class="col-xl-12">
                                        <!-- popup start-->
                                        <div id="popup_1" class="container">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="ts-speaker-popup-img">
                                                        <img src="{{config('filesystems.asset').'/'.'clients'.'/'.$user->name.'/teams'.'/'.$team->photo}}" alt="">
                                                    </div>
                                                </div><!-- col end-->
                                                <div class="col-lg-6">
                                                    <div class="block-options float-right">
                                                        <button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close">
                                                            <i class="fa fa-fw fa-times" style="color: #ff0000"></i>
                                                        </button>
                                                    </div>
                                                    <div class="ts-speaker-popup-content">
                                                        <h3 class="ts-title">{{$team->name}}</h3>
                                                        <span class="speakder-designation">{{$team->designation}}</span>
                                                    </div><!-- ts-speaker-popup-content end-->
                                                </div><!-- col end-->
                                            </div><!-- row end-->
                                        </div><!-- popup end-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Large Block Modal -->
        @endforeach
        @endsection
        @section('after_js')
            <link rel="stylesheet" href="{{asset('public/theme/assets/js/plugins/magnific-popup/magnific-popup.css')}}">
            @foreach($college->messages as $message)
                <script>
                    $(document).ready(function(){
                        $("#show_large_{{$message->id}}").click(function(){
                            $("#showLess_{{$message->id}}").hide();
                            $("#showLarge_{{$message->id}}").show();
                        });
                        $("#show_less_{{$message->id}}").click(function(){
                            $("#showLess_{{$message->id}}").show();
                            $("#showLarge_{{$message->id}}").hide();
                        });
                    });
                </script>
    @endforeach
@endsection