@extends('layouts.adminLayouts')
@section('head')
    <!-- babakhani datepicker -->
    <link rel="stylesheet" href="{{url('/assets/admin/dist/css/persian-datepicker-0.4.5.min.css')}}"/>
    <link rel="stylesheet" href="/assets/admin/bower_components/select2/dist/css/select2.min.css">
    <link href="/css/bootstrap-treeview.css" rel="stylesheet">
    <link href="/css/select2totree.css" rel="stylesheet">
    <meta name="_token" content="{{csrf_token()}}">
    <link rel="stylesheet"
          href="{{url('/assets/admin/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css')}}">
    <style>
        .swal2-container {
            z-index: X;
        }
    </style>
@stop
@section('content-header')
    <section class="content-header">
        <h1>
            نوشتهات
        </h1>

        {{ Breadcrumbs::render('posts.index') }}


    </section>
@stop


@section('content')


    <div class="margin" dir="ltr">


{{--        <div class="btn-group">--}}
{{--            <button type="button" class="btn btn-success"><i class="fa fa-upload"></i> ورود</button>--}}
{{--        </div>--}}

        <div class="btn-group">
            <a href="/admin/posts/create" class="btn btn-primary"> <i class="fa fa-plus"></i> مورد جدید</a>
        </div>

    </div>

    <!-- SELECT2 EXAMPLE -->
    <div class="box box-default">
        <!-- /.box-header -->
        <div class="box-body">
            <div class="row">
                <form onsubmit="return false" action="" id="searchPostForm">
                    <div class="col-md-6">

                        <div class="form-group">
                            <label class="col-sm-4 control-label">نام نوشته:</label>

                            <div class="col-sm-8">
                                <input name="name" type="text" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">دسته:</label>

                            <div class="col-sm-8">
                                <select id="sel_3" name="categories[]" style="width:16em" multiple>
                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">وضعیت نوشته:</label>

                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" id="status_post" name="status"
                                        style="width:16em">
                                    <option value="">انتخاب کنید</option>
                                    @foreach($statuses as $key=>$status)
                                        <option value="{{$key}}">{{$status}}
                                        </option>
                                    @endforeach

                                </select>
                            </div>
                        </div>

                    </div>
                    <!-- /.col -->
                    <div class="col-md-6">


                        <div class="form-group">
                            <label class="col-sm-4 control-label"> منتشر شده از:</label>

                            <div class="col-sm-8">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" id="date_created_at" class="form-control pull-right" autocomplete="off">
                                    <input type="hidden" id="post_created_at" name="post_created_at" value=""
                                           class="form-control pull-right">
                                </div>
                            </div>
                        </div>

                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">منتشر شده تا:</label>

                            <div class="col-sm-8">
                                <div class="input-group date">
                                    <div class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </div>
                                    <input type="text" id="date_created" class="form-control pull-right" autocomplete="off">
                                    <input type="hidden" id="post_created" name="post_created"
                                           class="form-control pull-right">
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label">مرتب سازی بر اساس:</label>

                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" id="sort" name="sortBy"
                                        style="width:16em">
                                    <option value="">انتخاب کنید</option>
                                    <option value="new">جدید ترین</option>
                                    <option value="old">قدیمی ترین</option>
                                    <option value="most-view">بشترین بازدید</option>

                                </select>
                            </div>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-4 control-label"> بطور مستقیم به نوشته با کد: <span
                                    data-toggle="tooltip"
                                    title=""
                                    class="badge bg-light-blue"
                                    data-original-title="شما می توانید با وارد کردن کد نوشته، آن را پیدا نمایید."><i
                                        class="fa fa-info"></i></span> </label>


                            <div class="col-sm-8">
                                <input type="text" name="code" class="form-control" autocomplete="off">
                            </div>
                        </div>

                    </div>
                    <!-- /.col -->
                </form>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.box-body -->
        <div class="box-footer card-footer text-center">
            <div class="btn-group">
                <button onclick="searchPost();" type="button" class="btn btn-warning btn-lg"><i
                        class="fa fa-search"></i> جستجو
                </button>
            </div>
        </div>
    </div>
    <!-- /.box -->


    <div class="box">
        <div class="box-header">
            <h3 class="box-title">لیست نوشته ها</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body" id="tbody_posts">
            @include('admin.post.load')
        </div>
        <!-- /.box-body -->
        <div class="overlay" style="display:none" id="loading">
            <i class="fa fa-refresh fa-spin"></i>
        </div>
    </div>
    <!-- /.box -->

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">قیمت های ثبت شده</h4>
                </div>

                <div class="box" id="boxShowPrice">

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
@stop


