@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">
      <!-- <a href="{{ route('newAddons') }}">
          <button class="btn btn-info">New Add-ons</button>
      </a> -->
      @if(env('MOD_DEFAULT_ADDONS') == true)
      <a href="{{ route('assignAddons') }}">
          <button class="btn btn-primary">Assign Default Add-ons</button>
      </a>
      @endif
    </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>



  
  @if(env('MOD_DEFAULT_ADDONS') == true)
  <div class="card-body collapse in">
    <div class="card-block card-dashboard">

      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="baseIcon-tab43" data-toggle="tab" href="#Default" role="tab"
                aria-controls="Default" aria-selected="false">Default Addons</a>
        </li>
      </ul>

      <div class="tab-content px-1 pt-1">
        
        <div role="tabpanel" class="tab-pane active" id="Default" aria-expanded="true" aria-labelledby="baseIcon-tab41">

          @php $suffix = 1; @endphp
          @foreach($default_addons as $row)
            @php $addon_type = $row->type; @endphp  
                
              <div class="row  row_no{{$row->id}}">
                  <div class="col-sm-12">
                      <div class="form-group">
                      <label><b>Addon : {{$suffix++}}</b></label>
                          <div class="row">
                              <div class="col-md-6">
                                  <input type="text" class="form-control" name="title" id="title_{{$row->id}}" value="{{$row->title}}">
                              </div>
                              <div class="col-md-2">
                                  <button class="btn btn-info btn-sm update_addon" data-id="<?php echo $row->id;?>" aria-label="update">Update</button>
                                  <button class="btn btn-danger btn-sm delete_addon" data-id="<?php echo $row->id;?>" aria-label="Delete">Delete</button>
                              </div>
                          </div>
                      </div>
                  </div>

                  <div class="col-sm-12">
                      <?php foreach($row->menu_addons_details as $row){ ?>
                          <div class="form-group">
                              <?php if($addon_type == "radio"){ ?>
                                  <div class="row row_no_item<?php echo $row->id;?>">
                                      <div class="col-md-3">
                                          <div class="input-group margin-bottom-sm">
                                              <span class="input-group-addon"><input type="radio" class="" id="" value="option1"></span>
                                              <input type="text" name="addon_name" id="addon_name_<?php echo $row->id;?>" class="form-control" value="<?php echo $row->addon_name; ?>"/>
                                          </div>
                                      </div>

                                      <div class="col-md-1">
                                          <input type="text" name="addon_price" id="addon_price_<?php echo $row->id;?>" class="form-control" value="<?php echo $row->addon_price ?>"/>
                                      </div>
                      
                                      <div class="col-md-2">
                                          <button class="btn btn-success btn-sm update_addon_detail" data-id="<?php echo $row->id;?>" aria-label="update">Update</button>
                                          <button class="btn btn-warning btn-sm delete_addon_detail" data-id="<?php echo $row->id;?>" aria-label="Delete">Delete</button>
                                      </div>
                                  </div>
                              <?php }else{?>
                                      <div class="row row_no_item<?php echo $row->id;?>">
                                          <div class="col-md-3">
                                              <div class="input-group margin-bottom-sm">
                                              <span class="input-group-addon"><input type="checkbox" class="" id="" value="option1"> </span>
                                              <input type="text" name="addon_name" id="addon_name_<?php echo $row->id;?>" class="form-control" value="<?php echo $row->addon_name; ?>"/>
                                              </div>
                                          </div>
                                          
                                          <div class="col-md-1">
                                              <input type="text" name="addon_price" id="addon_price_<?php echo $row->id;?>" class="form-control" value="<?php echo $row->addon_price ?>"/>
                                          </div>
                                          
                                          <div class="col-md-2">
                                              <button class="btn btn-success btn-sm update_addon_detail" data-id="<?php echo $row->id;?>" aria-label="update">Update</button>
                                              <button class="btn btn-warning btn-sm delete_addon_detail" data-id="<?php echo $row->id;?>"  aria-label="Delete">Delete</button>
                                          </div>
                                      </div>
                              <?php } ?>
                          </div>
                      <?php } ?>
                  </div>
              </div>
        
          @endforeach

        </div>      

    </div>
  </div>
  @endif

</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("getAddonsByMenuItem")}}',
      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_addon', 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("updateAddon")}}',
      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_addon', function(event){  

  event.preventDefault();
  var id = $(this).data('id');
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
  $.ajax({
      type: 'POST',
      url: '{{route("deleteAddon")}}',
      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_addon_detail', function(event){  
  event.preventDefault();
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

  var id = $(this).data('id');
  var addon_name = $('#addon_name_'+id).val();
  var addon_price = $('#addon_price_'+id).val(); 

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

$(document).on('click','body .delete_addon_detail', function(event){  
  event.preventDefault();
  var id = $(this).data('id');
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
  $.ajax({
      type: 'POST',
      url: '{{route("deleteAddonDetail")}}',
      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_addon', function(event){  
  event.preventDefault();
  var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

  var id = $(this).data('id');
  var addon_name = $('#new_addon_name_'+id).val();
  var addon_price = $('#new_addon_price_'+id).val(); 

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

</script>
@endsection 
@endsection