@extends('layout.master')
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="m-lg-5 contact-container">
                <div class="card login-card p-lg-4">
                    <div class="card-body mt-2">
                        <div class="row">
                            <div class="col-md-12">
                                <h3 class="card-title text-center">Status Report</h3>
                            </div>
                        </div>
                        <input type="hidden" id="hidden_task_url">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table text-white  text-center" id="">
                                        <thead>
                                        <tr>
                                            <th scope="col">Task Name</th>
                                            <th scope="col">Analytics</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function(){
            showLoadingOverlay();
            initialAPICall();

            setInterval(function() {
                initialAPICall();
            }, 5000);

        });
        function initialAPICall()
        {
            var sheet_id = '{{ $sheet_id }}';
            var task_id = '{{ $task_id }}';
            $.ajax({
                url: 'https://data-enrichment.onrender.com/task_details?task_url=https://docs.google.com/spreadsheets/d/'+task_id+'/edit&parent_url=https://docs.google.com/spreadsheets/d/'+sheet_id,
                type: 'GET',
                success: function (response) {
                    if (response.success) {
                        $('#tbody').html('');
                        var task = response.data;
                        var html = `
                                <tr>
                                    <td>`+ task.task_name +`</td>
                                    <td>
                                        <span>
                                            <i class="fas fa-users"></i> <span class="font-weight-600">`+ parseFloat(task.enriched_percentage).toFixed(2) +`</span>&nbsp;&nbsp;
                                        </span>
                                        <span>
                                            <i class="fas fa-handshake"></i> <span class="font-weight-600">`+ task.emails_sent +`</span>&nbsp;&nbsp;
                                        </span>
                                        <span><i class="fa-regular fa-envelope"></i> <span class="font-weight-600">`+ task.emails_sent +`</span>&nbsp;&nbsp;
                                        </span>
                                        <span>
                                            <i class="fas fa-heart-broken"></i> <span class="font-weight-600">`+ task.emails_bounced +`</span>&nbsp;&nbsp;
                                        </span>
                                        <span>
                                            <i class="far fa-check-circle"></i> <span class="font-weight-600">`+ task.bounce_rate +`</span>&nbsp;&nbsp;
                                        </span>
                                        <button class="btn btn-primary btn-sm mx-auto d-block mt-2" disabled id="append_task_to_parent_btn" onclick="appendTaskToParent()">Append Task to Parent </button>
                                    </td>
                                </tr>`;

                        $('#tbody').html(html);
                        var task_url = 'https://docs.google.com/spreadsheets/d/'+task.task_id+'/edit';
                        $("#hidden_task_url").val(task_url);
                        if(task.show_append_button == true){
                            $('#append_task_to_parent_btn').attr('disabled', false);
                        }
                    }
                    hideLoadingOverlay();
                },
                error: function (error) {
                    alert(error.responseJSON.message);
                    hideLoadingOverlay();
                    window.location.reload();
                }
            });
        }
        function appendTaskToParent(){
            showLoadingOverlay();
            var  task_url = $("#hidden_task_url").val();
            $.ajax({
                url: 'https://data-enrichment.onrender.com/append',
                type: 'POST',
                data: {
                    task_url: task_url
                },
                success: function (response) {
                    if(response.success == true){
                        alert(response.message);
                        hideLoadingOverlay();
                    }
                    else{
                        alert(response.message);
                        hideLoadingOverlay();
                        window.location.reload();
                    }
                },
                error: function (error) {
                    alert(error.responseJSON.message);
                    hideLoadingOverlay();
                }
            });
        }
    </script>
@endsection