@section('footer')
    <script src="{{url('/assets/admin/bower_components/datatables.net/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{url('/assets/admin/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js')}}"></script>
    <!-- page script -->
    <script>
        $(function () {
            $('#example1').DataTable()
            $('#example2').DataTable({
                'paging': true,
                'lengthChange': false,
                'searching': false,
                'ordering': true,
                'info': true,
                'autoWidth': false
            })
        })
    </script>

    <script>
        setPrice = function (id) {
            $('#modal-default').modal('show');
            $('#loadingPrice').show();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                url: '{{ url('/admin/getPricePost') }}',
                type: 'POST',
                data: {"_token": "{{ csrf_token() }}", "post_id": id},
                success: function (data) {
                    $("#boxShowPrice").html('');
                    if (!data.errors) {
                        $("#loadingPrice").hide();
                        $("#boxShowPrice").html(data);
                    } else {
                        jQuery.each(data.errors, function (key, value) {
                            jQuery('.alert-danger').show();
                            jQuery('.alert-danger').append('<p>' + value + '</p>');
                        });
                        $("#loadingPrice").hide();
                    }
                },
            });
        }
    </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/posts') }}/' + id,
                        type: 'DELETE',
                        data: {
                            "id": id,
                            "_token": token,
                        },

                        success: function (response) {
                            toastr.success(response.message);
                            $(el).closest("tr").remove();
                        },
                        error: function (xhr) {
                            toastr.warning(xhr.responseJSON.errors);
                        }
                    });
                }
            });
        });

    </script>
    <script>
        searchPost = function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $('#loading').show();
            data = $('#searchPostForm').serialize();

            $.ajax({
                url: '{{ url('/admin/postsSearch') }}',
                data: data,
                type: 'POST',
                success: function (response) {
                    $('#tbody_posts').empty().html(response);
                    $('#tbody_prices').empty();
                    $('#loading').hide();
                },
                error: function (xhr) {
                    $('#loading').hide();
                    toastr.warning("لطفا دوباره امتحان کنید.", "خطا!");
                }
            });
        }
    </script>
    <!-- Select2 -->
    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
    <script>

        $(function () {
            //Initialize Select2 Elements
            $('#brands').select2();
            $('#seller').select2();
            $('#status_post').select2();
            $('#sort').select2();
        })
    </script>
    <!-- babakhani datepicker -->
    <script src="{{url('/assets/admin/dist/js/persian-date-0.1.8.min.js')}}"></script>
    <script src="{{url('/assets/admin/dist/js/persian-datepicker-0.4.5.min.js')}}"></script>
    <script>
        $(document).ready(function () {
            $('#date_created_at').persianDatepicker({
                initialValue: false,
                altField: '#post_created_at',
                altFormat: 'X',
                format: 'D MMMM YYYY HH:mm a',
                observer: true,
                timePicker: {
                    enabled: true
                },
            });

            $('#date_created').persianDatepicker({
                initialValue: false,
                altField: '#post_created',
                altFormat: 'X',
                format: 'D MMMM YYYY HH:mm a',
                observer: true,
                timePicker: {
                    enabled: true
                },
            });
        });
    </script>

    <script src="/js/select2totree.js"></script>
    <script>
        $("#category_id").select2ToTree({
            matcher: function (params, data) {
                var original_matcher = $.fn.select2.defaults.defaults.matcher;
                var result = original_matcher(params, data);
                if (result && data.children && result.children && data.children.length != result.children.length) {
                    result.children = data.children;
                }
                return result;
            }
        });
    </script>





    <script>
        var mydata = [
            {!! $categorySelect !!}
        ];

        var ind = mydata[1];
        $("#sel_3").select2ToTree({
            treeData: {dataArr: mydata}, maximumSelectionLength: 3,
            templateResult: formatState, templateSelection: formatState
        });

        function formatState(state) {
            return state.text;
        };
    </script>
@stop