@extends('backend.layouts.app-backend')

@section('content')

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Add Menu</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{{route('admin.dashboard')}}">Dashboard</a>
            </li>
            <li>
                <a href="{{route('admin.menu-ads.index')}}">list</a>
            </li>
            <li class="active">
                <strong>Add Menu</strong>
            </li>
        </ol>
    </div>
</div>

<div class="wrapper wrapper-content animated fadeInRight">

    @include('layouts.message')

    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Add Menu from the following form.</h5>
        </div>
        <div class="ibox-content">
            <form method="POST" enctype="multipart/form-data" id="menuForm">
                
                @csrf()

                <div class="ad-details">
                    
                    <h3><strong>1. Menu Details</strong></h3>

                    <div class="form-group">
                        <label>Menu Title</label>
                        <input type="text" class="form-control" id="inputTitle" name="title" value="" placeholder="Enter  title">
                    </div>

                       
                 
                    <div class="form-group">

                        <label for="inputFeatuedImage" class="label-display-block">Featured or Logo Image</label>

                        <div class="fileinput  fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail"></div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="featured_image" value="">
                                  <input id="featured_image" name="featured_image" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>

                    </div>
                  
                </div> 
                    
             
                <div class="ad-details">
                    
                    <h3><strong>2. Contact Info</strong></h3>
     
                    <div class="form-row row">
                      
                        <div class="form-group col-md-12">
                            <label>Phone </label>
                            <input name="phone" type="text" class="form-control" value="{{old('phone')}}">
                        </div>
                    </div>

                </div>


                <div class="ad-details">
                    
                    <h3><strong>3.Menu Location</strong></h3>
        
                     <div class="form-group">
                        <label>Street, Address </label>
                        <input name="street_address" type="text" class="form-control" value="{{old('street_address')}}">
                    </div>

                    <div class="form-row row">

                        <div class="form-group col-md-4">
                            <label>City </label>
                            <input name="city" type="text" class="form-control" value="{{old('city')}}">
                        </div>

                        <div class="form-group col-md-4">
                            <label>Province </label>
                            <select name="province_id" class="form-control">
                                <option value="">Select Province</option>
                                @foreach($provinces as $province)
                                    <option value="{{$province->id}}" >{{$province->name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group col-md-4">
                            <label>Postal Code</label>
                            <input name="postal_code" type="text" class="form-control" value="{{old('postal_code')}}">
                        </div>

                    </div>

                </div> 

                <div class="hr-line-dashed"></div>
                
                <div class="ad-details">
                
                    <h3><strong>4. Menu list 1</strong></h3>
                    
                    <div class="form-group">
                        <label for="">Menu Heading</label>
                        <input type="text" class="form-control" id="menuHeading" name="menu_heading_1" value="">
                    </div>


                    <div class="menu-list-1-container">
                       
                       <div class="menu-list-1-wrapper">
                        <div class="row">
                            <div class="form-group col-md-7">
                                <label>Title</label>
                                <input name="menu_list_1[1][title]" type="text" class="form-control" value="{{old('title')}}">
                            </div>

                            <div class="form-group col-md-3">
                                <label>Menu Image</label> <br>
                                    
                                <div class="fileinput  fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                    <div>
                                        <span class="btn btn-primary btn-file">
                                            <span class="fileinput-new">Select Image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="hidden" name="menu_list_1[1][image]" value="">
                                            <input id="featured_image" name="menu_list_1[1][image]" type="file" class="form-control" accept="image/*"/>
                                        </span>
                                        <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                         <div class="hr-line-dashed"></div>
                      </div>
                    </div>

                </div>

                <div class="ad-details">
                       
                    <div class="form-group">
                        <a href="javascript:void(0);" class="add-new-menu-list-1 btn btn-primary btn-sm">Add New</a>
                    </div>
                   
                </div>
                

                <div class="hr-line-dashed"></div>

                <div class="ad-details">

                    <h3><strong>5. Menu list 2</strong></h3>
                    
                    <div class="form-group">
                        <label for="">Menu Heading</label>
                        <input type="text" class="form-control" id="menuHeading" name="menu_heading_2" value="">
                    </div>


                    <div class="menu-list-2-container">
                       
                       <div class="menu-list-2-wrapper">
                        <div class="row">
                            <div class="form-group col-md-7">
                                <label>Title</label>
                                <input name="menu_list_2[1][title]" type="text" class="form-control">
                            </div>

                            <div class="form-group col-md-3">
                                <label>Menu Image</label> <br>
                                    
                                <div class="fileinput  fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                    <div>
                                        <span class="btn btn-primary btn-file">
                                            <span class="fileinput-new">Select Image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="hidden" name="menu_list_2[1][image]" value="">
                                            <input id="featured_image" name="menu_list_2[1][image]" type="file" class="form-control" accept="image/*"/>
                                        </span>
                                        <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                         <div class="hr-line-dashed"></div>
                      </div>
                    </div>
                   
                </div>

                <div class="ad-details">
                       
                    <div class="form-group">
                        <a href="javascript:void(0);" class="add-new-menu-list-2 btn btn-primary btn-sm">Add New</a>
                    </div>
                   
                </div>


                <div class="hr-line-dashed"></div>

                <div class="ad-details">

                    <h3><strong>6. Menu list 3</strong></h3>
                    
                    <div class="form-group">
                        <label for="">Menu Heading</label>
                        <input type="text" class="form-control" id="menuHeading" name="menu_heading_3" value="">
                    </div>


                    <div class="menu-list-3-container">
                       
                       <div class="menu-list-3-wrapper">
                        <div class="row">
                            <div class="form-group col-md-7">
                                <label>Title</label>
                                <input name="menu_list_3[1][title]" type="text" class="form-control" value="{{old('title')}}">
                            </div>

                            <div class="form-group col-md-3">
                                <label>Menu Image</label> <br>
                                    
                                <div class="fileinput  fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                    <div>
                                        <span class="btn btn-primary btn-file">
                                            <span class="fileinput-new">Select Image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="hidden" name="menu_list_3[1][image]" value="">
                                            <input id="featured_image" name="menu_list_3[1][image]" type="file" class="form-control" accept="image/*"/>
                                        </span>
                                        <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                         <div class="hr-line-dashed"></div>
                      </div>
                    </div>
                   
                </div>

                <div class="ad-details">
                       
                    <div class="form-group">
                        <a href="javascript:void(0);" class="add-new-menu-list-3 btn btn-primary btn-sm">Add New</a>
                    </div>
                   
                </div>

                <div class="ad-details">
                    
                    <h3><strong>7. Promote Your Ad</strong></h3>
                    
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="">Post Start date</label>
                            <input type="text" class="form-control" id="menupostdatetimepickerfrom" name="post_start_date" value="{{old('post_start_date')}}" placeholder="YYYY-MM-DD" autocomplete="off">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="">Post End date</label>
                            <input type="text" class="form-control" id="menupostdatetimepickerto" name="post_end_date" value="{{old('post_end_date')}}" placeholder="YYYY-MM-DD" autocomplete="off">
                        </div>
                    </div>

                    <div class="form-row row">
                        <div class="form-group col-md-4">
                            <label for="inputTitle">Packages</label>
                            <select name="promote_ad_type" class="form-control">
                                <option value="">--Select Package--</option>
                                @if(isset($adSettings) && count($adSettings))
                                    @foreach($adSettings as $adS)
                                        <option value="{{$adS->id}}">{{$adS->title}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="form-group col-md-4">
                            <label for="inputTitle">Duration/Day</label>
                            <input name="promote_ad_type_duration" type="text" class="form-control" value="{{old('promote_ad_type_duration')}}" readonly="readonly">
                        </div>

                        <div class="form-group col-md-4">
                            <label for="inputTitle">Price($) (per day)</label>
                            <input name="promote_ad_type_price" type="text" class="form-control" value="{{old('promote_ad_type_price')}}" readonly="readonly">
                        </div>
                    </div>


                </div> 
         
                <div class="ad-details">
                    
                    <h3><strong>8.Status</strong></h3>
        
                    <div class="form-group">
                        <label>Ad Status </label>
                        <select name="status" class="form-control">
                            <option value="4">Unpublished</option>
                            <option value="1">Published/Approved</option>
                            <option value="0">Pending</option>
                            <option value="2">Rejected</option>
                            <option value="3">Review</option>
                        </select>
                    </div>                  

                </div>

                <div class="form-group" style="margin-bottom: 50px;margin-left: -15px;">
                    <div class="col-sm-4">
                        <button class="btn btn-primary" type="button" id="menuButton">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
      
</div>
@endsection

@section('header-style')
<link href="{{ asset('backend/jasny-bootstrap/css/jasny-bootstrap.css')}}" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet" />

@stop

@section('footer-scripts')
<script type="text/javascript" src="{{ asset('backend/jasny-bootstrap/js/jasny-bootstrap.js') }}"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>


<script type="text/javascript">

$("#menuButton").on('click',function(e){

    e.preventDefault();

    $("span.uk-text-danger").remove();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
      }
    });

    var form = document.forms.namedItem("menuForm"); // high importance!, here you need change "yourformname" with the name of your form
    var formData = new FormData(form); // high importance!
   
    var self     = $(this);

    $.ajax({
        url: "{{route('admin.menu-ads.store')}}",
        processData: false,
        contentType: false,
        cache: false,
        method: 'POST',
        data: formData,
        beforeSend: function(){

            self.text('Saving..');

            self.attr('disabled','disabled');

        },
        success: function(data){
            window.location.replace("{{route('admin.menu-ads.index')}}");
        },
        error: function(jqXhr, json, errorThrown){
            
            self.text('Save');

            self.removeAttr('disabled');

            var errors = jqXhr.responseJSON;

            $.each(errors['errors'], function (index, value) 
            {
                if(index == 'province_id' || index == 'promote_ad_type')
                {
                    $('#menuForm select[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }
              
                else
                {
                    $('#menuForm input[name='+index+']').after('<span class="uk-form-label uk-text-danger">'+value+'</span>');
                }
            });

            $("html, body").animate({
                scrollTop: 0
            }, 900);  

        }
    });
});




$(function () {


    $("#menupostdatetimepickerfrom").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
        onSelect: function () {
            
            var dt1     = $('#menupostdatetimepickerto');

            var maxdate = dt1.datepicker('getDate');
            
            var minDate = $(this).datepicker('getDate');
            
            dt1.datepicker('option', 'minDate', minDate);
            
            dt1.datepicker('option', 'dateFormat', 'yy-mm-dd');

            dt1.val('');
        }
    });

   $('#menupostdatetimepickerto').datepicker({
        dateFormat: "yy-mm-dd",
        minDate: 0,
          onSelect: function () {

            var start_date          = $('#menupostdatetimepickerfrom').datepicker('getDate');
            var end_date            = $('#menupostdatetimepickerto').datepicker('getDate');
            var dateDiff            = (end_date - start_date)/(86400 * 1000);
            var totalDateDiff       = dateDiff + 1;
            if(totalDateDiff > 1)
            {
                $("input[name=promote_ad_type_duration]").val(totalDateDiff);
            }
            else
            {
                $("input[name=promote_ad_type_duration]").val(totalDateDiff);   
            }
        }
    });


    $("select[name=promote_ad_type]").on('change',function(){
        var ad_setting_id       = $(this).val();
         $.ajax({
            url: "{{route('admin.menu.getSettingPriceById')}}",
            method: 'get',
            data: {ad_setting_id:ad_setting_id},
            success: function(data)
            {
                $("input[name=promote_ad_type_price]").val(data.menu_price);
            }
        });

    });
});



