@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="mag" enctype="multipart/form-data">

                    @csrf
                    <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="عنوان مقاله">
                            @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">
                                <option>انتخاب کنید</option>
                                @foreach ($categories as $category)
                                    <option value="{{$category->id}}">{{$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" ></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 class="help-block"></div>
                    </div><!-- /.form-group -->

                    <textarea name="description" class="hide" id="description"></textarea>
                    <div id="editor"></div>
                    <button class="btn btn-success btn-round m-t-10" type="submit">ذخیره</button>
                </form>
            </div><!-- /.portlet-body -->
        </div><!-- /.portlet -->
    </div><!-- /.col-lg-12 -->
    <div class="col-lg-12">
        <div class="portlet box shadow">
            <div class="portlet-heading">
                <div class="portlet-title">
                    <h3 class="title">
                        <i class="icon-frane"></i>
                       {{-- جدول با Data Table--}}
                    </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">

                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped" id="data-table">
                        <thead>
                        <tr>
                            <th>ردیف</th>
                            <th>عنوان مقاله</th>
                            <th>دسته بندی</th>
                            <th>تصویر</th>
                            <th>عملیات</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($mags as $mag)
                            <tr>
                                <td>{{$loop->index+1}}</td>
                                <td>{{$mag->title}}</td>
                                <td>{{$mag->category->fa_title}}</td>
                                <td class="col-1">
                                    <img src="{{asset("$mag->image")}}" class="img-thumbnail" alt="">
                                </td>
                                <td>
                                    <a href="{{url("dashboard/mag/$mag->id/edit")}}" class="btn btn-info">ویرایش</a>

                                    @if($mag->status == 1)
                                        <a href="{{url("dashboard/mag/$mag->id/de-active")}}" class="btn btn-danger">غیرفعال کردن مقاله</a>
                                    @elseif($mag->status == 0)
                                            <a href="{{url("dashboard/mag/$mag->id/active")}}" class="btn btn-success">فعال کردن مقاله</a>
                                    @endif

                                </td>
                            </tr>
                        @endforeach

                        </tbody>
                    </table>
                </div><!-- /.table-responsive -->
            </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>
        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