@extends('includes.master')
@section('title', 'Event')

@section('style-section')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/services-cart.css') }}">

    <style type="text/css">
        .table-inputs {
            border-spacing: 0;
            border-collapse: collapse;
        }

        .table-inputs th {
            padding: 0 0.75rem;
            line-height: 1.75rem;
            font-weight: normal;
            font-size: 12px;
            border: 1px solid #d2d2d2;
        }

        .table-inputs td {
            background-color: #fff;
            border-right: 1px solid #d2d2d2;
            padding: 0;
        }

        .table-inputs input {
            border: 0;
            background-color: transparent;
        }

        .ui-timepicker-container {
            position: absolute;
            overflow: hidden;
            box-sizing: border-box
        }

        .ui-timepicker,
        .ui-timepicker-viewport {
            box-sizing: content-box;
            height: 205px;
            display: block;
            margin: 0
        }

        .ui-timepicker {
            list-style: none;
            padding: 0 1px;
            text-align: center
        }

        .ui-timepicker-viewport {
            padding: 0;
            overflow: auto;
            overflow-x: hidden
        }

        .ui-timepicker-standard {
            font-size: 12px;
            font-family: sans-serif;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border-radius: 0 0 3px 3px;
            box-shadow: 0 0 0 .75px #bbb, 2px 1.5px 3px rgba(0, 0, 0, .16);
            margin: 0;
            padding: 0;
        }

        .ui-timepicker-standard a {
            display: block;
            background: transparent;
            filter: none;
            border: none;
            width: 100%;
            text-align: left;
            border-radius: 0;
            font-size: 11.5px;
            padding: 5px 10px;
            line-height: 18px;
            white-space: nowrap;
            text-decoration: none;
            color: inherit;
        }

        .ui-timepicker-standard .ui-state-hover {
            box-shadow: none;
            border: none;
            text-decoration: none;
            background-color: #555;
            color: #fff;
        }

        .ui-timepicker-standard .ui-menu-item {
            margin: 0;
            padding: 0
        }

        .ui-timepicker-hidden {
            display: none
        }

        .ui-timepicker-no-scrollbar .ui-timepicker {
            border: none
        }
    </style>
@section('content')

    @php
        $cartList = session('facilities_cart');
        $cart_count = isset($cartList['ids']) && $cartList['ids'] ? count($cartList['ids']) : 0;
        $cart_count = $cart_count != '' ? $cart_count : 0;
        if (empty($cartList['ids'])) {
            $cartList = ['totalPrice' => 0.0, 'ids' => []];
        }
        $currencySymbol = isset($currency['currencySymbol'])
            ? (CheckEmptyNullVar($currency['currencySymbol']) != ''
                ? $currency['currencySymbol']
                : '$')
            : '$';
        $GeneralSettings = GeneralSettings();
    @endphp

    <!-- ======= Coming Soon ======= -->
    <section class="temple-services"
        style="background-image: url({{ asset('assets/img/elegant-background-with-mandala.png') }});background-size: auto;">
        <div class="container-fluid bg-image shadow-1-strong">
            <div class="row">
                <div class="col-md-12 mx-auto">
                    <div class="row m-0 p-0">

                        <div class="col-md-12">
                            <div class="row" id="searchField">
                                <div class="col-md-12 m-0 p-0">

                                    <div class="px-5 p-4">
                                        <input type="search" name="q" id="search" class="search-text searchKey"
                                            placeholder="Search..." autocomplete="off"
                                            style="margin-left: 10px;height: 70px;">

                                    </div>
                                    <!-- <p class="mt-3 px-5 text-center">Please see <a href="{{ asset('assets/uploads/SSVT_Facility_Rental_Agreement.pdf') }}" class="text-danger" target="_blank">Temple Facilities Rental Agreement <i class="fa fa-download"></i></a> for details about each facility and availability contact the temple manager.</p> -->
                                </div>
                            </div>

                            <div class="row mt-5"
                                style="display: flex; flex-direction: row; align-content: flex-end; align-items: flex-end;">



                                <div class="col-md-6 col-lg-4 col-xl-4 px-4" style="display: flex;align-items: flex-end;">
                                    <div class="row m-0 p-0">
                                        <div class="col-md-12 m-0 p-0">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-lg-3 col-xl-3">
                                    <h2 class="bottomborder text-center pb-1 mb-2"
                                        style="font-weight:bold!important;font-size: 25px!important;">BOOK FACILITIES
                                    </h2>
                                </div>

                                <div class="col-md-6 col-lg-5 col-xl-5">
                                    <div class="d-flex justify-content-end align-items-end" style="border-bottom: 20px;">
                                        <div class="text-white">

                                            <div class="row">
                                                <div class="col-md-12 text-center text-dark">
                                                    <span class="fw-bold" style="padding-left: 34px;">Total
                                                        Amount</span>
                                                </div>

                                                <div class="col-md-12 text-end text-dark">
                                                    <span style="padding-right:6px!important">
                                                        <a href="javascript:void(0)" onclick="ViewCart()"> <i
                                                                class="fa fa-shopping-cart fa-2x"
                                                                style="color:#000030;"></i>
                                                            <span class="cart-count text-dark"
                                                                style="font-size: 14px!important;"></span></a>
                                                    </span>

                                                    <label class="label label-primary"
                                                        style="background: #000030;padding: 5px 14px;color: white;margin: 0px 8px;border-radius: 6px;font-size: 14px;font-weight: 1000;">$                                                         <span
                                                            class="allPrice">0.00</span></label>

                                                    <a href="javascript:void(0)" class="btn btn-success"
                                                        style="background-color: #ffc107;padding: 5px 14px;color: #15102e;border-radius: 6px!important;font-size: 14px;font-weight: 1000;border: 0px!important;margin: 0px 8px;"
                                                        onclick="CartCheckLogin('facilities')">SEND REQUEST</a>

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

                        <div class="justify-content-center align-items-center filter-tab mt-4" style="overflow:hidden">

                            <!-- ============================== -->

                            <div>