One Hat Cyber Team

Your IP : 10.30.1.1

Server IP : 103.148.201.5

Server : Linux web-olt 5.15.0-156-generic #166-Ubuntu SMP Sat Aug 9 00:02:46 UTC 2025 x86_64

Server Software : Apache/2.4.52 (Ubuntu)

PHP Version : 8.1.29

Buat File | Buat Folder

Dir : ~/var/www/html/Compro-ISP/resources/views/v/client/

Edit File: index.blade.php

@extends('layouts.dashboard')

@section('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>
                            {{-- <li class="breadcrumb-item active" aria-current="page">Home</li> --}}
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

<div class="button">
                        @can('client_create')
                            <a href="{{ route('client.create') }}" class="btn btn-primary">Tambah Data</a>
                        @endcan
                    </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>
                                @foreach ($data as $client)
                                    <tr>
                                        <td>{{ $client->name }}</td>
                                        {{-- <td>
                                            <img src="{{ asset('storage/images/' . $client->images) }}" tabindex="0"
                                                class="thumbnail" width="64" height="64"
                                                data-full="{{ asset('storage/images/' . $client->images) }}" />
                                        </td> --}}
                                        <td>
      <img src="{{ asset('storage/images/' . $client->images) }}"
                 class="thumbnail"
                 width="64"
                 height="64"
                 data-bs-toggle="modal"
                 data-bs-target="#imageModal"
                 data-full="{{ asset('storage/images/' . $client->images) }}" />
                                        </td>
                                        <td>
                                            @can('aclient_edit')
                                                <a href="{{ route('client.edit', $client->id) }}"
                                                    class="btn btn-success d-inline custom-margin">
                                                    Edit
                                                </a>
                                            @endcan
                                            @can('aclient_delete')
                                                <form action="{{ route('client.destroy', $client->id) }}" method="POST"
                                                    class="d-inline">
                                                    @csrf
                                                    @method('DELETE')

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

</tr>
                                @endforeach
                            </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> --}}
    <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>
@endsection
@push('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> --}}
    <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>
@endpush

@push('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> --}}
    <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>
@endpush