@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Manage Tanda Tangan Users'])
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex align-items-center">
                        <p class="mb-0">Manage Tanda Tangan Users</p>
                        <a href="{{ url('/profile') }}" class="btn btn-secondary btn-sm ms-auto">
                            <i class="fas fa-arrow-left me-2"></i>Kembali ke Profile
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    {{-- alert --}}
                    @include('components.alert')
                    <div class="table-responsive">
                        <table class="table align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Username</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nama</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Email</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanda Tangan</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($all_users as $u)
                                <tr>
                                    <td>
                                        <div class="d-flex px-2 py-1">
                                            <div class="d-flex flex-column justify-content-center">
                                                <h6 class="mb-0 text-sm">{{ $u->username }}</h6>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <p class="text-xs font-weight-bold mb-0">{{ $u->firstname }} {{ $u->lastname }}</p>
                                    </td>
                                    <td>
                                        <p class="text-xs text-secondary mb-0">{{ $u->email }}</p>
                                    </td>
                                    <td>
                                        @if ($u->signature)
                                            <img src="{{ $u->signature }}" alt="Signature" class="border border-2 rounded" style="max-width: 150px; height: auto;">
                                        @else
                                            <span class="text-xs text-secondary">Belum ada tanda tangan</span>
                                        @endif
                                    </td>
                                    <td class="align-middle">
                                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#signatureModal{{ $loop->index }}">
                                            <i class="fas fa-edit me-1"></i>Edit Signature
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Signature Modals for each user -->
@foreach ($all_users as $u)
<div class="modal fade" id="signatureModal{{ $loop->index }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <form method="post" action="{{ URL::to('admin/signature/update/' . $u->username) }}">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Edit Tanda Tangan - {{ $u->firstname }} {{ $u->lastname }} ({{ $u->username }})</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="form-control-label">Tanda Tangan</label>
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <button type="button" class="btn btn-primary btn-sm" onclick="openSignaturePad('{{ $u->username }}')">
                                        <i class="fas fa-signature me-2"></i>Upload/Buat Signature
                                    </button>
                                    @if ($u->signature)
                                    <button type="button" class="btn btn-danger btn-sm" onclick="clearAdminSignature('{{ $u->username }}')">
                                        <i class="fas fa-trash me-2"></i>Hapus Signature
                                    </button>
                                    @endif
                                </div>
                                <input type="hidden" name="admin_signature" id="adminSignatureData{{ $u->username }}"
                                    value="{{ $u->signature ?? '' }}">
                                <div id="adminSignaturePreview{{ $u->username }}" class="mt-2"
                                    style="display: {{ $u->signature ? 'block' : 'none' }};">
                                    <img src="{{ $u->signature ?? '' }}" alt="Signature Preview"
                                        class="border border-2 rounded" style="max-width: 300px; height: auto;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

<!-- Global Signature Pad Modal -->
<div class="modal fade" id="globalSignatureModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="globalSignatureModalTitle">Tanda Tangan Digital</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-3">
                    <p class="text-sm text-muted mb-2">Silakan tanda tangan di area di bawah ini atau upload gambar tanda tangan</p>
                </div>
                <div class="signature-pad-container d-flex justify-content-center"
                    style="border: 2px solid #d2d6da; border-radius: 8px; background: #f8f9fa; padding: 20px; overflow: auto;">
                    <canvas id="adminSignaturePad" style="cursor: crosshair; max-width: 100%; height: auto;"></canvas>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <div>
                        <label for="adminPenColor" class="form-label me-2">Warna Pena:</label>
                        <input type="color" id="adminPenColor" value="#000000" class="form-control form-control-color"
                            style="width: 60px; display: inline-block;">
                        <label for="adminPenWidth" class="form-label ms-3 me-2">Ketebalan:</label>
                        <input type="range" id="adminPenWidth" min="1" max="10" value="2" class="form-range"
                            style="width: 150px; display: inline-block;">
                    </div>
                    <div>
                        <button type="button" class="btn btn-primary btn-sm" id="adminUploadSignatureBtn">
                            <i class="fas fa-upload me-2"></i>Upload Gambar
                        </button>
                        <input type="file" id="adminUploadSignatureImage" accept="image/png,image/jpg,image/jpeg"
                            style="display: none;">
                        <button type="button" class="btn btn-danger btn-sm" id="adminClearSignature">
                            <i class="fas fa-eraser me-2"></i>Hapus Canvas
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="adminSaveSignature">
                    <i class="fas fa-save me-2"></i>Simpan Tanda Tangan
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Signature Pad Library -->
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>

