@extends('layouts.admin')
@section('content')
    {{--
                                        <script src="assets(ckeditor/ckeditor_standard.js)"></script>
<script src="assets(ckeditor/ckeditor.js)"></script>
--}}
    <script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>


    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="breadcrumb-wrapper col-12">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                </li>
                                <li class="breadcrumb-item"><a href=""> الرئيسيه</a>
                                </li>
                                <li class="breadcrumb-item active"> تعديل - {{ $page->title_ar }}
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Basic form layout section start -->
                <section id="basic-form-layouts">
                    <div class="row match-height">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title" id="basic-layout-form"> تعديل </h4>
                                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                    <div class="heading-elements">
                                        <ul class="list-inline mb-0">
                                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                @include('dashboard.includes.alerts.success')
                                @include('dashboard.includes.alerts.errors')
                                <div class="card-content collapse show">
                                    <div class="card-body">
                                        <form class="form" action="{{ route('admin.other_pages.update', $page->id) }}"
                                            method="POST" enctype="multipart/form-data">
                                            @csrf

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

                                            <div class="form-group">
                                                <div class="text-center">

                                                </div>
                                            </div>




                                            <div class="form-body">

                                                <h4 class="form-section"><i class="ft-home"></i> بيانات القسم </h4>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="projectinput1"> ( AR ) العنوان
                                                            </label>
                                                            <input type="text" id="title_ar" class="form-control"
                                                                placeholder="  " value="{{ $page->title_ar }}"
                                                                name="title_ar">
                                                            @error('title_ar')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>

                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label for="projectinput1"> (EN ) العنوان
                                                            </label>
                                                            <input type="text" class="form-control" placeholder="  "
                                                                value="{{ $page->title_en }}" name="title_en">
                                                            @error('title_en')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                </div>




                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <ul class="nav nav-tabs" id="descriptionTab" role="tablist">
                                                            <li class="nav-item">
                                                                <a class="nav-link active" id="description-ar-tab"
                                                                    data-toggle="tab" href="#description-ar"
                                                                    role="tab" aria-controls="description-ar"
                                                                    aria-selected="true">Description AR</a>
                                                            </li>
                                                            <li class="nav-item">
                                                                <a class="nav-link" id="description-en-tab"
                                                                    data-toggle="tab" href="#description-en"
                                                                    role="tab" aria-controls="description-en"
                                                                    aria-selected="false">Description EN</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>

                                                <div class="tab-content" id="descriptionTabContent">
                                                    <!-- Description AR Tab -->
                                                    <div class="tab-pane fade show active" id="description-ar"
                                                        role="tabpanel" aria-labelledby="description-ar-tab">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    {{--   <h5>Long Description AR <span class="text-danger">*</span></h5> --}}
                                                                    <div class="controls">
                                                                        <textarea id="editor1" name="description_ar" rows="10" cols="80" required="">{{ $page->description_ar }}</textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Description EN Tab -->
                                                    <div class="tab-pane fade" id="description-en" role="tabpanel"
                                                        aria-labelledby="description-en-tab">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="form-group">
                                                                    {{-- <h5>Long Description English <span class="text-danger">*</span></h5> --}}
                                                                    <div class="controls">
                                                                        <textarea id="editor2" name="description_en" rows="10" cols="80">{{ $page->description_en }}</textarea>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>






                                                <div class="col-md-6">
                                                    <div class="form-group mt-1">
                                                        <input type="checkbox" value="1" name="status"
                                                            id="switcheryColor4" class="switchery" data-color="success"
                                                            @if ($page->status == 1) checked @endif />
                                                        <label for="switcheryColor4" class="card-title ml-1">الحالة
                                                        </label>

                                                        @error('status')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>

                                    </div>

                                    <div class="form-actions">
                                        <button type="button" class="btn btn-warning mr-1" onclick="history.back();">
                                            <i class="ft-x"></i> تراجع
                                        </button>
                                        <button type="submit" class="btn btn-primary">
                                            <i class="la la-check-square-o"></i> حفظ
                                        </button>
                                    </div>
                                    </form>

                                </div>


                            </div>
                        </div>
                    </div>
            </div>
            </section>
            <!-- // Basic form layout section end -->
        </div>
    </div>
    </div>

@stop
@section('script')
    <script type="text/javascript">
        CKEDITOR.replace('editor1', {
            filebrowserUploadUrl: "{{ route('admin.pages.uploadCkeditor', ['_token' => csrf_token()]) }}",
            filebrowserUploadMethod: 'form'
        });
    </script>
    <script type="text/javascript">
        CKEDITOR.replace('editor2', {
            filebrowserUploadUrl: "{{ route('admin.pages.uploadCkeditor', ['_token' => csrf_token()]) }}",
            filebrowserUploadMethod: 'form'
        });
    </script>

    <script>
        var uploadedDocumentMap = {}
        Dropzone.options.dpzMultipleFiles = {
            paramName: "dzfile", // The name that will be used to transfer the file
            //autoProcessQueue: false,
            maxFilesize: 5, // MB
            clickable: true,
            addRemoveLinks: true,
            acceptedFiles: 'image/*',
            dictFallbackMessage: " المتصفح الخاص بكم لا يدعم خاصيه تعدد الصوره والسحب والافلات ",
            dictInvalidFileType: "لايمكنك رفع هذا النوع من الملفات ",
            dictCancelUpload: "الغاء الرفع ",
            dictCancelUploadConfirmation: " هل انت متاكد من الغاء رفع الملفات ؟ ",
            dictRemoveFile: "حذف الصوره",
            dictMaxFilesExceeded: "لايمكنك رفع عدد اكثر من هضا ",
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }

            ,
            url: "{{ route('admin.pages.images.store') }}", // Set the url
            success: function(file, response) {
                $('form').append('<input type="hidden" name="document[]" value="' + response.name + '">')
                uploadedDocumentMap[file.name] = response.name
            },
            removedfile: function(file) {

                file.previewElement.remove()
                var name = ''
                if (typeof file.file_name !== 'undefined') {
                    name = file.file_name

                } else {
                    name = uploadedDocumentMap[file.name]
                }

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'POST',
                    url: "{{ route('admin.pages.images.delete') }}",


                    data: {
                        filename: name
                    },
                    success: function(data) {
                        $('form').find('input[name="document[]"][value="' + data.name + '"]').remove()
                        console.log("File has been successfully removed!!");
                        alert(data.success + " File has been successfully removed!");
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });



            },
            // previewsContainer: "#dpz-btn-select-files", // Define the container to display the previews
            init: function() {

                @if (isset($event) && $event->document)
                    var files = {!! json_encode($event->document) !!}
                    for (var i in files) {
                        var file = files[i]
                        this.options.addedfile.call(this, file)
                        file.previewElement.classList.add('dz-complete')
                        $('form').append('<input type="hidden" name="document[]" value="' + file.file_name + '">')
                    }
                @endif
            }
        }
    </script>

@stop