@extends('admin.layouts.app')
@section('title', 'پنل مدیریت | منوساز')
@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">منوساز</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-left">
                            {{ Breadcrumbs::render('menu') }}
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <section class="content">
            <div class="container-fluid bg-white py-3">
                <div class="row whole-part">
                    <section class="Bx-List section-1">
                        <div class="Tp-haeder">لیست منوها</div>
                        <div class="Tp-item-S row">
                            <div class="col-xs-4">
                                <a class="item-link" href="{{ route('admin.menus.create') }}"><i class="fa fa-plus"></i>
                                    افزودن</a>
                            </div>
                        </div>
                        <ul class="main-list">
                            @foreach($menus as $menu)
                                <li>
                                    <div class="each-href hrf1 targetinga" data-heighti="height-open" data-hrf="hrf1"
                                         data-menu="{{ $menu->id }}" data-level="1"><i
                                            class="fa fa-{{ $menu->status ? 'check text-success' : 'close text-danger' }}"></i>
                                        {{ $menu->title }}
                                        <ul class="item-href">
                                            <li><a href="{{ route('admin.menus.edit', $menu->id) }}" class="option-1"><i
                                                        class="fa fa-edit"></i></a></li>
                                            <form method="post" action="{{ route('admin.menus.destroy', $menu->id) }}"
                                                  style="display: inline-block;">
                                                @csrf
                                                @method('DELETE')
                                                <li>
                                                    <button type="submit" class="option-1"
                                                            onclick="return confirm('با حذف یک منو تمام زیرمنو‌های آن نیز پاک میشوند، مطمئنید؟');">
                                                        <i class="fa fa-trash"></i></button>
                                                </li>
                                            </form>
                                        </ul>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </section>
                </div>
            </div>
        </section>
    </div>
@endsection
@section('header')
    <style>
        .row {margin: 0;}
        .Tp-item-S .col-xs-4 {padding: 0;}
        .whole-part {margin: 0;display: flex;overflow: auto;background: #ecf0f5;border: 1px solid #d2d6de;padding: 5px; height: 800px;}
        .Bx-List {opacity:0;width: 216px;background: white;border: 1px solid #d2d6de;padding: 2px;}
        .Tp-haeder {background: #0577b6;text-align: center;padding: 6px 0;font-weight: 400;color: white;font-size: 16px;}
        .item-link {background: #fbfbfb;display: block;text-align: center;padding: 6px 0;color: #0577b6;font-size: 16px;margin: 2px;transition:all 0.3s;cursor: pointer;}
        .item-link:hover {background: #f9fafc;transition:all 0.3s;}
        .main-list {padding: 2px;margin: 0;background: white;}
        .main-list li {list-style: none;}
        .each-href {cursor: pointer;color: black;padding: 5px;transition:all 0.3s;display: block;font-size: 13px;position: relative;    overflow: hidden;}
        .each-href:hover {transition:all 0.3s;background: #f9fafc;}
        .Bx-List.section-1 {position: relative; z-index: 11;opacity:1;}
        .Bx-List.section-2,
        .Bx-List.section-3,
        .Bx-List.section-4,
        .Bx-List.section-5{position: absolute;top: -1px;right: -1px;transition:all 0.3s;z-index: -1;transform: translateX(0);}
        .height-open .Bx-List.section-2,
        .height-open .height-open1 .Bx-List.section-3,
        .height-open .height-open1 .height-open2 .Bx-List.section-4,
        .height-open .height-open1 .height-open2 .height-open3 .Bx-List.section-5{transform: translateX(-219px);transition:all 0.3s;opacity:1;}
        .item-href {padding: 0;display: flex;justify-content: flex-end;position: absolute;left: -45px;opacity:0;top: 2px;transition: all 0.3s;}
        .each-href:hover .item-href {opacity:1;left: 0px;transition: all 0.3s;}
        .item-href .option-1 {border: 0;background: none;padding: 4px 4px;cursor: pointer;}
        .item-href .option-1 i.fa.fa-trash{color: #e88383;}
        .item-href .option-1 i.fa.fa-edit{color: #c7c7c7;}
    </style>
@endsection
@section('footer')
    <script>
        $(document).ready(function(){
            $(document).on('click', '.targetinga', function () {
                menu_id = $(this).data('menu');
                level = $(this).data('level');
                target = $(this).parent();
                hrf = $(this).data('hrf');
                heightOpen = $(this).data('heighti');
                if($(this).parent().children().length < 2 ) {
                    $.ajax({
                        type: 'POST',
                        url: "/admin/menus/ajax/" + menu_id + "/fetch",
                        data: {
                            level: level,
                            _method: "POST"
                        },
                        success: function(data) {
                            target.append(data);
                        },
                        error: function(e) {
                            // Set sth
                            iziToast.error({
                                message: 'متاسفانه مشکلی در سرور پیش آمد.',
                                'position': 'topLeft'
                            });
                        }
                    });
                }
                $(`.${hrf}`).parent().parent().find(`.${heightOpen}`).removeClass(`${heightOpen}`);
                $(this).parent().addClass(`${heightOpen}`);
            });
        });
    </script>
@endsection