// Menu list 1
var bcnt = $('.menu-list-1-container').children().length;

$('.add-new-menu-list-1').on('click', function() {

    bcnt++;
    var icontainer = ` <div class="menu-list-1-wrapper"><div class="row">

                    <div class="form-group col-md-7">
                        <label for="inputTitle">Title</label>
                        <input type="text" class="form-control" name="menu_list_1[${bcnt}][title]" placeholder="Enter menu list 1 title">
                    </div>

                    <div class="form-group col-md-3">

                        <label for="inputFeatuedImage" class="label-display-block">Menu Image</label> <br>

                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                             
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="menu_list_1[${bcnt}][image]" value="">
                                  <input name="menu_list_1[${bcnt}][image]" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>

                    </div>

                    <div class="form-group col-md-2">
                        <br>
                        <a href="javascript:void(0);" class="remove-menu-list-1 btn btn-danger btn-sm" style="margin-top: 8px;">Remove</a>
                    </div>

                </div><div class="hr-line-dashed"></div></div>`;

    $('.menu-list-1-container').append(icontainer);

    $(".remove-menu-list-1").on('click',function(){
       $(this).parent().parent().parent().remove();
       bcnt--;
    });
});

$(".remove-menu-list-1").on('click',function(){
    $(this).parent().parent().parent().remove();
    bcnt--;
});

