<!-- Edit Block Modal -->
<div class="modal fade" id="editBlockModal" tabindex="-1">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form id="edit-block-form" method="POST" enctype="multipart/form-data" action="<?= base_url('administrator/posts/block/save') ?>">
                <?= csrf_field() ?>
                <input type="hidden" name="id">
                <input type="hidden" name="post_id" value="<?= $singlePost['id'] ?>">
                <input type="hidden" name="block_type">

                <div class="modal-header">
                    <h5 class="modal-title">Edit Block</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <!-- TEXT -->
                    <div class="block-field block-text">
                        <label class="form-label fw-bold">Text</label>
                        <textarea class="form-control" name="description"></textarea>
                    </div>

                    <!-- IMAGE -->
                    <div class="block-field block-image">
                        <label class="form-label fw-bold">Image</label>
                        <input type="file" class="form-control" name="photo">
                        <img id="preview-image" src="" class="img-fluid mt-2 d-flex" style="max-height: 150px;">
                        <label class="form-label mt-2">Caption</label>
                        <input type="text" class="form-control" name="caption">
                    </div>

                    <!-- HEADING -->
                    <div class="block-field block-heading">
                        <label class="form-label fw-bold">Heading</label>
                        <input type="text" class="form-control" name="heading">
                        <label class="form-label mt-2">Type</label>
                        <select name="heading_type" class="form-control">
                            <option value="h1">H1</option>
                            <option value="h2">H2</option>
                            <option value="h3">H3</option>
                        </select>
                        <label class="form-label mt-2">Color</label>
                        <input type="color" class="form-control" name="color">
                    </div>

                    <!-- LIST -->
                    <div class="block-field block-list">
                        <label class="form-label fw-bold">List Items</label>
                        <textarea class="form-control" name="list_content"></textarea>
                        <label class="form-label mt-2">List Type</label>
                        <select name="list_type" class="form-control">
                            <option value="ul">Unordered</option>
                            <option value="ol">Ordered</option>
                        </select>
                    </div>

                    <!-- Card -->
                    <div class="block-field block-cards" style="display:none;">
                        <label class="form-label fw-bold">Card Name</label>
                        <input type="text" name="card_name" class="form-control">
                    </div>

                    <!-- Stats -->
                    <div class="block-field block-stats" style="display:none;">
                        <label class="form-label fw-bold">Stats Title</label>
                        <input type="text" name="stats_title" class="form-control">
                    </div>

                    <!-- Gallery -->
                    <div class="block-field block-gallery" style="display:none;">
                        <label class="form-label fw-bold">Gallery Title</label>
                        <input type="text" name="gallery_title" class="form-control mb-2">

                        <label for="gdes" class="form-label">Gallery Description</label>
                        <textarea name="gallery_description" class="form-control" placeholder="Enter description here"></textarea>
                    </div>
                    
                    <!-- CODE -->
                    <div class="block-field block-code">
                        <label class="form-label fw-bold">Code</label>
                        <textarea class="form-control" name="code"></textarea>
                    </div>

                    <!-- ADVERT -->
                    <div class="block-field block-advert">
                        <label class="form-label fw-bold">Advert Code</label>
                        <textarea class="form-control" name="advert_code"></textarea>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger sbtn">Update Block</button>
                </div>
            </form>
        </div>
    </div>
</div>