@extends('admin.layouts.app')
@section('content')



<div class="row page-titles">
    <div class="col-md-12">
        <h4 class="text-white">YSİİD</h4>
    </div>
    <div class="col-md-6">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Anasayfa</a></li>
            <li class="breadcrumb-item active">Menü Düzenle</li>
        </ol>
    </div>
    <div class="col-md-6 text-right">
        <form class="app-search d-none d-md-block d-lg-block">
            <input type="text" class="form-control" placeholder="Search &amp; enter">
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h4 class="card-title mt-2">Menü Düzenle</h4>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-4 pb-5 newArea">
                <div class="form-group  has-success">
                    <label class="form-label">Menü Başlığı</label>
                    <input type="text" id="menuName" class="form-control" placeholder="*Örneğin: Hakkımızda">
                    <small class="form-control-feedback"> Menü üzerinde gözükecek alandır. </small>
                </div>

                <div class="form-group  has-success">
                    <label class="form-label">Menü Başlığı İngilizce</label>
                    <input type="text" id="menuNameEn" class="form-control" placeholder="*Örneğin: Hakkımızda">
                    <small class="form-control-feedbamenuck"> Menü üzerinde gözükecek alandır. </small>
                </div>


                <div class="form-group has-success">
                    <label class="form-label">Tür Seçiniz</label>
                    <select id="menuType" onchange="turSec(this)" class="form-control form-select">
                        <option selected value="Sayfa">Sayfa</option>
                        <option value="Ürün Listesi">Ürün Listesi</option>
                        <option value="Şemalar">Şemalar</option>
                        <option value="Blog Listesi">Blog Listesi</option>
                        <option value="Link">Link</option>
                        <option value="Statik">Statik</option>
                    </select>
                    <small class="form-control-feedback"> Yukarıda seçmiş olduğunuz türe göre menüye eleman
                        eklenecektir. </small>
                </div>

                <div class="m_content">
                    <div class="form-group has-success">
                        <label class="form-label">Sayfa Seçiniz</label>
                        <select id="pageName" class="form-control form-select">
                            @foreach ($pages as $key => $value)
                            <option value="{{ $value->page_title_seo }}">{{ $value->page_title }}</option>
                            @endforeach
                        </select>
                        <small class="form-control-feedback"> Sayfa seçiniz menüde ilgili alana tıklanınca açılacak
                            alandır. </small>
                    </div>
                </div>


                <div class="m_link" style="display:none">
                    <div class="form-group  has-success">
                        <label class="form-label">Menü Link</label>
                        <input type="text" id="Link" class="form-control" placeholder="*Örneğin: https://google.com">
                        <small class="form-control-feedbamenuck"> Tıkladığında yönlendirilecek sayfa </small>
                    </div>

                </div>


                <div class="m_static" style="display:none">
                    <div class="form-group  has-success">
                        <label class="form-label">Statik Dosya</label>
                        <select id="staticFiles" class="form-control form-select">

                            <option value="" selected disabled>Seçiniz</option>

                        </select>
                        <small class="form-control-feedbamenuck"></small>
                    </div>

                </div>










                <button onclick="newItem(this)" class="btn btn-primary btn-block">Ekle</button>
            </div>

            <div class="col-6  pb-5 px-5">
                <h3 class="strong">Menü Ağacı</h3>
                <span>Sürükle bırak ile menü yerini değiştirebilir veya alt menü oluşturabilirsiniz. Menü adına tıklayınca açılan panelden düzenleme işlemi yapabilir veya silme işlemi yapabilirsiniz.</span>
                <hr class="mb-4">
                <div class="myadmin-dd-empty dd" id="nestable2">
                    <br />
<b>Warning</b>:  Undefined variable $menu in <b>/home/ysiidorg/public_html/resources/views/admin/pages/menuEdit.blade.php</b> on line <b>135</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/ysiidorg/public_html/resources/views/admin/pages/menuEdit.blade.php</b> on line <b>10</b><br />
                </div>
            </div>
        </div>
    </div>
