@extends('layouts.admin')
@section('title')
    ویرایش خبر
@endsection
@section('content')
    <link rel="stylesheet" href="https://unpkg.com/persian-datepicker@1.2.0/dist/css/persian-datepicker.min.css">
    <link href="https://cdn.jsdelivr.net/npm/toastr@2.1.4/build/toastr.min.css" rel="stylesheet">


    <div class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div class="container-fluid">
            <!-- ============================================================== -->
            <!-- Start Page Content -->
            <!-- ============================================================== -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">ویرایش خبر</h4>
                            @include('admin.index.messages')

                            <form class="m-t-30" action="/admin/news/{{$news->id}}update" method="post" enctype="multipart/form-data">
                                @method('patch')
                                @csrf

                                <div class="form-group">
                                    <label>زبان</label>
                                    <select class="form-control custom-select" name="locale" required>
                                        <option value="fa" @if($news->locale == 'fa') selected @endif>فارسی</option>
                                        <option value="en" @if($news->locale == 'en') selected @endif>انگلیسی</option>
                                        <option value="ru" @if($news->locale == 'ru') selected @endif>روسی</option>
                                    </select>
                                    @if($errors->has('locale'))
                                        <span>{{ $errors->first('locale') }}</span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label>دسته بندی</label>
                                    <select class="form-control custom-select" name="news_category_id" required>
                                        @foreach($category as $cat)
                                            <option value="{{ $cat->id }}" @if($news->news_category_id == $cat->id) selected @endif>{{ $cat->title }}</option>
                                        @endforeach
                                    </select>
                                    @if($errors->has('news_category_id'))
                                        <span>{{ $errors->first('news_category_id') }}</span>
                                    @endif
                                </div>


                                <div class="form-group">
                                    <label for="title">عنوان صفحه</label>
                                    <input type="text" class="form-control" required name="title" value="{{ old('title',$news->title) }}" id="title" aria-describedby="title" placeholder="عنوان">
                                    @if($errors->has('title'))
                                        <span>{{ $errors->first('title') }}</span>
                                    @endif
                                </div>


                                <div class="form-group">
                                    <label for="seo_title">عنوان سئو صفحه</label>
                                    <input type="text" class="form-control" required name="seo_title" value="{{ old('seo_title',$news->seo_title) }}" id="seo_title" aria-describedby="seo_title" placeholder="عنوان">
                                    @if($errors->has('seo_title'))
                                        <span>{{ $errors->first('seo_title') }}</span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="slug">اسلاگ</label>
                                    <input type="text" class="form-control" name="slug" value="{{ old('slug',$news->slug) }}" id="slug" aria-describedby="slug" placeholder="اسلاگ">
                                    @if($errors->has('slug'))
                                        <span>{{ $errors->first('slug') }}</span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="abstract">چکیده</label>
                                    <textarea class="form-control" name="abstract" id="abstract" rows="3" maxlength="500" placeholder="چکیده حداکثر ۵۰۰ کاراکتر">{{ old('abstract',$news->abstract) }}</textarea>
                                    @if($errors->has('abstract'))
                                        <span>{{ $errors->first('abstract') }}</span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="image">عکس </label>
                                    <input type="file" class="form-control" name="image" value="" id="image" aria-describedby="image" placeholder="عکس">
                                    @if($errors->has('image'))
                                        <span>{{ $errors->first('image') }}</span>
                                    @endif
{{--                                    @if(file_exists(storage_path($news['image'])) && $news['image'])--}}
                                        <img src="/{{($news['image'])}}" alt="" width="auto" height="200">
{{--                                    @endif--}}
                                </div>



                                <div class="form-group">
                                    <label for="mobile_src">عکس موبایل </label>
                                    <input type="file" class="form-control" name="mobile_src" value="" id="mobile_src" aria-describedby="mobile_src" placeholder="عکس موبایل">
                                    @if($errors->has('mobile_src'))
                                        <span>{{ $errors->first('mobile_src') }}</span>
                                    @endif
                                    <img src="/{{($news['mobile_src'])}}" alt="" width="auto" height="200">
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label>فرم ها</label>
                                        <select class="form-control custom-select snnipet">
                                            <option value="">انتخاب</option>
                                            @foreach($forms as $form)
                                                <option value="[form id={{ $form->id }}]">{{ $form->title }}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <input type="text" class="form-control show-snippet" style="margin-top: 30px" disabled>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label>گالری ها</label>
                                        <select class="form-control custom-select snnipet2">
                                            <option value="">انتخاب</option>
                                            @foreach($galleries as $item)
                                                <option value="[gallery id={{ $item->id }}]">{{ $item->title }}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <input type="text" class="form-control show-snippet2" style="margin-top: 30px" disabled>
                                    </div>
                                </div>



                                <div class="form-group">
                                    <label for="body">متن صفحه</label>
                                    <textarea type="text" class="form-control" required name="body"  id="body" aria-describedby="body" placeholder="متن">{{ old('body',$news->body) }}</textarea>
                                    @if($errors->has('body'))
                                        <span>{{ $errors->first('body') }}</span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="related_news">خبرهای مرتبط</label>
                                    <select class="form-control select2" name="related_news[]" id="related_news" multiple style="height: 36px;width: 100%;">
                                        @foreach($category as $cat)
                                            <optgroup label="{{ $cat->title }}">
                                                @foreach(\App\Models\News::where('news_category_id',$cat->id)->latest()->get() as $n)
                                                    <option value="{{ $n->id }}" @if(is_array($news->related_news) && in_array($n->id, $news->related_news)) selected @endif>{{ $n->title }}</option>
                                                @endforeach
                                            </optgroup>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="canonical"> کنونیکال </label>
                                    <textarea type="text" class="form-control"  name="canonical"  id="canonical" aria-describedby="canonical" placeholder="کنونیکال">{{ old('canonical',$news->canonical) }}</textarea>
                                    @if($errors->has('canonical'))
                                        <span>{{ $errors->first('canonical') }}</span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="meta_description"> توضیحات متا صفحه </label>
                                    <textarea type="text" class="form-control"  name="meta_description"  id="meta_description" aria-describedby="meta_description" placeholder="توضیحات متا صفحه">{{ old('meta_description',$news->meta_description) }}</textarea>
                                    @if($errors->has('meta_description'))
                                        <span>{{ $errors->first('meta_description') }}</span>
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label for="meta_keyword"> کلمات کلیدی صفحه </label>
                                    <input type="text" class="form-control"  name="meta_keyword" value="{{ old('meta_keyword',$news->meta_keyword) }}" id="meta_keyword" aria-describedby="meta_keyword" placeholder="کلمات کلیدی صفحه">
                                    @if($errors->has('meta_keyword'))
                                        <span>{{ $errors->first('meta_keyword') }}</span>
                                    @endif
                                    <p>کلمات کلیدی را با "," جدا نمایید</p>
                                </div>


                                <div class="form-group">
                                    <label for="schedule_at">زمان انتشار خودکار</label>
                                    <input type="text" class="form-control datepicker" name="schedule_at" value="{{ old('schedule_at',$news->schedule_at) }}" id="schedule_at" aria-describedby="schedule_at" placeholder="زمان انتشار">
                                    @if($errors->has('schedule_at'))
                                        <span>{{ $errors->first('schedule_at') }}</span>
                                    @endif
                                    <span>{{ $news->schedule_at }}</span>
                                </div>


                                <div class="form-group">
                                    <label for="published_at">زمان انتشار</label>
                                    <input type="text" class="form-control datetimepicker" name="published_at" value="{{ old('published_at',$news->published_at) }}" id="published_at" aria-describedby="published_at" placeholder="زمان انتشار">
                                    @if($errors->has('published_at'))
                                        <span>{{ $errors->first('published_at') }}</span>
                                    @endif
                                    <span>{{ $news->published_at }}</span>
                                </div>


                                <div class="form-group row p-t-20">
                                    <div class="col-sm-4">
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio1" name="active" value="1" @if($news->active==1) checked @endif  class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio1">فعال</label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="customRadio2" name="active" value="0" @if($news->active==0) checked @endif  class="custom-control-input">
                                            <label class="custom-control-label" for="customRadio2">غیرفعال</label>
                                        </div>
                                        <div class="custom-control custom-checkbox" style="margin-top: 10px;">
                                            <input type="checkbox" id="is_moving" name="is_moving" value="1" class="custom-control-input" @if($news->is_moving) checked @endif>
                                            <label class="custom-control-label" for="is_moving">نمایش در نوار اخبار متحرک</label>
                                        </div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary">ذخیره</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <!-- This Page JS -->
    <script src="/admin/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/admin/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/admin/dist/js/pages/forms/select2/select2.init.js"></script>
    <!--tinymce js-->
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        tinymce.init({
            directionality : "rtl",
            language : 'fa',
            height: "400px",
            extended_valid_elements : "script[src|async|defer|type|charset]",
            selector: "#body",
            plugins: 'image directionality code print preview searchreplace autolink directionality  visualblocks visualchars fullscreen image link    table charmap hr pagebreak nonbreaking  toc insertdatetime advlist lists textcolor wordcount   imagetools    contextmenu colorpicker textpattern media ',
            toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat |undo redo | image code| link fontsizeselect  | ',


            // without images_upload_url set, Upload tab won't show up
            images_upload_url: 'upload.texteditor',

            // override default upload handler to simulate successful upload
            images_upload_handler: function (blobInfo, success, failure) {
                var xhr, formData;

                xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', '{{url('/admin/upload')}}');

                xhr.onload = function() {
                    var json;

                    if (xhr.status != 200) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                    }

                    json = JSON.parse(xhr.responseText);

                    if (!json || typeof json.location != 'string') {
                        failure('Invalid JSON: ' + xhr.responseText);
                        return;
                    }

                    success(json.location);
                };

                formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());

                xhr.send(formData);
            },
        });
    </script>



    <script src="https://unpkg.com/persian-date@1.1.0/dist/persian-date.min.js"></script>
    <script src="https://unpkg.com/persian-datepicker@1.2.0/dist/js/persian-datepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/toastr@2.1.4/toastr.min.js"></script>
    <!-- This Page JS -->
    <script src="/admin/assets/libs/select2/dist/js/select2.full.min.js"></script>
    <script src="/admin/assets/libs/select2/dist/js/select2.min.js"></script>
    <script src="/admin/dist/js/pages/forms/select2/select2.init.js"></script>



    <script>
        $(document).ready(function () {
            $('#related_news').select2();
            @if($news->schedule_at)
            $(".datepicker").persianDatepicker({
                format: 'YYYY/MM/DD HH:mm:ss', // Ensure time is included
                initialValue: true,
                timePicker: {
                    enabled: true,  // Enable time picker
                    meridian: {
                        enabled: false // Use 24-hour format
                    }
                }
            });
            @else
            $(".datepicker").val(' ')
            $(".datepicker").persianDatepicker({
                format: 'YYYY/MM/DD HH:mm:ss', // Ensure time is included
                initialValue: false,
                timePicker: {
                    enabled: true,  // Enable time picker
                    meridian: {
                        enabled: false // Use 24-hour format
                    }
                }
            });
            @endif
        });
    </script>
    <script>
        $(document).ready(function () {
            @if($news->published_at)
            $(".datetimepicker").persianDatepicker({
                format: 'YYYY/MM/DD HH:mm:ss', // Ensure time is included
                initialValue: true,
                timePicker: {
                    enabled: true,  // Enable time picker
                    meridian: {
                        enabled: false // Use 24-hour format
                    }
                }
            });
            @else
            $(".datetimepicker").val(' ')
            $(".datetimepicker").persianDatepicker({
                format: 'YYYY/MM/DD HH:mm:ss', // Ensure time is included
                initialValue: false,
                timePicker: {
                    enabled: true,  // Enable time picker
                    meridian: {
                        enabled: false // Use 24-hour format
                    }
                }
            });
            @endif
        });

        $('.snnipet').on('change',function () {
            let snippet = $(this).val()
            $('.show-snippet').val(snippet)
        })
        $('.snnipet2').on('change',function () {
            let snippet = $(this).val()
            $('.show-snippet2').val(snippet)
        })
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const fileInput = document.getElementById('image');
            const submitButton = document.querySelector('button[type="submit"]');

            let fileReady = false;

            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const maxSize = 50 * 1024 * 1024; // 50 MB limit, for example
                    if (file.size > maxSize) {
                        toastr.error('فایل انتخاب شده خیلی بزرگ است. لطفاً یک فایل کوچکتر انتخاب کنید.');
                        fileInput.value = ""; // Clear file input
                        fileReady = false;
                        submitButton.disabled = true;
                    } else {
                        fileReady = true;
                        submitButton.disabled = false;
                        toastr.success('فایل با موفقیت انتخاب شد. حالا می‌توانید فرم را ارسال کنید.');
                    }
                } else {
                    fileReady = false;
                    submitButton.disabled = true;
                }
            });

            // const form = fileInput.closest('form');
            // form.addEventListener('submit', function(e) {
            //     if (!fileReady) {
            //         e.preventDefault();
            //         toastr.error('لطفاً ابتدا یک فایل معتبر انتخاب کنید.');
            //     }
            // });

            // Initially disable submit button
            // submitButton.disabled = true;
        });
    </script>
@endsection
@section('style')
    <!-- This Page CSS -->
    <link rel="stylesheet" type="text/css" href="/admin/assets/libs/select2/dist/css/select2.min.css">
    <style>
        .select2-selection__choice{
            background-color: #137eff !important;
        }
    </style>
@endsection