@extends('layouts.app')
@section('metades')
<meta name="description" content="{{!empty($data['metaDescription'])?$data['metaDescription']:'Millennial turf: Online turf  booking system in Kolkata'}}" />
<meta name="author" content="{{!empty($data['metaTitle'])?$data['metaTitle']:'Millennial turf: Online turf  booking system in Kolkata'}}" />
<meta name="keywords" content="{{!empty($data['metaKeyword'])?$data['metaKeyword']:'Millennial turf: Online turf  booking system in Kolkata'}}" />
@endsection
@section('title')
<title>{{!empty($page)?ucwords(str_replace('-',' ',$page)):Booking}} : Millennial Turf</title>
@endsection

@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">



<div class="ipBanner">
    <div class="bannerImage">
        @if(!empty($pDetails) && !empty($pDetails['bannerImage']))
        <img src="{{$pDetails['bannerImage']}}" style="width:100%; height:auto;">
        @endif
        <div class="bannerCaption">
            <h2>
                @if(!empty($pDetails) && !empty($pDetails['Image']))
                <img src="{{$pDetails['Image']}}">
                @endif
            </h2>
            <p class="turfAddress"><i class="ti-location-pin"></i> <br> {{$pDetails['name']}}</p>
        </div>
    </div>
</div>
<!--ipBanner ends-->



