@extends('layouts.admin')
@section('page_title', 'ویرایش مقاله')

@section('content')

    <div class="col-lg-12">
        <div class="portlet box shadow">
            <div class="portlet-heading">
                <div class="portlet-title">
                    <h3 class="title">
                        <i class="icon-settings"></i>
                        ویرایش مقاله
                    </h3>
                </div><!-- /.portlet-title -->
                <div class="buttons-box">
                    <a class="btn btn-sm btn-default btn-round btn-fullscreen" rel="tooltip" title="تمام صفحه" href="#">
                        <i class="icon-size-fullscreen"></i>
                    </a>
                    <a class="btn btn-sm btn-default btn-round btn-collapse" rel="tooltip" title="کوچک کردن" href="#">
                        <i class="icon-arrow-up"></i>
                    </a>
                </div><!-- /.buttons-box -->
            </div><!-- /.portlet-heading -->
            <div class="portlet-body">
                <form role="form" method="post" action="" enctype="multipart/form-data">

                    @csrf
                    @method('PUT')
                    <div class="form-body">
                        <div class="form-group row">
                            <label for="title" class="col-sm-3">عنوان</label>
                            <div class="col-sm-9">
                                <input name="title" id="title" type="text" class="form-control" placeholder="عنوان" value="{{$mag->title}}">
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->get('title') as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div><!-- /.form-group -->
                        <div class="form-group row">
                            <label for="category" class="col-sm-3">دسته بندی</label>
                            <div class="col-sm-9">
                                <select name="category_id" id="category_id" class="form-control select2">

                                    @foreach ($categories as $category)
                                        <option value="{{$category->id}}" @if($mag->category_id ==($category->id)) selected @endif>{{$category->fa_title}}</option>
                                    @endforeach
                                </select>
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->get('category_id') as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div><!-- /.form-group -->
                        <div class="form-group row">
                            <label for="short_description" class="col-sm-3">چکیده متن</label>
                            <div class="col-sm-9">
                                <textarea name="short_description" class="form-control" >{{$mag->short_description}}</textarea>
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->get('short_description') as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div>
                        </div><!-- /.form-group -->
                        <div class="form-group relative">
                            <input name="image" type="file" class="form-control">
                            <label>آپلود تصویر</label>
                            <div class="input-group round">
                                <input type="text" class="form-control file-input" placeholder="برای آپلود کلیک کنید">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-success">
                                        <i class="icon-picture"></i>
                                    </button>
                                </span>
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul>
                                            @foreach ($errors->get('image') as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            </div><!-- /.input-group -->
                    </div><!-- /.form-body -->

                            @if($mag->image)
                                <img src="{{asset("$mag->image")}}" class="img-thumbnail col-2 m-b-10" alt="">
                            @endif

                        <textarea name="description" class="hide" id="description">
                            {{ old('description', $mag->description) }}
                        </textarea>
                        <div id="editor"></div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-success btn-round">
                            <i class="icon-check"></i>
                            ذخیره
                        </button>
                        <a href="{{url('dashboard/mag')}}" class="btn btn-warning btn-round">
                            بازگشت
                            <i class="icon-close"></i>
                        </a>
                    </div><!-- /.form-actions -->
                </form>
            </div><!-- /.portlet-body -->
        </div><!-- /.portlet -->
    </div><!-- /.col-lg-12 -->
@endsection

@section('js')
    <script src="{{asset('assets/admin/plugins/ckeditor-full/ckeditor.js')}}"></script>
    <script src="{{asset('assets/admin/js/pages/ckeditor.js')}}"></script>

    <script>
        document.getElementById('editor').innerHTML = document.getElementById('description').value;

        CKEDITOR.replace('editor', {
            contentsLangDirection: 'rtl',
            contentsLanguage: 'fa',
            // اگه نیاز به آپلود تصویر هست اینا رو هم اضافه کن
            // filebrowserUploadUrl: '/admin/mags/upload?_token={{ csrf_token() }}',
            // filebrowserUploadMethod: 'form'
        });

        // قبل از ارسال فرم، محتوای ادیتور رو میریزه توی textarea
        document.querySelector('form').addEventListener('submit', function(e) {
            var editorData = CKEDITOR.instances.editor.getData();
            document.getElementById('description').value = editorData;
        });
    </script>

    @if(session('success'))
        <script>
            swal('','{{session('success')}}','success');
        </script>
    @elseif(session('error'))
        <script>
            swal('','{{session('error')}}','error');
        </script>
    @endif

@endsection