@extends('core::layouts.master')
@section('head')


    <link href="{{Module::asset('core:node_modules/nestable/jquery-nestable.css')}}" rel="stylesheet"/>
    <link rel="stylesheet" href="{{Module::asset('core:node_modules/select2/dist/css/select2.min.css')}}"/>
    <link rel="stylesheet"
          href="{{Module::asset('core:node_modules/select2-bootstrap-theme/dist/select2-bootstrap.min.css')}}"/>
    <link rel="stylesheet" href="{{Module::asset('core:node_modules/icheck/skins/all.css')}}"/>
    <link rel="stylesheet"
          href="{{Module::asset('core:node_modules/jquery-tags-input/dist/jquery.tagsinput.min.css')}}">
    <link rel="stylesheet" href="{{Module::asset('core:node_modules/dropify/dist/css/dropify.min.css')}}">
    <link rel="stylesheet" href="{{Module::asset('core:css/persian-datepicker.min.css')}}">

@endsection
@section('content')
    <div class="content-wrapper">
        @include('core::layouts.breadcrumb')

        <div class="row">
            <div class="col-12 grid-margin">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                {{--<h4>افزودن بنر</h4>--}}
                            </div>
                            <div class="col-md-6 text-left"><a href="{{($redirectBack)}}" class="btn btn-primary">بازگشت به لیست</a>
                            </div>
                        </div>
                        <form action="{{route('admin.'.$route_action,isset($params)?$params:[])}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="row">

                                @foreach($model->adminFields as $index=>$item)
                                    @switch($item['type'])
                                        @case('photo')
                                        <div class="col-md-{{$item['col']}}">
                                            <div class="form-group pt-3">
                                                <label><span class="ml-1"
                                                    style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                                </label>
                                                <div class="mt-1">
                                                    <input name="{{$index}}" @if($item['required']) required @endif type="file" class="dropify pic-dropify"/>
                                                </div>
                                            </div>
                                        </div>
                                        @break
                                        @case('file')
                                        <div class="col-md-{{$item['col']}}">
                                            <div class="form-group pt-3">
                                                <label><span class="ml-1"
                                                    style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                                </label>
                                                <div class="mt-1">
                                                    <input name="{{$index}}" @if($item['required']) required @endif type="file" class="dropify file-dropify"/>
                                                </div>
                                            </div>
                                        </div>
                                        @break
                                        @case('gallery')
                                        <div class="col-md-{{$item['col']}}">
                                            <label><span class="ml-1"
                                                         style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                            </label>
                                            <i class="icon-plus" style="position: absolute;left:0;top:0;"></i>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group pt-3">
                                                        <div class="mt-1">
                                                            <input name="{{$index}}" @if($item['required']) required @endif type="file" class="dropify file-dropify"/>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @break
                                        @case('string')
                                    <div class="col-md-{{$item['col']}}">
                                        <div class="form-group pt-3">
                                            <label><span class="ml-1"
                                               style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                            </label>
                                            <input @if($item['required']) required @endif type="text" name="{{$index}}" class="form-control mt-1"
                                                   placeholder="{{$item['fa_name']}}">
                                        </div>
                                    </div>
                                    @break
                                    @case('password')
                                    <div class="col-md-{{$item['col']}}">
                                        <div class="form-group pt-3">
                                            <label><span class="ml-1"
                                                         style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                            </label>
                                            <input @if($item['required']) required @endif type="password" name="{{$index}}" class="form-control mt-1"
                                                   placeholder="{{$item['fa_name']}}">
                                        </div>
                                    </div>
                                    @break
                                    @case('time')
                                    <div class="col-md-{{$item['col']}}">
                                        <div class="form-group pt-3">
                                            <label><span class="ml-1"
                                                         style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                            </label>
                                            <input @if($item['required']) required @endif type="time" name="{{$index}}" class="form-control mt-1"
                                                   placeholder="{{$item['fa_name']}}">
                                        </div>
                                    </div>
                                    @break
                                    @case('date')
                                    <div class="col-md-{{$item['col']}}">
                                        <div class="form-group pt-3">
                                            <label><span class="ml-1"
                                                         style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                            </label>
                                            <input  name="{{$index}}" placeholder="{{$item['fa_name']}}" class="form-control mt-1 persianDate" @if($item['required']) required @endif  />
                                        </div>
                                    </div>
                                    @break
                                    @case('dateTime')
                                    <div class="col-md-{{$item['col']}}">
                                        <div class="form-group pt-3">
                                            <label><span class="ml-1"
                                                         style="color: red;vertical-align: sub">*</span>{{$item['fa_name']}}
                                            </label>
                                            <input  name="{{$index}}" placeholder="{{$item['fa_name']}}" class="form-control mt-1 persianDateTime" @if($item['required']) required @endif  />
                                        </div>
                                    </div>
                                    @break
                                        @case('boolean')
                                        <div class="col-md-{{$item['col']}}">
                                            <div class="form-group pt-3">
                                                <div class="mt-4">
                                                    <label style="vertical-align: middle">{{$item['fa_name']}}</label>
                                                    <label class="switch ml-3 pull-left" style="vertical-align: middle">
                                                        <input name="{{$index}}" value="0" type="hidden">
                                                        <input @if($item['required']) required @endif name="{{$index}}" value="1" type="checkbox" checked>
                                                        <span class="slider round"></span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        @break
                                        @case('cities')
                                                <div class="col-md-6">
                                                    <div class="form-group pt-3">
                                                        <label>انتخاب استان</label>
                                                        <div class="mt-1">
                                                            <select class="js-example-basic-single w-100" onchange="setState(this.value)">
                                                                   <option disabled selected>انتخاب نشده</option>
                                                                @php $state=\Modules\Core\Entities\StateTranslation::all();@endphp
                                                                @foreach($state as $item)
                                                                    <option value="{{$item->id}}">{{$item->title}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group pt-3">
                                                        <label>انتخاب شهر</label>
                                                        <div class="mt-1">
                                                            <select class="js-example-basic-single w-100" id="cities" name="{{$index}}">
                                                                <option disabled selected>ابتدا استان مورد نظر را وارد نمایید</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                        @break
                                        @case('text')
                                        <div class="col-md-{{$item['col']}}">
                                            <div class="form-group pt-3">
                                                <label for="xeditor">{{$item['fa_name']}}</label>
                                                <textarea @if($item['required']) required @endif name="{{$index}}" id="xeditor" rows="50" cols="80"></textarea>
                                            </div>
                                        </div>
                                        @break
                                        @case('radio')
                                        @foreach($item['data'] as $tmpIndex=>$name)
                                            <div class="col-sm-3 mt-1">
                                                <div class="icheck-square">
                                                    <input @if($item['required']) required @endif tabindex="7" value="{{$tmpIndex}}" type="radio"
                                                           id="xradio{{$tmpIndex}}" name="{{$index}}">
                                                    <label for="xradio{{$tmpIndex}}">{{$name}}</label>
                                                </div>
                                            </div>
                                        @endforeach
                                        @break
                                        @case('select')
                                            <div class="col-md-{{$item['col']}}">
                                                <label>{{$item['fa_name']}}</label>
                                                <select name="{{$index}}" class="js-example-basic-single w-100">
                                                    @foreach(\Modules\Core\Http\Controllers\BaseController::selectValue($item['data']) as $tmpIndex=>$tmpValue)
                                                        <option value="{{$tmpIndex}}">{{$tmpValue}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @break
                                        @case('multipleSelect')
                                            <div class="col-md-{{$item['col']}}">
                                                <label>{{$item['fa_name']}}</label>
                                                <select name="{{$index}}" class="js-example-basic-multiple w-100" multiple="multiple">
                                                    @foreach(\Modules\Core\Http\Controllers\BaseController::selectValue($item['data']) as $tmpIndex=>$tmpValue)
                                                        <option value="{{$tmpIndex}}">{{$tmpValue}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @break
                                        @case('map')
                                            <div class="col-md-12">
                                                <div id="googleMap" style="width:100%;height:400px;margin-top:20px"></div>
                                                <input type="hidden" id="lat" name="latitude" value="35.6970118" />
                                                <input type="hidden" id="lng" name="longitude" value="51.2097354" />
                                            </div>
                                        @break

                                    @endswitch

                                @endforeach

                                    <div class="col-md-12">
                                    <div class="form-group pt-5 text-left">
                                        <button type="submit" class="btn btn-success">ثبت</button>
                                        <a href="{{($redirectBack)}}" class="btn btn-danger">انصراف</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')

    <script src="{{Module::asset('core:node_modules/jquery-bar-rating/dist/jquery.barrating.min.js')}}"></script>
    <script src="{{Module::asset('core:node_modules/raphael/raphael.min.js')}}"></script>
    <script src="{{Module::asset('core:node_modules/jquery-sparkline/jquery.sparkline.min.js')}}"></script>
    <script src="{{Module::asset('core:js/jquery-sortable.js')}}"></script>
    <script src="{{Module::asset('core:node_modules/nestable/jquery.nestable.js')}}"></script>
    <script src="{{Module::asset('core:node_modules/select2/dist/js/select2.min.js')}}"></script>
    <script src="{{Module::asset('core:node_modules/icheck/icheck.min.js')}}"></script>
    <script src="{{Module::asset('core:node_modules/jquery-tags-input/dist/jquery.tagsinput.min.js')}}"></script>
    <script src="{{Module::asset('core:node_modules/dropify/dist/js/dropify.min.js')}}"></script>
    <script src="{{Module::asset('core:js/persian-date.min.js')}}"></script>
    <script src="{{Module::asset('core:js/persian-datepicker.min.js')}}"></script>
    <script>

        (function($) {
            'use strict';
            $('.pic-dropify').dropify(
                {
                    messages: {
                        'default': 'عکس خود را در این قسمت رها کنید',
                        'replace': 'عکس خود را در این قسمت رها کنید',
                        'remove':  'حذف',
                        'error':   'خطا رخ داده است'
                    }
                }
            );
            $('.file-dropify').dropify(
                {
                    messages: {
                        'default': 'فایل خود را در این قسمت رها کنید',
                        'replace': 'فایل خود را در این قسمت رها کنید',
                        'remove':  'حذف',
                        'error':   'خطا رخ داده است'
                    }
                }
            );
        })(jQuery);
        $('.persianDate').persianDatepicker({
            autoClose: true,
            onSelect:function(val){
                $('.persianDate').val(new persianDate(val).toCalendar('gregorian').toLocale('en').format('YYYY-MM-DD'))
            }
        });
        $('.persianDateTime').persianDatepicker({
            autoClose: true,
            onSelect:function(val){
                $('.persianDateTime').val(new persianDate(val).toCalendar('gregorian').toLocale('en').format('YYYY-MM-DD hh:mm:ss'))
            },
            timePicker: {
                enabled: true,
                meridiem: {
                    enabled: true
                }
            }});

    </script>
    <script src="{{Module::asset('core:ckeditor/ckeditor.js')}}"></script>

    <script src="{{Module::asset('core:js/iCheck.js')}}"></script>

    <script>
        function setState(val) {
            $.get('/advertisement/data-cities/'+val,function (res) {
                var city = '<option disabled selected>انتخاب نشده</option>'
                res.forEach(function (e) {
                    city +='<option value='+e.city_id+'>'+e.title+'</option>'
                })
                $('#cities').html(city)
            })
        }

        if($('#xeditor').length){
            CKEDITOR.replace('xeditor');
        }
        $(function () {
            $(".js-example-basic-single").select2({dir: 'rtl', placeholder: "انتخاب نشده"});
            $(".js-example-basic-multiple").select2({dir:'rtl',placeholder: "انتخاب نشده"});
            $('#editModal').on('shown.bs.modal', function (e) {
                $(".js-example-basic-single").select2({dir: 'rtl', placeholder: "انتخاب نشده"});
                $(".js-example-basic-multiple").select2({dir:'rtl',placeholder: "انتخاب نشده"});
            })

            $('#tags').tagsInput({
                'width': '100%',
                'height': '100%',
                'interactive': true,
                'defaultText': 'اضافه کردن',
                'removeWithBackspace': true,
                'minChars': 0,
                'maxChars': 20, // if not provided there is no limit
                'placeholderColor': '#666666'
            });

            $('#tags2').tagsInput({
                'width': '100%',
                'height': '100%',
                'interactive': true,
                'defaultText': 'اضافه کردن',
                'removeWithBackspace': true,
                'minChars': 0,
                'maxChars': 20, // if not provided there is no limit
                'placeholderColor': '#666666'
            });
            $('.icon-plus').on('click', function () {
                $(this).parent().children('.row').append(`

                                                <div class="col-md-4">
                                                    <div class="form-group pt-3">
                                                        <div class="mt-1">
                                                            <input name="{{$index}}" @if($item['required']) required @endif type="file" class="dropify file-dropify"/>
                                                        </div>
                                                    </div>
                                                </div>
                `)
                $('.dropify').dropify(
                    {
                        messages: {
                            'default': 'فایل خود را در این قسمت رها کنید',
                            'replace': 'فایل خود را در این قسمت رها کنید',
                            'remove':  'حذف',
                            'error':   'خطا رخ داده است'
                        }
                    }
                );
            })
        });
        $(document).on('keyup','#pSearchInput',function(){
            let input = $('#pSearchInput')
            if(input.val().length){
                $('.perm').hide()
                $('div[data-search*='+input.val()+']').show()
            }else{
                $('.perm').show()
            }
        })

    </script>
{{--    <script src="{{Module::asset('core:/js/dropify.js')}}"></script>--}}
    <script>
        function myMap() {
            var mapProp= {
                center:new google.maps.LatLng(35.6970118,51.2097354),
                zoom:7,
            };
            var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
            var marker = new google.maps.Marker({
                position: mapProp.center,
                map: map,
                draggable:true,
            });
            map.addListener('click', function (event) {
                placeMarker(map,marker,event.latLng);
            });
            marker.addListener('dragend',function (event) {
                placeMarker(map,marker,event.latLng)
            })
        }
        function placeMarker(map,marker,location) {
            marker.setPosition(location)
            $('#lat').val(location.lat())
            $('#lng').val(location.lng())
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsT_7eLUr_uriW0-bkVG60zXmDvf2e8fY&callback=myMap"></script>
@endsection