@extends('layouts.auth.app')

@section('title', 'Sign Visible eTCC')

@push('styles')
<style>
    .document-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .document-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    .document-load {
        display: none;
        text-align: center;
        padding: 40px;
    }
    .document-load.active {
        display: block;
    }
    .signer-body {
        overflow-x: auto;
    }
    .signer-body canvas {
        max-width: 100%;
        border: 1px solid #ddd;
        background: white;
    }
    .signature-pad-modal canvas {
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        width: 100%;
        height: 200px;
    }
    .signature-preview {
        max-width: 200px;
        max-height: 100px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 10px 0;
    }
    .btn-signature {
        margin-right: 8px;
        margin-bottom: 8px;
    }
</style>
@endpush

@section('content')
<!-- Hidden fields for JavaScript -->
<input type="hidden" id="hdnFilePreview" value="{{ route('process-tcc-request.get-tcc', ['reqId' => $signVisibleModel['RequestID'], 'template' => 'normal']) }}" />
<input type="hidden" id="hdnRequestID" value="{{ $signVisibleModel['RequestID'] }}" />
<input type="hidden" id="hdnSavedSignaturePath" value="{{ $signVisibleModel['SavedSignaturePath'] }}" />
<input type="hidden" id="hdnSignaturePadPath" value="" />
<input type="hidden" id="hdnUploadSignaturePath" value="" />
<input type="hidden" id="hdnRSVID" value="{{ $signVisibleModel['RSVID'] }}" />
<input type="hidden" id="hdnSignType" value="0" />
<input type="hidden" id="hdnApproverNo" value="{{ ($requestData->VisibleSignStatusID ?? 0) + 1 }}" />

