@extends('layouts.app')

@section('content')
@section('css')
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/ui/jquery-ui.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/css/plugins/ui/jqueryui.min.css')}}">
@endsection

<div class="card">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <div class="heading-elements">
            <a class="btn btn-custom waves-effect" href="{{ route('menu') }}">Back To Menu </a>
        </div>
    </div>
      <div class="card-body collapse in">
        <div class="card-block card-dashboard">
              
            <form enctype="multipart/form-data" method="post" action="{{route('saveMenu')}}" validate>
                <input type="hidden" id="id" name="id" value="" />
                {{csrf_field()}}

                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <label for="category" class="col-sm-2">Menu Type</label>
                    <div class="form-group col-sm-5">
                        <label class="c-input c-radio">
                        <input type="radio" name="menu_type" id="single" value="single" checked required>
                            <span class="c-indicator"></span>
                            Single
                        </label>
                        <label class="c-input c-radio">
                        <input type="radio" name="menu_type" id="deal" value="deal" required>
                            <span class="c-indicator" ></span>
                            Deal 
                        </label>
                    </div>
                </div>
    
                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <label for="category" class="col-sm-2">Select Category</label>
                    <div class="form-group col-sm-5">
                        @if(isset($categories) && !empty($categories))
                            <select name="category_id"  id="category_id" class="select2 form-control select2" required>
                                <option value="">Select Category</option>
                                    @foreach($categories as $row)
                                        <option value="{{$row->id}}">{{$row->category_name}}</option>
                                    @endforeach
                            </select>
                        @else
                            <p class="text-danger"><b>Please add menu category first in Menu !</b></p>
                        @endif
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <label for="category" class="col-sm-2">Platform</label>
                    <div class="form-group col-sm-5">
                        <select name="type" class="form-control" id="type" required>
                            <option value="">Platform</option>
                            <option value="online">Online</option>
                            <option value="pos">POS</option>
                            <option value="both">Online and POS</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <label for="category" class="col-sm-2">Order Type</label>
                    <div class="form-group col-sm-5">
                        <select name="order_type" class="form-control" id="order_type">
                            <option value="Delivery & Pickup">Delivery & Pickup</option>
                            <option value="Delivery">Delivery</option>
                            <option value="Pickup">Pickup</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <label for="" class="col-sm-2">Item Name</label>
                    <div class="form-group col-sm-5">
                        <input type="text" placeholder="Item Name" name="menu_item_name" class="form-control" required>
                    </div> 
                </div>
                <div class="form-group row" id="price_div" style="display: block;">
                    <div class="col-sm-1">
                    </div>
                    <label for="input-Default" class="col-sm-2 control-label">Price 1</label>
                    <div class="col-sm-3">
                        <input class="form-control price_title" id="title" name="title[]" placeholder="Title" type="text" required>
                    </div> 
                    <div class="col-sm-2">
                        <input class="form-control price_amt" id="price" name="price[]" placeholder="Price" type="text" required>
                    </div>
                    <div class="col-sm-1">
                        <input class="form-control price_serve" id="serve" name="serve[]" placeholder="Serving" type="text">
                    </div>
                    <div class="col-sm-2">
                        <input name="add_row" id="add_row" class="btn btn-primary"  value="Add More" type="button">
                    </div>
                </div>
                <input type="hidden" name="price_counter" value="1" id="counter">
                <div id="new_row"> </div>
                <div class="form-group"> 
                    <div class="col-sm-12">
                        <div id="price_validation" style="padding-left:190px; color:#D64D54"> 
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <div class="col-sm-2">
                        <label for="exampleTextDescriptionarea">Description</label>
                    </div>
                    <div class="col-sm-5">
                        <fieldset class="form-group">
                            <textarea rows="3" id="description" name="description" class="form-control"></textarea>
                        </fieldset>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <div class="col-sm-2">
                        <h6>Image</h6>
                    </div>
                    <div class="col-sm-5">
                        <label>
                            <input  type="file" id="file1" name="image">
                        </label>
                    </div>
                </div> 
                <div class="row body form-group">
                    <div class="col-sm-3">
                    </div>
                    <div class="col-sm-2">
                        <div id="menuImagePreview" style="height: 120px; width: 120px; border: 1px solid #ccc;">
                        </div>
                    </div>             
                </div> 
                
                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <label for="category" class="col-sm-2">Schedule</label>
                    <div class="form-group col-sm-5">
                        <select name="schedule" class="form-control" id="schedule">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </div>
                </div>

                <div class="form-group col-xs-12" id="time_cont" style="display:none">
                    <div class="row">
                        <div class="col-xs-12 col-sm-3"></div>
                        <div class="col-xs-3 col-sm-3">
                            <label for="Opening Time">Activation Time</label>
                            <input type="text" class="form-control time timepicker" name="activation">
                        </div>
                        <div class="col-xs-3 col-sm-3">
                            <label >Deactivation Time</label>
                            <input type="text" class="form-control time timepicker" name="deactivation">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-1">
                    </div>
                    <label for="category" class="col-sm-2">Buy Today We Deliver Tomorrow</label>
                    <div class="form-group col-sm-5">
                        <select name="buy" class="form-control">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </div>
                </div>

                <div class="col-sm-12" align="right">
                    <a href="{{route('dashboard')}}" class="btn btn-danger">Close</a>
                    <button class="btn btn-success" type="submit">Save changes</button>
                </div>

            </form>
            
        </div>
    </div>
