@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="{{ $user_login->email }}">
                                    </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>
                            @if ($can_manage_signature ?? false)
                                <hr class="horizontal dark">
                                <p class="text-uppercase text-sm">Tanda Tangan Default</p>
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="border rounded p-2 bg-white">
                                            <canvas id="signatureCanvas"
                                                style="width: 100%; height: 180px; touch-action: none;"></canvas>
                                        </div>
                                        <input type="hidden" name="profile_signature_data" id="profileSignatureData">
                                        <input type="hidden" name="profile_signature_clear" id="profileSignatureClear"
                                            value="0">
                                        <div class="mt-3">
                                            <button type="button" class="btn btn-outline-secondary btn-sm mb-0"
                                                id="clearSignatureCanvas">
                                                Bersihkan Canvas
                                            </button>
                                            @if ($user_login->signature_path)
                                                <button type="button" class="btn btn-outline-danger btn-sm mb-0"
                                                    id="removeSavedSignature">
                                                    Hapus TTD Tersimpan
                                                </button>
                                            @endif
                                            <button type="button" class="btn btn-outline-primary btn-sm mb-0"
                                                id="previewPdfSignature" data-bs-toggle="modal"
                                                data-bs-target="#signaturePdfPreviewModal">
                                                <i class="fas fa-file-pdf me-1"></i> Preview TTD PDF
                                            </button>
                                        </div>
                                        <div class="form-group mt-3">
                                            <label for="profileSignatureImage" class="form-control-label">Upload Gambar
                                                TTD</label>
                                            <input class="form-control" type="file" name="profile_signature_image"
                                                id="profileSignatureImage" accept="image/png,image/jpeg">
                                            <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 mb-0">Format Image: <b>PNG,JPG,JPEG</b></p>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-control-label">TTD Tersimpan</label>
                                        <div class="border rounded bg-white p-2 text-center" style="min-height: 120px;">
                                            @if ($user_login->signature_path)
                                                <img src="{{ asset('/storage' . '/' . $user_login->signature_path) }}"
                                                    id="savedSignaturePreview" alt="signature"
                                                    style="max-width: 100%; max-height: 100px;">
                                            @else
                                                <span class="text-muted text-sm" id="savedSignatureEmpty">Belum ada tanda
                                                    tangan</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <hr class="horizontal dark">
                            @endif
                        </div>
                        <div class="card-footer">
                            <div class="d-flex align-items-center">
                                <button type="submit" class="btn btn-primary btn-sm">Simpan</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if ($can_manage_signature ?? false)
        @php
            $profileRoles = array_map('trim', explode(',', strtolower((string) ($user_login->idroles ?? ''))));
            $previewSignatureRole = in_array('auditr', $profileRoles, true)
                ? 'auditor'
                : (in_array('audtee', $profileRoles, true)
                    ? 'auditee'
                    : 'mr');
            $previewUserName = trim(($user_login->firstname ?? '') . ' ' . ($user_login->lastname ?? ''));
        @endphp
        <div class="modal fade" id="signaturePdfPreviewModal" tabindex="-1" aria-labelledby="signaturePdfPreviewTitle"
            aria-hidden="true" data-signature-role="{{ $previewSignatureRole }}">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="signaturePdfPreviewTitle">Preview TTD pada PDF NCR</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">
                        <p class="text-sm text-muted mb-3">Simulasi menggunakan data NCR dummy. Preview tidak menyimpan
                            perubahan.</p>
                        <div class="border bg-white p-3 overflow-auto">
                            <div class="text-center mb-3">
                                <div class="fw-bold">PT MULTI SPUNINDO JAYA Tbk</div>
                                <div class="text-xs">NON CONFORMITY REPORT - DATA DUMMY</div>
                            </div>
                            <table class="mb-0"
                                style="width:100%; min-width:650px; table-layout:fixed; border-collapse:collapse; color:#000; font-family:'DejaVu Sans',Arial,sans-serif; font-size:10px;">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width:33%; border:1px solid #000; padding:3px 5px; font-size:10px;">Auditor</th>
                                        <th class="text-center" style="width:33%; border:1px solid #000; padding:3px 5px; font-size:10px;">Auditee / Penanggung Jawab</th>
                                        <th class="text-center" style="width:34%; border:1px solid #000; padding:3px 5px; font-size:10px;">Management Representative</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        @foreach (['auditor', 'auditee', 'mr'] as $signatureRole)
                                            <td class="text-center align-middle" style="height:55px; border:1px solid #000; padding:3px 5px;">
                                                @if ($previewSignatureRole === $signatureRole)
                                                    <img class="profile-pdf-signature d-none" alt="Preview tanda tangan"
                                                        style="max-width:250px; max-height:110px;">
                                                    <span class="profile-pdf-signature-empty text-muted text-xs">Belum ada
                                                        tanda tangan</span>
                                                @else
                                                    <span
                                                        style="font-family:cursive; font-size:16px; color:#c2b829;">(dummy)</span>
                                                @endif
                                            </td>
                                        @endforeach
                                    </tr>
                                    <tr>
                                        <td class="text-center fw-bold" style="border:1px solid #000; padding:2px 5px 3px; font-size:10px;">
                                            {{ $previewSignatureRole === 'auditor' ? $previewUserName : 'Auditor Dummy' }}
                                        </td>
                                        <td class="text-center fw-bold" style="border:1px solid #000; padding:2px 5px 3px; font-size:10px;">
                                            {{ $previewSignatureRole === 'auditee' ? $previewUserName : 'Auditee Dummy' }}
                                        </td>
                                        <td class="text-center fw-bold" style="border:1px solid #000; padding:2px 5px 3px; font-size:10px;">
                                            {{ $previewSignatureRole === 'mr' ? $previewUserName : 'MR Dummy' }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary btn-sm mb-0"
                            data-bs-dismiss="modal">Tutup</button>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@push('js')
    @if ($can_manage_signature ?? false)
        <script src="{{ asset('/') }}assets/js/signature_pad.umd.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const form = document.getElementById('profile-form');
                const canvas = document.getElementById('signatureCanvas');
                const signatureInput = document.getElementById('profileSignatureData');
                const clearInput = document.getElementById('profileSignatureClear');
                const clearCanvasButton = document.getElementById('clearSignatureCanvas');
                const removeSavedButton = document.getElementById('removeSavedSignature');
                const savedPreview = document.getElementById('savedSignaturePreview');
                const savedEmpty = document.getElementById('savedSignatureEmpty');
                const signatureImageInput = document.getElementById('profileSignatureImage');
                const previewModal = document.getElementById('signaturePdfPreviewModal');

                if (!form || !canvas || typeof SignaturePad === 'undefined') {
                    return;
                }

                const signaturePad = new SignaturePad(canvas, {
                    backgroundColor: 'rgba(255,255,255,0)',
                    penColor: 'rgb(20, 20, 20)',
                    minWidth: 0.8,
                    maxWidth: 2.2
                });

                function resizeCanvas() {
                    const ratio = Math.max(window.devicePixelRatio || 1, 1);
                    const data = signaturePad.isEmpty() ? null : signaturePad.toData();

                    canvas.width = canvas.offsetWidth * ratio;
                    canvas.height = canvas.offsetHeight * ratio;
                    canvas.getContext('2d').scale(ratio, ratio);
                    signaturePad.clear();

                    if (data) {
                        signaturePad.fromData(data);
                    }
                }

                resizeCanvas();
                window.addEventListener('resize', resizeCanvas);

                canvas.addEventListener('pointerdown', function() {
                    if (signatureImageInput && signatureImageInput.files.length > 0) {
                        signatureImageInput.value = '';
                    }
                    clearInput.value = '0';
                });

                clearCanvasButton.addEventListener('click', function() {
                    signaturePad.clear();
                    signatureInput.value = '';
                });

                if (removeSavedButton) {
                    removeSavedButton.addEventListener('click', function() {
                        clearInput.value = '1';
                        signaturePad.clear();
                        signatureInput.value = '';
                        removeSavedButton.setAttribute('disabled', 'disabled');

                        if (savedPreview) {
                            savedPreview.remove();
                        }
                        if (savedEmpty) {
                            savedEmpty.classList.remove('d-none');
                        }
                        if (signatureImageInput) {
                            signatureImageInput.value = '';
                        }
                    });
                }

                if (signatureImageInput) {
                    signatureImageInput.addEventListener('change', function() {
                        const file = signatureImageInput.files && signatureImageInput.files[0];

                        if (!file) {
                            return;
                        }

                        clearInput.value = '0';
                        signaturePad.clear();
                        signatureInput.value = '';

                        let preview = document.getElementById('savedSignaturePreview');

                        if (!preview) {
                            preview = document.createElement('img');
                            preview.id = 'savedSignaturePreview';
                            preview.alt = 'signature';
                            preview.style.maxWidth = '100%';
                            preview.style.maxHeight = '100px';
                            const previewBox = signatureImageInput.closest('.row').querySelector(
                                '.col-md-4 .border');

                            if (previewBox) {
                                previewBox.innerHTML = '';
                                previewBox.appendChild(preview);
                            }
                        }

                        preview.src = URL.createObjectURL(file);
                    });
                }

                if (previewModal) {
                    previewModal.addEventListener('show.bs.modal', function() {
                        const previewImage = previewModal.querySelector('.profile-pdf-signature');
                        const emptyMessage = previewModal.querySelector('.profile-pdf-signature-empty');
                        let source = '';

                        if (!signaturePad.isEmpty()) {
                            source = signaturePad.toDataURL('image/png');
                        } else if (signatureImageInput && signatureImageInput.files && signatureImageInput
                            .files[0]) {
                            source = URL.createObjectURL(signatureImageInput.files[0]);
                        } else if (clearInput.value !== '1') {
                            const currentSavedPreview = document.getElementById('savedSignaturePreview');
                            source = currentSavedPreview ? currentSavedPreview.src : '';
                        }

                        if (source) {
                            previewImage.src = source;
                            previewImage.classList.remove('d-none');
                            emptyMessage.classList.add('d-none');
                        } else {
                            previewImage.removeAttribute('src');
                            previewImage.classList.add('d-none');
                            emptyMessage.classList.remove('d-none');
                        }
                    });
                }

                form.addEventListener('submit', function() {
                    if (signatureImageInput && signatureImageInput.files.length > 0) {
                        signatureInput.value = '';
                        return;
                    }

                    if (!signaturePad.isEmpty()) {
                        signatureInput.value = signaturePad.toDataURL('image/png');
                    }
                });
            });
        </script>
    @endif
@endpush