@extends('layouts.app')

@section('title', 'Acknowledge Document')

@section('content')
<section class="content-header">
    <h1>
        Acknowledge Document
        <small>
            @if(isset($totalDocuments) && $totalDocuments > 1)
                Document {{ $currentPosition }} of {{ $totalDocuments }}
            @else
                Please review and sign this document
            @endif
        </small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="{{ url('/') }}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Acknowledge Document</li>
    </ol>
</section>

<section class="content">
    <!-- Flash Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-check"></i> Success!</h4>
            {{ session('success') }}
        </div>
    @endif

    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-warning"></i> Warning!</h4>
            {{ session('warning') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <h4><i class="icon fa fa-ban"></i> Error!</h4>
            {{ session('error') }}
        </div>
    @endif

    <!-- Progress Indicator -->
    @if(isset($totalDocuments) && $totalDocuments > 1)
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header">
                    <h3 class="box-title">
                        <i class="fa fa-list-ol"></i> Document Signing Progress
                    </h3>
                </div>
                <div class="box-body">
                    <div class="progress progress-sm active">
                        <div class="progress-bar progress-bar-primary progress-bar-striped" 
                             role="progressbar" 
                             aria-valuenow="{{ $currentPosition }}" 
                             aria-valuemin="0" 
                             aria-valuemax="{{ $totalDocuments }}"
                             style="width: {{ ($currentPosition / $totalDocuments) * 100 }}%">
                            <span class="sr-only">{{ $currentPosition }} of {{ $totalDocuments }} documents</span>
                        </div>
                    </div>
                    <p class="text-center">
                        <strong>Signing Document {{ $currentPosition }} of {{ $totalDocuments }}</strong>
                    </p>
                    @if(isset($pendingDocuments) && $pendingDocuments->count() > 1)
                        <div class="text-center">
                            <small class="text-muted">
                                @foreach($pendingDocuments as $index => $doc)
                                    @if($doc->id == $document->id)
                                        <span class="label label-primary">{{ $index + 1 }}. {{ $doc->title }}</span>
                                    @else
                                        <span class="label label-default">{{ $index + 1 }}. {{ $doc->title }}</span>
                                    @endif
                                    @if(!$loop->last) &nbsp; @endif
                                @endforeach
                            </small>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endif

    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header text-center">
                    <h3 class="box-title">
                        <i class="fa fa-file-text-o"></i> {{ $document->title }}
                        @if($document->other_document_name)
                            <br><small style="color: #666;">{{ $document->other_document_name }}</small>
                        @endif
                        <span class="label label-info">{{ $document->type ?? 'Policy and Procedures' }}</span>
                    </h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body" style="min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 40px;">
                    <form id="acknowledgeForm" method="POST" action="{{ route('acknowledge_document.process') }}" style="width: 100%; text-align: center;">
                        @csrf
                        <input type="hidden" name="document_id" value="{{ $document->id }}">
                        <button type="submit" class="btn btn-primary" id="acknowledgeBtn" style="font-size: 24px; padding: 20px 60px; min-width: 350px;">
                            <i class="fa fa-check-circle"></i> Acknowledge & Sign Document
                        </button>
                    </form>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>

    <!-- Accepted Parameters Info (Only visible to Super Admin) -->
    @if(Auth::check() && Auth::user()->user_role == 1)
    <div class="row">
        <div class="col-md-12">
            <div class="box box-info">
                <div class="box-header">
                    <h3 class="box-title">
                        <i class="fa fa-info-circle"></i> Accepted Parameters
                    </h3>
                </div>
                <div class="box-body">
                    <p>The following placeholders are automatically replaced in the document content:</p>
                    <ul>
                        <li><strong><code>[Agent Name]</code> or <code>[agent_name]</code></strong> - Replaced with the user's full name</li>
                        <li><strong><code>[Agent Email]</code> or <code>[agent_email]</code></strong> - Replaced with the user's email address</li>
                        <li><strong><code>[Company Name]</code> or <code>[company_name]</code></strong> - Replaced with the user's company name</li>
                        <li><strong><code>[Super Admin Signature]</code> or <code>[super_admin_signature]</code></strong> - Replaced with the Super Admin signature image</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
    @endif
</section>

<!-- Full-Width Signature Modal -->
<div id="signatureModal" class="modal fade" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" style="width: 95%; max-width: none; margin: 20px auto;">
        <div class="modal-content" style="height: 90vh;">
            <div class="modal-header">
                <button type="button" class="close" onclick="closeSignatureModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">
                    <i class="fa fa-edit"></i> Document Review & Signature
                </h4>
            </div>
            <div class="modal-body" style="padding: 0; height: calc(90vh - 120px);">
                <div id="signatureFrame" style="width: 100%; height: 100%;">
                    <!-- Signature iframe will be loaded here -->
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Signature Modal Styles */
#signatureModal .modal-dialog {
    width: 95% !important;
    max-width: none !important;
    margin: 20px auto !important;
}

#signatureModal .modal-content {
    height: 90vh !important;
}

