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

<div class="p-3 project-form">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="mb-0">Email Documents with E-Signature
            <a href="javascript:void(0)" data-toggle="tooltip" title="Send documents for electronic signature"><i class="{{ \Config::get('settings.icon_help') }}"></i></a>
        </h5>
        <div class="d-flex align-items-center gap-2">
            <a href="javascript:void(0)" class="lead-icon-btn" title="Edit Layout"><i class="bx bx-edit-alt"></i></a>
            @if(isset($esignTabPermission['store']) && $esignTabPermission['store'])
            <button type="button" class="lead-outline-btn" id="btnGenerateDocumentTab"
                    data-bs-toggle="modal" data-bs-target="#sendForSignatureModalTab"
                    onclick="event.stopPropagation();">
                <i class="bx bx-envelope"></i> Generate Document
            </button>
            @endif
        </div>
    </div>

    {{-- Document selector --}}
    <div class="row mb-3">
        <div class="col-md-7">
            <div class="project-form form-line">
                <select class="form-control form-control-lg select2" id="esignTabDocumentSelect">
                    <option value="">Select Document</option>
                </select>
            </div>
        </div>
        <div class="col-md-5 d-flex align-items-center gap-2 flex-wrap justify-content-end">
            @if(isset($esignTabPermission['store']) && $esignTabPermission['store'])
            <span class="small text-muted">Send Multiple E-Sign Documents</span>
            <button type="button" class="lead-primary-btn-sm" id="btnSelectEsignTab">
                <i class="bx bx-check"></i> Select
            </button>
            <span class="small text-muted">Attach Additional Files</span>
            <button type="button" class="lead-outline-btn" id="btnAttachEsignTab">
                <i class="bx bx-link-alt"></i> Attach
            </button>
            @endif
        </div>
    </div>

    {{-- Submissions table --}}
    <div class="project-table">
        <table class="table mb-0 lead-tab-table-primary" id="esignTabSubmissionsTable">
            <thead>
                <tr>
                    <th>Date Sent</th>
                    <th>Document Title</th>
                    <th>Submitted By</th>
                    <th>Status</th>
                    <th>Actions</th>
                    <th>Archived</th>
                </tr>
            </thead>
            <tbody id="esignTabSubmissionsList">
                <tr>
                    <td colspan="6" class="text-center py-5">
                        <div class="text-muted">
                            <img src="{{ asset('assets/images/no-data.svg') }}" alt="" class="mb-3" style="max-width: 120px;" onerror="this.style.display='none'">
                            <p>There are no E-Sign records for this lead.</p>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{{-- Send for Signature Modal (Tab version) --}}
<div class="modal fade" id="sendForSignatureModalTab" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><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="esignTabModalAlert" class="alert d-none"></div>
                <div class="mb-3">
                    <label for="esignTabDocId" class="form-label fw-semibold">Document <span class="text-danger">*</span></label>
                    <select class="form-select form-select-sm" id="esignTabDocId" name="document_id">
                        <option value="">Loading documents...</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label for="esignTabRecipName" class="form-label fw-semibold">Recipient Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control form-control-sm" id="esignTabRecipName" name="recipient_name" placeholder="Full name">
                </div>
                <div class="mb-3">
                    <label for="esignTabRecipEmail" class="form-label fw-semibold">Recipient Email <span class="text-danger">*</span></label>
                    <input type="email" class="form-control form-control-sm" id="esignTabRecipEmail" name="recipient_email" placeholder="email@example.com">
                </div>
                <div class="mb-3">
                    <label for="esignTabSubject" class="form-label fw-semibold">Subject</label>
                    <input type="text" class="form-control form-control-sm" id="esignTabSubject" name="email_subject" placeholder="Leave blank to use default">
                </div>
                <div class="mb-0">
                    <label for="esignTabMessage" class="form-label fw-semibold">Message <span class="text-muted small">(optional)</span></label>
                    <textarea class="form-control form-control-sm" id="esignTabMessage" name="email_message" rows="3" placeholder="Optional note to the recipient"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="black-btn-inner btn-sm-custom" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="green-btn-inner btn-sm-custom" id="btnSubmitEsignTab">
                    <span id="esignTabBtnText"><i class="bx bx-send"></i> Send</span>
                    <span id="esignTabBtnSpinner" class="d-none"><span class="spinner-border spinner-border-sm"></span> Sending...</span>
                </button>
            </div>
        </div>
    </div>
</div>

@push('page_script')
<script>
(function ($) {
    $(document).ready(function () {
        var leadId    = {{ (int)($esignLeadId ?? 0) }};
        var leadEmail = '{{ addslashes($esignLeadEmail) }}';
        var leadName  = '{{ addslashes($esignLeadName) }}';
        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/';

        function loadTabSubmissions() {
            $.get(listRoute, function (res) {
                if (res && res.status === 200) {
                    var subs = res.data.submissions || [];
                    if (!subs.length) {
                        $('#esignTabSubmissionsList').html('<tr><td colspan="6" class="text-center py-5"><div class="text-muted"><p>There are no E-Sign records for this lead.</p></div></td></tr>');
                        return;
                    }
                    var html = '';
                    subs.forEach(function (s) {
                        html += '<tr>';
                        html += '<td class="small">' + (s.sent_at ? s.sent_at.substr(0, 10) : '-') + '</td>';
                        html += '<td class="small">' + (s.document_title || 'N/A') + '</td>';
                        html += '<td class="small">' + (s.sent_to_name || '') + '</td>';
                        html += '<td><span class="badge bg-' + s.status_badge + '">' + s.status_label + '</span></td>';
                        html += '<td>';
                        if (s.can_download) {
                            html += '<a href="' + dlBaseUrl + s.id + '/download" class="btn btn-xs btn-outline-success" target="_blank"><i class="bx bx-download"></i></a>';
                        }
                        html += '</td>';
                        html += '<td>' + (s.signed_pdf_stored_at ? '<span class="badge bg-success">Signed</span>' : '-') + '</td>';
                        html += '</tr>';
                    });
                    $('#esignTabSubmissionsList').html(html);
                }
            }).fail(function () {
                $('#esignTabSubmissionsList').html('<tr><td colspan="6" class="text-center py-3 text-muted">No e-sign submissions yet.</td></tr>');
            });
        }
        loadTabSubmissions();

        // Load documents into selector
        $.get(docsRoute, function (res) {
            if (res && res.status === 200 && res.data.documents) {
                var opts = '<option value="">Select Document</option>';
                res.data.documents.forEach(function (d) { opts += '<option value="' + d.id + '">' + d.title + '</option>'; });
                $('#esignTabDocumentSelect').html(opts);
            }
        });

        // Modal: pre-fill + load documents
        $('#sendForSignatureModalTab').on('show.bs.modal', function () {
            $('#esignTabRecipEmail').val(leadEmail);
            $('#esignTabRecipName').val(leadName);
            $('#esignTabSubject').val('');
            $('#esignTabMessage').val('');
            $('#esignTabModalAlert').addClass('d-none');
            $('#esignTabDocId').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.forEach(function (d) { opts += '<option value="' + d.id + '">' + d.title + '</option>'; });
                }
                $('#esignTabDocId').html(opts);
            });
        });

        // Submit
        $('#btnSubmitEsignTab').on('click', function () {
            var docId = $('#esignTabDocId').val(), recipEmail = $('#esignTabRecipEmail').val().trim(), recipName = $('#esignTabRecipName').val().trim();
            if (!docId) { $('#esignTabModalAlert').removeClass('d-none').addClass('alert-danger').text('Please select a document.'); return; }
            if (!recipName) { $('#esignTabModalAlert').removeClass('d-none').addClass('alert-danger').text('Recipient name is required.'); return; }
            if (!recipEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(recipEmail)) { $('#esignTabModalAlert').removeClass('d-none').addClass('alert-danger').text('A valid email is required.'); return; }
            $('#btnSubmitEsignTab').prop('disabled', true); $('#esignTabBtnText').addClass('d-none'); $('#esignTabBtnSpinner').removeClass('d-none');
            $.ajax({
                url: sendRoute, method: 'POST',
                data: { _token: '{{ csrf_token() }}', document_id: docId, recipient_email: recipEmail, recipient_name: recipName, email_subject: $('#esignTabSubject').val().trim(), email_message: $('#esignTabMessage').val().trim() },
                success: function (res) {
                    $('#btnSubmitEsignTab').prop('disabled', false); $('#esignTabBtnText').removeClass('d-none'); $('#esignTabBtnSpinner').addClass('d-none');
                    if (res && res.status === 200) { $('#sendForSignatureModalTab').modal('hide'); if (typeof toastr !== 'undefined') toastr.success(res.message || 'Sent.'); loadTabSubmissions(); }
                    else { $('#esignTabModalAlert').removeClass('d-none').addClass('alert-danger').text(res.message || 'Failed.'); }
                },
                error: function (xhr) {
                    $('#btnSubmitEsignTab').prop('disabled', false); $('#esignTabBtnText').removeClass('d-none'); $('#esignTabBtnSpinner').addClass('d-none');
                    var msg = 'An error occurred.'; try { msg = xhr.responseJSON.message || msg; } catch(e){} $('#esignTabModalAlert').removeClass('d-none').addClass('alert-danger').text(msg);
                }
            });
        });
    });
})(jQuery);
document.addEventListener('DOMContentLoaded', function () {
    var m = document.getElementById('sendForSignatureModalTab');
    if (m && m.parentElement !== document.body) document.body.appendChild(m);
});
</script>
@endpush