<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ route('staff.sign-tcc-list') }}" class="inline-flex items-center text-gray-600 hover:text-gray-900 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back to List
            </a>
        </div>
        <h1 class="text-xl font-semibold text-gray-900">TCC Request - Sign Visible eTCC</h1>
    </div>

    <!-- Request Information Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">Request Information</h3>
                <a href="{{ route('staff.sign-tcc-list') }}" class="inline-flex items-center px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg font-medium text-sm text-gray-700 hover:bg-gray-200 transition-colors">
                    Cancel
                </a>
            </div>
        </div>
        <div class="px-6 py-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Request Ref No</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->RequestRefNo ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Request Date</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->RequestDate ? \Carbon\Carbon::parse($requestData->RequestDate)->format('d-M-Y') : 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Year</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->TaxYear ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Payer Name</label>
                    <p class="text-sm font-semibold text-gray-900">{{ ($requestData->FirstName ?? '') . ' ' . ($requestData->LastName ?? '') }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Tax Payer EIN</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->IndividualRIN ?? 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wider mb-1">Mobile Number</label>
                    <p class="text-sm font-semibold text-gray-900">{{ $requestData->MobileNumber1 ?? 'N/A' }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Document Preview Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">Document Preview</h3>
        </div>
        <div class="px-6 py-4">
            <div class="document-container">
                <div class="document-pagination">
                    <div class="flex items-center space-x-2">
                        <button id="btnPrev" class="inline-flex items-center px-3 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                            </svg>
                        </button>
                        <button id="btnNext" class="inline-flex items-center px-3 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </button>
                    </div>
                    <div class="text-sm text-gray-600">
                        Page: <span id="spnCurrentPage">1</span> / <span id="spnPageCount">1</span>
                    </div>
                </div>
                <div class="document-load" id="documentLoader">
                    <svg class="animate-spin h-8 w-8 text-teal-600 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <p class="mt-2 text-gray-500">Loading document...</p>
                </div>
                <div class="signer-body text-center">
                    <canvas id="cnvDocument"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Sign Visible eTCC Card -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
            <h3 class="text-lg font-semibold text-gray-900">Sign Visible eTCC</h3>
        </div>
        <div class="px-6 py-4">
            <div class="mb-4">
                <div class="flex flex-wrap">
                    <button type="button" class="btn-signature inline-flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors" id="btnSavedSignature">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        Use Saved Signature
                    </button>
                    <button type="button" class="btn-signature inline-flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors" id="btnUploadSignature">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                        Upload from Computer
                    </button>
                    <button type="button" class="btn-signature inline-flex items-center px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors" id="btnSignaturePad">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                        </svg>
                        Sign on Pad
                    </button>
                    <button type="button" class="btn-signature inline-flex items-center px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors" id="btnUndoSignature">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                        </svg>
                        Undo
                    </button>
                </div>
            </div>
            <div class="mb-4">
                <label for="txtNotes" class="block text-sm font-medium text-gray-700 mb-1">Sign Notes</label>
                <textarea id="txtNotes" name="SignNotes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-transparent" placeholder="Enter Notes"></textarea>
            </div>
        </div>
        <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 text-right">
            <button type="button" class="inline-flex items-center px-6 py-2 bg-teal-600 text-white font-medium rounded-lg hover:bg-teal-700 transition-colors" id="btnSave">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                Save
            </button>
        </div>
    </div>
</div>

<!-- Signature Pad Modal -->
<div id="dvSignPadModel" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" id="signPadBackdrop"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Signature Pad</h3>
                    <button type="button" class="text-gray-400 hover:text-gray-500" id="btnCloseSignPad">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="signature-pad-modal">
                    <canvas id="cnvSignaturePad" class="w-full border border-gray-300 rounded-lg" style="height: 200px;"></canvas>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-600 text-base font-medium text-white hover:bg-teal-700 sm:ml-3 sm:w-auto sm:text-sm" id="btnSPSave">Save</button>
                <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="btnSPUndo">Undo</button>
                <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm" id="btnSPClear">Clear</button>
            </div>
        </div>
    </div>
</div>

<!-- Upload Signature Modal -->
<div id="dvUploadSignModel" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" id="uploadSignBackdrop"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Upload from Computer</h3>
                    <button type="button" class="text-gray-400 hover:text-gray-500" id="btnCloseUploadSign">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="form-group">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Upload Signature</label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                        <div class="space-y-1 text-center">
                            <div id="dvUCFilePreview" class="mb-4 hidden">
                                <img id="imgUploadPreview" src="" alt="Signature preview" class="mx-auto max-w-xs max-h-32">
                            </div>
                            <div id="dvUCNoPreview">
                                <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                    <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </div>
                            <div class="flex text-sm text-gray-600 justify-center">
                                <label for="fileUploadSignature" class="relative cursor-pointer bg-white rounded-md font-medium text-teal-600 hover:text-teal-500">
                                    <span>Upload a file</span>
                                    <input id="fileUploadSignature" name="fileUploadSignature" type="file" class="sr-only" accept="image/*">
                                </label>
                            </div>
                            <p class="text-xs text-gray-500">PNG, JPG up to 2MB</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-600 text-base font-medium text-white hover:bg-teal-700 sm:ml-3 sm:w-auto sm:text-sm" id="btnUCSave">Save</button>
                <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm" id="btnUCRemove">Remove</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- PDF.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<!-- Signature Pad library -->
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>

<script>
$(document).ready(function() {
    // PDF.js initialization
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

    var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 1.5,
        canvas = document.getElementById('cnvDocument'),
        ctx = canvas.getContext('2d');

    var signaturePad = null;
    var uploadedSignatureData = null;

    // Initialize signature pad
    function initSignaturePad() {
        var spCanvas = document.getElementById('cnvSignaturePad');
        if (spCanvas) {
            signaturePad = new SignaturePad(spCanvas, {
                backgroundColor: 'rgb(255, 255, 255)',
                penColor: 'rgb(0, 0, 0)'
            });

            // Resize canvas
            function resizeCanvas() {
                var ratio = Math.max(window.devicePixelRatio || 1, 1);
                spCanvas.width = spCanvas.offsetWidth * ratio;
                spCanvas.height = spCanvas.offsetHeight * ratio;
                spCanvas.getContext("2d").scale(ratio, ratio);
                signaturePad.clear();
            }
            window.addEventListener("resize", resizeCanvas);
            resizeCanvas();
        }
    }

    // Load PDF document
    function loadPDF() {
        var pdfUrl = $('#hdnFilePreview').val();
        if (!pdfUrl) {
            console.error('No PDF path specified');
            showPdfError('No PDF document path specified.');
            return;
        }

        $('#documentLoader').addClass('active');
        $('.signer-body').show();
        $('#pdfErrorMessage').hide();

        pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
            pdfDoc = pdf;
            $('#spnPageCount').text(pdf.numPages);
            renderPage(pageNum);
            $('#documentLoader').removeClass('active');
        }).catch(function(error) {
            console.error('Error loading PDF:', error);
            $('#documentLoader').removeClass('active');
            showPdfError('The TCC document could not be loaded. The PDF file may not exist or needs to be regenerated. Please go back and regenerate the TCC before signing.');
        });
    }

    // Show PDF error message
    function showPdfError(message) {
        $('.signer-body').hide();
        var errorHtml = '<div id="pdfErrorMessage" class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">' +
            '<svg class="mx-auto h-12 w-12 text-red-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">' +
            '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />' +
            '</svg>' +
            '<p class="text-red-700 font-medium">' + message + '</p>' +
            '<a href="{{ route('staff.sign-tcc-list') }}" class="mt-4 inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">' +
            '<svg class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" /></svg>' +
            'Back to List</a>' +
            '</div>';
        $('.document-container').append(errorHtml);
    }

    // Render page
    function renderPage(num) {
        pageRendering = true;

        pdfDoc.getPage(num).then(function(page) {
            var viewport = page.getViewport({ scale: scale });
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: ctx,
                viewport: viewport
            };

            var renderTask = page.render(renderContext);
            renderTask.promise.then(function() {
                pageRendering = false;
                if (pageNumPending !== null) {
                    renderPage(pageNumPending);
                    pageNumPending = null;
                }
            });
        });

        $('#spnCurrentPage').text(num);
    }

    // Queue page rendering
    function queueRenderPage(num) {
        if (pageRendering) {
            pageNumPending = num;
        } else {
            renderPage(num);
        }
    }

    // Previous page
    $('#btnPrev').click(function() {
        if (pageNum <= 1) return;
        pageNum--;
        queueRenderPage(pageNum);
    });

    // Next page
    $('#btnNext').click(function() {
        if (!pdfDoc || pageNum >= pdfDoc.numPages) return;
        pageNum++;
        queueRenderPage(pageNum);
    });

    // Use saved signature - loads actual signature image from server
    // Matches .NET behavior in SignTCCListBulk where ImageConverter() loads MST_Users.SignaturePath
    $('#btnSavedSignature').click(function() {
        var savedPath = $('#hdnSavedSignaturePath').val();
        if (!savedPath) {
            alert('No saved signature configured in your profile. Please upload a signature or use the signature pad.');
            return;
        }

        // Show loading state
        var btn = $(this);
        var originalText = btn.text();
        btn.text('Loading...').prop('disabled', true);

        // Fetch the actual signature image from server
        $.ajax({
            url: '{{ route("staff.get-saved-signature") }}',
            type: 'GET',
            success: function(response) {
                btn.text(originalText).prop('disabled', false);

                if (response.success && response.signatureData) {
                    // Store the base64 signature data
                    $('#hdnSavedSignaturePath').val(response.signatureData);
                    $('#hdnSignType').val('1');
                    alert('Saved signature loaded successfully. Click Save to apply.');
                } else {
                    alert(response.message || 'Failed to load saved signature.');
                }
            },
            error: function(xhr) {
                btn.text(originalText).prop('disabled', false);
                console.error('Error loading saved signature:', xhr);
                alert('Error loading saved signature. Please try uploading or drawing a signature instead.');
            }
        });
    });

    // Open signature pad modal
    $('#btnSignaturePad').click(function() {
        $('#dvSignPadModel').removeClass('hidden');
        initSignaturePad();
    });

    // Close signature pad modal
    $('#btnCloseSignPad, #signPadBackdrop').click(function() {
        $('#dvSignPadModel').addClass('hidden');
    });

    // Signature pad clear
    $('#btnSPClear').click(function() {
        if (signaturePad) {
            signaturePad.clear();
        }
    });

    // Signature pad undo
    $('#btnSPUndo').click(function() {
        if (signaturePad) {
            var data = signaturePad.toData();
            if (data && data.length > 0) {
                data.pop();
                signaturePad.fromData(data);
            }
        }
    });

    // Signature pad save
    $('#btnSPSave').click(function() {
        if (signaturePad && !signaturePad.isEmpty()) {
            var dataUrl = signaturePad.toDataURL('image/png');
            $('#hdnSignaturePadPath').val(dataUrl);
            $('#hdnSignType').val('3');
            $('#dvSignPadModel').addClass('hidden');
            alert('Signature saved.');
        } else {
            alert('Please draw a signature first.');
        }
    });

    // Open upload modal
    $('#btnUploadSignature').click(function() {
        $('#dvUploadSignModel').removeClass('hidden');
    });

    // Close upload modal
    $('#btnCloseUploadSign, #uploadSignBackdrop').click(function() {
        $('#dvUploadSignModel').addClass('hidden');
    });

    // File upload preview
    $('#fileUploadSignature').change(function(e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                uploadedSignatureData = e.target.result;
                $('#imgUploadPreview').attr('src', uploadedSignatureData);
                $('#dvUCFilePreview').removeClass('hidden');
                $('#dvUCNoPreview').addClass('hidden');
            };
            reader.readAsDataURL(file);
        }
    });

    // Upload remove
    $('#btnUCRemove').click(function() {
        uploadedSignatureData = null;
        $('#fileUploadSignature').val('');
        $('#imgUploadPreview').attr('src', '');
        $('#dvUCFilePreview').addClass('hidden');
        $('#dvUCNoPreview').removeClass('hidden');
    });

    // Upload save
    $('#btnUCSave').click(function() {
        if (uploadedSignatureData) {
            $('#hdnUploadSignaturePath').val(uploadedSignatureData);
            $('#hdnSignType').val('2');
            $('#dvUploadSignModel').addClass('hidden');
            alert('Signature uploaded.');
        } else {
            alert('Please select an image first.');
        }
    });

    // Undo signature
    $('#btnUndoSignature').click(function() {
        $('#hdnSignType').val('0');
        $('#hdnSignaturePadPath').val('');
        $('#hdnUploadSignaturePath').val('');
        alert('Signature selection cleared.');
    });

    // Save button
    $('#btnSave').click(function() {
        var signType = $('#hdnSignType').val();
        if (signType === '0') {
            alert('Please select a signature method before saving.');
            return;
        }

        var requestId = $('#hdnRequestID').val();
        var rsvid = $('#hdnRSVID').val();
        var notes = $('#txtNotes').val();
        var approverNo = $('#hdnApproverNo').val();
        var signaturePath = '';

        if (signType === '1') {
            signaturePath = $('#hdnSavedSignaturePath').val();
        } else if (signType === '2') {
            signaturePath = $('#hdnUploadSignaturePath').val();
        } else if (signType === '3') {
            signaturePath = $('#hdnSignaturePadPath').val();
        }

        // Submit to server
        $.ajax({
            url: '{{ route("staff.save-tcc-signature") }}',
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                RequestID: requestId,
                RSVID: rsvid,
                SignNotes: notes,
                SignType: signType,
                SignaturePath: signaturePath,
                ApproverNo: approverNo
            },
            success: function(response) {
                if (response.success) {
                    alert('Signature saved successfully.');
                    window.location.href = '{{ route("staff.sign-tcc-list") }}';
                } else {
                    alert(response.message || 'Error saving signature.');
                }
            },
            error: function(xhr) {
                console.error('Error:', xhr);
                alert('Error saving signature. Please try again.');
            }
        });
    });

    // Initialize
    loadPDF();
});
</script>
@endpush