@extends('admin.layout')

@section('content')

<div class="search-list">
    <div class="content-wrapper search-result-list">  
        <section class="content-header">
            <h1> Summary Report One<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 One</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="exportCsvBtn" 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="myTable">
                            <thead>
                              <tr>
                                    <th>Sno.</th>
                                    <th>Name</th>
                                    <th>Ext Dump Name</th>
                                    <th>TL Name</th>
                                    <th>In Calls</th>
                                    <th>Out Calls</th>
                                    <th>Total Calls</th>
                                    <th>Queue Login</th>
                                    <th>TT(Minutes)</th>
                                    <th>Average TT Per Hour</th>
                                    <th>AHT</th>
                                    <th>Schedule</th>
                                    <th>Task</th>
                                </tr>
                            </thead>
                            <tbody id="myTableBody">
                            </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('exportCsvBtn').addEventListener('click', function() {
        exportTableToCSV('summary_report.csv');
    });

    function exportTableToCSV(filename) {
    var rows = document.querySelectorAll('#myTable 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, page = 1) {
        // alert("hello world")
        $('#myTableBody').html('<tr><td colspan="12" class="text-center">Loading...</td></tr>');

        $.ajax({
            url: "{{ route('getdashboarddata') }}",
            type: "GET",
            data: { from_date: startDate, to_date: endDate },
            success: function (response) {
                let tableBody = $('#myTableBody');
                tableBody.empty();
                if (response && response.data.data.length > 0) {
                        let tableBody = $('#myTableBody');
                        tableBody.empty();
                        for (let i = 0; i < response.data.data.length; i++) {
                            let admin = response.data.data[i];
                            let extensionData = admin.extension_data || {};
                            let totalAnswered = extensionData.total_answered || 0;
                            let totalUnanswered = extensionData.total_unanswered || 0;
                            let totalTalkingTime = extensionData.total_talking_time || 0;

                            let avgTalkTime = formatTime(totalTalkingTime / 8);
                            let aht = totalAnswered > 0 ? formatTime(totalTalkingTime / totalAnswered) : "0:00";

                            tableBody.append(`
                                <tr>
                                    <td>${i + 1}</td>
                                    <td>${admin.full_name ?? '-'}</td>
                                    <td>${admin.full_name ?? '-'} ${admin.extension_name ? admin.extension_name : ''}</td>
                                    <td>${admin.team_leader_name ?? '-'}</td>
                                    <td>${totalAnswered}</td>
                                    <td>${totalAnswered + totalUnanswered}</td>
                                    <td>${totalAnswered + totalUnanswered + totalAnswered}</td>
                                    <td>${admin.logged_in_time ?? '-'}</td>
                                    <td>${totalTalkingTime}</td>
                                    <td>${avgTalkTime}</td>
                                    <td>${aht}</td>
                                    <td>${admin.task_data_date ?? '-'}</td>
                                    <td>${admin.task_data_task ?? '-'}</td>
                                </tr>
                            `);
                        }
                        updatePaginationControls(response.pagination);
                    } else {
                        $('#myTableBody').html('<tr><td colspan="13" class="text-center">No data found</td></tr>');
                    }

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

    function updatePaginationControls(pagination) {
        let paginationControls = $('#pagination-controls');
        paginationControls.empty();

        if (pagination.current_page > 1) {
            paginationControls.append(`
                <button class="btn btn-primary" onclick="changePage(${pagination.current_page - 1})">Previous</button>
            `);
        }

        if (pagination.current_page < pagination.last_page) {
            paginationControls.append(`
                <button class="btn btn-primary" onclick="changePage(${pagination.current_page + 1})">Next</button>
            `);
        }
    }

    function changePage(page) {
        let dateRange = $('#from_date').val().split(' - ');
        let startDate = dateRange[0];
        let endDate = dateRange[1];
        fetchFilteredData(startDate, endDate, page);
    }

    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> -->

<script>
$(document).ready(function () {
    // Get today's date using moment.js
    let today = moment().format('YYYY-MM-DD');
    // Set default range to 'Today'
    $('#from_date').val(today + ' - ' + today); 
    fetchFilteredData(today, today); // Fetch data for 'Today'

    // Initialize the daterangepicker
    $('#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) {
        // Update the input field with the selected date range
        $('#from_date').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));

        // Fetch filtered data based on selected range
        fetchFilteredData(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
    });

    // Function to fetch filtered data from the server
    function fetchFilteredData(startDate, endDate, page = 1) {
        // Show loading message in the table body
        $('#myTableBody').html('<tr><td colspan="12" class="text-center">Loading...</td></tr>');

        $.ajax({
            url: "{{ route('getdashboarddata') }}",  // Your route for fetching data
            type: "GET",
            data: { from_date: startDate, to_date: endDate },
            success: function (response) {
                let tableBody = $('#myTableBody');
                tableBody.empty();
                if (response && response.data.data.length > 0) {
                    for (let i = 0; i < response.data.data.length; i++) {
                        let admin = response.data.data[i];
                        let extensionData = admin.extension_data || {};
                        let totalAnswered = extensionData.total_answered || 0;
                        let totalUnanswered = extensionData.total_unanswered || 0;
                        let totalTalkingTime = extensionData.total_talking_time || 0;

                        let avgTalkTime = formatTime(totalTalkingTime / 8);
                        let aht = totalAnswered > 0 ? formatTime(totalTalkingTime / totalAnswered) : "0:00";

                        tableBody.append(`
                            <tr>
                                <td>${i + 1}</td>
                                <td>${admin.full_name ?? '-'}</td>
                                <td>${admin.full_name ?? '-'} ${admin.extension_name ? admin.extension_name : ''}</td>
                                <td>${admin.team_leader_name ?? '-'}</td>
                                <td>${totalAnswered}</td>
                                <td>${totalAnswered + totalUnanswered}</td>
                                <td>${totalAnswered + totalUnanswered + totalAnswered}</td>
                                <td>${admin.logged_in_time ?? '-'}</td>
                                <td>${totalTalkingTime}</td>
                                <td>${avgTalkTime}</td>
                                <td>${aht}</td>
                                <td>${admin.task_data_date ?? '-'}</td>
                                <td>${admin.task_data_task ?? '-'}</td>
                            </tr>
                        `);
                    }
                    updatePaginationControls(response.pagination);
                } else {
                    $('#myTableBody').html('<tr><td colspan="13" class="text-center">No data found</td></tr>');
                }
            },
            error: function () {
                $('#myTableBody').html('<tr><td colspan="12" class="text-center">Error loading data</td></tr>');
            }
        });
    }

    // Update pagination controls (Previous/Next buttons)
    function updatePaginationControls(pagination) {
        let paginationControls = $('#pagination-controls');
        paginationControls.empty();

        if (pagination.current_page > 1) {
            paginationControls.append(`
                <button class="btn btn-primary" onclick="changePage(${pagination.current_page - 1})">Previous</button>
            `);
        }

        if (pagination.current_page < pagination.last_page) {
            paginationControls.append(`
                <button class="btn btn-primary" onclick="changePage(${pagination.current_page + 1})">Next</button>
            `);
        }
    }

    // Change page when pagination buttons are clicked
    function changePage(page) {
        let dateRange = $('#from_date').val().split(' - ');
        let startDate = dateRange[0];
        let endDate = dateRange[1];
        fetchFilteredData(startDate, endDate, page);
    }

    // Format time in seconds to HH:MM:SS format
    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