@extends('layouts.adminLayouts')


@section('head')
    <link rel="stylesheet" href="/assets/nestable/nestable.css">
    <link rel="stylesheet" href="/assets/admin/bower_components/select2/dist/css/select2.min.css">
    <meta name="_token" content="{{csrf_token()}}">
    <style>
        .select2-container--open{
            z-index:9999999
        }
    </style>
@endsection

@section('content')
    <div class="margin" dir="ltr">
        <div class="btn-group">
            <a href="#newModal" data-toggle="modal" class="btn btn-primary"> <i class="fa fa-plus"></i> مورد جدید</a>
        </div>

        <div class="btn-group">
            <a href="/admin/categorys/images" data-toggle="modal" class="btn btn-success"> <i
                    class="fa fa-list-alt"></i> مدیریت عکس دسته ها </a>
        </div>

    </div>

    <div class="box">
        <div class="box-header">
            <h3 class="box-title">لیست دسته ها</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="well">
                        <div class="dd" id="nestable">
                            {!!  $category !!}
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="well">
                        <p class="text-justify">برای جابجایی و دسته بندی کافی است روی هر فیلد کلیک کنید</p>
                        <p style="color: red">توجه!</p>
                        <p class="text-justify">هرگز بصورت فیزیکی اقدام به حذف دسته ها ننمایید. چرا که تمام محصولات و
                            تراکنش هایی که وابسته به این دسته هستند، حذف خواهد شد.</p>
                        <p class="text-justify" style="color: blue"> برای عدم نمایش دسته در فروشگاه کافی است آن را غیر
                            فعال نمایید. </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.box-body -->
    </div>


    <!-- Create new item Modal -->
    <div class="modal fade" id="newModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content box">
                {{ Form::open(array('url'=>'admin/categorys/new','class'=>'form-horizontal', 'id' => 'formCategory','role'=>'form','onsubmit' => 'save_category();return false;'))}}
                @csrf
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">دسته جدیدی اضافه نمایید</h4>
                </div>
                <div class="modal-body">

                    <div class="form-group">
                        <label for="label" class="col-lg-3 control-label">نام دسته</label>
                        <div class="col-lg-9">
                            {{ Form::text('label',null,array('class'=>'form-control'))}}
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="label" class="col-lg-3 control-label">نوع دسته</label>
                        <div class="col-lg-9">
                            <select name="type" id="type-category" class="form-control">
                                <option value="category">دسته</option>
                                <option value="page">صفحه</option>
                                <option value="link">لینک</option>
                            </select>
                        </div>
                    </div>


                    <div class="form-group category-div">
                        <label for="label" class="col-lg-3 control-label">نام انگلیسی دسته</label>
                        <div class="col-lg-9">
                            {{ Form::text('en_name',null,array('class'=>'form-control' , 'id' => 'en_name'))}}
                        </div>
                    </div>

                    <div class="form-group category-div">
                        <label class="col-lg-3 control-label">پیوند یکتا</label>
                        <div class="slug-box col-lg-9">
                            <span>/</span>
                            <input type="text" class="form-control slug-txt text-left" id="slug" name="url"
                                   autocomplete="off" dir="ltr">
                            <span>{{url('/search')}}/</span>
                        </div>
                    </div>

                    <div class="form-group link-div" style="display: none;">
                        <label class="col-lg-3 control-label">پیوند یکتا</label>
                        <div class="slug-box col-lg-9">
                            <input type="text" class="form-control" name="url_link" autocomplete="off"
                                   dir="ltr">
                        </div>
                    </div>

                    <div class="form-group page-div" style="display: none;">
                        <label class="col-lg-3 control-label">صفحه</label>
                        <div class="col-lg-9">
                            <select name="url_page" class="form-control select2" style="width: 100%;" id="pages">
                                <option value="">صفحه را انتخاب کنید</option>
                                @foreach($pages as $page)
                                    <option value="{{$page->slug}}">{{$page->title}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="title" class="col-lg-3 control-label">توضیح</label>
                        <div class="col-lg-9">
                            {{ Form::text('title',null,array('class'=>'form-control'))}}
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">لغو</button>
                    <a onclick="save_category()" class="btn btn-primary">ایجاد</a>
                </div>
                {{ Form::close()}}

                <div class="overlay" style="display:none" id="loading">
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Delete item Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content panel">
                {{ Form::open(array('url'=>'admin/categorys/delete')) }}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">حذف دسته مورد نظر</h4>
                </div>
                <div class="modal-body">
                    <p>آیا از حذف دسته اطمینان دارید؟</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">لغو</button>
                    <input type="hidden" name="delete_id" id="postvalue" value=""/>
                    <input type="submit" class="btn btn-danger" value="حذف"/>
                </div>
                <div class="overlay" style="display:none" id="loading">
                    <i class="fa fa-refresh fa-spin"></i>
                </div>
                {{ Form::close() }}
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@stop



@section('footer')
    <script src="/assets/nestable/jquery.nestable.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.dd').nestable({
                dropCallback: function (details) {

                    var order = new Array();
                    $("li[data-id='" + details.destId + "']").find('ol:first').children().each(function (index, elem) {
                        order[index] = $(elem).attr('data-id');
                    });

                    if (order.length === 0) {
                        var rootOrder = new Array();
                        $("#nestable > ol > li").each(function (index, elem) {
                            rootOrder[index] = $(elem).attr('data-id');
                        });
                    }

                    $.post('{{url("admin/categorys/")}}',
                        {
                            source: details.sourceId,
                            destination: details.destId,
                            order: JSON.stringify(order),
                            rootOrder: JSON.stringify(rootOrder)
                        },
                        function (data) {
                        })
                        .done(function () {
                            $("#success-indicator").fadeIn(100).delay(1000).fadeOut();
                        })
                        .fail(function () {
                        })
                        .always(function () {
                        });
                }
            });

            $('.delete_toggle').each(function (index, elem) {
                $(elem).click(function (e) {
                    e.preventDefault();
                    $('#postvalue').attr('value', $(elem).attr('rel'));
                    $('#deleteModal').modal('toggle');
                });
            });
        });
    </script>


    <script>
        save_category = function () {
            $("#loading").show();
            var data = $('#formCategory').serialize();
            $.ajax({
                url: '{{ url('/admin/categorys/new') }}',
                type: 'POST',
                data: data,
                success: function (response) {
                    $("#loading").hide();
                    toastr.success(response.message);
                    setTimeout(function () {
                        location.reload();
                    }, 2000);
                },
                error: function (xhr) {
                    $("#loading").hide();
                    if (xhr.status === 422) {
                        jQuery.each(xhr.responseJSON.errors, function (key, value) {
                            toastr.error(value);
                        });
                    }
                    if (xhr.status !== 422) {
                        toastr.warning('خطایی در سامانه رخ داد!');
                    }
                }
            });

        }
    </script>
    <script>
        $(document).on("click", ".delete", function () {
            var id = $(this).data('id');
            var el = this;

            Swal.fire({
                title: 'از حذف مطمئن هستید؟',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#00a018',
                cancelButtonColor: '#d33',
                confirmButtonText: 'بله',
                cancelButtonText: 'خیر'
            }).then((result) => {
                if (result.value) {
                    var token = $("meta[name='csrf-token']").attr("content");
                    $.ajax({
                        url: '{{ url('admin/categorys') }}/' + id,
                        type: 'DELETE',
                        data: {
                            "id": id,
                            "_token": token,
                        },
                        success: function (response) {
                            toastr.success(response.message);
                            $(el).closest("li").remove();
                        },
                        error: function (xhr) {
                            toastr.warning(xhr.responseJSON.errors);
                        }
                    });
                }
            });
        });

    </script>

    <script>
        $('#en_name').change(function (e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: '{{ url('/admin/categorys/check_slug') }}',
                type: 'POST',
                data: {'en_name': $(this).val()},
                success: function (data) {
                    $('#slug').val(data.slug);
                }
            });
        });
    </script>

    <script>
        $('#type-category').on('change', function () {
            if (this.value == 'page') {
                $('.category-div').hide();
                $('.link-div').hide();
                $('.page-div').show();
            }
            if (this.value == 'link') {
                $('.category-div').hide();
                $('.link-div').show();
                $('.page-div').hide();
            }
            if (this.value == 'category') {
                $('.category-div').show();
                $('.link-div').hide();
                $('.page-div').hide();
            }
        });
    </script>

    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
    <script>

        $(function () {
            //Initialize Select2 Elements
            $('.select2').select2();
        })
    </script>
@endsection