#signatureModal .modal-body {
    padding: 0 !important;
    height: calc(90vh - 120px) !important;
    overflow: hidden !important;
}

#signatureFrame iframe {
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Acknowledge Button Styles */
#acknowledgeBtn {
    font-size: 24px !important;
    padding: 20px 60px !important;
    min-width: 350px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

#acknowledgeBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

#acknowledgeBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #signatureModal .modal-dialog {
        width: 100% !important;
        margin: 0 !important;
    }
    
    #signatureModal .modal-content {
        height: 100vh !important;
        border-radius: 0 !important;
    }
    
    #signatureModal .modal-body {
        height: calc(100vh - 60px) !important;
    }
    
    #acknowledgeBtn {
        font-size: 18px !important;
        padding: 15px 40px !important;
        min-width: 280px !important;
    }
}
</style>

<script>
$(document).ready(function() {
    // Clear session data on page load (if any)
    @php
        $pendingDocId = session('pending_document_id');
        $showModal = session('show_signature_modal', false);
    @endphp
    
    @if($showModal && $pendingDocId)
        // Clear session data via AJAX
        $.ajax({
            url: '{{ route("acknowledge_document.show") }}',
            type: 'GET',
            data: {
                'clear_session': true
            },
            success: function() {
                // Session cleared
            }
        });
    @endif

    // Handle form submission - opens signature modal directly
    $('#acknowledgeForm').on('submit', function(e) {
        e.preventDefault();
        
        var $btn = $('#acknowledgeBtn');
        var originalText = $btn.html();
        
        // Disable button and show loading
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Processing...');
        
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success && response.signing_url) {
                    // Open signature modal with iframe
                    $('#signatureModal').modal('show');
                    
                    // Load signature iframe with full dimensions
                    $('#signatureFrame').html(
                        '<iframe src="' + response.signing_url + '" ' +
                        'width="100%" height="100%" frameborder="0" ' +
                        'style="border: none; display: block;"></iframe>'
                    );
                    
                    // Store original button state for reset
                    var buttonState = {
                        disabled: false,
                        html: originalText
                    };
                    
                    // Listen for signature completion from SignatureAPI
                    var messageHandler = function(event) {
                        // Only accept messages from SignatureAPI
                        if (event.origin !== 'https://sign.signatureapi.com') return;
                        
                        console.log('Message received from SignatureAPI:', event.data);
                        const { type } = event.data;
                        
                        switch (type) {
                            case 'ceremony.completed':
                                swal('Success', 'Document signed successfully!', 'success');
                                console.log('Signature completed successfully');
                                // Close modal and reload page after a delay
                                setTimeout(function() {
                                    $('#signatureModal').modal('hide');
                                    window.removeEventListener('message', messageHandler);
                                    window.location.reload();
                                }, 2000);
                                break;
                            case 'ceremony.canceled':
                            case 'ceremony.failed':
                                swal('Error', 'Signature cancelled or failed. Please try again.', 'error');
                                $('#signatureModal').modal('hide');
                                window.removeEventListener('message', messageHandler);
                                // Reset button state immediately
                                $btn.prop('disabled', false).html(originalText);
                                break;
                            default:
                                console.warn('Unknown SignatureAPI event type:', type);
                        }
                    };
                    
                    window.addEventListener('message', messageHandler);
                    
                    // Handle modal close event to reset button if user closes without completing
                    $('#signatureModal').on('hidden.bs.modal', function() {
                        // Check if signature was not completed (no reload happened)
                        // Reset button state if modal was closed manually
                        if ($btn.prop('disabled')) {
                            $btn.prop('disabled', false).html(originalText);
                        }
                        // Remove message listener when modal is closed
                        window.removeEventListener('message', messageHandler);
                    });
                } else {
                    swal('Error', response.error || 'An error occurred. Please try again.', 'error');
                    $btn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr) {
                var errorMsg = 'An error occurred. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                swal('Error', errorMsg, 'error');
                $btn.prop('disabled', false).html(originalText);
            }
        });
    });
});

function closeSignatureModal() {
    // Reset button state before closing
    $('#acknowledgeBtn').prop('disabled', false);
    
    // Get original button text and restore it
    var originalAcknowledgeText = '<i class="fa fa-check-circle"></i> Acknowledge & Sign Document';
    $('#acknowledgeBtn').html(originalAcknowledgeText);
    
    $('#signatureModal').modal('hide');
}

// Make function globally accessible
window.closeSignatureModal = closeSignatureModal;
</script>
@endsection