@extends('layouts.app')

@section('page_css')
    @parent
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/flatpickr/flatpickr.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/pickr/pickr-themes.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/dropzone/dropzone.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/typography.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/katex.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/quill/editor.css') }}" />
    <style>
        
    </style>
@endsection

@section('content')
@php
    $blog_status_arr = [
        '1' => 'Enable',
        '0' => 'Disable'
    ];
@endphp
<!-- Content -->

<!-- breadcrumb start -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a href="#">Master</a>
        </li>
        <li class="breadcrumb-item active">Blogs</li>
        <li class="breadcrumb-item active">Create</li>
    </ol>
</nav>
<!-- breadcrumb end -->
<input type = "hidden" value = "{{ date('d-m-Y') }}" id = "maxDtHidd"/>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div
              class="card-header sticky-element bg-label-secondary d-flex justify-content-sm-between align-items-sm-center flex-column flex-sm-row"
            >
                <h5 class="card-title mb-sm-0 me-2">Create Blog</h5>
                <div class="action-btns">
                    <a href="{!! route('admin.blogs.index') !!}" 
                        class="btn btn-sm btn-label-primary me-3">
                        <span class="align-middle">
                            Back to Listing
                        </span>
                    </a>
                    <button 
                        type="submit" 
                        id="mail_config_add_submit" 
                        form="blog_add_form" 
                        onclick = "submitBlogForm(this)"
                        class="btn btn-sm btn-primary">  
                        Save
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-8 mx-auto">      
                        <form id="blog_add_form" action="{{ route('admin.blogs.store') }}" method="post" enctype="multipart/form-data">
                         @csrf
                            <div class="mb-3 control-group">
                                <label for="title" class="form-label">Title
                                    <span class="text-danger">*</span>
                                </label> 
                                <input
                                  type="text"
                                  class="form-control"
                                  id="title"
                                  name="title"
                                  placeholder="Title"
                                />
                            </div>  

                            <div class="mb-3 control-group">
                                <label for="date" class="form-label">Date
                                    <span class="asterisk">*</span>
                                </label>
                                <input id="date" name="date" type="text" class="form-control data_picker" placeholder="YYYY-MM-DD" />
                            </div>   

                            <div class="mb-3 control-group">
                                <label for="enabled" class="form-label">Status</label>
                                <select  name="enabled" class="select2 form-select form-select-lg" data-allow-clear="true"
                                data-placeholder="select status">
                                    <option value= "" ></option>
                                    @foreach($blog_status_arr as $key => $status)
                                        <option value= "{{ $key }}" >
                                            {{ $status }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            

                            <div class="mb-3 control-group">
                                <label for="feature_image" class="form-label">
                                    Feature Image
                                    <span class="asterisk">(Supported formats: JPG, PNG, WEBP, GIF, BMP, TIF | Max file size: 2MB)</span>
                                </label>
                                <div>
                                  <input id="feature_image" 
                                        class="form-control" 
                                        name="feature_image" 
                                        type="file" />
                                </div>
                            </div>
                        
                            <div class="mb-3 control-group">
                                <input type="hidden" id="content" name="content" value="" />
                                <label for="content" class="form-label">Content 
                                </label>
                                <div class="mt-2">
                                    <div id="content-full-editor" class="full-editor"></div>
                                </div>
                            </div>    

                            <div class="mb-3">
                                <h3>SEO</h3>
                            </div>

                            <div class="mb-3 control-group">
                                <label for="meta_title" class="form-label">Meta Title
                                </label>   
                                <input
                                  type="text"
                                  class="form-control"
                                  id="meta_title"
                                  name="meta_title"
                                  placeholder="Meta Title"
                                />
                            </div>   

                            <div class="mb-3 control-group">
                                <label for="meta_description" class="form-label">Meta Description
                                </label>   
                                <input
                                  type="text"
                                  class="form-control"
                                  id="meta_description"
                                  name="meta_description"
                                  placeholder="Meta Description"
                                />
                            </div>     

                            <div class="mb-3 control-group">
                                <label for="meta_keywords" class="form-label">Meta Keywords
                                </label>   
                                <input
                                  type="text"
                                  class="form-control"
                                  id="meta_keywords"
                                  name="meta_keywords"
                                  placeholder="Meta Keywords"
                                />
                            </div>    

                             <div class="mb-3 control-group">
                                <label for="header" class="form-label">header
                                </label>   
                                <textarea
                                  class="form-control"
                                  id="header"
                                  name="header"
                                  placeholder="Header"
                                  rows = "4"
                                /></textarea>
                            </div>    

                            <div class="mb-3">
                                <h3>Also Read</h3>
                            </div>

                            <div class="mb-3 control-group">
                                <label for="also_read_title" class="form-label">Title
                                </label>   
                                <input
                                  type="text"
                                  class="form-control"
                                  id="also_read_title"
                                  name="also_read_title"
                                  placeholder="Title"
                                />
                            </div>     

                            <div class="mb-3 control-group">
                                <label for="also_read_link" class="form-label">Link
                                </label>  
                                 <textarea
                                  class="form-control"
                                  id="also_read_link"
                                  name="also_read_link"
                                  placeholder="Link"
                                  rows = "3"
                                /></textarea>
                            </div>      
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / Content -->  
@endsection

@section('page_scripts')
@parent
<script src="{{ asset('assets/js/form-layouts.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-sticky/jquery-sticky.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/jquery-timepicker/jquery-timepicker.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/pickr/pickr.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/quill/katex.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/quill/quill.js') }}"></script>
<script src="{{ url('plugins/jquery-validation/dist/jquery.validate.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js" integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        Master.handleAddBlogFormValidation()
        let message = @JSON(session()->get('message'));
        if(message)
        {
            if(message.type == 'success')
            {
            showMessage(message.message);
            }
            else if(message.type == 'error')
            {
            showMessage(message.message, "error");
            }
        }

        //Error Messaeges
        let errors = @JSON($errors->all());
        if(Array.isArray(errors))
        {
            errors.forEach((message,index)=>{
                showMessage(message,'error');
            })
        }
    });
</script>
<script src="{{ asset('dist/js/blogs/blogs.js') }}"></script>
@endsection
<!--/ END PAGE CONTENT -->