@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => 'Profile'])
<div class="card shadow-lg mx-4 card-profile">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-auto">
                <div class="avatar avatar-xl position-relative">
                    {{-- photo profile --}}
                    <img src="{{ asset('/storage' . '/' . $user_login->image) }}" alt="profile_image"
                        class="w-100 border-radius-lg shadow-sm">
                </div>
            </div>
            <div class="col-auto my-auto">
                <div class="h-100">
                    <h5 class="mb-1">
                        {{ $user_login->firstname }}
                    </h5>
                    <p class="mb-0 font-weight-bold text-sm">
                        {{ session('username') }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md">
            <form role="form" method="post" action="{{ URL::to('profile/update') }}" id="profile-form"
                enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Informasi Akun</p>
                        <hr class="horizontal dark mt-0">
                        {{-- alert --}}
                        @include('components.alert')
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Username</label>

                                    <p class="px-2"><label for="example-text-input"
                                            class="form-control-label text-primary">{{ session('username') }}</label>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Email address</label>
                                    <input class="form-control" type="email" name="profile_email"
                                        value="{{ old('profile_email', $user_login->email) }}">
                                    <span class="text-xs text-primary">*Kosongkan jika anda tidak memerlukan notifikasi
                                        email</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">SAP Username</label>
                                    <input class="form-control" type="text" name="profile_sap_username"
                                        value="{{ old('profile_sap_username', $user_login->sap_username) }}">
                                    <span class="text-xs text-primary">*Username untuk integrasi sistem SAP</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">First name</label>
                                    <input class="form-control" type="text" name="profile_firstname"
                                        value="{{ $user_login->firstname }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="example-text-input" class="form-control-label">Last name</label>
                                    <input class="form-control" type="text" name="profile_lastname"
                                        value="{{ $user_login->lastname }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="col-sm-auto">
                                    <div class="position-relative">
                                        <div>
                                            <label for="file-input" style="left: -5px !important;" id="ProfileImageedit"
                                                class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2">
                                                <i class="fa fa-pen top-0" data-bs-toggle="tooltip"
                                                    data-bs-placement="top" title="" aria-hidden="true"
                                                    data-bs-original-title="Edit Image" aria-label="Edit Image"></i>
                                                <span class="sr-only">Edit Image</span>
                                            </label>
                                            <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                                <img src="{{ asset('/storage' . '/' . $user_login->image) }}"
                                                    id="preview" alt="image" data-bs-toggle="modal"
                                                    data-bs-target="#imageModal"
                                                    class="w-30 border-radius-lg shadow-sm">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <input class="form-control" type="file" value="{{ $user_login->image }}"
                                    id="ProfileImage" name="profile_image" style="display: none;">
                                <p class='text-primary text-xs pt-2 mb-0'>Maksimal Size :
                                    <b>2048 KB</b>
                                </p>
                                <p class='text-primary text-xs pt-1'>Format Image :
                                    <b>PNG,JPG,JPEG</b>
                                </p>
                                <script>
                                    ProfileImage.onchange = evt => {
                                            const [file] = ProfileImage.files
                                            if (file) {
                                                preview.src = URL.createObjectURL(file)
                                            }
                                        }
                                        $('#ProfileImageedit').click(function() {
                                            $('input[name="profile_image"]').click();

                                        });
                                </script>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                        <p class="text-uppercase text-sm">Tanda Tangan Digital</p>
                        <hr class="horizontal dark mt-0">
                        @if (in_array('admins', $users_rules))
                        <div class="card border-primary shadow-sm mb-4">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md">
                                        <div class="d-flex align-items-center">
                                            <div class="bg-primary bg-opacity-10 rounded-circle p-3 me-3">
                                                <i class="fas fa-shield-alt text-primary fs-4"></i>
                                            </div>

                                            <div>
                                                <h5 class="mb-1 fw-bold text-primary">
                                                    Administrator Access
                                                </h5>
                                                <p class="mb-0 text-muted">
                                                    Anda memiliki akses untuk mengelola tanda tangan seluruh pengguna.
                                                </p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-auto mt-3 mt-md-0">
                                        <a href="{{ url('/admin/signatures') }}" class="btn btn-primary">
                                            <i class="fas fa-users-cog me-2"></i>
                                            Manage All Signatures
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="signature-input" class="form-control-label">Tanda Tangan</label>
                                    <div class="d-flex align-items-center gap-2">
                                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#signatureModal">
                                            <i class="fas fa-signature me-2"></i>Upload/Buat Signature
                                        </button>
                                        @if ($user_login->signature)
                                        <button type="button" class="btn btn-danger btn-sm"
                                            onclick="clearSavedSignature()">
                                            <i class="fas fa-trash me-2"></i>Hapus Signature
                                        </button>
                                        @endif
                                    </div>
                                    <input type="hidden" name="profile_signature" id="signatureData"
                                        value="{{ $user_login->signature ?? '' }}">
                                    <div id="signaturePreview" class="mt-3"
                                        style="display: {{ $user_login->signature ? 'block' : 'none' }};">
                                        <img src="{{ $user_login->signature ?? '' }}" alt="Signature Preview"
                                            class="border border-2 rounded" style="max-width: 300px; height: auto;">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                    </div>
                    <div class="card-footer">
                        <div class="d-flex align-items-center">
                            <button class="btn btn-primary btn-sm"
                                onclick="event.preventDefault(); document.getElementById('profile-form').submit();">Simpan</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Signature Pad Modal -->
<div class="modal fade" id="signatureModal" tabindex="-1" aria-labelledby="signatureModalLabel" 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="signatureModalLabel">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="signaturePad" 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="penColor" class="form-label me-2">Warna Pena:</label>
                        <input type="color" id="penColor" value="#000000" class="form-control form-control-color"
                            style="width: 60px; display: inline-block;">
                        <label for="penWidth" class="form-label ms-3 me-2">Ketebalan:</label>
                        <input type="range" id="penWidth" 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="uploadSignatureBtn">
                            <i class="fas fa-upload me-2"></i>Upload Gambar
                        </button>
                        <input type="file" id="uploadSignatureImage" accept="image/png,image/jpg,image/jpeg"
                            style="display: none;">
                        <button type="button" class="btn btn-danger btn-sm" id="clearSignature">
                            <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="saveSignature">
                    <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>
    // Initialize Signature Pad with fixed dimensions
        let signaturePad;
        let savedSignatureData = null;
        const canvas = document.getElementById('signaturePad');
        const modal = document.getElementById('signatureModal');

        // Fixed canvas dimensions (aspect ratio 5:2) - consistent across all devices
        const CANVAS_WIDTH = 800;
        const CANVAS_HEIGHT = 320;

        // Output dimensions untuk save (sama dengan canvas untuk konsistensi)
        const OUTPUT_WIDTH = 800;
        const OUTPUT_HEIGHT = 320;

        // Initialize when modal is shown
        modal.addEventListener('shown.bs.modal', function() {
            initializeSignaturePad();
        });

        // Initialize signature pad
        function initializeSignaturePad() {
            // Save current signature data if exists
            if (signaturePad && !signaturePad.isEmpty()) {
                savedSignatureData = signaturePad.toData();
            }

            // Set fixed canvas dimensions WITHOUT devicePixelRatio multiplication
            // Ini penting untuk mencegah bug perbedaan resolusi
            canvas.width = CANVAS_WIDTH;
            canvas.height = CANVAS_HEIGHT;

            // Set display size (CSS) - sama dengan ukuran internal
            canvas.style.width = CANVAS_WIDTH + 'px';
            canvas.style.height = CANVAS_HEIGHT + 'px';

            // Create new signature pad instance
            signaturePad = new SignaturePad(canvas, {
                backgroundColor: 'rgb(255, 255, 255)',
                penColor: document.getElementById('penColor').value,
                minWidth: 0.5,
                maxWidth: 2.5
            });

            // Load existing signature if available
            const existingSignature = document.getElementById('signatureData').value;
            if (existingSignature && existingSignature !== '') {
                const img = new Image();
                img.onload = function() {
                    const ctx = canvas.getContext('2d');
                    ctx.fillStyle = 'rgb(255, 255, 255)';
                    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

                    // Draw gambar dengan ukuran penuh canvas (sudah sama ukurannya)
                    ctx.drawImage(img, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
                };
                img.src = existingSignature;
            } else if (savedSignatureData) {
                // Restore from saved data
                signaturePad.fromData(savedSignatureData);
            }
        }

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

        // Handle image upload - AUTO FIT TO CANVAS
        document.getElementById('uploadSignatureImage').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && file.type.match('image.*')) {
                // Check file size (max 5MB untuk mencegah error saat proses)
                const maxSize = 5 * 1024 * 1024; // 5MB
                if (file.size > maxSize) {
                    Swal.fire({
                        icon: 'error',
                        title: 'File Terlalu Besar!',
                        text: 'Ukuran file maksimal 5MB. Silakan pilih gambar yang lebih kecil.',
                        confirmButtonColor: '#d33'
                    });
                    e.target.value = '';
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(event) {
                    const img = new Image();
                    img.onload = function() {
                        // Clear signature pad
                        if (signaturePad) {
                            signaturePad.clear();
                        }

                        // Auto fit image to canvas
                        const ctx = canvas.getContext('2d');
                        ctx.fillStyle = '#ffffff';
                        ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

                        // Hitung scale untuk fit image ke canvas (keep aspect ratio)
                        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;

                        // Center image di canvas
                        const x = (CANVAS_WIDTH - scaledWidth) / 2;
                        const y = (CANVAS_HEIGHT - scaledHeight) / 2;

                        // Draw image langsung ke canvas utama
                        ctx.drawImage(img, x, y, scaledWidth, scaledHeight);

                        // Tampilkan notifikasi sukses
                        Swal.fire({
                            icon: 'success',
                            title: 'Gambar Berhasil Diupload!',
                            text: 'Gambar telah disesuaikan dengan ukuran canvas. Klik "Simpan Tanda Tangan" untuk melanjutkan.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    };
                    img.src = event.target.result;
                };
                reader.readAsDataURL(file);
            }
            // Reset input
            e.target.value = '';
        });



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

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

        // Clear signature
        document.getElementById('clearSignature').addEventListener('click', function() {
            if (signaturePad) {
                signaturePad.clear();
                savedSignatureData = null;
            }

            // Redraw canvas dengan background putih
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(255, 255, 255)';
            ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        });

        // Save signature
        document.getElementById('saveSignature').addEventListener('click', function() {
            // Karena canvas sudah menggunakan ukuran standar tanpa devicePixelRatio
            // kita bisa langsung ambil dataURL dari canvas utama
            // Tidak perlu canvas temporary karena ukurannya sudah konsisten

            // Ambil data URL dengan kompresi JPEG
            let dataURL = canvas.toDataURL('image/jpeg', 0.85);

            // Check ukuran data URL (approximate size in bytes)
            const estimatedSize = dataURL.length * 0.75;
            const maxSize = 60000; // 60KB (untuk keamanan, karena kolom TEXT di MySQL maks ~65KB)

            // Jika masih terlalu besar, turunkan quality
            if (estimatedSize > maxSize) {
                console.log('Signature too large, compressing further...');
                dataURL = canvas.toDataURL('image/jpeg', 0.7);

                // Check lagi
                if ((dataURL.length * 0.75) > maxSize) {
                    dataURL = canvas.toDataURL('image/jpeg', 0.6);
                }

                // Final check
                if ((dataURL.length * 0.75) > maxSize) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Tanda Tangan Terlalu Besar',
                        html: 'Tanda tangan terlalu kompleks atau besar. Silakan:<br>' +
                            '1. Buat tanda tangan yang lebih sederhana, atau<br>' +
                            '2. Upload gambar dengan resolusi lebih kecil',
                        confirmButtonColor: '#f39c12'
                    });
                    return;
                }
            }

            // Simpan ke input hidden
            document.getElementById('signatureData').value = dataURL;

            // Update preview
            const preview = document.getElementById('signaturePreview');
            preview.innerHTML = '<img src="' + dataURL +
                '" alt="Signature Preview" class="border border-2 rounded" style="max-width: 300px; height: auto;">';
            preview.style.display = 'block';

            // Simpan signature data
            savedSignatureData = signaturePad.toData();

            // Tutup modal
            const modalInstance = bootstrap.Modal.getInstance(modal);
            modalInstance.hide();

            // Tampilkan pesan sukses
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: 'Tanda tangan berhasil disimpan! Klik tombol "Simpan" untuk menyimpan perubahan profil.',
                confirmButtonColor: '#28a745'
            });
        });

        // Clear saved signature
        function clearSavedSignature() {
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: 'Apakah Anda yakin ingin menghapus tanda tangan?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('signatureData').value = '';
                    document.getElementById('signaturePreview').style.display = 'none';
                    savedSignatureData = null;
                    if (signaturePad) {
                        signaturePad.clear();
                    }

                    // Tampilkan notifikasi sukses
                    Swal.fire({
                        icon: 'success',
                        title: 'Terhapus!',
                        text: 'Tanda tangan berhasil dihapus.',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            });
        }

        // Handle modal hidden event - clean up
        modal.addEventListener('hidden.bs.modal', function() {
            // Save signature data before modal closes
            if (signaturePad && !signaturePad.isEmpty()) {
                savedSignatureData = signaturePad.toData();
            }
        });
</script>
@endsection