@extends('layouts.master')

@section('title') @lang('translation.Menu') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />

<link href="{{ URL::asset('/assets/libs/spectrum-colorpicker/spectrum-colorpicker.min.css') }}" rel="stylesheet" type="text/css">

@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Menu @endslot
@slot('title') Add Menu @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="create_form" action="{{ route('cms.menu.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
        <div class="card">
            <div class="card-body">
                <h5>Menu Details</h5><br>
                <div class="mb-3 row">
                    <label for="title" class="col-md-2 col-form-label">Menu Title</label>
                    <div class="col-md-6">
                        <input id="title" name="title" type="text" class="form-control" placeholder="Menu Title" required>
                        <div  id="title_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="title_color" class="col-md-2 col-form-label">Menu Title Color</label>
                    <div class="col-md-6">
                        <input type="text" name="title_color" class="colorpicker-showinput-intial form-control" id="title_color" />
                        <div  id="title_color_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="mobile_user" class="col-md-2 col-form-label">Mobile User</label>
                    <div class="col-md-6">
                        <select id="mobile_user" name="mobile_user" class="form-select">
                            <option value=''>Select...</option>
                            <option value="Customer App">Customer App</option>
                            <option value="Angel Driver">Angel Driver</option>
                            <option value="OPS Angel">OPS Angel</option>
                        </select>
                        <div  id="mobile_user_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                
                <div class="mb-3 row">
                    <label for="have_suffix_title" class="col-md-2 col-form-label">Have Suffix</label>
                    
                    <div class="col-md-6  inline-flex-radio">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="radio" name="have_suffix_title" id="have_suffix_title1" value="Yes">
                            <label class="form-check-label" for="have_suffix_title1">
                                Yes
                            </label>
                        </div>

                        <div class="form-check mb-3">
                            <input class="form-check-input" type="radio" name="have_suffix_title" id="have_suffix_title2" value="No">
                            <label class="form-check-label" for="have_suffix_title2">
                                No
                            </label>
                        </div>
                        <div  id="have_suffix_title_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row have_suffix_field">
                    <label for="suffix_title" class="col-md-2 col-form-label">Suffix Title</label>
                    <div class="col-md-6">
                        <input id="suffix_title" name="suffix_title" type="text" class="form-control" placeholder="Suffix Title" />
                        <div  id="suffix_title_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row have_suffix_field">
                    <label for="suffix_title_color" class="col-md-2 col-form-label">Menu Title Color</label>
                    <div class="col-md-6">
                        <input type="text" name="suffix_title_color" class="colorpicker-showinput-intial form-control" id="suffix_title_color" />
                        <div  id="suffix_title_color_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="redirect_url" class="col-md-2 col-form-label">Redirect URL</label>
                    <div class="col-md-6">
                        <input id="redirect_url" name="redirect_url" type="text" class="form-control" placeholder="Redirect URL" />
                        <div  id="redirect_url_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="redirect_type" class="col-md-2 col-form-label">Redirect Type</label>
                    <div class="col-md-6">
                        <input id="redirect_type" name="redirect_type" type="text" class="form-control" placeholder="Redirect Type" />
                        <div  id="redirect_type_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="priority" class="col-md-2 col-form-label">Priority</label>
                    <div class="col-md-6">
                        <select id="priority" name="priority" class="form-select" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="priority_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    <button type="submit" class="btn btn-primary waves-effect waves-light">Save Changes</button>
                </div>
            </div>
        </div>
    </form>
    </div>
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!--tinymce js-->
    <script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/form-editor.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/spectrum-colorpicker/spectrum-colorpicker.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/custom.js') }}"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $(".colorpicker-showinput-intial").spectrum({
        showInitial: true,
        showInput: true
        });
        $('.have_suffix_field').hide();

        $('input[type=radio][name=have_suffix_title]').change(function() {
            if (this.value == 'Yes') {
                $('.have_suffix_field').show();
            }else{
                $('.have_suffix_field').hide();

            }
        });

        
        $( "#create_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('cms.menu.validate') }}";
            form = $( "#create_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit(); 
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
        priorityListOption($('#priority'), true);
    });
    function priorityListOption(sel, newField){
        console.log(sel);
        actionUrl = "{{ route('cms-menu-priority-list') }}";
        $.ajax({
            type: "get",
            url: actionUrl,
            success: function(data){ 
                if(data['data']){
                    if(newField == true){
                        sel.find('option').remove().end();
                        sel.append('<option value="">Select...</option>');                        
                    }
                    $.each(data['data'], function(index, item) {
                        selected ='';
                        if(item != ''){
                            sel.append('<option value="'+ item +'">'+ item +'</option>');
                        }
                    });
                }
            },
            error: function (data) {
                console.log(actionUrl+' Failes.');
            },
        });
    }
    </script>
@endsection