@extends('admin.layouts.main')

<title>

Add restaurant

</title>

 @section('content')
   


 <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">
    <div id="content-wrapper" class="screen-form">
    <h2 class="form-heading">Add Restaurant</h2>

      <form id="add_restaurant_form">
           <div class="row justify-content-center">
               <div class="col-lg-12">
                 <div>
                     <label>Restaurant Name:</label>
                    <input type="text" class="form-control" id="restaurant_name" name="restaurant_name">
                 </div>
                  <div>
                       <label>Restaurant Location:</label> 
                   <input type="text" class="form-control" id="restaurant_location" name="restaurant_location">

                  </div>         
                   <div>
                        <label>Assign Screen:</label> 
            
            <select id="select_screen" class="form-select" name="select_screen[]" multiple="multiple">
                @foreach($get_screen as $gs)
                <option value="{{$gs->id}}">{{$gs->screen_name}}</option>
                @endforeach
            </select>
                   </div>            
               </div>
               <div class="col-lg-8 mt-3">
                 <button type="submit" class="btn custom-btn" id="add_restaurant">Add restaurant</button>
             </div>
           </div>
        </form>

     </div>
    </div>

</div></div>
</section>
<div class="overlapbg"></div>
<!--  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="{{asset('js/select2.min.js')}}"></script>
<script>
    $(document).ready(function() {
        $('#select_screen').select2();
    });

    $("#add_restaurant").click(function(event) {
        // alert();
        event.preventDefault();
        {
            var restaurant_name = $("#restaurant_name").val();
            var restaurant_location=$("#restaurant_location").val();;
            var sheet_id = [];
            sheet_id = $("[name='select_screen[]']").val();
            if (restaurant_name.trim() === "") {
                toastr.error("Please enter your restaurant name");
                return;
            }
            if (restaurant_location.trim() === "") {
                toastr.error("Please enter your restaurant location");
                return;
            }
          

            if (sheet_id == "") {
                toastr.error("Select atleast one screen to assign to restaurant ");
                return;
            }
            $.ajaxSetup({
      headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });  
            $.ajax({
      url:"{{route('add_restaurant')}}",
      type: 'post',
      data:{restaurant_name:restaurant_name,restaurant_location:restaurant_location,sheet_id:sheet_id,},
      success: function (data) {
         var parsedData = JSON.parse(data);
         toastr.success(parsedData.msg);
        },
        
      // dataType:'JSON',
    });

            // alert(screen_name);
        }
    });
</script>
       @endsection