@extends('shared.admin')
@section('style')
    <style>
        .ui-accordion .ui-accordion-header {
            display: block;
            cursor: pointer;
            position: relative;
            margin: 2px 0px 0 0;
            padding: .5em .5em .5em .7em;
            min-height: 0;
            /* support: IE7 */
            font-size: 100%;
            border: 1px solid #FDF8E4;
            background: #efefef;
            color: #000000;
           /* border-radius: 10px;*/
        }

        .ui-accordion .ui-accordion-icons {
            padding-left: 1em;
        }

        .ui-accordion .ui-accordion-icons .ui-accordion-icons {
            padding-left: 1em;
        }

        .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
            position: absolute;
            left: .5em;
            top: 50%;
            margin-top: -8px;
        }

        .ui-accordion .ui-accordion-content {
            padding: 1em 2.2em;
            overflow: auto;
            background: #ffffff;
            border: 1px solid #e9ecef;
            width: 100%;
            margin-left: 0px;
        }

        /* IE has layout issues when sorting (see #5413) */
        .group {
            zoom: 1
        }

        .group:not(:first-child){
            margin-top: 10px;
        }

        .panel-body-1{
            padding: 10px;
            border: none;
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <h2 class="mt-30 page-title">Menu</h2>
        <ol class="breadcrumb mb-30">
            <li class="breadcrumb-item"><a href="{{ action("AdminController@index") }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ action("PageController@menu") }}">Menu</a></li>
            <li class="breadcrumb-item active">Add Menu</li>
        </ol>
        <div class="row">
            <div class="col-lg-5 col-md-6">
                <div class="bulk-section mt-30">
                    <div class="input-group">
                        <select id="position" name="position" class="form-control">
                            <option value="" >Choose Menu Position</option>
                            <option value="1" @if($position == '1') selected="selected" @endif >Menu Top</option>
                            <option value="2" @if($position == '2') selected="selected" @endif>Menu Bottom</option>
                            <option value="3" @if($position == '3') selected="selected" @endif>Menu Top English</option>
                            <option value="4" @if($position == '4') selected="selected" @endif>Menu Bottom English</option>
                        </select>
                        <div class="input-group-append">
                            <button class="status-btn hover-btn" type="button" onclick="search_data(1);">Choose menu</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-30">
            <div class="col-lg-4 col-md-6">
                <div class="card card-static-2 mb-30">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <div class="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        Page
                                    </a>
                                </div>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="headingOne">
                                <form id="frmAddPageToMenu" method="post" action="{{ action('PageController@addPagetoMenu') }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-lg-8 col-md-6">
                                                <div class="menu-search">
                                                    <input type="text" id="titlePage" name="titlePage" class="form-control" placeholder="Search...">
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-md-6">
                                                <button class="status-btn hover-btn" type="button" onclick="search_page();">Search Page</button>
                                            </div>
                                        </div>
                                        <ul class="add-menu-list" id="pageList">
                                            @foreach($listPage as $item)
                                            <li>
                                                <div class="form-group" id="checkboxes">
                                                    <label class="control-label">
                                                        <input type="checkbox" name="pagechecked[]" value="{{ $item->id }}">
                                                        {{ $item->title }}
                                                    </label>
                                                </div>
                                            </li>
                                            @endforeach
                                        </ul>
                                        <input type="hidden" name="position" value="{{ $position != '' ? $position : '1' }}">
                                        <button class="save-btn hover-btn" type="submit">Add to Menu</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                                <div class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        Custom Link
                                    </a>
                                </div>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                                <form id="frmAddCustomToMenu" method="post" action="{{ action('PageController@addCustomPagetoMenu') }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                                    <div class="panel-body">
                                        <ul class="add-menu-list" id="pageList">
                                            <div class="form-group">
                                                <div class="menu-search">
                                                    <input type="text" id="link" name="link" class="form-control" placeholder="Link">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <div class="menu-search">
                                                    <input type="text" id="title" name="title" class="form-control" placeholder="Page Title">
                                                </div>
                                            </div>
                                        </ul>
                                        <input type="hidden" name="position" value="{{ $position != '' ? $position : '1' }}">
                                        <button class="save-btn hover-btn" type="submit">Add to Menu</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 col-md-6">
                <div class="card card-static-2 mb-30">
                    <div class="card-title-2">
                        <h4>Menu items</h4>
                    </div>
                    <div class="card-body-table">
                        <div class="news-content-right pd-20">
                            <div class="row">
                                <div class="col-lg-8">
                                    <div id="jQuery_accordion">
                                        @if($menu != null && count($menu) > 0)
                                            @php
                                                $i = 0;
                                            @endphp
                                            @foreach($menu as $item)
                                                @php
                                                    $i ++;
                                                @endphp
                                                <div class="group" data-section-id="{{ $item->id }}" id="group{{ $item->id }}">
                                                    <h3>{{ $item->title }}</h3>
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <div class="menu-search">
                                                                <label class="form-label">Label*</label>
                                                                <input type="text" name="title{{ $item->id }}" id="title{{ $item->id }}" class="form-control" value="{{ $item->title }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="menu-search">
                                                                <label class="form-label">Link*</label>
                                                                <input type="text" name="link{{$item->id}}" id="link{{$item->id}}" class="form-control" value="{{ $item->link }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="bb-bottom">
                                                                <a href="javascript:void(0);" onclick="deleteMenu('{{ $item->id }}');" class="menu-delete">Delete</a>
                                                                <span class="attr-orgin-right">Origin: <a target="_blank" href="{{ $item->link }}">{{ $item->type }}</a></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                    {{--<div class="mt-3">
                                        <div class="display mt-3">
                                            <details open>
                                                <summary>Data</summary>
                                                <pre class="data">{}</pre>
                                            </details>
                                        </div>
                                    </div>--}}
                                </div>
                            </div>
                        </div>
                        <div class="menu-save-btn">
                            <button class="save-btn hover-btn mt-0" onclick="updateMenu('{{ $position != '' ? $position : '1' }}');">Save Menu</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript">
        var sectionList  = new Array();
        $(function () {
            $("#jQuery_accordion")
                .accordion({
                    event: "click",
                    active: false,
                    collapsible: true,
                    header: "> div > h3"
                })
                .sortable({
                    axis: "y",
                    handle: "h3",
                    revert: false,
                    stop: function (e, ui) {
                        sectionList = $(this).sortable("toArray", { attribute: "data-section-id" });
                        var sectionId = ui.item.context.dataset.sectionId;
                        var index = ui.item.index();
                        //updateData({ sectionId, sectionList });
                        ui.item.children("h3").triggerHandler("focusout");
                        $(this).accordion("refresh");
                    }
                    /*stop: function (event, ui) {
                        // IE doesn't register the blur when sorting
                        // so trigger focusout handlers to remove .ui-state-focus
                        ui.item.children("h3").triggerHandler("focusout");

                        // Refresh accordion to handle new order
                        $(this).accordion("refresh");
                    }*/
                });
            /*$('#accordion').on('accordionactivate', function (event, ui) {
                if (ui.newPanel.length) {
                    $('#accordion').sortable('disable');
                } else {
                    $('#accordion').sortable('enable');
                }
            });*/
        });

        function updateMenu(position) {
            let list = [];
            $('.group').each(function(){
                let menuId = $(this).attr('data-section-id');
                let title = $('#title' + menuId).val();
                let link = $('#link' + menuId).val();
                list.push([menuId, title, link]);
            });
            /*console.log(list);
            console.log(JSON.stringify(list));
            console.log(position);*/
            $.ajax({
                type: 'POST',
                url: '{{ action('PageController@updateMenu') }}',
                data:{
                    position: position,
                    list: JSON.stringify(list),
                },
                success: function (response) {
                    console.log(response);
                },
                error: function (err) {
                    console.log(" Can't do because: " + err);
                },
            });
        }

        /*function updateData(obj) {
            var data = JSON.stringify(obj, null, 2);
            $('.data').text(data);
        }*/

        function delete_data(link) {
            $("#delete-link").attr("href", link);
            bPopup = $('#dialog-delete').bPopup();
        }
        function defaulString(val) {
            if (val == null) {
                return "";
            }
            return val;
        }
        function search_data(page) {
            var url = '{{ action('PageController@menu') }}';
            url += "?position=" + $("#position").val();
            location.href = url;
        }

        function deleteMenu(menuId) {
            if(menuId > 0){
                $.ajax({
                    type: 'POST',
                    url: '{{ action('PageController@deleteMenu') }}',
                    data:{
                        _token: "{{ csrf_token() }}",
                        menuId: menuId,
                    },
                    success: function (response) {
                        if(response != '' && response.msg == 'success'){
                            $('#group' + menuId).remove();
                        }
                    },
                    error: function (err) {
                        console.log(" Can't do because: " + err);
                    },
                });
            }
        }

        function addtoMenu(position) {
            var selected = [];
            var url = '{{ action('PageController@addPagetoMenu') }}';
            $('#checkboxes input:checked').each(function() {
                selected.push($(this).val());
            });
            if(selected.length > 0){
                $.ajax({
                    type: 'POST',
                    url: url,
                    data:{
                        position: position,
                        selected: selected,
                    },
                    success: function (response) {
                        console.log(response);
                    },
                    error: function (err) {
                        console.log(" Can't do because: " + err);
                    },
                });
            }
        }

        function addCustometoMenu(position) {
            var url = '{{ action('PageController@addCustomPagetoMenu') }}';
            $.ajax({
                type: 'POST',
                url: url,
                data:{
                    position: position,
                    title: $('#title').val(),
                    link: $('#link').val(),
                },
                success: function (response) {
                    console.log(response);
                },
                error: function (err) {
                    console.log(" Can't do because: " + err);
                },
            });
        }

        function search_page(){
            var url = '{{ action('PageController@searchPage') }}';
            var pageTitle = $('#titlePage').val();
            $.ajax({
                type: 'POST',
                url: url,
                data:{
                    pageTitle: pageTitle,
                },
                success: function (response) {
                    if(response != ''){
                        console.log(response);
                        console.log(response.length)
                        $.each( response, function( key, value ) {
                            $('#pageList').html('<li><div class="form-group"><label class="control-label"><input type="checkbox" value="' + value.id + '">' + value.title + '</label></div></li>');
                        });
                    }
                },
                error: function (err) {
                    console.log(" Can't do because: " + err);
                },
            });
        }
    </script>
@endsection