<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<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="<?=base_url('assets/css/services-cart.css')?>">


<main id="main">
  <?php 
  $cartList = $this->session->userdata('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 = array('totalPrice' => 0.00, 'ids' => array());
  }

  ?>

  <!-- ======= Coming Soon ======= -->
  <section class="temple-services" style="background-image: url(<?=base_url('assets/img/paisley.webp');?>);background-size: 162px;">



    <style type="text/css">
     * {
      margin: 0;
      padding: 0
    }

    html {
      height: 100%
    }

    p {
      color: grey
    }

    #heading {
      text-transform: uppercase;
      color: #673AB7;
      font-weight: normal
    }

    #msform {
      text-align: center;
      position: relative;
      margin-top: 20px
    }

    #msform fieldset {
      background: white;
      border: 0 none;
      border-radius: 0.5rem;
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding-bottom: 11px;
      position: relative;
      padding-right: 20px;
    }

    .form-card {
      text-align: left
    }

    #msform fieldset:not(:first-of-type) {
      display: none
    }



    #msform .action-button {
      width: auto;
      background: #673AB7;
      font-weight: bold;
      color: white;
      border: 0 none;
      border-radius: 5px;
      cursor: pointer;
      padding: 11px 32px;
      margin: 10px 0px 10px 5px;
    }

    #msform .action-button:hover,
    #msform .action-button:focus {
      background-color: #311B92
    }

    #msform .action-button-previous {
      width: auto;
      background: #616161;
      font-weight: bold;
      color: white;
      border: 0 none;
      border-radius: 5px;
      cursor: pointer;
      padding: 11px 32px;
      margin: 10px 0px 10px 5px;
    }

    #msform .action-button-previous:hover,
    #msform .action-button-previous:focus {
      background-color: #000000
    }

    .card {
      z-index: 0;
      border: none;
      position: relative
    }

    .fs-title {
      font-size: 25px;
      color: #673AB7;
      margin-bottom: 15px;
      font-weight: normal;
      text-align: left
    }

    .purple-text {
      color: #673AB7;
      font-weight: normal
    }

    

    .fieldlabels {
      color: gray;
      text-align: left
    }

    #progressbar {
      margin-bottom: 8px;
      overflow: hidden;
      color: lightgrey
    }

    #progressbar .active {
      color: #673AB7
    }

    #progressbar li {
      list-style-type: none;
      font-size: 15px;
      width: 33.33%;
      float: left;
      position: relative;
      font-weight: 400
    }


    #progressbar #account:before {
      font-family: FontAwesome;
      content: "\f14b"
    }

    #progressbar #personal:before {
      font-family: FontAwesome;
      content: "\f274"
    }

    #progressbar #payment:before {
      font-family: FontAwesome;
      content: "\f0f6"
    }

    #progressbar #confirm:before {
      font-family: FontAwesome;
      content: "\f00c"
    }

    #progressbar li:before {
      width: 50px;
      height: 50px;
      line-height: 45px;
      display: block;
      font-size: 20px;
      color: #ffffff;
      background: lightgray;
      border-radius: 50%;
      margin: 0 auto 10px auto;
      padding: 2px
    }

    #progressbar li:after {
      content: '';
      width: 100%;
      height: 2px;
      background: lightgray;
      position: absolute;
      left: 0;
      top: 25px;
      z-index: -1
    }

    #progressbar li.active:before,
    #progressbar li.active:after {
      background: #673AB7
    }

    .progress {
      height: 20px
    }

    .progress-bar {
      background-color: #673AB7
    }

    .fit-image {
      width: 100%;
      object-fit: cover
    }


    .fa2{
      margin-top: 7px;

    }
    .fa{
      padding-top: 3px;
    }
    .form-control{
      font-size: 20px!important;
    }

    .form-control2{
      border: 0!important;
    }
    .form-control:focus {
      box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 0%)!important;
    }


    .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>


        <?php  

        $currencySymbol = getCurrencySymbol();
        $GeneralSettings = GeneralSettings();
        $client_info = getclientInfoById(); 

        ?>


        <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">
                        <input type="search" name="q" id="search" class="search-text searchKey" placeholder="Search..." autocomplete="off" style="margin-left: 10px;height: 70px;">

                      </div> -->
                      
                  <!--   </div>
                  </div>  -->



                  <div class="row" 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-end 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)"> <i class="fa fa-shopping-cart fa-2x" style="color:#000030;"></i>
                                <span class="cart-count text-dark" style="font-size: 14px!important;"><?=$cart_count?></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;"><?=getCurrencySymbol();?> <span class="allPrice"><?= sprintf("%.2f", $cartList['totalPrice']); ?></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 class="container-fluid">
                    <div class="row justify-content-center">
                      <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center p-0 mb-2">
                        <div class="card">
                          <form id="msform" method="post">
                            <!-- progressbar -->
                            <ul id="progressbar">
                              <li class="active" id="account"><strong>Event Details</strong></li>
                              <li id="personal"><strong>Choose Rental</strong></li>
                              <!-- <li id="payment"><strong>Terms and Conditions</strong></li> -->
                              <li id="confirm"><strong>Submit Request</strong></li>
                            </ul>
                            <div class="progress">
                              <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                            </div> 
                            <fieldset class="steps">
                              <div class="form-card">



                               <fieldset class="border-2 bg-white">
                                <legend  class="legend-outer  float-none w-auto"> Event Details</legend>
                                <div class="row">
                                  <div class="col-md-6">
                                    <fieldset class="border">
                                      <legend  class="legend-inner float-none w-auto">Event Name<span class="mandate">*</span></legend>
                                      <div class="input-group">
                                        <input type="text" class="form-control form-control2"   name="eventName" id="eventName" placeholder="Enter Event Name" aria-label="eventName" required>
                                        <span class="mandate" id="eventNameErrMsg"></span>
                                      </div>
                                    </fieldset>
                                  </div>

                                  <div class="col-md-6">
                                    <fieldset class="border">
                                      <legend  class="legend-inner float-none w-auto">Event Date<span class="mandate">*</span></legend>
                                      <div class="input-group">
                                        <i class="fa fa-calendar"></i>
                                        <input type="text" class="form-control form-control2 event-datepicker"  name="eventDate" id="eventDate" placeholder="MM/DD/YYYY" aria-label="eventDate" readonly required>
                                        <span class="mandate" id="eventDateErrMsg"></span>
                                      </div>
                                    </fieldset>
                                  </div>
                                </div>

                                <div class="row">
                                  <div class="col-md-6">
                                    <fieldset class="border">
                                      <legend  class="legend-inner float-none w-auto">Event Time<span class="mandate">*</span></legend>

                                      <table class="table-inputs mb-2"> 
                                        <tbody>
                                          <tr>
                                            <td style="width:33.33%">
                                              <div class="input-group" style="padding: 5px;">
                                                <input   name="eventTime" id="eventTime" type="text" class="hasTimepicker start" placeholder="From Time" required>
                                              </div>
                                            </td>
                                            <td style="width:33.33%">
                                              <div class="input-group" style="padding: 5px;">
                                                <input   name="eventEndTime" id="eventEndTime" type="text" class="hasTimepicker end" placeholder="To Time" required>
                                              </div>
                                            </td>
                                          </tr>
                                        </tbody>
                                      </table>


                                    </fieldset>
                                  </div>
                                  <div class="col-md-6">
                                    <fieldset class="border">
                                      <legend  class="legend-inner float-none w-auto">Preferred Language</legend>
                                      <div class="input-group">

                                        <select name="preferredLanguage" id="preferredLanguage" style="color:black!important;" class="form-select form-control border-dark mb-1">
                                          <option value=" " selected disabled>Select Preferred Language</option>
                                          <?php foreach ($preferredLanguage->data as $item) { ?>
                                            <option value="<?=@$item->refDataName?>"><?=@$item->refDataName?></option>
                                          <?php } ?>
                                        </select>
                                      </div>
                                    </fieldset>
                                  </div>

                                  <div class="col-md-6">
                                    <fieldset class="border">
                                      <legend  class="legend-inner float-none w-auto">Estimated Number of Adults<span class="mandate">*</span></legend>
                                      <div class="input-group">
                                        <input type="number" class="form-control form-control2" onkeydown="disableE(event)" name="adults"  id="adults" placeholder="No of Adults"  aria-label="adults" required>
                                      </div>
                                    </fieldset>

                                  </div>
                                  <div class="col-md-6">
                                    <fieldset class="border">
                                      <legend  class="legend-inner float-none w-auto">Estimated Number of Children<span class="mandate">*</span></legend>
                                      <div class="input-group">
                                        <input type="number" class="form-control form-control2"  onkeydown="disableE(event)" name="children" id="children" placeholder="No of Children"  aria-label="children" required>
                                      </div>
                                    </fieldset>
                                  </div>

                                  <div class="col-md-6">
                                    <fieldset class="border">
                                      <legend  class="legend-inner float-none w-auto">Street Address</legend>
                                      <div class="input-group">
                                       <i class="fa fa-map-marker"></i>
                                       <input type="text" class="form-control form-control2 border-dark mb-1 " name="eventLocation" id="eventLocation" placeholder="Event Location" style="color:black!important;" value="<?= $client_info['data'][0]['addressLineOne'].', '.$client_info['data'][0]['city'].', '.$client_info['data'][0]['state'].', '.$client_info['data'][0]['zipCode']; ?>" readonly>
                                     </div>
                                   </fieldset>
                                 </div>

                                 <div class="col-md-6">
                                  <fieldset class="border">
                                    <legend  class="legend-inner float-none w-auto">State</legend>
                                    <div class="input-group">

                                      <input type="text" class="form-control form-control2" name="state" id="stateSelect"  value="<?= $client_info['data'][0]['state'];?>" readonly>
                                    </div>
                                  </fieldset>
                                </div>
                                <div class="col-md-6">
                                  <fieldset class="border">
                                    <legend  class="legend-inner float-none w-auto">City</legend>
                                    <div class="input-group">

                                      <input type="text" class="form-control form-control2" name="city" id="city"  value="<?= $client_info['data'][0]['city'];?>" readonly>

                                    </div>
                                  </fieldset>
                                </div>
                                <div class="col-md-6">
                                  <fieldset class="border">
                                    <legend  class="legend-inner float-none w-auto">Zip Code</legend>
                                    <div class="input-group">
                                      <i class="fa fa-file"></i>
                                      <input type="number" class="form-control form-control2" onKeyPress="if(this.value.length==6) return false;" name="zipcode" id="zipcode" onkeydown="disableE(event)"  value="<?= $client_info['data'][0]['zipCode'];?>" placeholder="Zip Code"  aria-label="zipcode" aria-describedby="basic-addon1" readonly>
                                    </div>
                                  </fieldset>
                                </div>

                                <div class="col-md-12">
                                  <fieldset class="border">
                                    <legend  class="legend-inner float-none w-auto required">Event Description</legend>
                                    <div class="input-group">
                                      <i class="fa fa-file"></i>
                                      <textarea  class="form-control form-control2" name="eventDescription" id="eventDescription" placeholder="Enter Event Description"  aria-label="eventDescription" aria-describedby="eventDescription"></textarea>
                                    </div>
                                  </fieldset>
                                </div>

                              </div>
                              <div class="text-center my-3">
                               <button type="submit" id="eventdetailsButtonn" class="btn btn-success d-none" style="background-color: #008080;padding: 5px 14px;color: #fff;border-radius: 6px!important;font-size: 17px;font-weight: 700;border: 0px!important;margin: 0px 8px;">SUBMIT</button>
                             </div>
                           </fieldset>

                         </div> 

                         <input type="button" name="next" class="next action-button mx-3" style="float:right" value="Next" />
                       </fieldset>

                       <fieldset class="steps">
                         <div class="mt-3">
                           <?php  
                           $rental_types = GetRentalTypes()['data'];
                           ?>
                           <!-- @@@@@@@@@@@@@@@@@@@@@@ Service Types @@@@@@@@@@@@@@@@@@@@@@@@@ -->

                           <ul class="nav nav-tabs" id="myTab" role="tablist">

                            <style type="text/css">
                              .nav-link2.active {
                                color: #fff!important;
                                border: 1px solid #fff!Important;
                                font-weight: 500;
                                margin-bottom: 0px!important;
                                box-shadow: 1px 1px 10px black;
                              }
                              .nav-link2 {
                                padding: 15px 50px !important;
                                font-size: 18px!important;
                                color: #f0ac12 !important;
                                border-radius: 5px!important;
                                font-weight: 500;
                                margin-right: 13px!important;
                                font-family: system-ui!important;
                              }
                              .nav-tabs {
                                --bs-nav-tabs-border-width: 0; 
                                --bs-nav-tabs-border-radius: 0;  
                              }

                            </style>
                            <?php  if(!empty($rental_types)){ foreach ($rental_types as $key => $val) { ?>

                              <li class="nav-item mb-2" role="presentation">
                                <button class="nav-link2 <?= ($key==0)?'serviceTypes1 active':''; ?>" id="home-tab<?= $val['_id']; ?>" data-bs-toggle="tab" data-bs-target="#home-tab-pane<?= $val['_id']; ?>" type="button" role="tab" aria-controls="home-tab-pane<?= $val['_id']; ?>" aria-selected="true" style="font-weight: 700; font-size: 16px;background: url('<?= base_url('assets/img/green-btn-backgroung.jpeg'); ?>');background-size: cover;"><?= (@$val['displayName'] ? @$val['displayName'] : $val['refDataName']); ?></button>
                              </li>

                            <?php } } ?>
                          </ul>
                          <div  class="tab-content" id="myTabContent">

                            <?php if(!empty($rental_types)){ foreach ($rental_types as $key => $val) { ?>

                             <div class="tab-pane table-responsive fade shadow panettttttttt<?= $val['_id']; ?> show <?= ($key==0)?'active':''; ?>" id="home-tab-pane<?= $val['_id']; ?>" role="tabpanel" aria-labelledby="home-tab<?= $val['_id']; ?>" tabindex="0">

                              <?= getRentalServicesByRentalTypes($val['refDataCode'],$val['refDataName'], $cartList); ?>
                            </div>
                          <?php }} ?> 
                        </div>
                      </div>
                      <input type="button" name="previous" style="float:left" class="previous action-button-previous" value="Previous" />
                      <input type="button" name="next" style="float:right" class="next action-button mx-3" value="Next" /> 
                    </fieldset>



                    <fieldset class="steps">
                      <div class="form-card">
                        <div class="row justify-content-center">

                         <div class="row g-0">
                          <div class="col-lg-12 mx-auto" style="background-color:#f5f5f5;padding: 18px;">
                            <h3 class="fw-bold mb-0 text-black pb-3">Request Summary</h3>

                            <div id="event_details">

                            </div>



                            <div id="request-summary-container">


                            </div>
                            



                          </div>
                        </div>

                      </div>
                    </div>

                    <input type="button" name="previous" class="previous action-button-previous" style="float:left" value="Previous" />
                    <input type="button" name="next" class="btn btn-success mx-3" style="background-color: #198754; padding: 13px 19px; color: #ffffff; border-radius: 6px !important; font-size: 14px; font-weight: 1000; border: 0px !important; margin: 10px 0px; float: right;" onclick="CartCheckLogin('facilities')" value="Send Request" /> 
                  </fieldset>
                </form>
              </div>
            </div>
          </div>
        </div>



        <!-- Modal T&C -->
        <div class="modal modal-lg fade" id="term_and_conditions" tabindex="-1" aria-labelledby="term_and_conditionsLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
              <div class="modal-body">

               <div id="rules-regulations">
                <h2>Rules and Regulations for Use of SANATAN MANDIR TAMPA Facilities</h2>
                <ol>
                  <li>
                    <strong>LESSEE WILL ENSURE THE FOLLOWING:</strong>
                    <ol type="a">
                      <li>NO NON-VEGETARIAN FOOD, ALCOHOL, SMOKING of any kind, ILLEGAL DRUGS or Harmful WEAPONS are permitted on the temple premises or its grounds, including Parking Lots.</li>
                      <li>Parking regulations should be strictly observed, particularly the no parking signs and handicapped areas and fire lanes.</li>
                      <li>There will be no vendors or sale of any articles unless prior approval is obtained.</li>
                      <li>Auditoriums, dressing rooms, corridors, bathrooms and outside areas must be maintained clean.</li>
                      <li>After the function is over, any materials brought in to the facility, including decoration materials should be removed completely, and all furniture should be put back properly. (All spills, spilled food, spilled water etc., should be cleaned). Failure to follow above will mean that temple will have to arrange for the cleaning and any resulting charges will be deducted from the refundable security deposit.</li>
                      <li>Temple property shall not be damaged. Special care should be taken to protect chairs, tables, kitchen, equipment, bathroom fixtures, curtains and audio-visual equipment. Decorations should be done as to not damage the walls or ceiling tiles while fixing them or removing them. The manager’s decision on determining cleaning charges and repair charges will be final.</li>
                      <li>Prior notification is required if homam (havan) is required in an area other than the Homakundam to address the issue of fire and smoke hazards.</li>
                      <li>If rental furniture is used they must be received by the lessee and stored at a place designated by the manager. They must be removed at the end of the event/program either for storage or immediate pick-up.</li>
                      <li>The auditorium, dining hall and all other facilities shall be restored to original order by putting back tables, chairs etc., in their respective places.</li>
                      <li>Prior consent is required, if lessee were to use stage props.</li>
                      <li>If lessee needs risers/platform for use on stage, an additional $50 will be charged. Need to inform manager at the time of booking as prior notice is required for set up.</li>
                      <li>If the lessee choses an outside decorator, an additional $100 for set up ( allotted time of 4 hrs) and $100 for take down ( allotted time of 4 hrs) will be charged. Please note that there will be an additional charge of $100 if the decorator needs to be in the premises prior to temple opening time or beyond closing time.</li>
                      <li>No food must be left behind after the event. Lessee is responsible for taking away or disposing of any leftover food after the event.</li>
                    </ol>
                  </li>
                  <li>
                    <strong>RENTING PERIOD:</strong> The renting period is from the time of possession by the lessee to the time of handing over.
                  </li>
                  <li>
                    <strong>BOOKING & CANCELLATION:</strong>
                    <ol type="a">
                      <li>A refundable security deposit equal to $20 of the total charges is to be paid at the time of booking the facility. Unless the security deposit is paid, the booking is considered tentative and the facility may be rented to other parties.</li>
                      <li>If the prepayment is not done at the time of booking, the booking will be automatically cancelled.</li>
                      <li>The booking can be cancelled at least 2 weeks prior to the event date with a penalty of $100/-. No cancellation is permitted during the 2 weeks prior to the event and the security deposit will be forfeited.</li>
                      <li>There will be appropriate charges levied if the function/event goes beyond the time booked for. These charges will be deducted from the security deposit and if the deposit is insufficient lessee will pay for the additional charges.</li>
                      <li>If event continues beyond facility closing times or starts prior to the facility opening times an additional charge of $50 per hour for each extra hour will be charged.</li>
                    </ol>
                  </li>
                  <li>
                    <strong>FACILITY RENTAL AGREEMENT</strong>
                    <p>311 East Palm Avenue, Tampa, Florida 33602, United States</p>
                  </li>
                  <li>
                    <ol type="a">
                      <li>The corridors, common areas plus bathrooms shall remain open for all visitors/devotees when the event / program is going on.</li>
                      <li>Due to the state and local fire department regulations the capacity of the auditorium and dining hall shall not exceed the posted limits.</li>
                    </ol>
                  </li>
                  <li><strong>Outside priests:</strong> If an outside priest is brought to conduct any puja or personal service,
                    lessee will be required to pay equivalent amount (which the temple charges for the
                    respective function) to the temple. Please note charges will increase depending on the
                  number of priests required and services conducted.</li>
                </ol>
              </div>



            </div>
            <div class="modal-footer">
              <input type="button" name="next" class="btn btn-danger" id="cancel" value="Cancel" /> 
              <input type="button" name="next" class="btn btn-success" id="accept" value="Accept" /> 
            </div>
          </div>
        </div>
      </div>
      <!-- Modal T&C Close -->



    </div> 

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

