@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">Edit Blog </div>
                            </div>
                            <form action="{{ route('admin_blog_update') }}" method="post" id="formSubmitBack" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="id" value="{{ $blog->id }}">

                                <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 }}" @selected($blog->cat_id == $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" id="title" name="title" value="{{ $blog->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" id="name" name="name" value="{{ $blog->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" id="tags" name="tags" value="{{ $blog->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" id="date" name="date" value="{{ $blog->date }}" required>
                                            </div>
                                        </div>

                                        <!-- Image Upload -->
                                        <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)">
                                                <small class="text-muted">Max 1MB. Formats: jpg, png, jpeg, webp</small>
                                            </div>
                                        </div>

                                        <!-- Image Preview -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Current Image</label>
                                                <img src="{{ $blog->image ? asset($blog->image) : asset('notImage.jpg') }}" class="img-fluid border" style="max-height:150px;object-fit:cover;">
                                            </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" id="short_description" name="short_description" value="{{ $blog->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 id="description" class="summernote" name="description" required>{{ $blog->description }}</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" id="meta_title" name="meta_title" value="{{ $blog->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" id="meta_keyword" name="meta_keyword" value="{{ $blog->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" id="meta_description" name="meta_description" value="{{ $blog->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> Update
                                    </button>
                                </div>
                            </form>

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

    @section('js')
        <script type="text/javascript">
            //for redirect particular url
            $(document).on('submit', 'form#formSubmitBack', function(e) {
                e.preventDefault();
                var data = new FormData(this);
                $('#loderIcon').show();
                $('#loderButton').prop("disabled", true);

                $.ajax({
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: $(this).attr("action"),
                    method: $(this).attr("method"),
                    dataType: "json",
                    data: data,
                    success: function(response) {
                        $('#loderIcon').hide();
                        $('#loderButton').prop("disabled", false);
                        if (response.code == 200) {
                            toastr.success(response.message);
                            if (response.responseUrl != '') {
                                window.location.replace(response.responseUrl);
                            }
                            //location.reload();
                        } else {
                            toastr.error(response.message);
                        }
                    }
                });
            });
        </script>
    @endsection