@extends('layouts.app')
@section('content')


<style>
    .heading {
        position: absolute;
        left: 36%;
        cursor: pointer;
        width: 28.4%;
        /* border: 2px solid black; */
    }
    .heading h1{
        text-align: center;
        font-size:2vw;margin-top: auto;
    }
    .floorplan1 {
        position: absolute;
        left: 17%;
        cursor: pointer;
        width: 9.4%;
        /* border: 2px solid black; */
    }

    .floorplan1:hover .hover1 {
        opacity: 5;
    }

    .hover1 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan2 {
        position: absolute;
        left: 30.7%;
        cursor: pointer;
        width: 9.4%;
        /* border: 2px solid black; */
    }

    .floorplan2:hover .hover2 {
        opacity: 5;
    }

    .hover2 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan3 {
        position: absolute;
        left: 44.7%;
        cursor: pointer;
        width: 9.4%;
        /* border: 2px solid black; */
    }

    .floorplan3:hover .hover3 {
        opacity: 5;
    }

    .hover3 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan4 {
        position: absolute;
        left: 58.7%;
        cursor: pointer;
        width: 9.4%;
        /* border: 2px solid black; */
    }

    .floorplan4:hover .hover4 {
        opacity: 5;
    }

    .hover4 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan5 {
        position: absolute;
        left: 72.7%;
        cursor: pointer;
        width: 9.4%;
        /* border: 2px solid black; */
    }

    .floorplan5:hover .hover5 {
        opacity: 5;
    }

    .hover5 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan6 {
        position: absolute;
        left: 11%;
        cursor: pointer;
        width: 11.4%;
        /* border: 2px solid black; */
    }

    .floorplan6:hover .hover6 {
        opacity: 5;
    }

    .hover6 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan7 {
        position: absolute;
        left: 27%;
        cursor: pointer;
        width: 11.4%;
        /* border: 2px solid black; */
    }

    .floorplan7:hover .hover7 {
        opacity: 5;
    }

    .hover7 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan8 {
        position: absolute;
        left: 43.5%;
        cursor: pointer;
        width: 11.4%;
        /* border: 2px solid black; */
    }

    .floorplan8:hover .hover8 {
        opacity: 5;
    }

    .hover8 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan9 {
        position: absolute;
        left: 60%;
        cursor: pointer;
        width: 11.4%;
        /* border: 2px solid black; */
    }

    .floorplan9:hover .hover9 {
        opacity: 5;
    }

    .hover9 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan10 {
        position: absolute;
        left: 76%;
        cursor: pointer;
        width: 12.4%;
        /* border: 2px solid black; */
    }

    .floorplan10:hover .hover10 {
        opacity: 5;
    }

    .hover10 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan11 {
        position: absolute;
        left: 3%;
        cursor: pointer;
        width: 14.4%;
        /* border: 2px solid black; */
    }

    .floorplan11:hover .hover11 {
        opacity: 5;
    }

    .hover11 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan12 {
        position: absolute;
        left: 22%;
        cursor: pointer;
        width: 14.4%;
        /* border: 2px solid black; */
    }

    .floorplan12:hover .hover12 {
        opacity: 5;
    }

    .hover12 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan13 {
        position: absolute;
        left: 42.6%;
        cursor: pointer;
        width: 13%;
        /* border: 2px solid black; */
    }

    .floorplan13:hover .hover13 {
        opacity: 5;
    }

    .hover13 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan14 {
        position: absolute;
        left: 62%;
        cursor: pointer;
        width: 14%;
        /* border: 2px solid black; */
    }

    .floorplan14:hover .hover14 {
        opacity: 5;
    }

    .hover14 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }

    .floorplan15 {
        position: absolute;
        left: 81%;
        cursor: pointer;
        width: 14.4%;
        /* border: 2px solid black; */
    }

    .floorplan15:hover .hover15 {
        opacity: 5;
    }

    .hover15 {
        position: absolute;
        top: 100%;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.9); /* Black see-through */
        color: #f1f1f1;
        transition: .5s ease;
        opacity:0;
        color: white;
        padding: 10px;
        text-align: center;
        border-radius: 10%;
    }