// Menu list 2
// Menu list 2
var bcnt1 = $('.menu-list-2-container').children().length;

$('.add-new-menu-list-2').on('click', function() {

    bcnt1++;
    var icontainer = ` <div class="menu-list-2-wrapper"><div class="row">

                    <div class="form-group col-md-7">
                        <label for="inputTitle">Title</label>
                        <input type="text" class="form-control" name="menu_list_2[${bcnt1}][title]" placeholder="Enter menu list 1 title">
                    </div>

                    <div class="form-group col-md-3">

                        <label for="inputFeatuedImage" class="label-display-block">Menu Image</label> <br>

                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                             
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="menu_list_2[${bcnt1}][image]" value="">
                                  <input name="menu_list_2[${bcnt1}][image]" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>

                    </div>

                    <div class="form-group col-md-2">
                        <br>
                        <a href="javascript:void(0);" class="remove-menu-list-2 btn btn-danger btn-sm" style="margin-top: 8px;">Remove</a>
                    </div>

                </div><div class="hr-line-dashed"></div></div>`;

    $('.menu-list-2-container').append(icontainer);

    $(".remove-menu-list-2").on('click',function(){
       $(this).parent().parent().parent().remove();
       bcnt1--;
    });
});

$(".remove-menu-list-2").on('click',function(){
    $(this).parent().parent().parent().remove();
    bcnt1--;
});


