@extends('admin.layout')

@section('content')

<div class="search-list">
    <div class="content-wrapper search-result-list">  
        <section class="content-header">
            <h1> Summary Report Two <small></small> </h1>
            <ol class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> Dashboard </a></li>
                <li class="active">Summary Report Two</li>
            </ol>
        </section>
        <section class="content"> 
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-info"> 
                        <div class="box-body">
                            <div class="row">
                                <div class="col-xs-9">
                                    <button id="exportCsvBtnTwo" class="btn btn-primary">Export CSV</button>
                                </div>

                                <div class="col-xs-3">
                                    <div class="date-picker-sec" style="width: 100%; float: right;">
                                            <input type="text" name="from_date" id="from_date" value="" class="form-control" placeholder="Date range" readonly="" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Table to display the data -->
                    <div class="box">
                        <div class="box-body">
                      <form action="{{ route('dataAddition') }}" method="GET" id="summary_report_search_form">
                        @csrf
                        <!-- Hidden Inputs for Sorting -->
                        <input type="hidden" id="order_by" name="order_by" value="{{ request('order_by') }}">
                        <input type="hidden" id="order_type" name="order_type" value="{{ request('order_type') }}">
                        <table class="table table-bordered" id="myTableTwo">
                            <thead>
                                    <th>Date</th>
                                    <th>Total Agents</th>
                                    <th>WO</th>
                                    <th>UPL</th>
                                    <th>WA</th>
                                    <th>Other Task</th>
                                    <th>Agents on Call</th>
                                    <th>Total Inbound</th>
                                    <th>Total Inbound Answer</th>
                                    <th>Inbound Answer %</th>
                                    <th>Total Abandon</th>
                                    <th>Abandon%</th>
                                    <th>Total OutBound</th>
                                    <th>Total Calls Yesterday C5</th>
                                    <th>Avg Call per Agent</th>
                                    <th>Total TT</th>
                                    <th>Avg TT</th>
                                    <th>Total Call > 4 min</th>
                                    <th>HT %> 4 min</th>
                                    <th colspan="4">Top 4 Ht</th>
                            </thead>
                            <tbody id="myTableTwoBody">
                            </tbody>
                        </table>
                       </form>
                       </div>
                    </div>
                </div> 
            </div>
        </section>
    </div>
</div>

<div id="pagination-controls" class="pagination-controls">
</div>

@endsection

@section('scripts')
<script>
   function sortFilter(order_by, order_type) {
    $("#order_by").val(order_by);
    $("#order_type").val(order_type);
    $("#summary_report_search_form").submit();
}
</script>

