@extends('layouts.adminLayouts')

@section('head')
    <!-- Select2 -->
    <link rel="stylesheet" href="/assets/admin/bower_components/select2/dist/css/select2.min.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="{{url('/assets/admin/plugins/iCheck/all.css')}}">
    <!-- SwiperSlider -->
    <link rel="stylesheet" href="{{url('/assets/admin/plugins/swiperslider/swiper.min.css')}}">
    <link href="/css/bootstrap-treeview.css" rel="stylesheet">
    <link href="/css/select2totree.css" rel="stylesheet">
    <link rel="stylesheet" href="{{url('/assets/admin/dist/css/persian-datepicker-0.4.5.min.css')}}"/>
    <meta name="_token" content="{{csrf_token()}}">
@stop

@section('content-header')
    <section class="content-header">
        <h1>
            ویرایش نوشتهات لیست
        </h1>
        {{ Breadcrumbs::render('homes.edit',['title' => $list->name ]) }}

    </section>
@stop


@section('content')

    <!-- 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>
                    </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('{{$list->id}}');" type="button" class="btn btn-warning btn-lg"><i
                        class="fa fa-search"></i> جستجو
                </button>
            </div>
        </div>
    </div>
    <!-- /.box -->


        <div class="box box-default">
            <div class="box-header">
                <h3 class="box-title">ویرایش</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="alert alert-danger dangerState" style="display:none" id="alert_show"></div>
                <div class="alert alert-success successState" style="display:none" id="alert_show_success"></div>
                <form id="listForm" onsubmit="updateList('{{$list->id}}');return false;">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-md-4"> نام لیست اسلایدر <span style="color: red">*</span> </label>
                                <div class="col-md-8">
                                    <input type="text" name="name" value="{{$list->name}}" class="form-control"
                                           placeholder="نام لیست اسلایدر درج شود...">
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="col-md-4"> نوع اسلایدر <span style="color: red">*</span> </label>
                                <div class="col-md-8">
                                    <select name="type" class="form-control">
                                        <option value="tab"  @if($list->type == 'tab') selected @endif>تب محور</option>
                                        <option value="news-horizontal" @if($list->type == 'news-horizontal') selected @endif>لیست خبری افقی</option>
                                        <option value="news-vertical" @if($list->type == 'news-vertical') selected @endif>لیست خبری عمودی</option>
                                        <option value="news-sidebar" @if($list->type == 'news-sidebar') selected @endif>لیست خبری کناری</option>
                                        <option value="image" @if($list->type == 'image') selected @endif>گالری تصاویر</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="label" class="col-lg-4 control-label">نحوه مقدار دهی</label>
                                <div class="col-lg-8">
                                    <select name="type_data" id="type-category" class="form-control">
                                        <option value="post" @if($list->by_category == 0) selected @endif>انتخابی</option>
                                        <option value="category"  @if($list->by_category == 1) selected @endif>دسته محور</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <br>
                        <br>
                        <div class="col-md-12">
                            <div class="form-group category-div" @if($list->by_category == 0) style="display: none;" @endif>
                                <label class="col-lg-4 control-label">دسته مورد نظر</label>
                                <div class="col-lg-8">
                                    <select id="sel_4" name="categories" class="select2"  multiple>
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
            <div class="box-footer text-left">
                <a onclick="updateList('{{$list->id}}')" class="btn btn-primary">بروزرسانی</a>
            </div>
            <!-- /.box-body -->
        </div>


    <div class="widget-slider" id="reload-post">
        @include('admin.home.selected')
    </div>
    <div class="box box-default pt-0">

        <div class="box-header">
            <div class="row">
                <div class="col-xs-12 text-center filter-product mb-2">
                    <div class="col-lg-2 col-md-3 col-xs-8 pr-0">
                        <select name="type" class="form-control select2 float-right" id="select-sort">
                            <option value="news-horizontal" @if($list->type == 'news-horizontal') selected @endif>لیست خبری افقی</option>
                            <option value="news-vertical" @if($list->type == 'news-vertical') selected @endif>لیست خبری عمودی</option>
                            <option value="news-sidebar" @if($list->type == 'news-sidebar') selected @endif>لیست خبری کناری</option>
                            <option value="image" @if($list->type == 'image') selected @endif>گالری تصاویر</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="mt-3 Posts" id="body_Post">
                @include('admin.home.load')
            </div>
        </div>

    </div>

    @include('layouts.loading')
@stop

@section('footer')
    <script>
        $('#type-category').on('change', function () {
            if (this.value == 'post') {
                $('.category-div').hide();
            }
            if (this.value == 'category') {
                $('.category-div').show();
            }
        });
    </script>
    <!-- SwiperSlider -->
    <script src="{{url('/assets/admin/plugins/swiperslider/swiper.min.js')}}"></script>


    <script>
        $('#select-sort').on('change', function () {
            changeType(this.value,'{{$list->id}}');
        });

        changeType = function (type,id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $('#loading').show();

            $.ajax({
                url: '{{ url('/admin/changeListType') }}/' + id,
                data: {type:type},
                type: 'PUT',
                success: function (response) {
                    toastr.success(response.message);
                    $('#loading').hide();
                },
                error: function (xhr) {
                    $('#loading').hide();
                    toastr.warning("لطفا دوباره امتحان کنید.", "خطا!");
                }
            });
        }

    </script>

    <script>


        updateList = function (id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $('#loading').show();
            var data = $('#listForm').serialize();
            $.ajax({
                url: '{{ url('/admin/homes') }}/' + id,
                data: data,
                type: 'PUT',
                success: function (response) {
                    toastr.success(response.message);
                    $('#loading').hide();
                },
                error: function (xhr) {
                    $('#loading').hide();
                    toastr.warning("لطفا دوباره امتحان کنید.", "خطا!");
                }
            });
        }


    </script>

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

            $.ajax({
                url: '{{ url('/admin/homePostsSearch') }}/' + id,
                data: data,
                type: 'PUT',
                success: function (response) {
                    $('#body_Post').empty().html(response);
                    lazyload();
                    $('#loading').hide();
                },
                error: function (xhr) {
                    $('#loadingPost').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();
            $('#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
        });

        var mydataSelected = [
            {!! $categorySelected !!}
        ];

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

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