@php($leadId = $lead->id ?? request()->get('lead_id'))
@php($leadEmail = $lead->email ?? '')
@php($leadName = trim(($lead->first_name ?? '') . ' ' . ($lead->last_name ?? '')))
@php($esignPermission = \App\Models\Masters\Permission::checkModulePermissions(['store'], 'EsignController'))

<div class="card mb-3 lead-esign-box">
    <div class="card-header p-2 bg-white border-bottom d-flex justify-content-between align-items-center collapse-toggle"
         data-bs-toggle="collapse" data-bs-target="#leadEsignCollapse"
         style="cursor:pointer;">
        <strong>E-Sign</strong>
        <div class="d-flex align-items-center gap-2">
            <span class="badge bg-secondary" id="esignSubmissionsCount">0</span>
            @if(isset($esignPermission['store']) && $esignPermission['store'])
            <button type="button" class="green-btn-inner waves-effect btn-sm" id="btnSendForSignature"
                    data-bs-toggle="modal" data-bs-target="#sendForSignatureModal"
                    data-lead-id="{{ (int)($leadId ?? 0) }}"
                    data-lead-email="{{ $leadEmail }}"
                    data-lead-name="{{ $leadName }}"
                    onclick="event.stopPropagation();">
                <i class="bx bx-send"></i> Send for Signature
            </button>
            @endif
            <i class="bx bx-chevron-down"></i>
        </div>
    </div>
    <div id="leadEsignCollapse" class="collapse show">
        <div class="card-body p-2" id="esignSubmissionsList">
            <div class="text-center text-muted py-2">
                <i class="mdi mdi-loading mdi-spin"></i> Loading...
            </div>
        </div>
    </div>
</div>