<script>
    document.getElementById('exportCsvBtnTwo').addEventListener('click', function() {
        exportTableToCSV('summary_report_2.csv');
    });

    function exportTableToCSV(filename) {
    var rows = document.querySelectorAll('#myTableTwo tr');
    var csv = [];
    
    rows.forEach(function(row) {
        var cols = row.querySelectorAll('td, th');
        var csvRow = [];

        if (row.querySelector('.datepicker') || Array.from(cols).every(function(col) {
            return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].includes(col.innerText.trim());
        })) {
            return; 
        }

        cols.forEach(function(col) {
            var cellText = col.innerText.trim();
            if (cellText !== "") {
                csvRow.push('"' + cellText.replace(/"/g, '""') + '"');
            }
        });

        if (csvRow.length > 0) {
            csv.push(csvRow.join(','));
        }
    });

    var csvFile = new Blob([csv.join('\n')], { type: 'text/csv' });
    var downloadLink = document.createElement('a');
    downloadLink.download = filename;
    downloadLink.href = URL.createObjectURL(csvFile);
    downloadLink.style.display = 'none';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}
</script>

<script>
   $(document).ready(function () {
    let today = moment().format('YYYY-MM-DD');
    $('#from_date').val(today + ' - ' + today); 

    fetchFilteredData(today, today);

    $('#from_date').daterangepicker({
        opens: 'left',
        autoUpdateInput: false,
        locale: { cancelLabel: 'Clear' },
        startDate: moment(),
        endDate: moment(),
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, function (start, end) {
        $('#from_date').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
        fetchFilteredData(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
    });

    function fetchFilteredData(startDate, endDate) {
        $('#myTableTwoBody').html('<tr><td colspan="20" class="text-center">Loading...</td></tr>');

        $.ajax({
            url: "{{ route('getdashboarddatatwo') }}",
            type: "GET",
            data: { from_date: startDate, to_date: endDate },
            success: function (response) {
                let tableBody = $('#myTableTwoBody');
                tableBody.empty();
                console.log(response.data, "response");
                if (response && response.data.length > 0) {
                        let tableBody = $('#myTableTwoBody');
                        tableBody.empty();
                   for (let i = 0; i < response.data.length; i++) {
                    let admin = response.data[i];
                    let date = admin.date;
                    let taskCount = admin.task_count || 0;
                    let totalAgents = admin.total_agents || 0;
                    let wo = admin.wo || 0;
                    let upl = admin.upl || 0;
                    let wa = admin.wa || 0;
                    let otherTask = admin.other_task || 0;
                    let agentsOnCall = admin.agents_on_call || 0;
                    let totalInbound = admin.total_inbound || 0;
                    let totalInboundAnswer = admin.total_inbound_answer || 0;
                    let inboundAnswerPercentage = admin.inbound_answer_percentage || 0;
                    let totalAbandon = admin.total_abandon || 0;
                    let abandonPercentage = admin.abandon_percentage || 0;
                    let totalOutbound = admin.total_outbound || 0;
                    let totalCallsYesterdayC5 = admin.total_calls_yesterday_c5 || 0;
                    let avgCallPerAgent = admin.avg_call_per_agent || 0;
                    let totalTT = admin.total_tt || 0;
                    let avgTT = admin.avg_tt || "00:00:00";
                    let totalCallAbove4Min = admin.total_call_above_4_min || 0;
                    let htPercentageAbove4Min = admin.ht_percentage_above_4_min
                    || 0;

                    let top4HT = admin.top_4_ht || [];
                    
                    tableBody.append(`
                     <tr>
                        <td>${date}</td>
                        <td>${totalAgents}</td>
                        <td>${wo}</td>
                        <td>${upl}</td>
                        <td>${wa}</td>
                        <td>${otherTask}</td>
                        <td>${agentsOnCall}</td>
                        <td>${totalInbound}</td>
                        <td>${totalInboundAnswer}</td>
                        <td>${inboundAnswerPercentage.toFixed(2)}% </td>
                        <td>${totalAbandon}</td>
                        <td>${abandonPercentage.toFixed(2)}%</td>
                        <td>${totalOutbound}</td>
                        <td>${totalCallsYesterdayC5}</td>
                        <td>${avgCallPerAgent}</td>
                        <td>${formatTime(totalTT)}</td>
                        <td>${avgTT}</td>
                        <td>${formatTime(totalCallAbove4Min)}</td>
                        <td>${htPercentageAbove4Min.toFixed(2)}% </td>
                        <td>${top4HT[0] || '-'} </td>
                        <td>${top4HT[1] || '-'}  </td>
                        <td>${top4HT[2] || '-'}  </td>
                        <td>${top4HT[3] || '-'}  </td>
                      </tr>
                      `);
                    }
                    } else {
                        $('#myTableTwoBody').html('<tr><td colspan="20" class="text-center">No data found</td></tr>');
                    }

            },
            error: function () {
                $('#myTableTwoBody').html('<tr><td colspan="20" class="text-center">Error loading data</td></tr>');
            }
        });
    }

    function formatTime(seconds) {
        if (!seconds || isNaN(seconds)) {
          return "0:00";
        }
        seconds = Math.max(0, seconds);
        let hours = Math.floor(seconds / 3600);
        let minutes = Math.floor((seconds % 3600) / 60);
        let secs = Math.floor(seconds % 60);
        return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
    }
});

</script>
@endsection