@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.create') }}

    </section>
@stop


@section('content')


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

        <div class="btn-group">
            <a href="{{url('/admin/homes')}}" class="btn btn-primary"><i class="fa fa-backward"></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="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="save_list();return false;">
                @csrf
                <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" 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">تب محور</option>
                                    <option value="news-horizontal">لیست خبری افقی</option>
                                    <option value="news-vertical">لیست خبری عمودی</option>
                                    <option value="news-sidebar">لیست خبری کناری</option>
                                    <option value="image">گالری تصاویر</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">انتخابی</option>
                                    <option value="category">دسته محور</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <div class="col-md-12">
                        <div class="form-group category-div" style="display: none;" >
                            <label class="col-lg-4 control-label">دسته مورد نظر</label>
                            <div class="col-lg-8">
                                <select id="sel_3" name="categories" class="select2"  multiple>
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
        <div class="overlay" style="display:none" id="loading">
            <i class="fa fa-refresh fa-spin"></i>
        </div>
        <div class="box-footer text-left">
            <a onclick="save_list()" class="btn btn-primary">ارسال</a>
        </div>
        <!-- /.box-body -->
    </div>
@stop


@section('footer')
    <script>
        $('#type-category').on('change', function () {
            if (this.value == 'post') {
                $('.category-div').hide();
            }
            if (this.value == 'category') {
                $('.category-div').show();
            }
        });
    </script>
    <script>
        save_list = function () {
            $("#loading").show();
            var data = $("#listForm").serializeArray();
            $.ajax({
                url: '{{ url('/admin/homes') }}',
                type: 'POST',
                data: data,
                success: function (data) {
                    $("#loading").hide();
                    if (!data.errors) {
                        $("#alert_show").hide();
                        jQuery.each(data.messages, function (key, value) {
                            jQuery('.successState').show();
                            jQuery('.successState').append('<p>' + value + '</p>');
                        });
                        setTimeout(function () {
                            window.location.replace('{{url('admin/homes')}}/' + data.id + '/edit');
                        }, 1000);
                    } else {
                        $("#alert_show").html('');
                        $("#alert_show_success").hide();
                        jQuery.each(data.errors, function (key, value) {
                            jQuery('.dangerState').show();
                            jQuery('.dangerState').append('<p>' + value + '</p>');
                        });
                    }
                },
                error: function () {
                    $("#loading").hide();
                    toastr.warning('خطایی در حین انجام عملیات رخ داد', 'اوپس...');
                }
            });
        };
    </script>
    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></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: 1,
            templateResult: formatState, templateSelection: formatState
        });

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