<!-- Modal -->
<div class="modal" id="editPostModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg" style="max-width:900px">
        <div class="modal-content border-primary">
            <div class="modal-header bg-primary">
                <h5 class="modal-title text-white">Edit Post</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding: 0;">
                <ul class="nav nav-tabs nav-tabs-success" style="margin-bottom: 20px">
                    <li class="nav-item">
                        <a class="nav-link sbs_details_tabs active" data-toggle="tab" href="#edit-details"><i
                                class="fa fa-edit"></i>
                            <span class="hidden-xs">Details</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link sbs_details_tabs" data-toggle="tab" href="#edit-media"><i
                                class="fa fa-image"></i>
                            <span class="hidden-xs">Media</span></a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="edit-details" class="container-fluid tab-pane active">
                        <form data-toggle="validator" autocomplete="off" class="form-styled" id="edit_post_form">
                            @csrf
                            <input type="hidden" id="post_id">
                            <div class="row">
                                <div class="col-xs-12 col-lg-6">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Title*</label>
                                        <input type="text" id="edit_post_title" maxlength="300" required
                                            data-minlength="1" data-error="Must be at least 1 character"
                                            class="form-control"><span class="help-block with-errors"></span>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-6">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Category</label>
                                        <select id="edit_post_category" class="form-control">
                                            <option value="">Select Category</option>
                                            @foreach(getCategories() as $cat)
                                                <option value="{{$cat->id}}">{{$cat->title}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">SEO Meta Title</label>
                                        <input type="text" id="edit_post_meta_title" maxlength="300"
                                            class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">SEO Meta Keywords</label>
                                        <input type="text" id="edit_post_meta_keywords" maxlength="300"
                                            class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">SEO Meta Description</label>
                                        <input type="text" id="edit_post_meta_description" maxlength="300"
                                            class="form-control">
                                    </div>
                                </div>
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <label class="control-label">Full Description</label>
                                        <textarea type="text" id="edit_post_full_description" maxlength="3000"
                                            class="form-control content_area"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 col-lg-12">
                                    <div class="form-group">
                                        <button type="submit" id="edit_submit_btn" name="submit"
                                            class="btn btn-success"><i class="fa fa-check fa-lg"> </i>&nbsp;Submit
                                        </button>
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal"><i
                                                class="fa fa-times fa-lg"></i> Close
                                        </button>
                                        <div class="alert alert-danger edit_errors" style="display: none">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="edit-media" class="container-fluid tab-pane">
                        <div class="row" id="thumbnail_edit_image_preview_row">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header text-uppercase">Picture</div>
                                    <div class="card-body" style="background-color: #eee">
                                        <div class="thumbnail_add_image_pre_block pre_block">
                                            <input type="hidden" id="thumbnail_edit_image_path">
                                            <img src="/public/images/banner-placeholder.jpg" alt="image"
                                                id="thumbnail_edit_image" class="img-fluid">
                                            <button type="button" data-toggle="tooltip"
                                                title="Image will be permanently deleted...!"
                                                class="btn btn-danger thumbnail_delete_edit_uploaded_image_btn">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="thumbnail_edit_image_row" style="display: none">
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header text-uppercase">Thumbnail image</div>
                                    <div class="card-body">
                                        <form id="thumbnail_edit_products_dropzone">
                                            @csrf
                                            <div class="row">
                                                <div class="col-xs-12 col-lg-12">
                                                    <div class="fallback">
                                                        <input name="file" type="file">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <div class="alert alert-danger thumbnail_edit_image_errors"
                                            style="display: none">
                                            <ul></ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card">
                                    <div class="card-header text-uppercase">Preview</div>
                                    <div class="card-body" style="background-color: #eee">
                                        <div class="thumbnail_add_image_pre_block pre_block">
                                            <input type="hidden" id="thumbnail_edit_image_id">
                                            <img src="/public/images/banner-placeholder.jpg" alt="image"
                                                id="thumbnail_edit_image_pre" class="img-fluid">
                                            <button type="button"
                                                class="btn btn-danger thumbnail_delete_edit_uploaded_image_btn"
                                                style="display: none">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>