</div>

@section('js')
<script type="text/javascript" src="{{asset('assets/admin/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/admin/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js')}}"></script>
<script src="{{asset('assets/admin/js/core/libraries/jquery_ui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/ui/jquery-ui/buttons-selects.min.js')}}" type="text/javascript"></script>

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

    $('.time').datetimepicker({
        format: 'LT'
    });

    $('#schedule').on('change', function() {
        if(this.value == 1){
            $('#time_cont').show()
        }else{
            $('#time_cont').hide()
        }
    });

    
    $("body").on("change", "#category_id", function(){
        if("booking"==$("option:selected",this).data('type')){
            $('#price_div,.related_items').css('display','none');
        }else{
            $('#price_div,.related_items').css('display','block');
        }
        });
        $('#category_id').change();
     
        $("#formsubmit").submit(function(e){
            if($("#menu_item_name").val() == ""){
                $("#menu_item_name").focus();
                    
                 $("#name_validation").html("Item Name is required");
                msg+= "Name is Required";
            }

            if(msg) { 
                return false;
                e.preventDefault();
            } 
        });

        $("body").on("change", "#file1", function (){
            var files = !!this.files ? this.files : [];
            if (!files.length || !window.FileReader)
                return; // no file selected, or no FileReader support

            if (/^image/.test(files[0].type)) { // only image file
                var reader = new FileReader(); // instance of the FileReader
                reader.readAsDataURL(files[0]); // read the local file

                reader.onloadend = function () { // set image data as background of div
                    $("#menuImagePreview").css({"background": "url(" + this.result + ")","background-size":"cover"});
                }
            }
        });

    });

    $(document).ready(function() {
        // Confirm Delete.
        $("#new_row").on('click', ".remove_field", function() {
            var c_value = $(this).attr('id');
            counter = $("#counter").val();
            if (c_value == counter) {
                $(this).parent('div').remove();
                counter--;
                $("#counter").val(counter);
            } else {
                alert("Please Remove Price " + counter + " First");
                return false;
            }
        });

        $("#add_row").on("click", function() {
            var counter = $("#counter").val();
            counter = parseInt(counter) + 1;
            
            var new_field = '<div class="form-group row"><div class="col-sm-1"></div> <label for="input-Default" class="col-sm-2 control-label">Price ' + counter + '</label>';
            new_field += ' <div class="col-sm-3"><input type="text" class="form-control price_title" id="title' + counter + '" name="title[]' + counter + '" placeholder="Title"></div>';
            new_field += ' <div class="col-sm-2"> <input type="text" class="form-control price_amt" id="price' + counter + '" name="price[]' + counter + '" placeholder="Price"> </div>';
            new_field += ' <div class="col-sm-1"> <input type="text" class="form-control price_serve" id="serve' + counter + '" name="serve[]' + counter + '" placeholder="Serving"> </div>';
            new_field += ' <a href="#" id="' + counter + '" class="remove_field text-danger">Remove</a>  </div>';
            $("#new_row").append(new_field);
            $("#counter").val(counter);  
        });
        
    });
    </script>

@endsection
@endsection