@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">Ürün Kategorileri</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">Kategori 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">Kategori Başlığı</label>
                    <input type="text" id="menuName" class="form-control" placeholder="*Örneğin: Hakkımızda">
                    <small class="form-control-feedback"> Kategori üzerinde gözükecek alandır. </small>
                </div>

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


            
             


                <div class="m_link" style="display:none">
                    <div class="form-group  has-success">
                        <label class="form-label">Kategori 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>








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

            <div class="col-6  pb-5 px-5">
                <h3 class="strong">Kategori Ağacı</h3>
                <span>Sürükle bırak ile Kategori yerini değiştirebilir veya alt Kategori oluşturabilirsiniz. Kategori 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/products_categories.blade.php</b> on line <b>95</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/products_categories.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">Kategori 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 edit_delete(id) {

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

            $.ajax({
                type: "post",
                url: "/admin/kategori-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ı Kategoriyü düzenliyorsunuz</strong>`);
        $("#edit_save").attr('onclick', `edit_save('${id}')`);
        $("#edit_delete").attr('onclick', `edit_delete('${id}')`);
        $.ajax({
            type: "POST",
            url: "/admin/kategori-duzenle",
            data: {
                id
            },
            success: function(response) {

                response = JSON.parse(response);

                let html = `
                <div class="newArea">
                    <div class="form-group">
                        <label class="form-label">Kategori 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"> Kategori üzerinde gözükecek alandır. </small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Kategori 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"> Kategori üzerinde gözükecek alandır. </small>
                    </div>

                   
                  
                    

                    <div class="m_link" style="${response.menuType != "Link"  && "display:none"}">
                    <div class="form-group  has-success">
                        <label class="form-label">Kategori 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);


            }
        });
    }



    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 link = $("#Link_edit").val();
        var menuItem = {
            "_token": "{{ csrf_token() }}",
            "pageName": pageName,
            "menuName": menuName,
            "menuNameEn": menuNameEn,
            "type": type,
            "id": id,
            "link" :link
        }

        $.ajax({
            type: "PATCH",
            url: "/admin/kategori-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 menuItem = {
            "_token": "{{ csrf_token() }}",
            "pageName": pageName,
            "menuName": menuName,
            "menuNameEn": menuNameEn,
            "type": type,
            "link" : Link
        }

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

        $.ajax({
            type: "POST",
            url: "/admin/kategori-duzenle-add",
            data: menuItem,
            success: function(response) {
                   $("#menuName").val('');
                    $("#menuNameEn").val('');
                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();
        }
    }



    // 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/kategori-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: 3,
        }).on('change', updateOutput);


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



    });
</script>
@endsection