<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body"> 
                <style type="text/css">     
                    #datatable-fixedheader thead tr th:nth-child(1), #datatable-fixedheader tbody tr td:nth-child(1) {width: 5% !important; text-align: center;}
                    #datatable-fixedheader tbody tr td:nth-child(2),
                    #datatable-fixedheader tbody tr td:nth-child(2) div,
                    #datatable-fixedheader tbody tr td:nth-child(2) span {
                        max-width: 200px;
                        width: 200px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    } 
                    #datatable-fixedheader thead tr th:nth-child(3), #datatable-fixedheader tbody tr td:nth-child(3) {width: 12% !important; text-align: left;}
                    #datatable-fixedheader thead tr th:nth-child(4), #datatable-fixedheader tbody tr td:nth-child(4) {width: 10% !important; text-align: center;}
                    #datatable-fixedheader tbody tr td:nth-child(5),
                    #datatable-fixedheader tbody tr td:nth-child(5) div,
                    #datatable-fixedheader tbody tr td:nth-child(5) span {
                        max-width: 200px;
                        width: 200px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    #datatable-fixedheader thead tr th:nth-child(6), #datatable-fixedheader tbody tr td:nth-child(6) {width: 8% !important; text-align: center;}
                    #datatable-fixedheader thead tr th:nth-child(7), #datatable-fixedheader tbody tr td:nth-child(7) {width: 8% !important; text-align: center;}
                    #datatable-fixedheader thead tr th:nth-child(8), #datatable-fixedheader tbody tr td:nth-child(8) {width: 12% !important; text-align: center;}
                    #datatable-fixedheader thead tr th:nth-child(9), #datatable-fixedheader tbody tr td:nth-child(9) {width: 8% !important; text-align: center;}
                    #datatable-fixedheader thead tr th:last-child, #datatable-fixedheader tbody tr td:last-child {width: 10% !important; text-align: center;}
                </style>
                <table id="datatable-fixedheader" class="table table-hover table-bordered dt-responsive nowrap">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Blog Title</th> 
                            <th>Category</th>
                            <th>Date</th>  
                            <th>Image</th>
                            <th>Banner</th>  
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody> 
                    </tbody>
                </table>
                <div class="modal fade modal1" id="modal1" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Add Blog</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form class="custom-validation" action="#" id="form" enctype="multipart/form-data" accept-charset='utf-8' autocomplete="off">
                                    <input type="hidden" name="id" id="id">
                                    <input type="hidden" name="get_old_image" id="get_old_image">
                                    <input type="hidden" name="get_old_banner" id="get_old_banner">
                                    
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="mb-3">
                                                <label class="form-label" for="blog_title">
                                                    Blog Title <span class="text-danger"></span>
                                                </label>
                                                <input type="text" name="blog_title" id="blog_title" class="form-control"   required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label class="form-label" for="blog_date">
                                                    Blog Date <span class="text-danger"></span>
                                                </label>
                                                <input type="date" name="blog_date" id="blog_date" class="form-control" required>  
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label" for="blog_category">
                                            Blog Category <span class="text-danger"></span>
                                        </label>
                                        <input type="text" name="blog_category" id="blog_category" class="form-control"   required>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="blog_description">
                                            Blog Description <span class="text-danger"></span>
                                        </label>
                                        <textarea name="blog_description" id="blog_description" class="form-control" rows="4"   required></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label" for="blog_tags">
                                            Blog Tags
                                        </label>
                                        <input type="text" name="blog_tags" id="blog_tags" class="form-control"  >
                                    </div>

                                    <div class="mb-3">  
                                        <label class="form-label">Blog Image</label>
                                        <div class="dropzone image-dropzone mt-3">
                                            <div class="fallback">
                                                <input name="blog_image[]" id="blog_image" type="file" data-parsley-filemaxsize="2048">
                                            </div>
                                            <div class="dz-message needsclick">
                                                <div class="mb-3">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" class="eva eva-cloud-upload"><g data-name="Layer 2"><g data-name="cloud-upload"><path d="M21.9 12c0-.11-.06-.22-.09-.33a4.17 4.17 0 0 0-.18-.57c-.05-.12-.12-.24-.18-.37s-.15-.3-.24-.44S21 10.08 21 10s-.2-.25-.31-.37-.21-.2-.32-.3L20 9l-.36-.24a3.68 3.68 0 0 0-.44-.23l-.39-.18a4.13 4.13 0 0 0-.5-.15 3 3 0 0 0-.41-.09L17.67 8A6 6 0 0 0 6.33 8l-.18.05a3 3 0 0 0-.41.09 4.13 4.13 0 0 0-.5.15l-.39.18a3.68 3.68 0 0 0-.44.23l-.36.3-.37.31c-.11.1-.22.19-.32.3s-.21.25-.31.37-.18.23-.26.36-.16.29-.24.44-.13.25-.18.37a4.17 4.17 0 0 0-.18.57c0 .11-.07.22-.09.33A5.23 5.23 0 0 0 2 13a5.5 5.5 0 0 0 .09.91c0 .1.05.19.07.29a5.58 5.58 0 0 0 .18.58l.12.29a5 5 0 0 0 .3.56l.14.22a.56.56 0 0 0 .05.08L3 16a5 5 0 0 0 4 2h3v-1.37a2 2 0 0 1-1 .27 2.05 2.05 0 0 1-1.44-.61 2 2 0 0 1 .05-2.83l3-2.9A2 2 0 0 1 12 10a2 2 0 0 1 1.41.59l3 3a2 2 0 0 1 0 2.82A2 2 0 0 1 15 17a1.92 1.92 0 0 1-1-.27V18h3a5 5 0 0 0 4-2l.05-.05a.56.56 0 0 0 .05-.08l.14-.22a5 5 0 0 0 .3-.56l.12-.29a5.58 5.58 0 0 0 .18-.58c0-.1.05-.19.07-.29A5.5 5.5 0 0 0 22 13a5.23 5.23 0 0 0-.1-1z"></path><path d="M12.71 11.29a1 1 0 0 0-1.4 0l-3 2.9a1 1 0 1 0 1.38 1.44L11 14.36V20a1 1 0 0 0 2 0v-5.59l1.29 1.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path></g></g></svg>
                                                </div>
                                                <h5>Drag & Drop Blog Image or Browse.</h5>
                                                <h5>.jpg, .jpeg, .png only (Width : 1200px, Height : 450px, Max: 2MB)</h5>
                                                    
                                            </div>
                                        </div>
                                        <ul class="list-unstyled mb-0" id="dropzone-preview-image">
                                            <li class="mt-2" id="dropzone-preview-list-image">
                                                <div class="border rounded">
                                                    <div class="d-flex p-2">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar-sm bg-light rounded">
                                                                <img data-dz-thumbnail class="img-fluid rounded d-block dropzone-dy-image" src="" />
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <div class="pt-1">
                                                                <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                                <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                                <strong class="error text-danger" data-dz-errormessage></strong>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0 ms-3">
                                                            <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>  
                                        <ul class="list-unstyled mb-0" id="img_preview">
                                            <li class="mt-2">
                                                <div class="border rounded">
                                                    <div class="d-flex p-2">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar-sm bg-light rounded">
                                                                <img data-dz-thumbnail id="preview_img_tag" class="img-fluid rounded d-block dropzone-dy-image" src="" />
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <div class="pt-1">
                                                                <h5 class="fs-14 mb-1 img_name_get"></h5>
                                                            </div>
                                                        </div> 
                                                    </div>
                                                </div>
                                            </li>
                                        </ul> 
                                    </div>

                                    <div class="mb-3">  
                                        <label class="form-label">Blog Banner</label>
                                        <div class="dropzone banner-dropzone mt-3">
                                            <div class="fallback">
                                                <input name="blog_banner[]" id="blog_banner" type="file" data-parsley-filemaxsize="2048">
                                            </div>
                                            <div class="dz-message needsclick">
                                                <div class="mb-3">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24" class="eva eva-cloud-upload"><g data-name="Layer 2"><g data-name="cloud-upload"><path d="M21.9 12c0-.11-.06-.22-.09-.33a4.17 4.17 0 0 0-.18-.57c-.05-.12-.12-.24-.18-.37s-.15-.3-.24-.44S21 10.08 21 10s-.2-.25-.31-.37-.21-.2-.32-.3L20 9l-.36-.24a3.68 3.68 0 0 0-.44-.23l-.39-.18a4.13 4.13 0 0 0-.5-.15 3 3 0 0 0-.41-.09L17.67 8A6 6 0 0 0 6.33 8l-.18.05a3 3 0 0 0-.41.09 4.13 4.13 0 0 0-.5.15l-.39.18a3.68 3.68 0 0 0-.44.23l-.36.3-.37.31c-.11.1-.22.19-.32.3s-.21.25-.31.37-.18.23-.26.36-.16.29-.24.44-.13.25-.18.37a4.17 4.17 0 0 0-.18.57c0 .11-.07.22-.09.33A5.23 5.23 0 0 0 2 13a5.5 5.5 0 0 0 .09.91c0 .1.05.19.07.29a5.58 5.58 0 0 0 .18.58l.12.29a5 5 0 0 0 .3.56l.14.22a.56.56 0 0 0 .05.08L3 16a5 5 0 0 0 4 2h3v-1.37a2 2 0 0 1-1 .27 2.05 2.05 0 0 1-1.44-.61 2 2 0 0 1 .05-2.83l3-2.9A2 2 0 0 1 12 10a2 2 0 0 1 1.41.59l3 3a2 2 0 0 1 0 2.82A2 2 0 0 1 15 17a1.92 1.92 0 0 1-1-.27V18h3a5 5 0 0 0 4-2l.05-.05a.56.56 0 0 0 .05-.08l.14-.22a5 5 0 0 0 .3-.56l.12-.29a5.58 5.58 0 0 0 .18-.58c0-.1.05-.19.07-.29A5.5 5.5 0 0 0 22 13a5.23 5.23 0 0 0-.1-1z"></path><path d="M12.71 11.29a1 1 0 0 0-1.4 0l-3 2.9a1 1 0 1 0 1.38 1.44L11 14.36V20a1 1 0 0 0 2 0v-5.59l1.29 1.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path></g></g></svg>
                                                </div>
                                                <h5>Drag & Drop Blog Banner or Browse.</h5>
                                                <h5>.jpg, .jpeg, .png only (Width : 1200px, Height : 450px, Max: 2MB)</h5>
                                            </div>
                                        </div>
                                        <ul class="list-unstyled mb-0" id="dropzone-preview-banner">
                                            <li class="mt-2" id="dropzone-preview-list-banner">
                                                <div class="border rounded">
                                                    <div class="d-flex p-2">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar-sm bg-light rounded">
                                                                <img data-dz-thumbnail class="img-fluid rounded d-block dropzone-dy-image" src="" />
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <div class="pt-1">
                                                                <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                                <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                                <strong class="error text-danger" data-dz-errormessage></strong>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0 ms-3">
                                                            <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>  
                                        <ul class="list-unstyled mb-0" id="banner_preview">
                                            <li class="mt-2">
                                                <div class="border rounded">
                                                    <div class="d-flex p-2">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar-sm bg-light rounded">
                                                                <img data-dz-thumbnail id="preview_banner_tag" class="img-fluid rounded d-block dropzone-dy-image" src="" />
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <div class="pt-1">
                                                                <h5 class="fs-14 mb-1 banner_name_get"></h5>
                                                            </div>
                                                        </div> 
                                                    </div>
                                                </div>
                                            </li>
                                        </ul> 
                                    </div>
                                    
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-danger waves-effect" data-bs-dismiss="modal">
                                            Cancel
                                        </button>
                                        <button type="submit" id="submit" class="btn btn-primary waves-effect waves-light">
                                            <i class="mdi mdi-check me-1"></i>Submit
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
</div>  

<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<?php $this->load->view('includes/footer'); ?>
</body>
</html>