@extends('layout')
@section('content')
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Add Article</h4>


                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                                @csrf
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div>
                                            <label class="form-label">Title</label>
                                            <input required name="title" class="form-control" type="text" placeholder="Title" >
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Category</label>
                                            <select required class="form-control" name="category">
                                                <option value="">- Please Select -</option>
                                                                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Thumbnail</label>
                                            <div class="thumnail-upload" id="thumb-upload" onclick="browseFile('#thumbnail')" >
                                                <div class="text">
                                                    <i class="bx bx-upload"></i>
                                                    <p class="text-upload">Upload Image</p>
                                                </div>
                                            </div>
                                            <img onclick="browseFile('#thumbnail')"; class="preview-image" id="preview-thumbnail" src="" style="display: none;width: 200px; height: 120px;object-fit: cover;object-position: center;" />
                                            <input required id="thumbnail" accept="image/*" class="hidden-file"  onchange="previewImage(this,'preview-thumbnail','#thumb-upload')"  type="file" name="image" placeholder="Title"
                                            >
                                        </div>
                                    </div>

                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Meta Title</label>
                                           <textarea required class="form-control" name="meta_title" ></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mt-4">
                                        <div>
                                            <label class="form-label">Meta Desc</label>
                                            <textarea required class="form-control" name="meta_desc" ></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-lg-12">
                                        <div>
                                            <label class="form-label">Content</label>
                                            <textarea required id="elm1" name="body"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-lg-6">
                                        <div>
                                            <label class="form-label">Tag</label>

                                            <select name="tag[]" class="select2 form-control select2-multiple"
                                                    multiple="multiple" data-placeholder="Choose ...">
                                                


                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-check form-switch form-switch-md mb-3" dir="ltr">
                                            <input class="form-check-input" name="isFavorite" type="checkbox" >
                                            <label class="form-check-label">Favorite Article</label>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-12 mt-4">
                                    <div>
                                        <label class="form-label">Schema</label>
                                        <textarea rows="20"  class="form-control" name="schema" ></textarea>
                                    </div>
                                </div>


                                </div>
                                <diV>
                                    <button type="submit" class="btn btn-success waves-effect waves-light mt-5"
                                            style="float: right;">Post Article
                                    </button>
                                </diV>
                            </form>

                        </div>
                    </div>
                </div> <!-- end col -->
            </div> <!-- end row -->

        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->
@endsection