@extends('layouts.app') 
@section('content') 
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/forms/selects/select2.min.css')}}">
<style>
.error-msg {
    background-color: #dd4b39 !important;
    display: none;
}
.error-msg span{
    color: #fff;
}
.form-group{
  margin-bottom: 5px !important;
}
.btn-sm{
  margin-top: 5px;
}
</style>
@endsection
<div class="card box-shadow-1">
  <div class="card-header">
    <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
    <div class="heading-elements">
    </div>
  </div>


  <div class="card-body collapse in">
    <div class="card-block card-dashboard">

        <div class="row">
            <div class="col-md-2">

            <div class="list-group">
              <h4 class="card-title">Categories</h4>
              <hr>
              @foreach($categories as $row)
              <button type="button" class="list-group-item list-group-item-action category" id="{{$row->id}}" data-name="{{$row->category_name}}">{{$row->category_name}}</button>
              @endforeach
            </div>

            </div>
            
            <div class="col-md-3">
              <h4 class="card-title">Menu Items</h4>
              <hr>
              <div id="menu_items_cont">
                <p class="text-danger">Select Category!</p>
              </div>
            </div>

            <div class="col-md-7">
              <h4 class="card-title">Add-ons</h4>
              <hr>
              <div id="addons_cont">
                <p class="text-danger">Select Menuitem!</p>
              </div>
            </div>
        </div>

    </div>
  </div>


</div>

<div class="alert alert-success" id="alert_addon_container" align="right" style="display:none; font-size:16px; padding:10px; right:5px; top:0; position:fixed; z-index:9999; margin-top:6px;"></div>

@section('js')
<script src="{{asset('assets/admin/vendors/js/forms/select/select2.full.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/forms/select/form-select2.min.js')}}" type="text/javascript"></script>
<script>
$(function(){
  $(".select2").select();
});


$('.category').click(function(){
  event.preventDefault();
  var id = this.id;
  var name = $(this).data("name");
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');  
  $.ajax({
      type: 'POST',
      url: '{{route("getMenuItemsByCategory")}}',
      data: {id:id,name:name,_token:CSRF_TOKEN},
      beforeSend: function(){
        $('#menu_items_cont').html('<div class="col-md-12 text-center"><i class="icon-spinner12 text-center"></i></div>');
      },
      success: function (response) {
        $('#menu_items_cont').show().html(response);
        $('#addons_cont').empty();
      }
  });

});

$(document).on('click','body .menu', function(event){
  event.preventDefault();
  var id = this.id;
  var name = $(this).data("name");
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');  
  $.ajax({
      type: 'POST',
      url: '{{route("getPizzaToppingsByMenuItem")}}',
      data: {id:id,name:name,_token:CSRF_TOKEN},
      beforeSend: function(){
        $('#addons_cont').html('<div class="col-md-12 text-center"><i class="icon-spinner12 text-center"></i></div>');
      },
      success: function (response) {
        $('#addons_cont').show().html(response);
      }
  });

});

$(document).on('click','body .update_topping', function(event){  
  event.preventDefault();
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

  var id = $(this).data('id');
  var title = $('#title_'+id).val();

  $.ajax({
      type: 'POST',
      url: '{{route("updateTopping")}}',
      data: {id:id,title:title,_token:CSRF_TOKEN},
      success: function(response) {
          $('#title'+id).val(response.title);
          $('#alert_addon_container').slideDown(500).html('Successfuly updated!').delay(3000).slideUp(300);
      }
  });
});

$(document).on('click','body .delete_topping', function(event){  

  event.preventDefault();
  var id = $(this).data('id');
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
  $.ajax({
      type: 'POST',
      url: '{{route("deleteTopping")}}',
      data: {id:id,_token:CSRF_TOKEN},
      beforeSend: function(){
          $('.row_no'+id).html('<div class="col-md-12 text-center"><i class="fa fa-spinner text-center fa-spin fa-4x fa-fw"></i></div>');
      },
      success: function(response) {
          $('.row_no'+id).remove();
      }
  });
});

$(document).on('click','body .update_topping_detail', function(event){  
    
    event.preventDefault();
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

    var id = $(this).data('id');
    var name = $('#name_'+id).val();
    var half_one = $('#half_one_'+id).val(); 
    var half_two = $('#half_two_'+id).val(); 
    var whole = $('#whole_'+id).val(); 

    $.ajax({
        type: 'POST',
        url: '{{route("updateToppingDetail")}}',
        data: {id:id,name:name,half_one:half_one,half_two:half_two,whole:whole,_token:CSRF_TOKEN},
        success: function(response) {
            $('#name_'+id).val(response.name);
            $('#half_one_'+id).val(response.half_one); 
            $('#half_two_'+id).val(response.half_two); 
            $('#whole_'+id).val(response.whole); 
            $('#alert_addon_container').slideDown(500).html('Successfuly updated!').delay(3000).slideUp(300);
        }
    });
});

$(document).on('click','body .delete_topping_detail', function(event){  
  event.preventDefault();
  var id = $(this).data('id');
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
  $.ajax({
      type: 'POST',
      url: '{{route("deleteToppingDetail")}}',
      data: {id:id,_token:CSRF_TOKEN},
      beforeSend: function(){
        $('.row_no_item'+id).html('<div class="col-md-12 text-center"><i class="fa fa-spinner text-center fa-spin fa-4x fa-fw"></i></div>');
      },
      success: function(response) {
          $('.row_no_item'+id).remove();
      }
  });
});

$(document).on('click','body .add_new_topping', function(event){  
  event.preventDefault();
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

  var id = $(this).data('id');
  var name = $('#new_name_'+id).val();
  var half_one = $('#new_half_one_'+id).val(); 
  var half_two = $('#new_half_two_'+id).val(); 
  var whole = $('#new_whole_'+id).val(); 

  $.ajax({
      type: 'POST',
      url: '{{route("addNewToppingDetail")}}',
      data: {id:id,name:name,half_one:half_one,half_two:half_two,whole:whole,_token:CSRF_TOKEN},
      success: function(response) {
          $('#new_name_'+id).val('');
          $('#new_half_one_'+id).val(''); 
          $('#new_half_two_'+id).val(''); 
          $('#new_whole_'+id).val(''); 
          $('#alert_addon_container').slideDown(500).html('Successfuly added!').delay(3000).slideUp(300);
      }
  });
});

</script>
@endsection 
@endsection