@extends('Admin.template')

@section('content')
    <!-- Page header -->
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-arrow-right6 mr-2"></i>
                    <span class="font-weight-semibold">
                      اعدادات الدعايات
                    </span></h4>
                <a href="#" class="header-elements-toggle text-default d-md-none">
                    <i class="icon-more"></i></a>
            </div>
        </div>
    </div>

    <div class="content">
        <!-- Main charts -->
        <!-- Floating labels -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header header-elements-inline">
                        <h6 class="card-title">   اعدادات الدعايات</h6>
                        <div class="header-elements">
                            <div class="list-icons">
                                <a class="list-icons-item" data-action="collapse"></a>
                            </div>
                        </div>
                    </div>



                    <div class="card-body">
                        <form action="#" class="form2" id="form2" method="post">
                            @csrf
                            @method('POST')

                            <input type="hidden" name="id" value="{{$id}}">




                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="key" name="key"
                                               data-msg="key بدون مسافات اكتب ال "
                                               required>
                                    </div>
                                </div>


                                <div class="col-md-3">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="value" name="value"
                                               data-msg="ادخل القيمه"
                                               required>
                                    </div>
                                </div>



{{--

                                <div class="col-md-3">
                                    <div class="form-check form-check-switch form-check-switch-left">
                                        <label class="form-check-label d-flex align-items-center">
                                            <input type="checkbox" class="form-check-input form-check-input-switch"
                                                   name="value"
                                                   data-on-text="On" data-off-text="Off"
                                                   data-on-color="default" data-off-color="danger"
                                                   checked
                                            >
                                           الحاله
                                        </label>
                                    </div>
                                </div>
--}}

                                <div class="col-md-3">
                                    <button type="submit" class="btn bg-teal-400">اضافه <i class="icon-floppy-disk ml-2"></i> </button>
                                </div>

                            </div>

                            <div class="alert alert-success alert-styled-left alert-dismissible" style="display: none">
                                <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                                <span class="font-weight-semibold">تم تحديث البيانات بنجاح</span>
                            </div>


                            <div class="alert alert-danger alert-styled-left alert-dismissible" style="display: none">
                                <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                                <span class="font-weight-semibold">{{__('messages.error')}}</span>
                                <error></error>
                            </div>



                        </form>
                    </div>



                    <div class="card-body">
                        <form action="#" class="form1" id="form1">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="id" value="{{$id}}">
                            <div class="row">


                                @foreach($settings as $k => $val)


                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label> {{$k}}</label>
                                            <input type="number" class="form-control" placeholder="قيمه ال {{$k}}"    name="{{$k}}"

                                                   value="{{$val}}"
                                                   data-msg="ادخل القيمه"
                                                   required>
                                        </div>
                                    </div>

{{--
                                    <div class="col-md-4 mb-1">
                                        <div class="form-check form-check-switch form-check-switch-left">
                                            <label class="form-check-label d-flex align-items-center">
                                                <input type="checkbox" class="form-check-input form-check-input-switch"
                                                       name="{{$k}}"
                                                       data-on-text="On" data-off-text="Off"
                                                       data-on-color="default" data-off-color="danger"
                                                       @if($val) checked @endif>
                                                {{$k}}
                                            </label>
                                        </div>
                                    </div>

                                    --}}
                                @endforeach


                            </div>
                            <div class="alert alert-success alert-styled-left alert-dismissible" style="display: none">
                                <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                                <span class="font-weight-semibold">تم تحديث البيانات بنجاح</span>
                            </div>


                            <div class="alert alert-danger alert-styled-left alert-dismissible" style="display: none">
                                <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
                                <span class="font-weight-semibold">{{__('messages.error')}}</span>
                                <error></error>
                            </div>
                            <button type="submit" class="btn bg-teal-400 mt-3">{{__('messages.save')}}<i
                                    class="icon-floppy-disk ml-2"></i>
                            </button>

                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection
@section('scripts')
    <script>
        $('.form2').validate({
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            submitHandler: function (form) {
                $('body').block({
                    message: '<i class="icon-spinner4 spinner"></i>',
                    overlayCSS: {backgroundColor: '#1b2024', opacity: 0.8, zIndex: 1200, cursor: 'wait'},
                    css: {border: 0, color: '#fff', padding: 0, zIndex: 1201, backgroundColor: 'transparent'}
                });
                var form_data = new FormData(document.forms["form2"]);
                $.ajax({
                    url: "{{route('add_key_settings')}}",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    method: "POST",
                    success: function (result) {
                        $('body').unblock();
                        if (result.error_code == 0) {
                            $('#form2').find('.alert-success').css('display', 'block');
                        } else {
                            $('#form2').find('.alert-danger').css('display', 'block');
                        }
                        setTimeout(function () {
                            $('#form2').find('.alert').css('display', 'none');
                        }, 1000)
                    }
                });
                return false;
            }
        });

        $('.form1').validate({
            errorClass: 'validation-invalid-label',
            successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).removeClass(errorClass);
            },
            submitHandler: function (form) {
                $('body').block({
                    message: '<i class="icon-spinner4 spinner"></i>',
                    overlayCSS: {backgroundColor: '#1b2024', opacity: 0.8, zIndex: 1200, cursor: 'wait'},
                    css: {border: 0, color: '#fff', padding: 0, zIndex: 1201, backgroundColor: 'transparent'}
                });
                var form_data = new FormData(document.forms["form1"]);
                $.ajax({
                    url: "{{route('save_settings')}}",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    method: "POST",
                    success: function (result) {
                        $('body').unblock();
                        if (result.error_code == 0) {
                              $('#form1').find('.alert-success').css('display', 'block');
                        } else {
                              $('#form1').find('.alert-danger').css('display', 'block');
                        }
                        setTimeout(function () {
                              $('#form1').find('.alert').css('display', 'none');
                        }, 1000)
                    }
                });
                return false;
            }
        });
    </script>
@endsection