</style>
<div id="main-content">

    <div class="exhibition-mailhall">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <h5 class="text-center" style="margin-top:30px;">Click image to select your desire location</h5>
                </div>
                <div class="col-md-12">

                    <div class="booth-image">
                        {{--MAIN HEADING--}}
                        <a href="#" class="heading-box">
                            <div>
                                <h2>{{$currentHall->name}}</h2>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box1">
                                 <span class="tooltiptext">

                                    <p>Booth 6</p>
                                 </span>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box2">
                                 <span class="tooltiptext">

                                    <p>Booth 7
                                        </p></span>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box3">
                                 <span class="tooltiptext">
                                    <p>Booth 8
                                    </p>
                                 </span>
                            </div>

                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box4">
                                 <span class="tooltiptext">
                                    <p>Booth 9
                                    </p>
                                       </span>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box5">
                                 <span class="tooltiptext">
                                    <p>Booth 10
                                    </p>
                                       </span>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box6">
                                 <span class="tooltiptext">
                                    <p>Booth 5
                                    </p></span>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box7">
                                 <span class="tooltiptext">
                                    <p>Booth 4
                                    </p></span>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box8">
                                 <span class="tooltiptext">
                                    <p>Booth 3
                                    </p>
                                 </span>
                            </div>

                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box9">
                                 <span class="tooltiptext">
                                    <p>Booth 2
                                    </p>
                                 </span>
                            </div>
                        </a>
                        <a href="#" class="tooltips">
                            <div class=" sponser1-box10">
                                 <span class="tooltiptext">
                                    <p>Booth 1
                                    </p>
                                 </span>
                            </div>
                        </a>


                        <a href="@if(empty($locationArray[1]) && $companyExhibitor->type==1) {{ route('booth.location.sponsor.submit',1)}} @else # @endif " class="tooltips">
                            <div class=" sponser1-silver1">
                                 <span class="tooltiptext">
                                       {{-- <img src="cimg/booth/breakout-selection.jpg" class="img-fluid" style="margin-bottom: 5px"> --}}
                                    @if(!empty($locationArray[1]))
                                        Booked
                                    @else
                                        Silver 1
                                    @endif
                                 </span>
                            </div>
                        </a>

                        <a href="@if(empty($locationArray[5]) && $companyExhibitor->type==2) {{ route('booth.location.sponsor.submit',5)}} @else # @endif " class="tooltips">
                            <div class=" sponser1-gold1">
                                 <span class="tooltiptext">
                                       {{-- <img src="cimg/booth/breakout-selection.jpg" class="img-fluid" style="margin-bottom: 5px"> --}}
                                    @if(!empty($locationArray[5]))
                                        Booked
                                    @else
                                       Gold 1
                                    @endif
                                 </span>
                            </div>
                        </a>


                        <a href=" @if(empty($locationArray[2]) && $companyExhibitor->type==1) {{ route('booth.location.sponsor.submit',2)}} @else # @endif " class="tooltips">
                            <div class=" sponser1-silver2">
                                  <span class="tooltiptext">
                                       {{-- <img src="cimg/booth/breakout-selection.jpg" class="img-fluid" style="margin-bottom: 5px"> --}}
                                    @if(!empty($locationArray[2]))
                                       Booked
                                    @else
                                       Silver 2
                                    @endif
                                 </span>
                            </div>
                        </a>

                        <a href="@if(empty($locationArray[7]) && $companyExhibitor->type==3 ) {{ route('booth.location.sponsor.submit',7)}} @else # @endif " class="tooltips">
                            <div class=" sponser1-platinum">
                                 <span class="tooltiptext">
                                       {{-- <img src="cimg/booth/breakout-selection.jpg" class="img-fluid" style="margin-bottom: 5px"> --}}
                                    @if(!empty($locationArray[7]))
                                       Booked
                                    @else
                                       Platinum
                                    @endif
                                 </span>
                            </div>
                        </a>

                        <a href="@if(empty($locationArray[3]) && $companyExhibitor->type==1 ) {{ route('booth.location.sponsor.submit',3)}} @else # @endif " class="tooltips">
                            <div class=" sponser1-silver3">
                                 <span class="tooltiptext">
                                       {{-- <img src="cimg/booth/breakout-selection.jpg" class="img-fluid" style="margin-bottom: 5px"> --}}
                                    @if(!empty($locationArray[3]))
                                       Booked
                                    @else
                                       Silver 3
                                    @endif
                                 </span>
                            </div>
                        </a>

                        <a href="@if(empty($locationArray[6]) && $companyExhibitor->type==2) {{ route('booth.location.sponsor.submit',6)}} @else # @endif " class="tooltips">
                            <div class=" sponser1-gold2">
                                <span class="tooltiptext">
                                       {{-- <img src="cimg/booth/breakout-selection.jpg" class="img-fluid" style="margin-bottom: 5px"> --}}
                                    @if(!empty($locationArray[6]))
                                       Booked
                                    @else
                                       Gold 2
                                    @endif
                                 </span>
                            </div>
                        </a>

                        <a href="@if(empty($locationArray[4]) && $companyExhibitor->type==1 ) {{ route('booth.location.sponsor.submit',4)}} @else # @endif " class="tooltips">
                            <div class=" sponser1-silver4">
                                <span class="tooltiptext">
                                       {{-- <img src="cimg/booth/breakout-selection.jpg" class="img-fluid" style="margin-bottom: 5px"> --}}
                                    @if(!empty($locationArray[4]))
                                       Booked
                                    @else
                                       Silver 4
                                    @endif
                                 </span>
                            </div>
                        </a>

                        <img src="{{asset('images/halls.jpeg')}}" alt="Snow" style="width:100%;" id="bgfloorplan">

                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('exhibition.main_footer')
</div>
@endsection
@php
$location = json_encode($locations, true);
@endphp

@section('scripts')
    <script>
    let locations = '{!! $location !!}';

        });

    </script>
@endsection