@extends('layouts.admin')
@section('content')
<div class="card">
    <div class="card-header bg-white p-4">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <h4 class="mb-0 text-dark fw-bold"><i class="bi bi-pencil me-2 text-primary"></i>Add blog post</h4>
                    </div>
                    <div class="col-md-6 text-end">
                        <!-- <a href="new-page" class="btn btn-primary fw-bold"> </a> -->
                        <!-- <div class="input-group"> -->
                            
                            <!-- <input type="text" class="form-control" id="searchInput" placeholder="Search projects, client, or status..."> -->
                            <!-- <span class="input-group-text"><i class="bi bi-search"></i></span> -->
                             
                             <!-- <span class="input-group-text"><i class="bi bi-plus"></i></span> -->
                        <!-- </div> -->
                    </div>
                </div>
            </div>
            <div class="card-body p3">
                <form id="addBlogForm">
                 <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                    <label>Blog Category</label>
                                                    <select name="inputBlogCategory" class="form-control cForm">
                                                    <option value="0">Select Blog Category</option>
                                                        @foreach($blogcategories as $blogcategory)
                                                            <option value="{{ $blogcategory->blog_category_id }}">{{ $blogcategory->category_name }}</option>
                                                        @endforeach
                                                    </select>
                                                    
                                                <span class="form-error"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                    <label>Blog Title</label>
                                                    <input type="text" name="inputName" class="form-control cForm">
                                                    
                                                <span class="form-error"></span>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                    <label>Blog Url</label>
                                                    <input type="text" name="inputUrl" class="form-control cForm">
                                                    
                                                <span class="form-error"></span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                    <label>Blog Image Alt</label>
                                                    <input type="text" name="inputAlt" class="form-control cForm">
                                                    
                                                <span class="form-error"></span>
                                            </div>
                                        
                                            
                                        </div>
                                        </div>
                                        <div class="row">
                                        
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                    <label>Blog Small Image (Thumbnail)</label>
                                                    <!-- <input type="file" name="inputSImage" class="form-control">
                                                    
                                                <span class="form-error"></span> -->
                                                <div class="input-group">
                                                        <span class="input-group-btn">
                                                            <a id="lfmS" data-input="thumbnail" data-preview="holder" class="btn" style="border: 1px solid #e6ecf5;">
                                                            <i class="fa fa-picture-o"></i> Choose</a>
                                                         </span>
                                                        <input id="thumbnail" class="form-control cForm" type="text" name="inputSImage" >
                                                        <span class="form-error"></span>
                                                    </div>
                                                        <img id="holder" style="margin-top:15px;max-height:100px;">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                        <div class="form-group">
                                                    <label>Blog Large Image (Main)</label>
                                                    <div class="input-group">
                                                        <span class="input-group-btn">
                                                            <a id="lfmL" data-input="thumbnailL" data-preview="holderL" class="btn" style="border: 1px solid #e6ecf5;">
                                                            <i class="fa fa-picture-o"></i> Choose</a>
                                                         </span>
                                                        <input id="thumbnailL" class="form-control cForm" type="text" name="inputLImage">
                                                        <span class="form-error"></span>
                                                    </div>
                                                        <img id="holderL" style="margin-top:15px;max-height:100px;">
                                                    
                                                
                                            </div>
                                            </div>


                                        </div>
                                        <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                    <label>Blog Content</label>
                                                    <textarea name="pageeditor" id="pageeditor" class="form-control"></textarea>
                                                <span class="form-error"></span>
                                            </div>
                                        </div>
                                        </div>
                                        <div class="row">
                                        <div class="col-md-6 col-xs-6">
                                                                <div class="text-right">
                                                                    <button type="submit" class="btn btn-primary" id="addBlogPost">Save</button>
                                                                </div>
                                                            </div>
                                    </div>
</form>
            </div>
</div>
@endsection