@extends('layouts.app')
@section('title', __( 'restaurant.tables'))

@section('content')

<!-- Content Header (Page header) -->


<!-- Main content -->
<section class="" style="background-color:#000000;">
 	<div class="box" style="background-color:#000000;">
        <div class="box-header" style="background-color:#000000;">
        	<h3 class="box-title"></h3>           
            	<div class="box-tools">                    
                </div>          
        </div>
        <div class="box-body" style="background-color:#000000;"> 
                <div class="form-row">                       
                     <div class="col-md-4" id="tab_restau">  
                        <div class="position-relative form-group" >
                      <button  type="button" class="btn btn-block btn-modal btn-primary" >Restaurant Server </button> 
                    </div>
                    </div>
                 
                    <div class="col-md-4" id="tab_room">  
                        <div class="position-relative form-group" >
                      <button  type="button" class="btn btn-block btn-modal btn-primary" > Room Services  </button> 
                    </div>
                    </div>

                    <div class="col-md-4" id="tab_table">  
                        <div class="position-relative form-group" >
                      <button  type="button" class="btn btn-block btn-modal btn-primary" > Administrator Table </button> 
                    </div>
                    </div>                    
                 </div>       
                     		  
             
                <br>   <br>  <br>   <br>
                <from class="" id="tab1" style="background-color:#000000;">
                <div class="form-row">
                        @foreach($tabs3 as $key =>$item ) 
                        <div class="col-md-2">  
                        <div class="position-relative form-group" style="padding: 0px 50px 75px 100px;">
                      <button style="background-color:#A5C639;" type="button" class="btn btn-block btn-modal btn-primary" data-href="{{action([\App\Http\Controllers\Restaurant\TableController::class, 'create'])}}"   data-container=".tables_modal" id="{{ $item->id }}">{{ $item->name }} </button> 
                    </div>
                    </div>
                 @endforeach                
                 </div>
            </from>            
            <from class="" id="tab2" style="display:none" style="background-color:#000000;">
                <div class="form-row">
                        @foreach($tabs2 as $key =>$item ) 
                        <div class="col-md-2">  
                        <div class="position-relative form-group" style="padding: 0px 50px 75px 100px;">
                      <button style="background-color:#A5C639;"  type="button" class="btn btn-block btn-primary btn-modal" data-href="http://174.138.3.35/cafe_roma/public/index.php/pos/create" data-container=".tables_modal" id="{{ $item->id }}">{{ $item->name }} </button> 
                    </div>
                    </div>
                 @endforeach 
                 <br>
                 </div>
            </from>  
            <from class="" id="tab3" style="display:none" style="background-color:#000000;">
                <div class="form-row">
                        @foreach($tabs1 as $key =>$item ) 
                        <div class="col-md-2">  
                        <div class="position-relative form-group" style="padding: 0px 50px 75px 100px;">
                      <button style="background-color:#A5C639;" type="button" class="btn btn-block btn-primary btn-modal" data-href="http://174.138.3.35/cafe_roma/public/index.php/pos/create" data-container=".tables_modal" id="{{ $item->id }}">{{ $item->name }} </button> 
                    </div>
                    </div>
                 @endforeach 
                 <br>
                 </div>
            </from>                  
        </div>
    </div>
    <div class="modal fade tables_modal" tabindex="-1" role="dialog" 
    	aria-labelledby="gridSystemModalLabel">
    </div>
    <br>   <br>  <br>   <br>  <br>   <br>  <br>   <br>  <br>   <br>  <br>   <br>  <br>   <br>
</section>
<!-- /.content -->

@endsection

@section('javascript')
    <script type="text/javascript">
        $(document).ready(function(){

            $(document).on('submit', 'form#table_add_form', function(e){
                e.preventDefault();
                var data = $(this).serialize();

                $.ajax({
                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    success: function(result){
                        if(result.success == true){
                            $('div.tables_modal1').modal('hide');
                            toastr.success(result.msg);
                            tables_table.ajax.reload();
                        } else {
                            toastr.error(result.msg);
                        }
                    }
                });
            });

            //Brands table
        $("#tab_restau").click(function(){ 
       
        $('#tab2').hide();
        $('#tab1').show();  
        $('#tab3').hide();            
        });

    $("#tab_room").click(function(){ 
        
           $('#tab1').hide();
           $('#tab3').hide();
           $('#tab2').show();       
    });

    $("#tab_table").click(function(){ 
        
           $('#tab1').hide();
           $('#tab2').hide();
           $('#tab3').show();       
    });
                 
        });
    </script>
@endsection