@extends('admin.layouts.app')
@section('title')
    {{ __('create_page') }}
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <form class="" action="{{ route('module.blog.store') }}" method="POST"
                    enctype="multipart/form-data">
                    <input type="hidden" name="author_id" value="{{ auth()->id() }}">
                    @csrf
                    <div class="card-header">
                        <h3 class="card-title line-height-36">{{ __('create') }}</h3>
                        <button type="submit" class="btn bg-success float-right">
                         <i class="fas fa-plus mr-1"></i>
                            {{ __('save') }}
                        </button>
                        <a href="{{ route('module.blog.index') }}"
                            class="btn mr-2 bg-primary float-right"><i
                                class="fas fa-arrow-left"></i>&nbsp;{{ __('back') }}
                        </a>
                    </div>
                    <div class="container-fluid mt-3">
                     
                            {{-- <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title line-height-36">{{ __('blog') }} {{ __('create') }}</h4>
                                   
                                </div>
                            </div> --}}

                        
                            <div class="row">
                                <div class="form-group col-6">
                                    <label class="form-lebel">
                                        {{ __('title') }}
                                        <small class="text-danger">*</small>
                                    </label>
                                    <input value="{{ old('title') }}" name="title" type="text"
                                        class="form-control @error('title') is-invalid @enderror"
                                        placeholder="{{ __('enter') }} {{ __('title') }}">
                                    @error('title')
                                        <span class="invalid-feedback"
                                            role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <div class="form-group col-6">
                                    <label class="form-lebel">
                                        {{ __('url') }}
                                        <small class="text-danger">*</small>
                                    </label>
                                    <input type="text" name="url" value="{{old('url')}}" class="form-control @error('url') is-invalid @enderror" placeholder="Url" />
                                    @error('url')
                                    <span class="invalid-feedback"
                                        role="alert"><strong>{{ $message }}</strong></span>
                                     @enderror
                                </div> 
                            </div>
                         
                            <div class="row">
                                
                                <div class="col-12">
                                    <div class="">
                                            <ul class="nav nav-tabs" role="tablist">
                                                <li class="nav-item">
                                                    <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab"> {{ __('content') }}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link"  data-toggle="tab" href="#tabs-2" role="tab">{{ __('images') }}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">{{ __('meta_tags') }}</a>
                                                </li> 
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#tabs-4" role="tab">{{ __('fields') }}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" data-toggle="tab" href="#tabs-5" role="tab">{{ __('publish') }}</a>
                                                </li>
                                            </ul>
                                     <div class="body tab-content">
                                            
                                          
                                   
                                    <div class="card tab-pane active" id="tabs-1" role="tabpanel">
                                        
                                        <div class="card-body">
                                            <div  class="row">
                                           
                                                <div class="form-group col-12">
                                                    <label class="form-lebel">
                                                        {{ __('description') }}
                                                        <small class="text-danger">*</small>
                                                    </label>
                                                    <textarea id="editor2" type="text" class="form-control" name="description"
                                                        placeholder="{{ __('enter') }}  {{ __('description') }}">{{ old('description') }}</textarea>
                                                    @error('description')
                                                        <span class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>


                                            <div class="row">
                                                <div class="form-group col-6">
                                                    <label class="form-lebel">
                                                        {{ __('category') }}
                                                        <small class="text-danger">*</small>
                                                    </label>
                                                    <select name="category_id"
                                                        class="@error('category_id') is-invalid @enderror w-100-p form-control">
                                                        <option value="">{{ __('select_category') }}</option>
                                                        @foreach ($categories as $category)
                                                            <option {{ old('category_id') == $category->id ? 'selected' : '' }}
                                                                value="{{ $category->id }}">{{ $category->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('category_id')
                                                        <span class="invalid-feedback"
                                                            role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                                <div class="form-group col-6">
                                                    <label class="form-lebel">
                                                        {{ __('status') }}
                                                        <small class="text-danger">*</small>
                                                    </label>
                                                    <select name="status"
                                                    class="form-control {{ error('status') }}"
                                                    id="status">
                                                        <option {{ old('status') == 'draft' ? 'selected' : '' }}
                                                        value="draft">{{ __('draft') }}</option>
                                                        <option {{ old('status') == 'published' ? 'selected' : '' }}
                                                        value="published">{{ __('published') }}</option>
                                                        <option {{ old('status') == 'unpublished' ? 'selected' : '' }}
                                                        value="unpublished">{{ __('unpublished') }}</option>
                                                    </select>     
                                                </div>
                                             
                                            </div>

                                            <div class="row">
                                                <div class="form-group col-6">
                                                    <label class="form-lebel">
                                                        {{ __('tag') }}
                                                        <small class="text-danger">*</small>
                                                    </label>
                                                  
                                                    <select name="tag_id[]"
                                                        class="@error('tag_id') is-invalid @enderror w-100-p select2bs44" multiple>
                                                        <option value=""  class="d-none" disabled >{{ __('select_tag') }}</option>
                                                        @foreach ($tags as $tag)
                                                            <option {{ old('tag_id') == $tag->id ? 'selected' : '' }}
                                                                value="{{ $tag->id }}">{{ $tag->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('tag_id')
                                                        <span class="invalid-feedback"
                                                            role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            </div>
                    
                
                                                          
                                    
                    
                                        </div>
                                    </div>
                                    <div class="card tab-pane" id="tabs-2" role="tabpanel">
                                        <div class="card-body">
                                    
                                            <div class="form-group col-6">
                                                <label class="form-lebel">
                                                    {{ __('image') }}
                                                    <small class="text-danger">*</small>
                                                </label>
                                                <div class="upload-btn-wrapper">
                                                    <input type="file" class="form-control dropify" data-default-file=""
                                                        name="image" accept="image/png, image/jpg, image/jpeg, image/gif"
                                                        data-allowed-file-extensions='["jpg", "jpeg","png", "gif"]'
                                                        data-max-file-size="3M">
                                                        
                                                </div>
                                                @error('image')
                                                    <span class="invalid-feedback d-block"
                                                        role="alert"><strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                
                
                                    <div class="card tab-pane" id="tabs-3" role="tabpanel">

                                        <div class="card-body">
                                            <div class="row">
                                                
                                                <div class="form-group col-6">
                                                    <x-forms.label name="Meta title" :required="false"/>
                                                    <x-forms.input type="text" name="meta_title" placeholder="Enter meta Title" />
                                                    <x-forms.error name="meta_title" />
                                                </div>
                                                <div class="form-group col-6">
                                                    <x-forms.label name="Meta Description" :required="false"/> 
                                                    <textarea type="text" class="form-control" name="meta_description" placeholder="Enter meta Description" >{{ old('meta_description') }}</textarea>
                                                    <x-forms.error name="meta_description" />
                                                </div>
                                               
                                           
                                            </div>

                                          

                                            {{-- <div class="row">
                                                <div class="form-group col-6">
                                                    <x-forms.label name="Created By" :required="false"/>
                                                    <input type="text" class="form-control" name="created_by_name" value="{{$created_by_name}}" placeholder="Enter Created By" readonly/>
                                                </div>
                                                <div class="form-group col-6">
                                                    <x-forms.label name="Modified By" :required="false"/>
                                                    <input type="text" class="form-control" name="modified_by_name" value="{{$created_by_name}}"  placeholder="Enter Modified By" readonly/>
                                                </div>
                                            </div>  --}}
                
                                            <div class="row">
                                                <div class="form-group col-12">
                                                    <x-forms.label name="Meta keywords" :required="false"/>
                                                    <x-forms.input type="text" name="meta_keywords" placeholder="Enter meta keywords" />
                                                </div>
                                             
                                            </div>    
                                            <div class="row">
                                                <div class="form-group col-12">
                                                    <label class="form-lebel">
                                                        {{ __('short_description') }}
                                                    </label>
                                                    <textarea rows="5" type="text" class="form-control height-124px" name="short_description"
                                                        placeholder="{{ __('enter') }} {{ __('short_description') }}">{{ old('short_description') }}</textarea>
                                                    @error('short_description')
                                                        <span class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>
                                            
                                            </div>         
                                        </div>
                                    </div>

                                    <div class="card tab-pane" id="tabs-4" role="tabpanel">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="form-group col-12">
                                                    <x-forms.label name="Field" :required="false"/>
                                                    <x-forms.input type="text" name="fields" placeholder="Enter Field" />
                                                </div>
                                            </div>
                                        </div>         
                                    </div>

                                    <div class="card tab-pane" id="tabs-5" role="tabpanel">
                                        <div class="card-body">
                                            <div class="row">

                                                    <div class="form-group col-6">
                                                        <x-forms.label name="Display Date" :required="false"/> 
                                                        <x-forms.input type="date" name="display_date" placeholder="Enter Display Date" />   
                                                        <x-forms.error name="display_date" />                                             
                                                    </div>
                                                    <div class="form-group col-6">
                                                        <x-forms.label name="Created Date" :required="false"/>
                                                        <x-forms.input type="date" name="created_date" placeholder="Enter Created Date" />
                                                        <x-forms.error name="created_date" />
                                                    </div>
                                               
                                               
                                            </div>
                                        </div>         
                                    </div>
                                 
                                    </div>
                                </div>
                                </div>
                             
                               
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="{{ asset('backend/plugins/dropify/css/dropify.min.css') }}">
    <style>
        .ck-editor__editable_inline {
            min-height: 160px;
        }

        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .height-124px {
            height: 124px !important
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        .align-items-center {
            -ms-flex-align: center !important;
            align-items: center !important;
        }

        .d-flex {
            display: -ms-flexbox !important;
            display: flex !important;
        }
    </style>
@endsection

@section('script')
    <script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>
    <script src="{{ asset('backend/plugins/dropify/js/dropify.min.js') }}"></script>
    <script>
        $('.select2bs4').select2({
        theme: 'bootstrap4'
        });
        // $('.select2bs44').select2({
        // theme: 'bootstrap4'
        // });
        //Initialize Select2 Elements
        $('.select2bs44').select2({
            theme: 'bootstrap4',
            multiple: true,
            placeholder: 'Select Tags'
        })

        ClassicEditor
            .create(document.querySelector('#editor'))
            .catch(error => {
                console.error(error);
            });

        // dropify
        $('.dropify').dropify();

        ClassicEditor
            .create(document.querySelector('#editor2'))
            .catch(error => {
                console.error(error);
            });

            $('#input-tags').selectize({
                delimiter: ',',
                persist: false,
                create: function(input) {
                    return {
                        value: input,
                        text: input
                    }
                }
            });
    </script>
@endsection