<div class="checkTurfStrip">
    <div class="container">


        <div class="info485 toptitle_mob546">
            <h2>{{$pDetails['name']}}</h2>
            <span><i class="ti-location-pin"></i>{{$pDetails['LocationName']}}</span>
        </div>


        <div class="turfBookSection">
            <div class="row">


                <!--col-md-6 ends-->

                <div class="col-lg-6 col-md-12 order-sm-2 order-lg-1 order-md-2 order-2">
                    <div class="turfVideo">
                        @if(!empty($pDetails) && !empty($pDetails['youtubeLink']))
                        <iframe width="560" height="315" src="{{$pDetails['youtubeLink']}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        @endif
                    </div>
                    {{$pDetails['longDesc']}}
                </div>
                <!--col-md-6 ends-->


                <div class="col-lg-6 col-md-12 order-sm-1 order-lg-2 order-md-1 order-1 bookslotright5895">
                    <h3>Book your slot</h3>
                    <div class="slotBookingDates">
                        <ul class="datesList ticketdateslider01">
                            @if(!empty($slotDetails) && !empty($dateList=$slotDetails['dateList']))
                            @foreach($dateList as $key=>$val)
                            <li>
                                <label class="selectdate">
                                    <p class="date012 @if($key==0) highlight @endif">
                                                                                @if(date('d') == $val['day'])
                                        <small> Today </small>
                                        @elseif(date('d', strtotime('+1 days')) == $val['day'])
                                        <small> Tomorrow </small>
                                        @else
                                        {{$val['month']}} <span>{{$val['day']}}</span> {{$val['weekDay']}}
                                        @endif

                                    </p>
                                    <input @if($key==0) checked="checked" @endif" type="radio" value="{{$val['date']}}" name="slotDate" id="slotDate">
                                    <span class="checkmark"></span>
                                </label>
                            </li>
                            @endforeach
                            @endif
                        </ul>
                        <!--   <span class="previousDates"><i class="ti-angle-left"></i></span>
                      <span class="nextDates"><i class="ti-angle-right"></i></span> -->
                    </div>



                    <ul class="turfsTimeList" id="turfsTimeList">
                        @if(!empty($slotDetails) && !empty($slotList=$slotDetails['slotList']))
                        @foreach($slotList as $key=>$val)

                        <li onclick="checkHighlite()">
                            @if($val['noOfStotsAvailable']>0)
                            <label class="dateslot45">
                                <p class="rmHigh hi">{{date("g A", strtotime($val['slotStartTime']))}} - {{date("g A", strtotime($val['slotEndTime']))}} <span> <i>₹</i> {{$val['price']}} INR</span></p>
                                <input rel="{{$val['id']}}" id="" class="selectslot" value="{{$val['price']}}" type="checkbox">
                                <span class="checkmark"></span>
                            </label>

                            @else

                            <label class="dateslot45" style="background-color: #a50101;cursor: auto;">
                                <p style="color: #fff;" class="rmHigh hi">{{date("g A", strtotime($val['slotStartTime']))}} - {{date("g A", strtotime($val['slotEndTime']))}}
                                    <span style="color: #fff;"> <i>₹</i> {{$val['price']}} INR</span>
                                </p>
                                <span class="checkmark"></span>
                            </label>

                            @endif
                        </li>
                        @endforeach
                        @endif


                    </ul>



                    <ul class="turfsTimeList turfsTimeListMobile">
                        <li>
                            <p>10 AM <span> ₹ 2000</span></p>
                        </li>
                        <li>
                            <p>11 AM <span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>12 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>1 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>2 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>3 PM<span>₹ 2000</span>
                        </li>
                        <li>
                            <p>4 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>5 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>6 PM<span> ₹ 3000</span>
                        </li>
                        <li>
                            <p>7 PM<span> ₹ 3000</span>
                        </li>
                        <li>
                            <p>8 PM<span> ₹ 3000</span>
                        </li>
                        <li>
                            <p>9 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>10 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>11 PM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>12 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>1 AM<span>₹ 2000</span>
                        </li>
                        <li>
                            <p>2 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>3 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>4 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>5 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>6 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>7 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>8 AM<span> ₹ 2000</span>
                        </li>
                        <li>
                            <p>9 AM<span> ₹ 2000</span>
                        </li>
                    </ul>



                    <div class="slotIndex">
                        <ul>
                            <li class="booked"><span></span>Booked</li>
                            <li class="available"><span></span>Available</li>
                            <li class="selected"><span></span>Selected</li>
                            <!--<li class="fillingfast"><span></span>Filling Fast</li>-->
                        </ul>
                    </div>
                    <!--slotindex ends-->
                    <div class="bookingSlotFtr">
                        <div class="bsfLeft">
                            <!-- <div class="bsPrice">Total <span id="tot_price"></span></div>-->
                            <div class="bsPrice"></div>
                            <div class="bsHours" style="display:none"><i class="ti-time"></i> <span id="hours"></span></div>
                        </div>
                        <div class="bsfRight">
                            <button onclick="booking()" style="display:none" id="booking_active" class="bookNow">Book Now</button>
                            <button style="background: #827f7e;" id="booking_inactive" class="bookNow">Book Now</button>
                        </div>

                    </div>
                    <!--bookingSlotFtr endns-->
                </div>
            </div>

        </div>







        <!--row ends-->
        @if(!empty($gDetails)) <br /> <br /> <br />
        <div class="blockHead">
            <div class="bgTitle">Gallery</div>
            <div class="titleTag">have a look</div>
            <h5>checkout the turf</h5>
        </div>


        <div class="row">

            <div class="col-md-12">
                <ul class="turfImages">

                    @foreach($gDetails as $gval)
                    <li> <img src="{{$gval['image']}}"></li>
                    @endforeach

                </ul>
            </div>
            <!--col-md-12 ends-->

        </div>
        @endif





        <!--row ends-->

        <!--<div class="row turfHighlights innerPageHighlights">
                <div class="col-md-12">
                    <ul class="thList">
                        <li>
                            <div class="thlHead" id="thl1">Infrastructure</div>
                            <div class="thlMatr" id="thl1Matr">Lorem ipsum dolor sit amet, vitae appellantur reprehendunt his an, cum stet tation luptatum te.</div>
                        </li>
                        <li>
                            <div class="thlHead" id="thl2">Pitch Facts</div>
                            <div class="thlMatr" id="thl2Matr">Lorem ipsum dolor sit amet, vitae appellantur reprehendunt his an, cum stet tation luptatum te.</div>
                        </li>
                        <li>
                            <div class="thlHead" id="thl5">Events</div>
                            <div class="thlMatr" id="thl5Matr">Lorem ipsum dolor sit amet, vitae appellantur reprehendunt his an, cum stet tation luptatum te.</div>
                        </li>
                    </ul>
                </div>
            </div>-->
        <!--row ends-->

        <!-- @if(!empty($pDetails) && !empty($pDetails['latitude']) && !empty($pDetails['longitude'])) -->

        <!--    <body onload="loadMap()">
				<div id="map" style="height:450px">
					<div id="map_canvas" style="width:100%; height:450px"></div>
				</div>
			</body> -->
        <!--  <div class="row">
                <div class="col-md-12 turfLocation">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3685.390140607869!2d88.35051181495876!3d22.52705358520623!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a02772fe47d7079%3A0xba171527428f8267!2sSarat%20Bose%20Rd%2C%20Kolkata%2C%20West%20Bengal!5e0!3m2!1sen!2sin!4v1655135761058!5m2!1sen!2sin"
                        width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div> -->
        <!-- @endif -->
    </div>
    <!--contnainer ends-->
