One Hat Cyber Team

View File Name : eb13da272096e4c22483efdcff07f0d5.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 Client</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">Client</li>
                            
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <!-- Minimal jQuery Datatable start -->

        <section class="section">
            <div class="card">
                <div class="card-header">

                    <div class="button">
                        <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('client_create')): ?>
                            <a href="<?php echo e(route('client.create')); ?>" class="btn btn-primary">Tambah Data</a>
                        <?php endif; ?>
                    </div>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table" id="table1" role="grid">
                            <thead>
                                <tr>
                                    <th>Name Clients</th>
                                    <th>Images</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $data; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $client): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr>
                                        <td><?php echo e($client->name); ?></td>
                                        
                                        <td>
      <img src="<?php echo e(asset('storage/images/' . $client->images)); ?>"
                 class="thumbnail"
                 width="64"
                 height="64"
                 data-bs-toggle="modal"
                 data-bs-target="#imageModal"
                 data-full="<?php echo e(asset('storage/images/' . $client->images)); ?>" />
                                        </td>
                                        <td>
                                            <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('aclient_edit')): ?>
                                                <a href="<?php echo e(route('client.edit', $client->id)); ?>"
                                                    class="btn btn-success d-inline custom-margin">
                                                    Edit
                                                </a>
                                            <?php endif; ?>
                                            <?php if (app(\Illuminate\Contracts\Auth\Access\Gate::class)->check('aclient_delete')): ?>
                                                <form action="<?php echo e(route('client.destroy', $client->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 endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </section>
        <!-- Basic Tables end -->

    </div>
    
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imageModalLabel">Image Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="modal-image-container">
                        <img src="" alt="Full Image" class="modal-image img-fluid" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </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 Styling */
        .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-container {
            display: flex;
            justify-content: center;
            align-items: center;
            max-height: 400px;
            width: 100%;
            overflow: hidden;
        }

        .modal-image {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .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;
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script'); ?>
    
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", function() {
    const modalImage = document.querySelector('.modal-image'); // Gambar di dalam modal
    const thumbnails = document.querySelectorAll('.thumbnail'); // Semua gambar thumbnail

    thumbnails.forEach(thumb => {
        thumb.addEventListener('click', function() {
            const fullImage = thumb.dataset.full; // Ambil URL gambar full dari data-full

            // Log data-full untuk memeriksa apakah data-full sudah benar
            console.log('Data-full untuk gambar yang dipilih:', fullImage);

            if (fullImage && fullImage.trim() !== "") {
                modalImage.src = fullImage; // Set gambar full ke modal
                console.log('Gambar dimuat ke modal: ', fullImage); // Debug gambar yang dimuat
            } else {
                console.error('Data-full kosong atau tidak valid untuk gambar:', thumb); // Error jika data-full kosong
            }
        });
    });
});

    </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/client/index.blade.php ENDPATH**/ ?>