@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;
        }
    </style>
@endsection
@section('content')
    <div class="container-fluid">
        <h2 class="mt-30 page-title">Product Order</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("ProductController@index") }}">Product</a></li>
            <li class="breadcrumb-item active">Product Order</li>
        </ol>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12">
            <div class="card card-static-2 mb-30">
                <div class="card-title-2">
                    <h4>Product Order</h4>
                </div>
                <div class="card-body-table">
                    <div class="news-content-right pd-20">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="alert alert-success" style="display: none;" id="divMessage">
                                    <span id="message"></span>
                                </div>
                                <div id="jQuery_accordion">
                                    @if($list != null && count($list) > 0)
                                        @php
                                            $i = 0;
                                        @endphp
                                        @foreach($list 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">Title*</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>
                        </div>
                        <div class="form-group">
                            <button class="save-btn hover-btn" onclick="updateOrder();">Update Product</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('js/jquery-1.12.4.js') }}"></script>
    <script src="{{ asset('js/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");
                    }
                });
        });

        function updateOrder() {
            let list = [];
            $('.group').each(function(){
                let menuId = $(this).attr('data-section-id');
                list.push([menuId]);
            });
            $.ajax({
                type: 'POST',
                url: '{{ action('ProductController@saveorder') }}',
                data:{
                    _token: "{{ csrf_token() }}",
                    list: JSON.stringify(list),
                },
                success: function (response) {
                    console.log(response);
                    $('#message').html('Cập nhật thành công!!!');
                    $('#divMessage').show();
                },
                error: function (err) {
                    console.log(" Can't do because: " + err);
                },
            });
        }
    </script>
@endsection