@extends('backend.layout')
@section('titre')
    Menus
@endsection

@section('content')
<!-- Container-fluid starts-->
@php $modele='menus' @endphp


            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h5>Ajouter Menu</h5>
                        </div>
                        <div class="col-md-4 text-success text-lg-end iconeadd"><button onclick="window.location.href='{{route("$modele.index")}}'"  class="btn btn-primary">Liste des Menus</button></div>
                    </div>
                </div>
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li> {{$error}}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="card-body">
                    <div class="row product-adding">

                        <div class="col-xl-12">

                                <form enctype="multipart/form-data" action="{{ route('menus.store')}}" class="needs-validation add-product-form" method="POST">
                                    @csrf
                                <div class="form">
                                    
                                    @foreach($GLOBALS['languages'] as $language)
                                    <div class="row form-group multilang lang-{{$language->name}}">
                                        <div class="form-group mb-3 col-md-11">
                                            <label for="{{$language->name}}_inputname" class="col-xl-12 col-sm-12 mb-0">Libelle @if($language->defaut==1) <span> * </span>  @endif
                                                ( {{$language->name}} ) <img style="width: 20px;" src="{{asset('images/languages').'/'.$language->flag}}"></label>
                                            <div class="col-xl-12 col-sm-7">
                                                <input @if($language->defaut==1) {{'required'}} @endif class="form-control" id="{{$language->name}}_inputname" name="{{$language->name}}_name" type="text"    >

                                            </div>

                                        </div>
                                        <div class="p-0 col-sm-1 text-right select-lang"></div>
                                    </div>
                                    @endforeach
                                    
                                    <div class="row">

                                            <div class="form-group mb-3 col-md-12">
                                                <label for="parent_id" class="col-xl-12 col-sm-12 mb-0">parent_id</label>
                                                <div class="col-xl-10 col-sm-7">
                                                    <select name="parent_id" class="custom-select form-control" >
                                                        <option value="">Menu principal</option>
                                                        @foreach($menus as $val_menu)
                                                            <option value="{{$val_menu->id}}">{{$val_menu->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                            </div>

                                    </div>
                                    <div class="row">

                                            <div class="form-group mb-3 col-md-12">
                                                <label for="parent_id" class="col-xl-12 col-sm-12 mb-0">type</label>
                                                <div class="col-xl-10 col-sm-7">

                                                    <select name="type" id="form_type" class="custom-select form-control" required="">
                                                        <option value="">Select type</option>
                                                        @foreach($GLOBALS['menu_type'] as $indice=>$value)
                                                            <option value="{{$indice}}">{{$value}}</option>
                                                        @endforeach

                                                    </select>
                                                </div>

                                            </div>

                                        </div>
                                        <div id="menu_content"></div>
                                        <div class="row">

                                            <div class="form-group mb-3 col-md-12">
                                                <label for="parent_id" class="col-xl-12 col-sm-12 mb-0">afficher dans le menu principale</label>
                                                <div class="col-xl-10 col-sm-7">
                                                    <input type="checkbox" name="menup" value="1">

                                                </div>

                                            </div>

                                        </div>

                                </div>

                                <div class="">
                                    <button type="submit" class="btn btn-primary">Valider</button>
                                    <button type="reset" class="btn btn-dark">Annuler</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

<!-- Container-fluid Ends-->
<script>


    function get_selected(test) {
        idMenu =$('#form_type').val();
        modal = "";
        switch (idMenu) {
            default:
                $("#menu_content").html("");
                break;
            case "1":
                modal = "categories";
                getList(modal,test);
                break;
            case "2":
                modal = "pages";
                getList(modal,test);
                break;
            case "3":
                $("#menu_content").html("");
                break;
            case "4":
                $("#menu_content").html("<div class=\"form-group\"><label for=\"form_link\" class=\"col-sm-2 control-label\">Lien</label><div class=\"col-sm-8\"><input type=\"url\" name=\"link\" id=\"form_name\" class=\"form-control\" maxlength=\"255\"></div></div>");
                break;
        }

    }
    $('#form_type').on('change', function () {
        get_selected(false);

    });
    function getList(modal,test) {
        $.ajax({
            type: 'POST',
            url: ENDPOINT +prefix+ "/"+modal+"/lists",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            dataType: 'json',
            success: function (data) {
                $("#menu_content").html("<div class=\"form-group\"><label for=\"form_link\" class=\"col-sm-2 control-label\"></label><div class=\"col-sm-9\"><select name=\"link\" id=\"form_link\" class=\"form-control\" style=\"width: 100%;\"><option value=\"\">Tous</option></select></div></div>");
                $.each(data.result, function (key, value) {
                    $("#form_link").append("<option value='" + value.id + "'>" + value.name + "</option>");
                });
                if(test==true)
                {
                    $('#form_link').val().prop('selected', true);
                }
            }
        });
    }

</script>
@endsection