// Menu list 3
var bcnt2 = $('.menu-list-3-container').children().length;

$('.add-new-menu-list-3').on('click', function() {

    bcnt2++;
    var icontainer = ` <div class="menu-list-3-wrapper"><div class="row">

                    <div class="form-group col-md-7">
                        <label for="inputTitle">Title</label>
                        <input type="text" class="form-control" name="menu_list_3[${bcnt2}][title]" placeholder="Enter menu list 1 title">
                    </div>

                    <div class="form-group col-md-3">

                        <label for="inputFeatuedImage" class="label-display-block">Menu Image</label> <br>

                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview fileinput-exists thumbnail">
                             
                            </div>
                            <div>
                              <span class="btn btn-primary btn-file">
                                  <span class="fileinput-new">Select Image</span>
                                  <span class="fileinput-exists">Change</span>
                                  <input type="hidden" name="menu_list_3[${bcnt2}][image]" value="">
                                  <input name="menu_list_3[${bcnt2}][image]" type="file" class="form-control" accept="image/*"/>
                              </span>
                              <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                        </div>

                    </div>

                    <div class="form-group col-md-2">
                        <br>
                        <a href="javascript:void(0);" class="remove-menu-list-3 btn btn-danger btn-sm" style="margin-top: 8px;">Remove</a>
                    </div>

                </div><div class="hr-line-dashed"></div></div>`;

    $('.menu-list-3-container').append(icontainer);

    $(".remove-menu-list-3").on('click',function(){
       $(this).parent().parent().parent().remove();
       bcnt2--;
    });
});

$(".remove-menu-list-3").on('click',function(){
    $(this).parent().parent().parent().remove();
    bcnt2--;
});
</script>
@stop