@extends('edufair.layouts.master')
@section('content')
<main id="main-container">
    <div class="content">
        <div class="py-3 text-center" id="heading_ti_adn">
            <h1 class="font-w700 mb-4 text-uppercase" id="f_ad_ne_main_title">
                Live Chat with School Representatives
            </h1>
        </div>
        <div class="row">
            @foreach ($platinums as $college)
            <div class="col-lg-6">
                <div class="block block-rounded">
                    <div class="block-content p-0 overflow-hidden">
                        <div class="row no-gutters">
                            <div class="col-md-4 col-lg-4 overflow-hidden d-flex align-items-center">
                                <a href="{{$college->user->name}}" target="_blank">
                                    @if(isset($college->featured_image))

                                    @php
                                    $url =
                                    config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/featured_image'.'/'.$college->featured_image;
                                    $uploadedFile = pathinfo($url);
                                    $old_filename = $uploadedFile['filename'];
                                    $extension = $uploadedFile['extension'];
                                    $imageLink =
                                    config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/featured_image'.'/'.$old_filename.'.webp';
                                    @endphp

                                    <picture>
                                        <source type="image/webp" srcset="{{$imageLink}}">
                                        <source type="image/{{$extension}}" srcset="{{$url}}">
                                        <img class="img-fluid img-link" src="{{$url}}" alt="{{$college->company_name}}">
                                    </picture>
                                    @endif
                                </a>
                            </div>
                            <div class="col-md-8 col-lg-8 d-flex align-items-center">
                                <div class="px-2 py-2">
                                    <p class="mb-1">
                                        <a class="text-primary-dark font-w700" href="{{$college->user->name}}">
                                            {{$college->company_name}}
                                        </a>
                                    </p>
                                    <p class="mb-2">
                                        @if(isset($college->district->name)){{$college->district->name}}, @endif
                                        @if(isset($college->city->name)){{$college->city->name}}, @endif
                                        {{$college->location}}
                                    </p>
                                    <a href="javascript:void(0)" data-toggle="modal"
                                        data-target="#live_chat{{$college->id}}" class="btn btn-primary btn-sm">Live
                                        Chat</a>
                                    <a href="{{$college->user->name}}" class="btn btn-primary btn-sm">Visit College</a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="live_chat{{$college->id}}" tabindex="-1" role="dialog"
                aria-labelledby="modal-default-normal" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Live Chat</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body pb-1">
                            <div class="row no-gutters bg-white push">
                                @foreach(\App\Model\SocialIcon::all() as $key=>$social)
                                @php
                                $KeyId = $key;
                                $chatSetting = $social->client_chat_settings($college->id)->first();
                                if ($social->input_type=='number' && isset($chatSetting->code)){
                                $redirectLink = 'tel:'.$chatSetting->code;
                                }elseif($social->input_type=='text' && isset($chatSetting->code)){
                                $redirectLink = $chatSetting->code;
                                }else{
                                $redirectLink = 'javascript:void(0)';
                                }
                                @endphp
                                <div
                                    class="col-6 @if($KeyId==0) border-right border-bottom @elseif($KeyId=='1') border-bottom @elseif($KeyId=='2') border-right @endif">
                                    <a class="block block-transparent block-link-pop text-center mb-0"
                                        href="{{$redirectLink}}">
                                        <div
                                            class="block-content block-content-full aspect-ratio-4-3 d-flex justify-content-center align-items-center">
                                            <div>
                                                <i class="{{$social->icon}}"></i>
                                                <div class="font-size-sm font-w600 mt-2 text-uppercase">
                                                    {{$social->name}}</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @foreach ($golds as $college)
            <div class="col-lg-6">
                <div class="block block-rounded">
                    <div class="block-content p-0 overflow-hidden">
                        <div class="row no-gutters">
                            <div class="col-md-4 col-lg-4 overflow-hidden d-flex align-items-center">
                                <a href="{{$college->tour->tour_link}}" target="_blank">
                                    @if(isset($college->featured_image))

                                    @php
                                    $url =
                                    config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/featured_image'.'/'.$college->featured_image;
                                    $uploadedFile = pathinfo($url);
                                    $old_filename = $uploadedFile['filename'];
                                    $extension = $uploadedFile['extension'];
                                    $imageLink =
                                    config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/featured_image'.'/'.$old_filename.'.webp';
                                    @endphp

                                    <picture>
                                        <source type="image/webp" srcset="{{$imageLink}}">
                                        <source type="image/{{$extension}}" srcset="{{$url}}">
                                        <img class="img-fluid img-link" src="{{$url}}" alt="{{$college->company_name}}">
                                    </picture>
                                    @endif
                                </a>
                            </div>
                            <div class="col-md-8 col-lg-8 d-flex align-items-center">
                                <div class="px-2 py-2">
                                    <p class="mb-1">
                                        <a class="text-primary-dark font-w700" href="">
                                            {{$college->company_name}}
                                        </a>
                                    </p>
                                    <p class="mb-2">
                                        @if(isset($college->district->name)){{$college->district->name}}, @endif
                                        @if(isset($college->city->name)){{$college->city->name}}, @endif
                                        {{$college->location}}
                                    </p>
                                    <a href="javascript:void(0)" data-toggle="modal"
                                        data-target="#live_chat{{$college->id}}" class="btn btn-primary btn-sm">Live
                                        Chat</a>
                                    <a href="{{$college->user->name}}" class="btn btn-primary btn-sm">Visit College</a>
                                </div>
                            </div>

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

            <div class="modal fade" id="live_chat{{$college->id}}" tabindex="-1" role="dialog"
                aria-labelledby="modal-default-normal" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Live Chat</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body pb-1">
                            <div class="row no-gutters bg-white push">
                                @foreach(\App\Model\SocialIcon::all() as $key=>$social)
                                @php
                                $KeyId = $key;
                                $chatSetting = $social->client_chat_settings($college->id)->first();
                                if ($social->input_type=='number' && isset($chatSetting->code)){
                                $redirectLink = 'tel:'.$chatSetting->code;
                                }elseif($social->input_type=='text' && isset($chatSetting->code)){
                                $redirectLink = $chatSetting->code;
                                }else{
                                $redirectLink = 'javascript:void(0)';
                                }
                                @endphp
                                <div
                                    class="col-6 @if($KeyId==0) border-right border-bottom @elseif($KeyId=='1') border-bottom @elseif($KeyId=='2') border-right @endif">
                                    <a class="block block-transparent block-link-pop text-center mb-0"
                                        href="{{$redirectLink}}">
                                        <div
                                            class="block-content block-content-full aspect-ratio-4-3 d-flex justify-content-center align-items-center">
                                            <div>
                                                <i class="{{$social->icon}}"></i>
                                                <div class="font-size-sm font-w600 mt-2 text-uppercase">
                                                    {{$social->name}}</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @foreach ($silvers as $college)
            <div class="col-lg-6">
                <div class="block block-rounded">
                    <div class="block-content p-0 overflow-hidden">
                        <div class="row no-gutters">
                            <div class="col-md-4 col-lg-4 overflow-hidden d-flex align-items-center">
                                <a href="{{$college->tour->tour_link}}" target="_blank">
                                    @if(isset($college->featured_image))

                                    @php
                                    $url =
                                    config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/featured_image'.'/'.$college->featured_image;
                                    $uploadedFile = pathinfo($url);
                                    $old_filename = $uploadedFile['filename'];
                                    $extension = $uploadedFile['extension'];
                                    $imageLink =
                                    config('filesystems.asset').'/'.'clients'.'/'.$college->user->name.'/featured_image'.'/'.$old_filename.'.webp';
                                    @endphp

                                    <picture>
                                        <source type="image/webp" srcset="{{$imageLink}}">
                                        <source type="image/{{$extension}}" srcset="{{$url}}">
                                        <img class="img-fluid img-link" src="{{$url}}" alt="{{$college->company_name}}">
                                    </picture>
                                    @endif
                                </a>
                            </div>
                            <div class="col-md-8 col-lg-8 d-flex align-items-center">
                                <div class="px-2 py-2">
                                    <p class="mb-1">
                                        <a class="text-primary-dark font-w700" href="">
                                            {{$college->company_name}}
                                        </a>
                                    </p>
                                    <p class="mb-2">
                                        @if(isset($college->district->name)){{$college->district->name}}, @endif
                                        @if(isset($college->city->name)){{$college->city->name}}, @endif
                                        {{$college->location}}
                                    </p>
                                    <a href="javascript:void(0)" data-toggle="modal"
                                        data-target="#live_chat{{$college->id}}" class="btn btn-primary btn-sm">Live
                                        Chat</a>
                                    <a href="{{$college->user->name}}" class="btn btn-primary btn-sm">Visit College</a>
                                </div>
                            </div>

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

            <div class="modal fade" id="live_chat{{$college->id}}" tabindex="-1" role="dialog"
                aria-labelledby="modal-default-normal" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Live Chat</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body pb-1">
                            <div class="row no-gutters bg-white push">
                                @foreach(\App\Model\SocialIcon::all() as $key=>$social)
                                @php
                                $KeyId = $key;
                                $chatSetting = $social->client_chat_settings($college->id)->first();
                                if ($social->input_type=='number' && isset($chatSetting->code)){
                                $redirectLink = 'tel:'.$chatSetting->code;
                                }elseif($social->input_type=='text' && isset($chatSetting->code)){
                                $redirectLink = $chatSetting->code;
                                }else{
                                $redirectLink = 'javascript:void(0)';
                                }
                                @endphp
                                <div
                                    class="col-6 @if($KeyId==0) border-right border-bottom @elseif($KeyId=='1') border-bottom @elseif($KeyId=='2') border-right @endif">
                                    <a class="block block-transparent block-link-pop text-center mb-0"
                                        href="{{$redirectLink}}">
                                        <div
                                            class="block-content block-content-full aspect-ratio-4-3 d-flex justify-content-center align-items-center">
                                            <div>
                                                <i class="{{$social->icon}}"></i>
                                                <div class="font-size-sm font-w600 mt-2 text-uppercase">
                                                    {{$social->name}}</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
    {{-- live chat --}}



    <style>
        ul.number li {
            list-style: decimal;
        }

        #timer {
            font-size: 3em;
            font-weight: 700;
            color: #fff;
            //   text-shadow: 0 0 20px #48c8ff;
        }

        #timer div {
            display: inline-block;
            min-width: 90px;
            border: 2px dotted #ddd;
            text-align: center;
            padding: 0 5px;
            border-radius: 10px;
            margin: 0 5px;
        }

        #timer div span {
            color: #fff;
            display: block;
            font-size: 1rem;
            font-weight: 500;
        }

        .text-jobfair {
            color: #c91015 !important;
        }

        // breadcomes
        .bg-gd-white-op-rl {
            background: linear-gradient(175deg, #bb0005 0%, rgba(158, 6, 6, 0.97) 30%, #c91015 70%, rgb(171 0 0) 100%);
        }

        .q_sponsor_imgg img {
            /* max-width: 100%; */
            /* height: 120px; */
            padding: 20px;
            /* object-fit: cover; */
        }

        .q_sponsor_imgg {
            border: 1px solid #ddd;
        }
    </style>
    @section('after_js')
    @if(!(\Illuminate\Support\Facades\Auth::check()))
    <script type="text/javascript">
        $(window).on('load',function(){
            $('#myModal').modal('show');
        });
    </script>
    @endif
    @endsection
    <script>
        function updateTimer() {
                future = Date.parse("november 16, 2021 16:40:00");
                now = new Date();
                diff = future - now;

                days = Math.floor(diff / (1000 * 60 * 60 * 24));
                hours = Math.floor(diff / (1000 * 60 * 60));
                mins = Math.floor(diff / (1000 * 60));
                secs = Math.floor(diff / 1000);

                d = days;
                h = hours - days * 24;
                m = mins - hours * 60;
                s = secs - mins * 60;

                document.getElementById("timer")
                    .innerHTML =
                    '<div>' + d + '<span>DAYS</span></div>' +
                    '<div>' + h + '<span>HRS</span></div>' +
                    '<div>' + m + '<span>MIN</span></div>' +
                    '<div>' + s + '<span>SEC</span></div>';
            }
            setInterval('updateTimer()', 1000);

    </script>

    @endsection