@extends('space_portal.layouts.master')

@section('title','Creating the third workspace. Join today')

@section('header')
	@include('space_portal.partials.header')
@endsection

@section('content')
<section class="main-container">
    <div class="padding">
        <div class="d-flex align-items-start justify-content-between flex-column flex-md-row mb-3 mb-md-0">
            <div>
                <h1 class="mb-0">Bookings</h1>
                <p class="color-secondary">77 Bookings Found</p>
            </div>
            <div>
                <ul class="list-inline mb-0">
                    {{-- <li class="list-inline-item py-1">
                        <div class="search-box white">
                            <form class="m-0">
                                <input type="text" name="#" class="form-control" id="venues-table-search-field" placeholder="Search">
                                <button type="submit">
                                    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.668 0.666656C6.04055 0.666656 0.667969 6.03924 0.667969 12.6667C0.667969 19.2941 6.04055 24.6667 12.668 24.6667C15.5013 24.6667 18.1053 23.6847 20.1582 22.0425L25.0588 26.9428C25.5796 27.4635 26.4238 27.4635 26.9445 26.9428C27.4652 26.4221 27.4651 25.5778 26.9444 25.0572L22.0438 20.1569C23.686 18.104 24.668 15.5 24.668 12.6667C24.668 6.03924 19.2954 0.666656 12.668 0.666656ZM3.33463 12.6667C3.33463 7.512 7.51331 3.33332 12.668 3.33332C17.8226 3.33332 22.0013 7.512 22.0013 12.6667C22.0013 17.8213 17.8226 22 12.668 22C7.51331 22 3.33463 17.8213 3.33463 12.6667Z" fill="#939393"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </li> --}}
                   

                    <li class="list-inline-item py-1">
                        <form id="getVenue" action="{{route('booking_list')}}" method="get">
                            <div class="dropdown custom-dropdown">
                            <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">My Venues List</a>
                                <ul class="dropdown-menu">
                                    @foreach ($venues as $venue)

                                    <li><a class="dropdown-item" href="#"> 
                                        <option @isset($_GET['venue'])
                                        @if($_GET['venue'] == $venue->id) selected @endif
                                        @endisset  value="{{$venue->id}}" >{{$venue->name}}</option>
                                    </a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
        

        <table id="bookings_table" class="table" style="width:100%">
        <thead>
            <tr>
                <th class="text-center">ID</th>
                <th class="text-start">Date</th>
                <th class="text-start">Time</th>
                <th class="text-start">Company User</th>
                <th class="text-start">Call / Email User</th>
                <th class="text-start">Space</th>
                <th class="text-center">Participants</th>
                <th class="text-center">Verification</th>
            </tr>
        </thead>
        <tbody class="bookings_by_date_rows">
            @include('space_portal.bookings_list')
        </tbody>
    </table>
    </div>
</section>

@endsection


@push('scripts')

<script>
      $('.venues').on('change', function(e){
        $('#getVenue').submit();
        
    }) 
</script>

<script>
//     $('.bookingTime').on('change', function(e){

//       $('#getBookings').submit();
      
//   }) 


  $(document).on('change', ".bookingTime", function(e){
    e.preventDefault();
    var booking = $(this).val()

    var venueId = $("#venue").val()
    // let verified = $('.verified').val();
   
      $.ajax({
            type: "GET",
            data: {booking:booking , venueId:venueId },   // verified : verified
            url: "/bookings-by-date",
            success: function(data) {
                console.log(data);
               if(data.html.length > 0){
                
                    $(".bookings_by_date_rows").html(data.html);
               }else{
                $(".bookings_by_date_rows").html("");
               }
            }
        });
  });
</script>
<script>
$( document ).ready(function() {
$(".goog-te-combo").select2();

// $(".s2-togall-button, .s2-togall-select").css("display", "none"); 

$('select').select2({
    minimumResultsForSearch: -1
});
/* This click event to add class "open" to "custom-selectbox" */
$('.custom-selectbox #day').on('click', function( e ) {
   $(this).parent().toggleClass("open");
   return false;
});

});
</script>
@endpush