<!-- <input type="text" class="timeSum"> -->

</section>
<!-- End Coming Soon -->




</main><!-- End #main -->



<?php $this->load->view('includes/footer') ?>

<script type="text/javascript" src="<?=base_url('assets/js/paging.js');?>"></script>

<script src="https://cdn.jsdelivr.net/gh/dubrox/Multiple-Dates-Picker-for-jQuery-UI@master/jquery-ui.multidatespicker.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

<script type="text/javascript">

  function submitEventDetailsForm() {

    var formData = $('#msform').serialize();

    $.ajax({
      type: "POST", 
      url: "<?= base_url('facilitiesContollers/Facilities/SubmitEventForm'); ?>", 
      data: formData, 
      success: function(result){
        console.log(result);
      }
    });
  }


  $(document).ready(function(){

   $('#accept').click(function() {

    $('#term_and_conditions').modal('hide');

    $("#action-button").click();
  });




   var current_fs, next_fs, previous_fs; 
   var opacity;
   var current = 1;
   var steps = $(".steps").length;

   setProgressBar(current);

   $(".next").click(function(){



    if($("#eventName").val() == ""){
      alert("Please add event name!");
      return false;
    }
    if($("#eventDate").val() == ""){
      alert("Please add event date!");
      return false;
    }


     if($("#eventTime").val() == ""){
      alert("Please add event from time!");
      return false;
    }

     if($("#eventEndTime").val() == ""){
      alert("Please add event to time!");
      return false;
    }

     if($("#adults").val() == ""){
      alert("Please add Estimated Number of Adults!");
      return false;
    }
     if($("#children").val() == ""){
      alert("Please add Estimated Number of Children!");
      return false;
    }

    $(".datepicker-services").val($("#eventDate").val());



    $(".time_picker_start").val($("#eventTime").val());
    $(".time_picker_end").val($("#eventEndTime").val());


    if(current == 2) {
      var checkboxes = $(".form-check-input:checked");
      if (checkboxes.length === 0) {
        alert("Please choose at least one rental option.");
        return false;
      }

      submitEventDetailsForm();

      var html = '<fieldset class="border-2 bg-white"><div class="row">';


      var dataObject = {
        "Event Name": $("#eventName").val(),
        "Event Date": $("#eventDate").val(),
        "Event Time": $("#eventTime").val(),
        "Event End Time": $("#eventEndTime").val(),
        "Event Address": $("#eventLocation").val(),
        "Event State": $("#stateSelect").val(),
        "Event City": $("#city").val(),
        "Event Language": $("#preferredLanguage").val(),
        "Adults": $("#adults").val(),
        "Children": $("#children").val(),
        "Zip": $("#zipcode").val(),
        "Event Description": $("#eventDescription").val()
      };


      $.each(dataObject, function(key, value) {
        if (value !== '' && value !== null) { 


          html += '<div class="col-md-4"> <fieldset class="border"> <legend  class="legend-inner float-none w-auto">' + key + '</legend> <div class="input-group"> <input type="text" class="form-control form-control2" value="' + value + '" readonly disabled> <span class="mandate"></span> </div> </fieldset> </div>';
        }
      });

      html += '</div></fieldset>';

      $("#event_details").html(html);

      $.ajax({
        type: "POST", 
        url: "<?= base_url('facilitiesContollers/Checkout/updateRequestDetailsWithoutReloadingPage'); ?>", 
        success: function(result){


          $("#request-summary-container").html(result);



        }});
    }




    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    $("#progressbar li").eq($(".steps").index(next_fs)).addClass("active");

    next_fs.show();



    current_fs.animate({opacity: 0}, {
      step: function(now) {
        opacity = 1 - now;

        current_fs.css({
          'display': 'none',
          'position': 'relative'
        });
        next_fs.css({'opacity': opacity});
      },
      duration: 500
    });
    setProgressBar(++current);




  });




   $(".previous").click(function(){

    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    $("#progressbar li").eq($(".steps").index(current_fs)).removeClass("active");

    previous_fs.show();

    current_fs.animate({opacity: 0}, {
      step: function(now) {
        opacity = 1 - now;

        current_fs.css({
          'display': 'none',
          'position': 'relative'
        });
        previous_fs.css({'opacity': opacity});
      },
      duration: 500
    });
    setProgressBar(--current);
  });



   function setProgressBar(curStep){
    var percent = parseFloat(100 / steps) * curStep;
    percent = percent.toFixed();
    $(".progress-bar")
    .css("width",percent+"%")
  }


});


  $(document).ready(function(){

    $('#cancel').click(function(){

      $('#term_and_conditions').modal('hide');
    });
  });

  $(document).ready(function() {

    $('.servicesDataTable').paging({limit:20});
    $("[data-page='0']").click();
  });


  function showSection(selectElement, id) {

    loader.on();
    var selectedOption = selectElement.options[selectElement.selectedIndex];
    var selectedKey = selectedOption.getAttribute('key');


    var SelectedPrice = parseFloat(selectElement.value).toFixed(2);





    $("#start_time" + id).val('');
    $("#end_time" + id).val('');

    if (selectedKey.trim().toLowerCase() === 'hourly' || selectedKey.trim().toLowerCase() === 'morning' || selectedKey.trim().toLowerCase() === 'afternoon' || selectedKey.trim().toLowerCase() === 'evening' || selectedKey.trim().toLowerCase() === 'full day') {

      var shift = selectedKey.trim().toUpperCase();


      $.ajax({
        type: "POST", 
        url: "<?= base_url('facilitiesContollers/Facilities/getShiftTimings'); ?>", 
        data: {shift: shift}, 
        dataType: "json",
        success: function(result){


          $("#start_time"+id).val(result.startTime);
          $("#end_time"+id).val(result.endTime);

          $("#time_section_" + id).removeClass('d-none');
          $("#date_section_" + id).removeClass('d-none');



          if (selectedKey.trim().toLowerCase() === 'hourly') {
            $("#start_time" + id).prop('disabled', false);
            $("#end_time" + id).prop('disabled', false);



          } else {
            $("#start_time" + id).prop('disabled', true);
            $("#end_time" + id).prop('disabled', true);
          }


          var spanId = "Totalprice_" + id;

          var checkboxId = "checkbox_" + id;

          $("#" + spanId).text('$ ' + SelectedPrice);
          $("#" + checkboxId).attr('data-price',SelectedPrice);
          $("#" + checkboxId).attr('data-servicedesc',selectedKey);

        }});



    } else {
      $("#date_section_" + id).removeClass('d-none');
      $("#time_section_" + id).addClass('d-none');
    }


    loader.off();
  }



  function addTocart(element)
  {

    var totalPrice = 0;
    var cart_type = 'FACILITIES';
    var ids = [];
    var qty = [];
    var ctg = [];
    var serviceTypes = [];
    var serviceName = [];
    var startDate = [];
    var startTime = [];
    var serviceAmount = [];
    var description = [];
    var image = [];
    var bookingTypes = [];
    var start_time = [];
    var end_time = [];
    var service_desc = [];


    var checked_id = $(element).attr('data-id');


    var bookingType_id = "booking_type" + checked_id;


    if ($("#"+bookingType_id).length > 0) {

      var bookingTypeValue = $("#" + bookingType_id).val();

      if (bookingTypeValue === null || bookingTypeValue === "") {
        $(element).prop('checked', false);
        $("#"+bookingType_id).focus();
        $("#"+bookingType_id).notify(
          "Please select shift!", {
            position: "right"
          }
          );
        return false;
      }
    }

    $('input[name="services_id[]"]:checked').each(function() {
      id = $(this).attr('data-id');

      var init_qty = parseInt($("#quantity-input"+id).val());
      init_qty = init_qty?parseInt(init_qty):1;
      totalPrice = parseFloat(totalPrice)+(parseFloat($(this).attr('data-price'))*init_qty);
      ctg.push($(this).attr('data-category')); 
      serviceTypes.push($(this).attr('data-service-type')); 
      serviceName.push($(this).attr('data-service-name')); 
      image.push($(this).attr('data-image'));

      description.push($(this).attr('data-description')); 


      var keyAttribute = $(this).attr("data-servicedesc");


      bookingTypes.push(keyAttribute); 
      start_time.push($("#start_time"+id).val()); 
      end_time.push($("#end_time"+id).val()); 

      startDate.push($("#datepicker_"+id).val()); 
      startTime.push($("#timepicker_"+id).val()); 
      serviceAmount.push($(this).attr('data-price')); 
      ids.push($(this).attr('data-id')); 
      qty.push(init_qty); 
      service_desc.push($(this).attr('data-servicedesc'));
    });

    $(".cart-count").text(ids.length);
    $(".allPrice").text((totalPrice / 1).toFixed(2));
    $.ajax({
      type: "POST", 
      url: "<?= base_url('facilitiesContollers/Facilities/addCart'); ?>", 
      data: {ids: ids, totalPrice:totalPrice, qty: qty, ctg: ctg, serviceTypes: serviceTypes, serviceName: serviceName, startDate: startDate, startTime: startTime, serviceAmount: serviceAmount, cart_type: cart_type, image: image, description: description, bookingTypes: bookingTypes, start_time: start_time, end_time: end_time,service_desc : service_desc}, 
      success: function(result){
        console.log(result);
        
      }});
  }

  function clearCart() {
    $('input[name="services_id[]"]:checked').each(function() {
      $("input[name='services_id[]']").prop('checked', false);
    });

    if ($("input[name='allCheck']").is(":checked")) {
      $("input[name='allCheck']").prop('checked', false);
    }
    addTocart();
  }

  function quantityMinusFunction(id) {

    var totalPrice = 0;
    var init_qty = parseInt($('#quantity-input'+id).val());
    if (init_qty > 1) {
      init_qty = init_qty?parseInt(init_qty)-1:0;
      $('#quantity-input'+id).val(init_qty);



      var initialPrice = $("#price_"+id).text();
      var initialResultAmt = initialPrice.replace(/\$/g, "");

      var subTotal = init_qty*initialResultAmt;

      $("#Totalprice_"+id).text("$ "+subTotal.toFixed(2));


    }

    addTocart();
  }

  function quantityPlusFunction(id) {
    var totalPrice = 0;
    var init_qty   = parseInt($('#quantity-input'+id).val());
    init_qty = init_qty?parseInt(init_qty)+1:0;
    $('#quantity-input'+id).val(init_qty);


    var initialPrice = $("#price_"+id).text();
    var initialResultAmt = initialPrice.replace(/\$/g, "");
    var subTotal = init_qty*initialResultAmt;


    $("#Totalprice_"+id).text("$ "+subTotal.toFixed(2));
    addTocart();
  }


  function  ViewCart(){
    if ( $(".cart-count").text() > 0) {
      window.location.href = "<?=base_url('facilitiesContollers/Facilities/ViewCart')?>";

    }else{
      swal({
        title: "Your cart is empty!",
        text: "Please add some items to your cart.",
        icon: "warning",
        confirmButtonText: 'OK',
        confirmButtonColor: '#005D4B',
      });


    }

  }

  function CartCheckLogin(page){

    $('#term_and_conditions').modal('show');


    $('#accept').click(function() {

      if ($(".cart-count").text() > 0) {


       var page_name = page;
       event.preventDefault();
       $.ajax({
        url: "<?=base_url('check-login-status')?>",
        type: "POST",
        dataType: "json",
        success: function(data) 
        {


         if (data == 0) {
           var res = openLoginModal(page_name);

         }else{

          BookNow();

        }

      }
    });

     }else{
      swal({
        title: "Your cart is empty!",
        text: "Please add some items to your cart.",
        icon: "warning",
        confirmButtonText: 'OK',
        confirmButtonColor: '#005D4B',
      });
    }

  });



  }

  function changebtnStyles(id){
    $(".styles").removeClass('active-services');
    $(".styles").addClass('services');
    $("#"+id).addClass('active-services');
    $("#"+id).removeClass('services');
  }




  var tithiDates = [];

  function getDatesOfTithi(tithiVal) {
    $.ajax({
      type: "POST",
      url: "<?= base_url('Services/getThithiNext90Days'); ?>",
      data: {
        tithi: tithiVal
      },
      dataType: 'json',
      success: function(result) {
        tithiDates = result;

        $("#datesArray").val(tithiDates);
      }
    });
  }

  $(document).on('click', '.datepicker-services', function() {
    var dayVal = $(this).attr('daytype');
    var nclickF = $(this);

    $.ajax({
      type: "POST",
      url: "<?= base_url('Services/getThithiNext90Days'); ?>",
      data: {
        tithi: dayVal
      },
      dataType: 'json',
      success: function(result) {
        $("#datesArray").val(result);



        if (dayVal !== '') {
          nclickF.notify(
            "You can select only " + dayVal + " dates!", {
              position: "right",
              className: "success",
            }
            );
        } else {
          nclickF.notify(
            "You can select any date!", {
              position: "right",
              className: "success",
            }
            );
        }


        if (!$(nclickF).hasClass('hasDatepicker')) {
          if (dayVal == '') {
            $(nclickF).multiDatesPicker({
              dateFormat: "mm/dd/yy",
              minDate: 0,
              changeMonth: true,
              changeYear: false,
              onSelect: function(dateText, inst) {
                $(this).datepicker('show');
                addTocart();
              }
            });
          } else {

            $(nclickF).multiDatesPicker({
              dateFormat: "mm/dd/yy",
              minDate: 0,
              changeMonth: true,
              changeYear: false,
              onSelect: function(dateText, inst) {
                $(this).datepicker('show');
                addTocart();
              },


              beforeShowDay: function(date) {
                var dayOfWeek = $.datepicker.formatDate('DD', date);
                var dateInMMDDYYFormat = $.datepicker.formatDate('yy-mm-dd', date);

                var tithis = ["PRATIPADA", "DWITIYA", "TRITIYA", "CHATURTHI", "PANCHAMI", "SHASHDI", "SAPTAMI", "ASHTAMI", "NAVAMI", "DASHAMI", "EKADASHI", "DWADASHI", "TRAYODASHI", "CHATURDASHI", "PURNIMA", "AMAVASYA"];

                if (dayOfWeek.toUpperCase() === dayVal.toUpperCase()) {
                  return [true];
                } else if (tithis.includes(dayVal.toUpperCase())) {

                  var tithiDates = $("#datesArray").val();




                  var startDatearray = tithiDates.split(" ").pop().split(",");
                  return [startDatearray.includes(dateInMMDDYYFormat)];



                } else {
                  return [false];
                }
              }
            });
          }
        }

        $(nclickF).datepicker('show');

      }
    });

  });



  var $begin = $('.hasTimepicker.start');
  var $end = $('.hasTimepicker.end');
  var $input = $('.timeSum');

  var timeOptions = {
    interval: 15,
    dropdown: true,
    change: function(time) {
      sumHours();
    }
  }

  $begin.timepicker(timeOptions);
  $end.timepicker(timeOptions);

  $end.on('focus', function() {
    $(this).select(); 
  });

  $begin.on("click focus", function () {
    $(this).select();
  });

  function sumHours() {

    var time1 = $begin.val();
    var time2 = $end.val();

    // alert(time1);
    // alert(time2);
    if (time1 && time2) {
      var diff = (Math.abs(new Date(time2) - new Date(time1)) / 36e5).toFixed(2);

      // alert(diff);
      $input.val(diff); 
    } else {
      $input.val(''); 
    }
  }




  $(document).ready(function() {
    $('.event-timepicker').mdtimepicker();
  });



  $(document).on('click', '.event-datepicker', function() {
    if (!$(this).hasClass('hasDatepicker')) {
      $(this).datepicker({
        dateFormat: "mm/dd/yy",
        multidate: true,
        minDate: 0
      });
    }
    $(this).datepicker('show');
  });


  $(".phone").on('input', function(){

    var  phoneField = this;
    var phoneValue = phoneField.value;
    var output;
    phoneValue = phoneValue.replace(/[^0-9]/g, '');
    var area = phoneValue.substr(0, 3);
    var pre = phoneValue.substr(3, 3);
    var tel = phoneValue.substr(6, 4);
    if (area.length < 3) {
      output = "(" + area;
    } else if (area.length == 3 && pre.length < 3) {
      output = "(" + area + ")" + " " + pre;
    } else if (area.length == 3 && pre.length == 3) {
      output = "(" + area + ")" + " " + pre + " - "+tel;
    }
    phoneField.value = output;

  });




  function BookNow(){



    swal({
      title: "Confirmation?",
      text: "Please confirm your Facility Booking Request!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#008080",
      confirmButtonText: "Yes",
      closeOnConfirm: false,
      showLoaderOnConfirm: true
    },
    function(){


      $.ajax({
        url: "<?=base_url('facilitiesContollers/Facilities/BookFacilities')?>",
        type: "POST",
        dataType: "json",
        success: function(response) 
        {

          if (response.statusCode == 1) {
            swal({
              html: true,
              title: "Order No: "+response.data[0].invoiceNo,
              text: "Facility Booking Request submitted successfully. You will receive further communications from Temple Manager",
              type: "success",
              confirmButtonText: 'OK',
              confirmButtonColor: '#008080',
            },
            function(){
              window.location.href="<?=base_url();?>";
            });

          }else{
            swal({
              html: true,
              title: "Failed!",
              text: "<span>Transaction Failed!<span>",
              type: "error",
              confirmButtonText: 'OK',
              confirmButtonColor: '#008080',
            },
            function(){
              window.location.reload(); 
            });
          }

        }             
      });

    });

    

  }

  $(document).ready(function() {
    $("#checkoutButton").click(function() {
      var eventDetails = $("#eventName").val();
      var eventDate = $("#eventDate").val();
      $("#eventdetailsForm").submit();

    });

    $("#eventdetailsForm").submit(function(e) {
      e.preventDefault();
      if (this.checkValidity()) {
        BookNow();
      }
    });
  });



  function disableE(event) {
    var keyCode = event.keyCode || event.which;
    var char = String.fromCharCode(keyCode);
    if (char.toLowerCase() === 'e') {
      event.preventDefault();
    }
  }



</script>




<?php $this->load->view('includes/script') ?>