</div>
<!--checkTurfStrip ends-->




<div class="">
    <div class="row">
        <div class="col-md-12 turfLocation">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3685.390140607869!2d88.35051181495876!3d22.52705358520623!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a02772fe47d7079%3A0xba171527428f8267!2sSarat%20Bose%20Rd%2C%20Kolkata%2C%20West%20Bengal!5e0!3m2!1sen!2sin!4v1655135761058!5m2!1sen!2sin" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
    </div>

</div>




<div class="pageOverlay"></div>
<div class="turfPopup">
    <div class="tpHead">Choose Your Venue </div>
    <span class="closePopup">X</span>
    <ul class="turfsList">
        <li>
            <a href="turfDetailsPage.html"><img src="images/vs.png" alt="tap.png" /><span>1.0</span>
                <p class="taddress">Sarat Bose Road</p>
            </a>
        </li>
        <li>
            <a href="turfDetailsPage.html"><img src="images/vs.png" alt="tap.png" /><span>2.0</span>
                <p class="taddress">Stadel sports turf</p>
            </a>
        </li>
        <li>
            <a href="turfDetailsPage.html"><img src="images/vs.png"  alt="tap.png"/><span>3.0</span>
                <p class="taddress">Aditya School of Sports</p>
            </a>
        </li>
        <li>
            <a href="turfDetailsPage.html"><img src="images/tap.png" alt="tap.png" /><span>1.0</span>
                <p class="taddress">Turf Air Plaza, Rosedale Plaza</p>
            </a>
        </li>
        <li>
            <a href="turfDetailsPage.html"><img src="images/tap.png" alt="tap.png" /><span>2.0</span>
                <p class="taddress">Turf Air Plaza, Axis Mall</p>
            </a>
        </li>
    </ul>
</div>
<!--turfPopup endns-->

<div class="turfDatePopup">
    <div class="tpHead">Choose Your Date </div>
    <span class="closePopup">X</span>
    <ul class="turfsDateList">
        <li><i class="ti-calendar"></i>
            <p>Sunday <span>12th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Monday <span>13th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Tuesday <span>14th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Wednesday <span>15th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Thursday <span>16th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Friday <span>17th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Saturday <span>18th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Sunday <span>19th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Monday <span>20th June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Tuesday <span>21st June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Wednesday <span>22nd June</span></p>
        </li>
        <li><i class="ti-calendar"></i>
            <p>Thursday <span>23rd June</span></p>
        </li>
    </ul>
</div>
<!--turfDatePopup endns-->

<div class="turfTimePopup">
    <div class="tpHead">Choose Your Time </div>
    <span class="closePopup">X</span>
    <ul class="turfsDateList">
        <li><i class="ti-time"></i>
            <p>10:00 - 11:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>11:00 - 12:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>12:00 - 13:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>13:00 - 14:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>14:00 - 15:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>15:00 - 16:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>16:00 - 17:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>17:00 - 18:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>18:00 - 19:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>19:00 - 20:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>21:00 - 22:00</p>
        </li>
        <li><i class="ti-time"></i>
            <p>22:00 - 23:00</p>
        </li>
    </ul>
</div>
<!--turfDatePopup endns-->

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    var map;
    var geocoder;

    function loadMap() {
        // Using the lat and lng of Dehradun.
        var latitude = {
            {
                $pDetails['latitude']
            }
        };
        var longitude = {
            {
                $pDetails['longitude']
            }
        };
        var latlng = new google.maps.LatLng(latitude, longitude);
        var feature = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), feature);
        geocoder = new google.maps.Geocoder();
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Test for Location"
        });
    }
</script>
</head>
@if(Session::has('user'))
@else
@endif
<script>
    function booking() {
        var ch_list = [];
        var sum = 0;
        $("input:checkbox[type=checkbox]:checked").each(function() {
            ch_list.push($(this).attr('rel'));
            sum += Number($(this).val());
        });
        var logincheck = '0';

        if (logincheck == 1) {
            window.open("{{route('checkout')}}?p=2&&g={{$slotDetails['gamesDetails']['id']}}&&slot=" + ch_list + "", "_self");
        } else {
            var slotDetails = '';
            var session = '