<?= $this->extend('Modules\Admin\Views\index'); ?>
<?php $validation = \Config\Services::validation();?>
<?= $this->section('content');?>
<style>
    .image-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .image-popup {
        max-width: 90%;
        max-height: 90%;
    }
</style>
<div class="container-fluid">
<div class="row mb-md-3">
	<div class="col">
		<h4>Front Banners</h4>
		<!-- Breadcrumb !-->
		<nav aria-label="breadcrumb"><small>
			<ol class="breadcrumb mb-0">
				<li class="breadcrumb-item"><a href="<?= base_url('administrator') ?> ">Home</a></li>
				<li class="breadcrumb-item active" aria-current="page"><?= esc($bcrumb) ?> </li>
			</ol></small>
		</nav>
		<!-- End Breadcrumb !-->
	</div>
</div>
<!-- Slider Category ADD/EDIT/DELETE/Detailed List !-->
<div class="row mb-2">
    <div class="col">

			<!-- print success message !-->
            <?php if(isset($validation) && $validation->getErrors()): ?>
                <div class="alert alert-danger">
                    <ul>
                    <?php foreach ($validation->getErrors() as $error): ?>
                        <li><?= esc($error) ?></li>
                    <?php endforeach ?>
                    </ul>
                </div>
                <?php endif; ?>
			<?php if(session()->getTempdata('success')): ?>
				<div class="alert alert-success" role="alert"><?= session()->getTempdata('success');?></div>
				<?php endif;?>
			<!-- print failure message !-->
			<?php if(session()->getTempdata('error')): ?>
				<div class="alert alert-danger" role="alert"><?= session()->getTempdata('error');?></div>
			<?php endif;?>
            <div id="showMsg"></div>
            <div ><a href="<?= base_url('administrator/sliders/add');?>" title="Add Slider" class="btn btn-sm btn-warning float-end rounded-0">Add Slide</a> <a href="<?= base_url('administrator/sliders/dashboard'); ?>" class="btn btn-sm btn-primary rounded-0 float-md-end">Back to Dashboard</a></div>
</div></div>

<div class="row">
    <div class="col-lg-4"> 
        <div class="card">
                <?php if(!isset($singleBanner)):?>
				<div class="card-header"><h6 class="card-title fw-bold">Add Banner</h6></div>
				<div class="card-body ">
                <!-- Add Category  !-->
                <form method="POST" action="<?= base_url('administrator/sliders/banner/add');?>" enctype="multipart/form-data">
                <?= csrf_field();?>
                <div class="row">
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" name="name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Banner Image *<br><small class="text-muted">(Ensure your banner is in dimesions of 800px X 650px and 800px X 750px only)</small></label>
                        <input type="file" class="form-control" name="photo">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Link / Url * <br><small class="text-muted">(Ensure your banner points to a page. You can get link directly from website page.)</small></label>
                        <input type="text" class="form-control" name="url" placeholder="https://www.market.ug/fruits/apple">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" name="description" style="height: 80px;"></textarea>
                    </div>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-outline-danger w-100" >Save</button>
                    </div>
                </div>
                </form>
            </div>
                <!-- End Add Category  !-->
                <?php else:?>
                <div class="card-header"><h6 class="card-title fw-bold">Edit Banner</h6></div>
                <div class="card-body ">
                <!-- Edit Category  !-->
                    <form method="POST" action="<?= base_url('administrator/sliders/banner/update');?>" enctype="multipart/form-data">
                    <?= csrf_field();?>
                    <div class="row">
                        <div class="mb-3">
                            <label class="form-label">Category Name</label>
                            <input type="text" class="form-control" name="name" value="<?= $singleBanner['name']; ?>">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Banner Image * <br><small class="text-muted">(Ensure your banner is in dimesions of 800px X 650px and 800px X 750px only)</small></label>
                            <input type="file" class="form-control" name="photo">
                            <p class="mt-2"><img src="<?= $singleBanner['photo']; ?>" style="width: 50px; height: 50px; object-fit: cover; cursor: pointer;" onclick="showImagePopup(this)" /></p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Link / Url * <br><small class="text-muted">(Ensure your banner points to a page. You can get link directly from website page.)</small></label>
                            <input type="text" class="form-control" name="url" value="<?= $singleBanner['url']; ?>">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Description</label>
                            <textarea class="form-control" name="description" style="height: 80px;"><?= $singleBanner['description']; ?></textarea>
                        </div>
                        <div class="mb-3">
                            <input type="hidden" name="id" value="<?= $singleBanner['id']; ?>" >
                            <button type="submit" class="btn btn-outline-danger w-100" >Edit</button>
                        </div>
                    </div>
                    </form>
                <!-- End Edit Category  !-->
                </div>
                <?php endif; ?>
        </div>
    </div>
    <div class="col-lg-8 "> 
        <!-- Display all categories !-->
        <div class="card">
        <div class="card-header"><h6 class="card-title fw-bold">Front Banners</h6></div> 
            <div class="card-body">
        <div class="table-responsive">
            <table id="catlist" class="table table-hover">
                <thead class="bg-primary bg-opacity-10" style="font-size: 14px;">
                    <tr>
                    <th>#</th>
                    <th></th>
                    <th>Title</th>
                    <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($banners as $c): ?>
                        <tr>
                        <td><?= $c->id; ?></td>
                        <td><img src="<?= $c->photo; ?>" style="width: 150px; height: 150px; object-fit: cover; cursor: pointer;" onclick="showImagePopup(this)" /></td>
                        <td><?= $c->name; ?><br> <small class="text-muted"> <?= $c->description; ?></small><br><?= $c->url; ?></td>
                        <td>
                        <div class="btn-group align-self-center" role="group" aria-label="edit Banner">
                        <a href="<?= base_url('administrator/sliders/banner/edit/').$c->id; ?>" type="button" class="btn btn-success p-1 rounded-left"><small><i class="bi bi-pencil-square mx-0 "></i></small></a>
                        <a  class="btn btn-danger p-1 rounded-right" onclick="delete_sliderCategory(<?= $c->id ?>, '<?= $c->name ?>')"><small><i class="bi bi-trash mx-0" ></i></small></a>
                        </div>
                        </td>
                        </tr>
                    <?php endforeach;?>
                </tbody>
            </table>
        </div>
    </div></div>
            
<!-- END Post Category ADD/EDIT/DELETE/Detailed List !-->
<!-- Modals !-->
<?= view('Modules\Posts\Views\\modals\\del_categoryModal') ?>
<!---- JS ---> 
<script>
    function showImagePopup(img) {
        // Create overlay element
        var overlay = document.createElement('div');
        overlay.classList.add('image-popup-overlay');

        // Create image element
        var image = document.createElement('img');
        image.src = img.src;
        image.classList.add('image-popup');

        // Add image to overlay
        overlay.appendChild(image);

        // Add overlay to body
        document.body.appendChild(overlay);

        // Close overlay when clicked
        overlay.onclick = function () {
            document.body.removeChild(overlay);
        };
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
    $('#catlist').DataTable({
        pageLength: 10,
        order: [[0, "Desc"]],
    });
    });

</script>        
<script src="<?= base_url();?>/assets/js/modules/sliders.js"></script>  
<?= $this->endSection();?>