{{-- Send for Signature Modal --}}
<div class="modal fade" id="sendForSignatureModal" tabindex="-1" aria-labelledby="sendForSignatureModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sendForSignatureModalLabel">
                    <i class="bx bx-pen me-1"></i> Send for Signature
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="esignModalAlert" class="alert d-none"></div>

                <div class="mb-3">
                    <label for="esignDocumentId" class="form-label fw-semibold">Document <span class="text-danger">*</span></label>
                    <select class="form-select form-select-sm" id="esignDocumentId" name="document_id">
                        <option value="">Loading documents...</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label for="esignRecipientName" class="form-label fw-semibold">Recipient Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control form-control-sm" id="esignRecipientName"
                           name="recipient_name" placeholder="Full name">
                </div>

                <div class="mb-3">
                    <label for="esignRecipientEmail" class="form-label fw-semibold">Recipient Email <span class="text-danger">*</span></label>
                    <input type="email" class="form-control form-control-sm" id="esignRecipientEmail"
                           name="recipient_email" placeholder="email@example.com">
                </div>

                <div class="mb-3">
                    <label for="esignEmailSubject" class="form-label fw-semibold">Subject</label>
                    <input type="text" class="form-control form-control-sm" id="esignEmailSubject"
                           name="email_subject" placeholder="Leave blank to use default">
                </div>

                <div class="mb-3">
                    <label for="esignEmailMessage" class="form-label fw-semibold">Message <span class="text-muted small">(optional)</span></label>
                    <textarea class="form-control form-control-sm" id="esignEmailMessage" name="email_message"
                              rows="3" placeholder="Optional note to the recipient"></textarea>
                </div>

                {{-- Additional Signers (shown dynamically when document has multiple signers) --}}
                <div id="additionalSignersContainer" class="d-none">
                    <hr class="my-2">
                    <div class="fw-semibold small text-uppercase text-muted mb-2">Additional Signers</div>
                    <div id="additionalSignersList"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="black-btn-inner waves-effect btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="green-btn-inner waves-effect btn-sm" id="btnSubmitEsign">
                    <span id="esignBtnText"><i class="bx bx-send"></i> Send</span>
                    <span id="esignBtnSpinner" class="d-none">
                        <span class="spinner-border spinner-border-sm" role="status"></span> Sending...
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
(function ($) {
    $(document).ready(function () {
        var leadId    = {{ (int)($leadId ?? 0) }};
        var leadEmail = '{{ addslashes($leadEmail) }}';
        var leadName  = '{{ addslashes($leadName) }}';
        if (!leadId) return;

        var sendRoute  = '{{ route("leads.esign.send", ["lead" => "__L__"]) }}'.replace('__L__', leadId);
        var listRoute  = '{{ route("leads.esign-submissions", ["lead" => "__L__"]) }}'.replace('__L__', leadId);
        var docsRoute  = '{{ route("esign.documents") }}';
        var dlBaseUrl  = '{{ url("admin/leads") }}/' + leadId + '/esign/';

        // ── Load submissions list ───────────────────────────────────────────
        function loadSubmissions() {
            $.get(listRoute, function (res) {
                if (res && res.status === 200) {
                    var subs = res.data.submissions || [];
                    $('#esignSubmissionsCount').text(subs.length);
                    if (!subs.length) {
                        $('#esignSubmissionsList').html('<p class="text-muted small mb-0">No e-sign submissions yet.</p>');
                        return;
                    }
                    var html = '<div class="table-responsive"><table class="table custom-table mb-0">';
                    html += '<thead><tr>';
                    html += '<th>Document</th><th>Recipient</th><th>Status</th>';
                    html += '<th>Sent</th><th>Signed</th><th></th>';
                    html += '</tr></thead><tbody>';
                    subs.forEach(function (s) {
                        html += '<tr>';
                        html += '<td class="small">' + (s.document_title || 'N/A') + '</td>';
                        html += '<td class="small">' +
                                    '<div>' + (s.sent_to_name || '') + '</div>' +
                                    '<div class="text-muted">' + (s.sent_to_email || '') + '</div>' +
                                '</td>';
                        html += '<td><span class="badge bg-' + s.status_badge + '">' + s.status_label + '</span></td>';
                        html += '<td class="small">' + (s.sent_at ? s.sent_at.substr(0, 10) : '—') + '</td>';
                        html += '<td class="small">' + (s.signed_at ? s.signed_at.substr(0, 10) : '—') + '</td>';
                        html += '<td>';
                        if (s.can_download) {
                            html += '<a href="' + dlBaseUrl + s.id + '/download" class="btn btn-xs btn-outline-success" target="_blank" title="Download signed PDF">';
                            html += '<i class="bx bx-download"></i></a>';
                        }
                        if (s.signed_pdf_stored_at) {
                            html += '<span class="badge bg-success ms-1" title="Signed PDF stored">Signed</span>';
                        }
                        html += '</td>';
                        html += '</tr>';
                    });
                    html += '</tbody></table></div>';
                    $('#esignSubmissionsList').html(html);
                } else {
                    $('#esignSubmissionsList').html('<p class="text-muted small mb-0">Could not load e-sign data.</p>');
                }
            }).fail(function () {
                $('#esignSubmissionsList').html('<p class="text-muted small mb-0">No e-sign submissions yet.</p>');
            });
        }

        loadSubmissions();

        // ── Modal: pre-fill lead info + load documents on open ─────────────
        $('#sendForSignatureModal').on('show.bs.modal', function () {
            $('#esignRecipientEmail').val(leadEmail);
            $('#esignRecipientName').val(leadName);
            $('#esignEmailSubject').val('');
            $('#esignEmailMessage').val('');
            $('#esignModalAlert').addClass('d-none').removeClass('alert-danger alert-success').text('');

            // Load documents
            var docsData = []; // Cache document metadata
            $('#esignDocumentId').html('<option value="">Loading...</option>');
            $.get(docsRoute, function (res) {
                var opts = '<option value="">— Select document —</option>';
                if (res && res.status === 200 && res.data.documents && res.data.documents.length) {
                    docsData = res.data.documents;
                    res.data.documents.forEach(function (d) {
                        opts += '<option value="' + d.id + '" data-signer-count="' + (d.signer_count || 0) + '">' + d.title + '</option>';
                    });
                    $('#esignDocumentId').html(opts);
                } else {
                    $('#esignDocumentId').html('<option value="">No active documents found</option>');
                }
            }).fail(function () {
                $('#esignDocumentId').html('<option value="">Failed to load documents</option>');
            });

            // Update subject and multi-signer fields when document changes
            $('#esignDocumentId').off('change.esign').on('change.esign', function () {
                var docTitle = $(this).find('option:selected').text();
                if (docTitle && docTitle !== '— Select document —') {
                    $('#esignEmailSubject').attr('placeholder', 'Please sign: ' + docTitle);
                }

                // Multi-signer support
                var signerCount = parseInt($(this).find('option:selected').data('signer-count')) || 0;
                if (signerCount > 1) {
                    var html = '';
                    for (var i = 2; i <= signerCount; i++) {
                        html += '<div class="signer-row mb-2" data-signer="' + i + '">';
                        html += '<div class="d-flex align-items-center gap-2 mb-1">';
                        html += '<span class="badge" style="background:#9D9DFC;color:#fff;">Signer ' + i + '</span>';
                        html += '</div>';
                        html += '<div class="project-form mb-2">';
                        html += '<label>Name <span class="text-danger">*</span></label>';
                        html += '<input type="text" class="form-control form-control-sm" name="signers[' + i + '][name]" placeholder="Full name" required>';
                        html += '</div>';
                        html += '<div class="project-form mb-2">';
                        html += '<label>Email <span class="text-danger">*</span></label>';
                        html += '<input type="email" class="form-control form-control-sm validate-email" name="signers[' + i + '][email]" placeholder="email@example.com" required>';
                        html += '</div>';
                        html += '</div>';
                    }
                    $('#additionalSignersList').html(html);
                    $('#additionalSignersContainer').removeClass('d-none');
                } else {
                    $('#additionalSignersContainer').addClass('d-none');
                    $('#additionalSignersList').html('');
                }
            });
        });

        // ── Submit: send for signature ──────────────────────────────────────
        $('#btnSubmitEsign').on('click', function () {
            var docId         = $('#esignDocumentId').val();
            var recipEmail    = $('#esignRecipientEmail').val().trim();
            var recipName     = $('#esignRecipientName').val().trim();
            var emailSubject  = $('#esignEmailSubject').val().trim();
            var emailMessage  = $('#esignEmailMessage').val().trim();

            // Client-side validation
            if (!docId) {
                showModalAlert('danger', 'Please select a document.');
                return;
            }
            if (!recipName) {
                showModalAlert('danger', 'Recipient name is required.');
                return;
            }
            if (!recipEmail || !isValidEmail(recipEmail)) {
                showModalAlert('danger', 'A valid recipient email is required.');
                return;
            }

            setBtnLoading(true);

            // Collect additional signers
            var signersData = {};
            $('.signer-row').each(function() {
                var num = $(this).data('signer');
                var name = $(this).find('input[name="signers[' + num + '][name]"]').val();
                var email = $(this).find('input[name="signers[' + num + '][email]"]').val();
                if (name && email) {
                    signersData[num] = { name: name, email: email };
                }
            });

            $.ajax({
                url: sendRoute,
                method: 'POST',
                data: {
                    _token:          '{{ csrf_token() }}',
                    document_id:     docId,
                    recipient_email: recipEmail,
                    recipient_name:  recipName,
                    email_subject:   emailSubject,
                    email_message:   emailMessage,
                    signers:         signersData,
                },
                success: function (res) {
                    setBtnLoading(false);
                    if (res && res.status === 200) {
                        $('#sendForSignatureModal').modal('hide');
                        if (typeof toastr !== 'undefined') {
                            toastr.success(res.message || 'Document sent for signature.');
                        }
                        loadSubmissions();
                    } else {
                        showModalAlert('danger', res.message || 'Failed to send. Please try again.');
                    }
                },
                error: function (xhr) {
                    setBtnLoading(false);
                    var msg = 'An error occurred. Please try again.';
                    try { msg = xhr.responseJSON.message || msg; } catch(e){}
                    showModalAlert('danger', msg);
                }
            });
        });

        function showModalAlert(type, message) {
            $('#esignModalAlert')
                .removeClass('d-none alert-danger alert-success alert-warning')
                .addClass('alert-' + type)
                .text(message);
        }

        function setBtnLoading(loading) {
            $('#btnSubmitEsign').prop('disabled', loading);
            if (loading) {
                $('#esignBtnText').addClass('d-none');
                $('#esignBtnSpinner').removeClass('d-none');
            } else {
                $('#esignBtnText').removeClass('d-none');
                $('#esignBtnSpinner').addClass('d-none');
            }
        }

        function isValidEmail(email) {
            return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
        }
    });
})(jQuery);

// Move modal to <body> to fix Bootstrap backdrop/z-index issues caused by nested stacking contexts
document.addEventListener('DOMContentLoaded', function () {
    var modal = document.getElementById('sendForSignatureModal');
    if (modal && modal.parentElement !== document.body) {
        document.body.appendChild(modal);
    }
});
</script>
@endpush