<script>
    let adminSignaturePad;
    let adminSavedSignatureData = null;
    let currentAdminUser = null;
    const adminCanvas = document.getElementById('adminSignaturePad');
    const globalSignatureModal = document.getElementById('globalSignatureModal');

    const CANVAS_WIDTH = 800;
    const CANVAS_HEIGHT = 320;

    function openSignaturePad(username) {
        currentAdminUser = username;
        const userModal = document.getElementById('signatureModal' + getUserIndex(username));
        const userModalInstance = bootstrap.Modal.getInstance(userModal);
        if (userModalInstance) {
            userModalInstance.hide();
        }

        const globalModal = new bootstrap.Modal(globalSignatureModal);
        globalModal.show();
    }

    function getUserIndex(username) {
        // Find the modal index based on username
        const modals = document.querySelectorAll('[id^="signatureModal"]');
        for (let i = 0; i < modals.length; i++) {
            if (modals[i].querySelector('form').action.includes('/' + username)) {
                return i;
            }
        }
        return 0;
    }

    globalSignatureModal.addEventListener('shown.bs.modal', function() {
        initializeAdminSignaturePad();
    });

    globalSignatureModal.addEventListener('hidden.bs.modal', function() {
        if (currentAdminUser !== null) {
            const userIndex = getUserIndex(currentAdminUser);
            const userModal = new bootstrap.Modal(document.getElementById('signatureModal' + userIndex));
            userModal.show();
            currentAdminUser = null;
        }
    });

    function initializeAdminSignaturePad() {
        if (adminSignaturePad && !adminSignaturePad.isEmpty()) {
            adminSavedSignatureData = adminSignaturePad.toData();
        }

        adminCanvas.width = CANVAS_WIDTH;
        adminCanvas.height = CANVAS_HEIGHT;
        adminCanvas.style.width = CANVAS_WIDTH + 'px';
        adminCanvas.style.height = CANVAS_HEIGHT + 'px';

        adminSignaturePad = new SignaturePad(adminCanvas, {
            backgroundColor: 'rgb(255, 255, 255)',
            penColor: document.getElementById('adminPenColor').value,
            minWidth: 0.5,
            maxWidth: 2.5
        });

        // Load existing signature if available
        if (currentAdminUser) {
            const existingSignature = document.getElementById('adminSignatureData' + currentAdminUser).value;
            if (existingSignature && existingSignature !== '') {
                const img = new Image();
                img.onload = function() {
                    const ctx = adminCanvas.getContext('2d');
                    ctx.fillStyle = 'rgb(255, 255, 255)';
                    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
                    ctx.drawImage(img, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
                };
                img.src = existingSignature;
            } else if (adminSavedSignatureData) {
                adminSignaturePad.fromData(adminSavedSignatureData);
            }
        }
    }

    // Upload signature image button
    document.getElementById('adminUploadSignatureBtn').addEventListener('click', function() {
        document.getElementById('adminUploadSignatureImage').click();
    });

    // Handle image upload
    document.getElementById('adminUploadSignatureImage').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file && file.type.match('image.*')) {
            const maxSize = 5 * 1024 * 1024;
            if (file.size > maxSize) {
                Swal.fire({
                    icon: 'error',
                    title: 'File Terlalu Besar!',
                    text: 'Ukuran file maksimal 5MB.',
                    confirmButtonColor: '#d33'
                });
                e.target.value = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = function(event) {
                const img = new Image();
                img.onload = function() {
                    if (adminSignaturePad) {
                        adminSignaturePad.clear();
                    }
                    const ctx = adminCanvas.getContext('2d');
                    ctx.fillStyle = '#ffffff';
                    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

                    const scaleX = CANVAS_WIDTH / img.width;
                    const scaleY = CANVAS_HEIGHT / img.height;
                    const scale = Math.min(scaleX, scaleY);
                    const scaledWidth = img.width * scale;
                    const scaledHeight = img.height * scale;
                    const x = (CANVAS_WIDTH - scaledWidth) / 2;
                    const y = (CANVAS_HEIGHT - scaledHeight) / 2;

                    ctx.drawImage(img, x, y, scaledWidth, scaledHeight);

                    Swal.fire({
                        icon: 'success',
                        title: 'Gambar Berhasil Diupload!',
                        timer: 2000,
                        showConfirmButton: false
                    });
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);
        }
        e.target.value = '';
    });

    // Pen color change
    document.getElementById('adminPenColor').addEventListener('change', function(e) {
        if (adminSignaturePad) {
            adminSignaturePad.penColor = e.target.value;
        }
    });

    // Pen width change
    document.getElementById('adminPenWidth').addEventListener('input', function(e) {
        if (adminSignaturePad) {
            const width = parseFloat(e.target.value);
            adminSignaturePad.minWidth = width * 0.25;
            adminSignaturePad.maxWidth = width * 1.25;
        }
    });

    // Clear signature
    document.getElementById('adminClearSignature').addEventListener('click', function() {
        if (adminSignaturePad) {
            adminSignaturePad.clear();
            adminSavedSignatureData = null;
        }
        const ctx = adminCanvas.getContext('2d');
        ctx.fillStyle = 'rgb(255, 255, 255)';
        ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    });

    // Save signature
    document.getElementById('adminSaveSignature').addEventListener('click', function() {
        let dataURL = adminCanvas.toDataURL('image/jpeg', 0.85);
        const estimatedSize = dataURL.length * 0.75;
        const maxSize = 60000;

        if (estimatedSize > maxSize) {
            dataURL = adminCanvas.toDataURL('image/jpeg', 0.7);
            if ((dataURL.length * 0.75) > maxSize) {
                dataURL = adminCanvas.toDataURL('image/jpeg', 0.6);
            }
            if ((dataURL.length * 0.75) > maxSize) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tanda Tangan Terlalu Besar',
                    html: 'Silakan buat tanda tangan yang lebih sederhana atau upload gambar dengan resolusi lebih kecil',
                    confirmButtonColor: '#f39c12'
                });
                return;
            }
        }

        if (currentAdminUser) {
            document.getElementById('adminSignatureData' + currentAdminUser).value = dataURL;
            const preview = document.getElementById('adminSignaturePreview' + currentAdminUser);
            preview.innerHTML = '<img src="' + dataURL +
                '" alt="Signature Preview" class="border border-2 rounded" style="max-width: 300px; height: auto;">';
            preview.style.display = 'block';
        }

        adminSavedSignatureData = adminSignaturePad.toData();

        const modalInstance = bootstrap.Modal.getInstance(globalSignatureModal);
        modalInstance.hide();

        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: 'Tanda tangan berhasil disimpan! Jangan lupa klik "Simpan Perubahan" untuk menyimpan ke database.',
            confirmButtonColor: '#28a745'
        });
    });

    // Clear admin signature for specific user
    function clearAdminSignature(username) {
        Swal.fire({
            title: 'Konfirmasi Hapus',
            text: 'Apakah Anda yakin ingin menghapus tanda tangan user ' + username + '?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('adminSignatureData' + username).value = '';
                document.getElementById('adminSignaturePreview' + username).style.display = 'none';
                adminSavedSignatureData = null;
                if (adminSignaturePad) {
                    adminSignaturePad.clear();
                }

                Swal.fire({
                    icon: 'success',
                    title: 'Terhapus!',
                    text: 'Tanda tangan berhasil dihapus. Jangan lupa klik "Simpan Perubahan" untuk menyimpan ke database.',
                    timer: 2000,
                    showConfirmButton: false
                });
            }
        });
    }
</script>
@endsection