@extends('admin.layout.app')
@section('content')

<div class="main-panel">
    <div class="content">
        <div class="page-inner element-1">

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">Add Blog </div>
                        </div>
                        <form action="{{ route('admin_blog_store') }}" method="post" id="formSubmit" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body element-2">
                                <div class="row">

                                    <!-- Category -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="category_id">Category <span class="text-danger">*</span></label>
                                            <select class="form-control" name="category_id" id="category_id" required>
                                                <option value="">Select Category</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <!-- Title -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="title">Title <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="title" id="title" placeholder="Enter Title" required>
                                        </div>
                                    </div>

                                    <!-- Author / Name -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="name">Author / Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="name" id="name" placeholder="Enter Author Name" required>
                                        </div>
                                    </div>

                                    <!-- Tags -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="tags">Tags</label>
                                            <input type="text" class="form-control" name="tags" id="tags" placeholder="Enter Tags (comma separated)">
                                        </div>
                                    </div>

                                    <!-- Date -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="date">Date <span class="text-danger">*</span></label>
                                            <input type="date" class="form-control" name="date" id="date" required>
                                        </div>
                                    </div>

                                    <!-- Image -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="image">Image <span class="text-danger">*</span></label>
                                            <input type="file" class="form-control" name="image" accept="image/*" onchange="return validate_fileupload(this)" required>
                                            <small class="text-muted">Max 1MB. Formats: jpg, png, jpeg, webp</small>
                                        </div>
                                    </div>

                                    <!-- Short Description -->
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="short_description">Short Description <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="short_description" id="short_description" placeholder="Enter Short Description" maxlength="100" required>
                                        </div>
                                    </div>

                                    <!-- Description -->
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="description">Description <span class="text-danger">*</span></label>
                                            <textarea class="summernote" name="description" id="description" required></textarea>
                                        </div>
                                    </div>

                                    <!-- SEO Meta Fields -->
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="meta_title">Meta Title <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="meta_title" id="meta_title" placeholder="Enter Meta Title" required>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="meta_keyword">Meta Keyword <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="meta_keyword" id="meta_keyword" placeholder="Enter Meta Keywords" required>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="meta_description">Meta Description <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="meta_description" id="meta_description" placeholder="Enter Meta Description" required>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="card-action element-2 text-center">
                                <a href="{{ route('admin_blog') }}" class="btn btn-light mr-2 btn-size-cus">Cancel</a>
                                <button type="submit" id="loderButton" class="btn btn-primary px-5 rounded-0 btn-size-cus">
                                    <i class="fa fa-spinner fa-pulse fa-fw" id="loderIcon" style="display:none;"></i> Submit
                                </button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection