<?php
include_once "../global.php";

$pageTitle = "All Leads - ";
include_once '../header.php';
?>
<div class="modal fade" id="leadViewModal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header border-bottom-0 py-2 bg-grd-success">
                <h5 class="modal-title">Lead Details</h5>
                <a href="javascript:;" class="primaery-menu-close" data-bs-dismiss="modal">
                    <i class="material-icons-outlined">close</i>
                </a>
            </div>
            <div class="modal-body">
                <div id="leadViewBody">Loading…</div>
            </div>
        </div>
    </div>
</div>
<!--breadcrumb-->
<div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
    <div class="breadcrumb-title pe-3">Meta Leads Management</div>
    <div class="ps-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item"><a href="javascript:;"></a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">All Leads</li>
            </ol>
        </nav>
    </div>
</div>
<!--end breadcrumb-->
<h6 class="mb-0 text-uppercase">All Leads</h6>
<hr>
<div class="card">
    <div class="card-body p-4">
        <div class="table-responsive">
            <?php $crm->metaLeadsList(); ?>
        </div>
    </div>
</div>

<script>
    function viewMetaLead(ths) {
        var metaLeadId = $(ths).attr('data-id');
        $('#leadViewBody').html('Loading...');
        $.ajax({
            url: '<?php echo WEB_URL; ?>/ajax_call?page=fetchMetaLeadDetails',
            type: 'POST',
            data: {
                metaLeadId: metaLeadId
            },
            dataType: 'json',
            success: function(response) {
               let h = '<div class="mb-3"><strong>Lead #'+response.lead.id+'</strong></div>';
                h += '<table class="table table-sm table-bordered">';
                h += '<tr><th>Full Name</th><td>'+(response.lead.full_name||'')+'</td></tr>';
                h += '<tr><th>Email</th><td>'+(response.lead.email||'')+'</td></tr>';
                h += '<tr><th>Phone</th><td>'+(response.lead.phone||'')+'</td></tr>';
                h += '<tr><th>Page ID</th><td>'+(response.lead.page_id||'')+'</td></tr>';
                h += '<tr><th>Form ID</th><td>'+(response.lead.form_id||'')+'</td></tr>';
                h += '<tr><th>Status</th><td>'+(response.lead.status||'')+'</td></tr>';
                h += '<tr><th>FB Created</th><td>'+(response.lead.fb_created_time||'')+'</td></tr>';
                h += '<tr><th>Ingested</th><td>'+(response.lead.ingested_at||'')+'</td></tr>';
                h += '</table>';
                if (response.answers && response.answers.length){
                    h += '<h6 class="mt-3">Answers</h6>';
                    h += '<table class="table table-sm table-striped"><thead><tr><th>Field</th><th>Value</th></tr></thead><tbody>';
                    response.answers.forEach(function(a){
                    h += '<tr><td>'+a.name+'</td><td>'+a.value+'</td></tr>';
                    });
                    h += '</tbody></table>';
                }
                $('#leadViewBody').html(h);
                $('#leadViewModal').modal('show');
            },
            error: function(xhr, status, errorThrown) {
                console.log(xhr.responseJSON);
            }
        });
    }

    function deleteMetaLead(ths) {
        var deleteMetaLeadId = $(ths).attr('data-id');
        $.ajax({
            url: '<?php echo WEB_URL; ?>/ajax_call?page=deleteMetaLead',
            type: 'POST',
            data: {
                deleteMetaLeadId: deleteMetaLeadId
            },
            beforeSend: function() {
                $("#spinner-overlay").fadeIn('slow');
            },
            success: function(response) {
                if (response == '1') {
                    $(ths).closest('tr').hide(1000, function() {
                        $(this).remove();
                    });
                } else if (response == '0') {
                    showAlert("Delete fail please try again.");
                } else {
                    window.location.reload();
                }
            },
            error: function(xhr, status, errorThrown) {
                console.log(xhr.responseJSON);
            },
            complete: function() {
                $("#spinner-overlay").fadeOut('slow');
            }
        });
    }
</script>
<?php
include_once '../footer.php';
?>