</div>
<div id="tooltipmodals" class="modal" tabindex="-1" role="dialog" aria-labelledby="modal_edit_title" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal_edit_title">Menü düzenle</h4>

            </div>
            <div class="modal-body" id="menu_edit_modal">

            </div>
            <div class="modal-footer">
                <button type="button" id="edit_delete" class="btn btn-danger waves-effect text-white" data-dismiss="modal" data-bs-dismiss="modal">Sil</button>
                <button type="button" id="edit_save" class="btn btn-success waves-effect text-white" data-dismiss="modal" data-bs-dismiss="modal">Kaydet</button>
                <button type="button" id="edit_close" class="btn btn-info waves-effect text-white" data-dismiss="modal" data-bs-dismiss="modal">Kapat</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script>
    function staticFiles() {

        // staticFiles

        $("#staticFiles").empty();
        $("#staticFiles").append(`<option value="" disabled selected>Seçiniz</option>`);


        $.ajax({
            type: "GET",
            url: "{{route('ListStaticFolder')}}",
            success: function(response) {
                response = JSON.parse(response);
                response.forEach(element => {
                    $("#staticFiles").append(`<option value="${element}">${element}</option>`);
                });
            }
        });


    }

    function edit_delete(id) {

        if (confirm("Gerçekten silmek istiyor musunuz?") === true) {

            $.ajax({
                type: "post",
                url: "/admin/menu-sil",
                data: {
                    id
                },
                success: function(response) {
                    if (response == "ok") {
                        location.reload();
                    }
                }
            });


        } else {

        }


    }

    function edit(e) {



        $('#tooltipmodals').modal('show');
        let id = $(e).attr('data-id');
        let name = $(e).attr('data-name');
        $("#modal_edit_title").html(`<strong><span class="text-danger">"${name}"</span> adlı menüyü düzenliyorsunuz</strong>`);
        $("#edit_save").attr('onclick', `edit_save('${id}')`);
        $("#edit_delete").attr('onclick', `edit_delete('${id}')`);


                
            let staticArray = [];
            
            


        $("#staticFiles").empty();
        $("#staticFiles").append(`<option value="" disabled selected>Seçiniz</option>`);




        $.ajax({
            type: "GET",
            url: "{{route('ListStaticFolder')}}",
            success: function(staticResponse) {
                    staticArray = JSON.parse(staticResponse);
            }
        });

        setTimeout(() => {
            
     
        $.ajax({
            type: "POST",
            url: "/admin/menu-duzenle",
            data: {
                id
            },
            success: function(response) {

                response = JSON.parse(response);
                let staticList;
                staticArray.forEach(element => {
                    staticList += `<option ${element == response.target ? ' selected ' : ''} value='${element}'>${element}</option>`
                });



                let html = `
                <div class="newArea">
                    <div class="form-group">
                        <label class="form-label">Menü Başlığı</label>
                        <input type="text" id="menuName_edit" value="${response.menuTitle}" class="form-control" placeholder="*Örneğin: Hakkımızda">
                        <small class="form-control-feedback"> Menü üzerinde gözükecek alandır. </small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Menü Başlığı İngilizce</label>
                        <input type="text" id="menuNameEn_edit" value="${response.menuTitleEn}" class="form-control" placeholder="*Örneğin: Hakkımızda">
                        <small class="form-control-feedbamenuck"> Menü üzerinde gözükecek alandır. </small>
                    </div>

                    <div class="form-group has-success">
                        <label class="form-label">Tür Seçiniz</label>
                        <select id="menuType_edit" onchange="turSec(this)" class="form-control form-select">
                            <option ${response.menuType == "Sayfa"  && "selected"} value="Sayfa">Sayfa</option>
                            <option ${response.menuType == "Ürün Listesi" && "selected" } value="Ürün Listesi">Ürün Listesi</option>
                            <option ${response.menuType == "Şemalar" && "selected" } value="Şemalar">Şemalar</option>
                            <option ${response.menuType == "Blog Listesi" && "selected" } value="Blog Listesi">Blog Listesi</option>
                            <option ${response.menuType == "Link" && "selected" } value="Link">Link</option>
                            <option ${response.menuType == "Statik" && "selected" }  value="Statik">Statik</option>

                        </select>
                        <small class="form-control-feedback"> Yukarıda seçmiş olduğunuz türe göre menüye eleman
                            eklenecektir. </small>
                    </div>
                  
                    <div class="m_content " style="${response.menuType != "Sayfa"  && "display:none"}">
                        <div class="form-group has-success">
                            <label class="form-label">Sayfa Seçiniz</label>
                            <select id="pageName_edit" class="form-control form-select">
                                @foreach ($pages as $key => $value)
                                <option value="{{ $value->page_title_seo }}">{{ $value->page_title }}</option>
                                @endforeach
                            </select>
                            <small class="form-control-feedback"> Sayfa seçiniz menüde ilgili alana tıklanınca açılacak
                                alandır. </small>
                        </div>
                    </div>

                      <div class="m_static" style="${response.menuType != "Statik"  && "display:none"}">
                    <div class="form-group  has-success">
                        <label class="form-label">Statik Dosya</label>
                        <select id="staticFilesEdit" class="form-control form-select">

                            ${staticList}

                        </select>
                        <small class="form-control-feedbamenuck"></small>
                    </div>

                </div>



                    <div class="m_link" style="${response.menuType != "Link"  && "display:none"}">
                    <div class="form-group  has-success">
                        <label class="form-label">Menü Link</label>
                        <input type="text" id="Link_edit" value="${response.target}" class="form-control" placeholder="*Örneğin: https://google.com">
                        <small class="form-control-feedbamenuck"> Tıkladığında yönlendirilecek sayfa </small>
                    </div>

                </div>
                </div>
                `;



                $("#menu_edit_modal").html(html);


            }
        });
   }, 100);

        
      




    }



    function edit_save(id) {
        var type = $("#menuType_edit").find('option:selected').val();
        var pageName = $("#pageName_edit").find('option:selected').val();
        var menuName = $("#menuName_edit").val();
        var menuNameEn = $("#menuNameEn_edit").val();
        var Static = $("#staticFilesEdit").find('option:selected').val();
        var link = $("#Link_edit").val();
        var menuItem = {
            "_token": "{{ csrf_token() }}",
            "pageName": pageName,
            "menuName": menuName,
            "menuNameEn": menuNameEn,
            "type": type,
            "id": id,
            "link": link,
            "static": Static
        }

        $.ajax({
            type: "PATCH",
            url: "/admin/menu-duzenle",
            data: menuItem,
            success: function(response) {
                if (response == "ok") {
                    location.reload();
                }
            }
        });

    }



    function newItem(e) {
        var type = $("#menuType").find('option:selected').val();
        var pageName = $("#pageName").find('option:selected').val();
        var menuName = $("#menuName").val();
        var menuNameEn = $("#menuNameEn").val();
        var Link = $("#Link").val();
        var Static = $("#staticFiles").find('option:selected').val();
        var menuItem = {
            "_token": "{{ csrf_token() }}",
            "pageName": pageName,
            "menuName": menuName,
            "menuNameEn": menuNameEn,
            "type": type,
            "link": Link,
            "static": Static
        }

        if (menuName == '' || menuNameEn == '') {
            alert("Menü adı boş bıraklamaz!");
            return;
        }

        $.ajax({
            type: "POST",
            url: "/admin/menu-duzenle-add",
            data: menuItem,
            success: function(response) {
                var html = `
                        <li class="dd-item dd3-item" data-id="${response}">
                            <div class="dd-handle dd3-handle"></div>
                            <div class="dd3-content" style='cursor:pointer' onclick="edit(this)" data-id='${response}' data-name='${menuName}'>${menuName}</div>
                        </li>`;
                $("#nestable2 > ol").append(html);
            }
        });
    }



    function turSec(e) {
        if ($(e).find('option:selected').val() == 'Sayfa') {
            $(e).parents().children('.m_content').fadeIn();
        } else {
            $(e).parents().children('.m_content').fadeOut();
        }

        if ($(e).find('option:selected').val() == 'Link') {
            $(e).parents().children('.m_link').fadeIn();
        } else {
            $(e).parents().children('.m_link').fadeOut();
        }


        if ($(e).find('option:selected').val() == 'Statik') {
            staticFiles();
            $(e).parents().children('.m_static').fadeIn();
        } else {
            $(e).parents().children('.m_static').fadeOut();
        }

    }





    // Nestable
    var updateOutput = function(e) {
        var list = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
            $.ajax({
                type: "POST",
                url: "/admin/menu-reorder",
                data: {
                    'data': JSON.stringify(list.nestable('serialize'))
                },
                success: function(response) {

                }
            });



        } else {
            output.val('JSON browser support required for this demo.');
        }
    };



    $(document).ready(function() {
        $('#nestable2').nestable({
            group: 1,
            maxDepth: 2,
        }).on('change', updateOutput);


        updateOutput($('#nestable2').data('output', $('#nestable2-output')));



    });
</script>
@endsection