@include('../admin.layouts.header')

<!-- <section id="content-wrapper">
            <center><h2>Select restaurant</h2>
        <select name="select_restaurant" id="select_restaurant">
          
        <option selected="selected" disabled>Select Restaurant</option>
            @foreach($get_user_restaurant as $myrestro)
            <option value="{{$myrestro->assigned_sheetid}}">{{$myrestro->restaurant_name}},{{$myrestro->restaurant_location}}</option>
            @endforeach
         
</select>
</center>
<br><br>
<center>
<form method="POST" id="display_menu_form" action="/show_my_screen">
        @csrf
       <h2>Select Screen</h2>
<select id="get_screens" name="select_screen">
<option selected="selected" value="" disabled>Select Screen</option>
</select>
<button id="display_menu">Display menu</button>
</form></center>


</section> -->
<div id="wrapper">
  @include('../user.layouts.sidebar')
  <section id="content-wrapper">
   <div class="container">
  <div class="row justify-content-center">
    <div class="col-xl-6 col-lg-6 col-md-10 col-sm-12 col-12">
<h2 class="form-heading">My Restaurant</h2>
  <div class="Assignment-box select-restaurant-sec">
    <label>Select restaurant</label>
     <select name="select_restaurant" class="form-select" id="select_restaurant">
          
        <option selected="selected" disabled>Select Restaurant</option>
            @foreach($get_user_restaurant as $myrestro)
            <option value="{{$myrestro->assigned_sheetid}}">{{$myrestro->restaurant_name}},{{$myrestro->restaurant_location}}</option>
            @endforeach
         
        </select>
        <form method="POST" id="display_menu_form" action="/show_my_screen">
                @csrf
               <label>Select Screen</label>
        <select id="get_screens" class="form-select" name="select_screen">
        <option selected="selected" value="" disabled>Select Screen</option>
        </select>
        <div class="row justify-content-center">
          <div class="col-lg-8 mt-3">
            <button id="display_menu" class="btn display-btn">Display menu</button>
          </div>
        </div>
        </form>
          </div>

        </div>
        </div>
        </div>
        </section>
        <div class="overlapbg"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

        <script>
        

           $(document).ready(function(){
              if("{{ session()->get('Success') }}"){
                toastr.success("{{ session()->get('Success') }}");
            }
            $.ajaxSetup({
      headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });  
  
    $('#select_restaurant').on('change', function() { 
      screen_id=this.value ; 

            // alert(screen_id);
            sheet_id=screen_id.split(",");
            $("#get_screens").empty();
            // $('#get_screens').append(`<option selected="selected" disabled>Select Screen</option>`);

           for(i=0;i<screen_id.length;i++){
            $.ajax({
      url:"{{route('getsheetfromrestaurant')}}",
      type: 'post',
      data:{screen_id:screen_id[i]},
      // dataType:'JSON',
    
      success: function (data) {
         var parsedData = JSON.parse(data);
         
         my_screen_name=parsedData.screen_name;
         my_sheet_id=parsedData.sheet_id;
         $('#get_screens').append(`<option value="${my_sheet_id}">${my_screen_name}</option>`);
      
       
      },
   
   });
           }          
          });
          $("#display_menu").click(function(event){
            event.preventDefault(); // Prevent the default form submission
           var get_screens=$("#get_screens").val();
          //  alert(get_screens);return;
           if(get_screens === null){
            toastr.error("Kindly select a screen to continue");
            return;
           }
           $("#display_menu_form").submit();
          });

        });
           var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
          return new bootstrap.Tooltip(tooltipTriggerEl)
         });
         
          const $button  = document.querySelector('#sidebar-toggle');
         const $wrapper = document.querySelector('#wrapper');
         
         $button.addEventListener('click', (e) => {
          e.preventDefault();
          $wrapper.classList.toggle('toggled');
         });
        </script>