One Hat Cyber Team

Edit File: 6032c67630f09cc49dafce0872552111.php

<?php $__env->startSection('content'); ?>
    <div class="page-heading">
        <div class="page-title">
            <div class="row">
                <div class="col-12 col-md-6 order-md-1 order-last">
                    <h3>Menu Home Pages</h3>

</div>
                <div class="col-12 col-md-6 order-md-2 order-first">
                    <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">Home Pages</li>
                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

<section class="section">
            <div class="card">
                <div class="card-header">
                    <?php if($data == null): ?>
                        <div class="button">
                            <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('acl_homepages_home_create')): ?>
                                <a href="<?php echo e(route('homepages.home.create')); ?>" class="btn btn-primary">Tambah Data</a>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table" id="table1" role="grid">
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th>Images 1</th>
                                    <th>Images 2</th>
                                    <th>Images 3</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php if($data): ?>
                                    <tr>
                                        <td><?php echo e($data->description); ?></td>
                                        <td>
                                            <img src="<?php echo e(asset('storage/images/' . $data->images1)); ?>" tabindex="0"
                                                class="thumbnail" width="64" height="64"
                                                data-full="<?php echo e(asset('storage/images/' . $data->images1)); ?>" />
                                        </td>
                                        <td>   <img src="<?php echo e(asset('storage/images/' . $data->images2)); ?>" tabindex="0"
                                                class="thumbnail" width="64" height="64"
                                                data-full="<?php echo e(asset('storage/images/' . $data->images2)); ?>" /></td>
                                        <td>   <img src="<?php echo e(asset('storage/images/' . $data->images3)); ?>" tabindex="0"
                                                class="thumbnail" width="64" height="64"
                                                data-full="<?php echo e(asset('storage/images/' . $data->images3)); ?>" /></td>
                                        <td>
                                            <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('acl_homepages_home_edit')): ?>
                                                <a href="<?php echo e(route('homepages.home.edit', $data->id)); ?>"
                                                    class="btn btn-success d-inline custom-margin">
                                                    Edit
                                                </a>
                                            <?php endif; ?>
                                            <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('acl_homepages_home_delete')): ?>
                                                <form action="<?php echo e(route('homepages.home.destroy', $data->id)); ?>" method="POST"
                                                    class="d-inline">
                                                    <?php echo csrf_field(); ?>
                                                    <?php echo method_field('DELETE'); ?>

<button class="btn btn-danger"
                                                        onclick="return confirm('Are you sure you want to delete this?');">
                                                        Delete
                                                    </button>
                                                </form>
                                            <?php endif; ?>
                                        </td>

</tr>
                                <?php else: ?>
                                    <tr>
                                        <td>No data available</td>
                                        <td>No data available</td>
                                        <td>No data available</td>
                                        <td>No data available</td>
                                        <td>No data available</td>
                                    </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

</section>

</div>
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-desc">
        <div class="modal-content">
            <button class="modal-close" aria-label="Tutup gambar">
                <span class="material-icons text-black">X</span>
            </button>
            <img src="" alt="" class="modal-image" />
            <div id="modal-desc"
                style="padding: 16px; color: #ccc; font-size: 0.9rem; max-width: 90vw; text-align: center;"></div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('style'); ?>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* Custom styles for text wrapping */
        #table1 td {
            word-wrap: break-word;
            white-space: normal;
            max-width: 200px;
        }
    </style>
    <style>
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

.modal.show {
            display: flex;
        }

.modal-content {
            position: relative;
            background-color: #fff;
            padding: 1rem;
            border-radius: 8px;
            max-width: 600px;
            width: 90%;
            max-height: 90%;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

.modal-image {
            max-width: 100%;
            max-height: 400px;
            object-fit: contain;
            display: block;
            margin: 0 auto;
            border-radius: 4px;
        }

.modal-close {
            position: absolute;
            top: 8px;
            right: 8px;
            background: none;
            border: none;
            color: black;
            font-size: 1.8rem;
            cursor: pointer;
        }

.modal-close:hover {
            color: red;
        }

#modal-desc {
            margin-top: 0.5rem;
            font-size: 0.9rem;
            color: #555;
        }

.custom-margin {
            margin-right: 10px;
            /* Menambahkan jarak di sebelah kanan tombol Edit */
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script'); ?>
    <script>
        (() => {
            const modal = document.querySelector('.modal');
            const modalImage = modal.querySelector('.modal-image');
            const modalCloseBtn = modal.querySelector('.modal-close');
            const modalDesc = modal.querySelector('#modal-desc');
            const thumbnails = document.querySelectorAll('.thumbnail');

function openModal(img) {
                const fullSrc = img.dataset.full || img.src;
                modalImage.src = fullSrc;
                // modalImage.alt = img.alt || '';
                // modalDesc.textContent = img.alt || '';
                modal.classList.add('show');
                modalCloseBtn.focus();
                document.body.style.overflow = 'hidden'; // prevent scroll behind modal
            }

function closeModal() {
                modal.classList.remove('show');
                modalImage.src = '';
                // modalImage.alt = '';
                // modalDesc.textContent = '';
                document.body.style.overflow = '';
                // Return focus to last focused thumbnail
                if (lastFocusedThumbnail) {
                    lastFocusedThumbnail.focus();
                }
            }

// Track last focused thumbnail to restore focus on close
            let lastFocusedThumbnail = null;

thumbnails.forEach(thumb => {
                thumb.addEventListener('click', e => {
                    lastFocusedThumbnail = e.currentTarget;
                    openModal(e.currentTarget);
                });

// Also open modal on keyboard (Enter, Space)
                thumb.addEventListener('keydown', e => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        lastFocusedThumbnail = e.currentTarget;
                        openModal(e.currentTarget);
                    }
                });
            });

modalCloseBtn.addEventListener('click', closeModal);

// Close modal on click outside image
            modal.addEventListener('click', e => {
                if (e.target === modal) {
                    closeModal();
                }
            });

// Close modal on ESC key
            document.addEventListener('keydown', e => {
                if (e.key === 'Escape' && modal.classList.contains('show')) {
                    closeModal();
                }
            });

})();
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.dashboard', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/Compro-ISP/resources/views/v/homepages/home/index.blade.php ENDPATH**/ ?>