@extends('admin.layouts.app')

@section('content')

<style>
    .card-columns .card {
    cursor: pointer;
    margin-bottom: 10px;
    background-color: #9aa4ca4d;
    padding: 0px 4px;
}
.card-columns .card:hover {
    background-color: #365cf5;
    color: white;
}

.selection-box .card:hover {
    background-color: #365cf5;
    color: white;
}

.selection-box
{
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    overflow-x: auto;
}

.selection-box .card
{
    cursor: pointer;
    flex: 0 0 auto;
    margin: 3px;
    background-color: #9aa4ca4d;
    padding: 0px 4px;
}

</style>

<div class="title-wrapper pt-30">
          <div class="row align-items-center">
            <div class="col-md-6">
              <div class="title">
                <h2>Create New Report</h2>
              </div>
            </div>
            <!-- end col -->
            <div class="col-md-6">
              <div class="breadcrumb-wrapper">
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                      <a href="#0">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item"><a href="#0">Report</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                      Create New Report
                    </li>
                  </ol>
                </nav>
              </div>
            </div>
            <!-- end col -->
          </div>
          <!-- end row -->
        </div>

<div class="form-layout-wrapper">
    <div class="row">
        <div class="col-md-12">
            <div class="card-style mb-30">
                <h6 class="mb-25">Customize your summary report:</h6>
                <div class="card mb-4 wizard-step" id="step1">
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <div class="input-style-1">
                        <label for="reportName">Report Name: <strong class="text-danger">Required*</strong> </label>
                        <input type="text" class="form-control" id="report_name" name="report_name" required>
                    </div>
                </div>
        </div>
            <div class="row">
                <div class="input-style-1 mb-2">
                    <label for="reportName">Select Columns: <strong class="text-danger">Required*</strong> </label>
                </div>
                
            </div>
        <div class="row mb-30">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                            <label class="mb-15">Click to Add Available Columns:</label>
                            </div>
                            <div class="col d-flex justify-content-end">
                            <button id="addAllColumns" class="btn btn-link mb-2"> <span class="mdi mdi-plus"></span>
 Add All</button>
                            </div>
                        </div>
                        <div id="availableColumns" class="card-columns selection-box">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-30">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                    <div class="row">
                            <div class="col">
                            <label class="mb-20">Click to Remove Selected Columns:</label>
                            </div>
                            <div class="col d-flex justify-content-end">
                            <button id="removeAllColumns" class="btn btn-link"> <span class="mdi mdi-minus"></span>
 Remove All</button>
                            </div>
                        </div>
                        <div id="selectedColumns" class="card-column selection-box">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="input-style-1">
                    <label for="fromDate">From Date: <strong class="text-danger">Required*</strong> </label>
                    <input type="date" class="form-control" id="from_date" name="from_date" required>
                </div>
            </div>
            <div class="col">
                <div class="input-style-1">
                    <label for="toDate">To Date: <strong class="text-danger">Required*</strong></label>
                    <input type="date" class="form-control" id="to_date" name="to_date" required>
                </div>
            </div>
            <div class="col">
                <div class="input-style-1">
                    <label for="weekDate">Comparison Date: <strong class="text-danger weekly-text">Required*</strong></label>
                    <input type="date" class="form-control" id="week_date" name="week_date" required>
                </div>
            </div>
        </div>
        <div class="row">
        <div class="col">
        <div class="form-check checkbox-style mb-20">
            <input type="checkbox" id="skip_weekly" name="skip_weekly" class="form-check-input">
            <input type="hidden" id="skip_weekly_value" name="skip_weekly_value" value="false"> <!-- Hidden input field -->
            <label for="skip_weekly" class="form-check-label">Skip Comparison Column</label>


</div>
        </div>
        </div>
     <label class="mb-4" for="toDate">ID's: <strong class="text-danger">Required*</strong></label>

     <div class="row">
        <div class="col">
        <div class="form-check checkbox-style mb-20">
                <input type="checkbox" id="checkAllLogins" class="form-check-input check-all">
                <label for="checkAllLogins" class="form-check-label">All</label>
            </div>
        </div>
     </div>

     <div class="form-group">
    @foreach($groupedLogins as $groupName => $logins)
    <div class="group-section">
        <h3>
            <input type="checkbox" class="group-checkbox" id="groupCheck{{ $loop->index }}" data-group-id="{{ $loop->index }}">
            {{ $groupName }}
        </h3>
        @foreach($logins as $login)
            <div class="form-check checkbox-style mb-20 form-check-inline form-check-inline">
                <input class="form-check-input logins group-{{ $loop->parent->index }}" type="checkbox" name="logins[]" id="login{{ $login }}" value="{{ $login }}">
                <label class="form-check-label" for="login{{ $login }}">{{ $login }}</label>
            </div>
        @endforeach
    </div>
    @endforeach
</div>
     
</div>
<div class="button-group d-flex justify-content-center flex-wrap">
<button class="main-btn primary-btn btn-hover w-100 text-center" id="nextBtn" onclick="validateAndSend()">Generate Report</button>
    </div>
            </div>
        </div>
    </div>
</div>

<div id="wizard" class="wizard">    
</div>


<div class="modal fade modal-full" id="summaryModal" tabindex="-1" aria-labelledby="summaryModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" style="max-width:100%;">
        <div class="modal-content" style="font-size: 11.5px;">
            <div id="alertContainer" class="mt-3"></div>
            <div class="modal-header">
                <h5 class="modal-title" id="summaryModalLabel">Summary Report</h5>
                <div class="div" style="padding-left: 52rem;">
                    <button id="saveButton" class="main-btn btn-sm primary-btn btn-hover">Save</button>
                    <button id="exportButton" class="main-btn btn-sm primary-btn btn-hover">Download</button>
                </div>
                <button type="button" class="border-0 bg-transparent h1" id="closeModalButton" aria-label="Close"><i class="lni lni-cross-circle"></i></button>
            </div>
            <div class="modal-body" id="summaryModalBody">
                
            </div>
        </div>
    </div>
</div>



<div class="modal fade" id="modal-small" tabindex="-1" role="dialog" aria-labelledby="modal-simpleLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content p-5" id="loadingMessage">
                            <div class="d-flex align-items-center">
            <div class="col-md-10"><strong>Please hold and do not refresh this page..</strong></div>
            <div class="col-md-2 d-flex justify-content-end"><div class="spinner-border float-right" role="status" aria-hidden="true"></div></div>
            </div>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>

    var globalReportData;

function validateAndSend() {
    // Check if all required inputs are filled
    var reportName = $("#report_name").val(); // Get the value of the report name input
    var fromDate = $("#from_date").val();
    var toDate = $("#to_date").val();
    var weekDate = $("#week_date").val();
    var skipWeekly = $("#skip_weekly_value").val();

    // Check if the report name is empty
    if (!reportName.trim()) {
        alert("Please enter a report name."); // Show an alert if the report name is empty
        return; // Stop further execution
    }

    if (!fromDate || !toDate) {
        // If any required date input is empty, display an error message and return
        alert("Please fill in all required date fields.");
        return;
    }

    // Parse dates for comparison
    var fromDateObj = new Date(fromDate);
    var toDateObj = new Date(toDate);
    var weekDateObj = new Date(weekDate);

    // Validate date order
    if (fromDateObj >= toDateObj) {
        alert("From Date must be earlier than To Date.");
        return;
    }

    if (toDateObj >= weekDateObj) {
        alert("To Date must be earlier than Comparison Date.");
        return;
    }

    // Check if skipWeekly is true
    if (skipWeekly === "true") {
        // Remove validation for weekDate
        weekDate = ""; // Reset weekDate value
        $(".weekly-text").text(""); // Remove text with week-text class
        // Assign a random date to weekDate
        var randomDate = new Date(+new Date() + Math.floor(Math.random() * 7) * 24 * 60 * 60 * 1000); // Random date within next 7 days
        weekDate = randomDate.toISOString().split('T')[0]; // Format date as YYYY-MM-DD
    } else {
        // Check if weekDate is empty
        if (!weekDate) {
            // If weekDate is empty, display an error message and return
            alert("Please fill in all required fields.");
            return;
        }
    }

    // Check if at least one login is selected
    var selectedLogins = $(".form-check-input.logins:checked").length;
    if (selectedLogins === 0) {
        // If no login is selected, display an error message and return
        alert("Please select at least one login.");
        return;
    }

    // If all required inputs are filled and at least one login is selected, call sendSelectedLogins() to generate the report
    sendSelectedLogins();
}


$(document).ready(function() {
    // Function to handle checkbox change event
    $("#skip_weekly").change(function() {
        var isChecked = $(this).prop("checked"); // Check if the checkbox is checked
        $("#skip_weekly_value").val(isChecked.toString()); // Set the value of hidden input based on checkbox status
    });
});


$(document).ready(function() {
    // Column data
    var columns = [
        { value: 'Login', text: 'Login' },
        { value: 'Name', text: 'Name' },
        { value: 'TotalDeposit', text: 'Total Deposit' },
        { value: 'TotalWithdrawal', text: 'Total Withdrawal' },
        { value: 'NetDW', text: 'Net D/W' },
        { value: 'TotalCommission', text: 'Commission' },
        { value: 'TotalSwap', text: 'Swap' },
        { value: 'NetProfitLoss', text: 'Net Profit/Loss' },
        { value: 'WeeklyNetProfitLoss', text: 'Weekly Net Profit/Loss' },
        { value: 'Profit', text: 'C.Profit' },
        { value: 'Equity', text: 'Equity' },
        { value: 'Credit', text: 'Credit' },
        { value: 'Floating', text: 'Floating' }
    ];

    // Initialize available columns
    columns.forEach(function(column) {
        $('#availableColumns').append('<div class="card" data-value="' + column.value + '">' + column.text + '</div>');
    });

    // Move column to selected
    $('#availableColumns').on('click', '.card', function() {
        var card = $(this).detach();
        $('#selectedColumns').append(card);
    });

    // Move column to available
    $('#selectedColumns').on('click', '.card', function() {
        var card = $(this).detach();
        $('#availableColumns').append(card);
    });

    // Move all columns to selected
    $('#addAllColumns').click(function() {
        $('#availableColumns .card').detach().appendTo('#selectedColumns');
    });

    // Move all columns to available
    $('#removeAllColumns').click(function() {
        $('#selectedColumns .card').detach().appendTo('#availableColumns');
    });

    // Modify the sendSelectedLogins function to get columns from the selected cards


    // Example trigger for sendSelectedLogins
    $('#generateReport').click(function() {
        sendSelectedLogins();
    });
});


function sendSelectedLogins() {
        var selectedLogins = [];
        $(".logins:checked").each(function() {
            selectedLogins.push($(this).val());
        });

        var fromDate = $("#from_date").val();
        var toDate = $("#to_date").val();
        var weeklyDate = $("#week_date").val();
        var skipWeekly = $("#skip_weekly_value").val();
        var filename = $("#report_name").val();

        // Get selected columns
        var selectedColumns = [];
        $("#selectedColumns .card").each(function() {
            selectedColumns.push($(this).data('value'));
        });

        // Validate column selection
        if (selectedColumns.length === 0) {
            alert("Please select at least one column.");
            return; // Stop execution if no columns are selected
        }

        // AJAX call to retrieve data
        $.ajax({
            url: "{{ route('search.post') }}", // Ensure this route is correct
            type: "POST",
            data: {
                logins: selectedLogins,
                from_date: fromDate,
                to_date: toDate,
                week_date: weeklyDate,
                skip_weekly: skipWeekly,
                _token: "{{ csrf_token() }}" // CSRF token for security
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
            console.log(response); // Log the response data for debugging
            exportTableToExcel(filename);
            SaveFile(filename, selectedLogins, fromDate, toDate, weeklyDate, skipWeekly, selectedColumns);

            if (response && response.summaryReport) {
                var selectedLogin = null;

                // Find a login with required date fields not null
                $.each(response.summaryReport, function(login, summary) {
                    if (summary.FromDate && summary.WeekStartDate && summary.LastDatetime && summary.LastDatetimeWeek) {
                        selectedLogin = summary;
                        return false; // Stop iteration after finding the first suitable login
                    }
                });

                // Set default dates if no suitable login is found
                if (!selectedLogin) {
                    fromDate = $("#from_date").val();
                    toDate = $("#to_date").val();
                    lastTimeStamp = $("#to_date").val();
                    weeklyDate = $("#week_date").prop("checked");
                } else {
                    fromDate = selectedLogin.FromDate;
                    toDate = selectedLogin.WeekStartDate;
                    lastTimeStamp = selectedLogin.LastDatetime;
                    weeklyDate = selectedLogin.LastDatetimeWeek;
                }

                // Generate the HTML for the summary table
                var summaryTable = '<table id="dataTable" class="table table-bordered">';
                summaryTable += '<thead><tr><th colspan="15" style="text-align: center;background: #96c0ff;"><h1>(' + filename + ')</h1></th></tr>';
                summaryTable += '<tr>';

                // Add selected column headers
                if (selectedColumns.includes('Login')) summaryTable += '<th class="text-center">ID</th>';
                if (selectedColumns.includes('Name')) summaryTable += '<th class="text-center">Name</th>';
                if (selectedColumns.includes('TotalDeposit')) summaryTable += '<th class="text-center">Deposit</th>';
                if (selectedColumns.includes('TotalWithdrawal')) summaryTable += '<th class="text-center">Withdrawal</th>';
                if (selectedColumns.includes('NetDW')) summaryTable += '<th class="text-center">&nbsp;&nbsp;&nbsp;Net D/W &nbsp;&nbsp;&nbsp;</th>';
                if (selectedColumns.includes('TotalCommission')) summaryTable += '<th class="text-center">Commission</th>';
                if (selectedColumns.includes('TotalSwap')) summaryTable += '<th class="text-center">Swap</th>';
                if (selectedColumns.includes('NetProfitLoss')) summaryTable += '<th class="text-center" style="width; 12%;">Net P/L <br> (' + fromDate + ') <br> to <br> (' + lastTimeStamp + ')</th>';
                if (selectedColumns.includes('WeeklyNetProfitLoss') && skipWeekly !== "true") summaryTable += '<th class="text-center">Comparisaon Date Net P/L <br> (' + toDate + ') <br> to <br> (' + weeklyDate + ')</th>';
                if (selectedColumns.includes('Profit')) summaryTable += '<th class="text-center">Current Profit</th>';
                if (selectedColumns.includes('Equity')) summaryTable += '<th class="text-center">Equity</th>';
                if (selectedColumns.includes('Credit')) summaryTable += '<th class="text-center">Credit</th>';
                if (selectedColumns.includes('Floating')) summaryTable += '<th class="text-center">Floating</th>';

                summaryTable += '</tr></thead>';
                summaryTable += '<tbody>';

                var totals = {
                    totalDeposit: 0,
                    totalWithdrawal: 0,
                    totalNetDW: 0,
                    totalCommission: 0,
                    totalSwap: 0,
                    totalNetProfitLoss: 0,
                    totalWeeklyNetProfitLoss: 0,
                    totalProfit: 0,
                    totalEquity: 0,
                    totalCredit: 0,
                    totalFloating: 0
                };

                // Populate table rows with data
                $.each(response.summaryReport, function(login, summary) {
                    summaryTable += '<tr>';
                    if (selectedColumns.includes('Login')) summaryTable += '<td class="text-center">' + summary.Login + '</td>';
                    if (selectedColumns.includes('Name')) summaryTable += '<td class="text-center">' + summary.Name + '</td>';
                    if (selectedColumns.includes('TotalDeposit')) summaryTable += '<td class="text-center">' + summary.TotalDeposit.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('TotalWithdrawal')) summaryTable += '<td class="text-center">' + summary.TotalWithdrawal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('NetDW')) summaryTable += '<td class="text-center">' + summary.NetDW.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('TotalCommission')) summaryTable += '<td class="text-center">' + summary.TotalCommission.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('TotalSwap')) summaryTable += '<td class="text-center">' + summary.TotalSwap.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('NetProfitLoss')) summaryTable += '<td class="text-center">' + summary.NetProfitLoss.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';

                    if (selectedColumns.includes('WeeklyNetProfitLoss') && skipWeekly !== "true") {
                        summaryTable += '<td class="text-center">' + summary.WeeklyNetProfitLoss.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                        totals.totalWeeklyNetProfitLoss += parseFloat(summary.WeeklyNetProfitLoss);
                    }

                    if (selectedColumns.includes('Profit')) summaryTable += '<td class="text-center">' + summary.Profit.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('Equity')) summaryTable += '<td class="text-center">' + summary.Equity.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('Credit')) summaryTable += '<td class="text-center">' + summary.Credit.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    if (selectedColumns.includes('Floating')) summaryTable += '<td class="text-center">' + summary.Floating.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</td>';
                    summaryTable += '</tr>';

                    // Update totals
                    totals.totalDeposit += parseFloat(summary.TotalDeposit);
                    totals.totalWithdrawal += parseFloat(summary.TotalWithdrawal);
                    totals.totalNetDW += parseFloat(summary.NetDW);
                    totals.totalCommission += parseFloat(summary.TotalCommission);
                    totals.totalSwap += parseFloat(summary.TotalSwap);
                    totals.totalNetProfitLoss += parseFloat(summary.NetProfitLoss);
                    totals.totalProfit += parseFloat(summary.Profit);
                    totals.totalEquity += parseFloat(summary.Equity);
                    totals.totalCredit += parseFloat(summary.Credit);
                    totals.totalFloating += parseFloat(summary.Floating);
                });

                // Add a totals row
                summaryTable += '<tr>';
                summaryTable += '<td colspan="" class="text-center"><strong>Total</strong></td>';
                if (selectedColumns.includes('Name')) summaryTable += '<td class="text-center"> N/A </td>';
                if (selectedColumns.includes('TotalDeposit')) summaryTable += '<td class="text-center"><strong>' + totals.totalDeposit.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('TotalWithdrawal')) summaryTable += '<td class="text-center"><strong>' + totals.totalWithdrawal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('NetDW')) summaryTable += '<td class="text-center"><strong>' + totals.totalNetDW.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('TotalCommission')) summaryTable += '<td class="text-center"><strong>' + totals.totalCommission.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('TotalSwap')) summaryTable += '<td class="text-center"><strong>' + totals.totalSwap.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('NetProfitLoss')) summaryTable += '<td class="text-center"><strong>' + totals.totalNetProfitLoss.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('WeeklyNetProfitLoss') && skipWeekly !== "true") summaryTable += '<td class="text-center"><strong>' + totals.totalWeeklyNetProfitLoss.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('Profit')) summaryTable += '<td class="text-center"><strong>' + totals.totalProfit.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('Equity')) summaryTable += '<td class="text-center"><strong>' + totals.totalEquity.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +'</strong></td>';
                if (selectedColumns.includes('Credit')) summaryTable += '<td class="text-center"><strong>' + totals.totalCredit.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                if (selectedColumns.includes('Floating')) summaryTable += '<td class="text-center"><strong>' + totals.totalFloating.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</strong></td>';
                summaryTable += '</tr>';

                summaryTable += '</tbody></table>';

                // Display the summary table in the modal
                $('#summaryModalBody').html(summaryTable);
                $('#summaryModal').modal('show');
            } else {
                console.error("Invalid or unexpected response format:", response);
            }

            // Hide the loading modal
            $('#modal-small').modal('hide');
        },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                // Hide the loading modal on error
                $('#modal-small').modal('hide');
            }
        });
}


function exportTableToExcel(filename) {
    document.getElementById("exportButton").addEventListener("click", function() {

        var table = document.getElementById("dataTable");
    // Convert the table to a worksheet
    var ws = XLSX.utils.table_to_sheet(table);

    // Apply styles to the worksheet
    ws["!cols"] = []; // Define an array to hold column properties
    for (var i = 0; i < table.rows[0].cells.length; i++) {
        ws["!cols"].push({ width: 15 }); // Set width of each column
    }
    // Apply bold font to the first row (heading row)
    ws["!rows"] = [{ hpt: 20 }]; // Row height
    ws["A1"].s = { font: { bold: true } }; // Apply bold font to cell A1 (first cell in first row)

    // Convert the worksheet to a workbook
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // Add worksheet to workbook

    // Convert the workbook to a binary Excel file
    var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

    // Save the Excel file with the provided filename
    var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    saveAs(blob, filename + '.xlsx');

    function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }

 });
}


// function SaveFilee(filename) {
//     document.getElementById("saveButton").addEventListener("click", function() {
//         var table = document.getElementById("dataTable");
//         var ws = XLSX.utils.table_to_sheet(table);

//         ws["!cols"] = [];
//         for (var i = 0; i < table.rows[0].cells.length; i++) {
//             ws["!cols"].push({ width: 15 });
//         }
//         ws["!rows"] = [{ hpt: 20 }];
//         ws["A1"].s = { font: { bold: true } };

//         var wb = XLSX.utils.book_new();
//         XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

//         var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
//         var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });

//         var formData = new FormData();
//         formData.append("file", blob, filename + '.xlsx');

//         var xhr = new XMLHttpRequest();
//         xhr.open("POST", "/upload", true);

//         var csrfToken = document.head.querySelector('meta[name="csrf-token"]');
//         if (csrfToken) {
//             xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken.content);
//         }

//         xhr.onreadystatechange = function() {
//             if (xhr.readyState === XMLHttpRequest.DONE) {
//                 if (xhr.status === 200) {
//                     displaySuccessMessage("Report file saved successfully!");
//                 } else {
//                     displayErrorMessage("Failed to save report file.");
//                 }
//             }
//         };
//         xhr.send(formData);

//         function s2ab(s) {
//             var buf = new ArrayBuffer(s.length);
//             var view = new Uint8Array(buf);
//             for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
//             return buf;
//         }
//     });
// }

function SaveFile(filename, selectedLogins, fromDate, toDate, weeklyDate, skipWeekly, selectedColumns) {
    document.getElementById("saveButton").addEventListener("click", function() {
        var table = document.getElementById("dataTable");
        var rows = table.rows;
        var tableData = [];
        
        for (var i = 0; i < rows.length; i++) {
            var cols = rows[i].cells;
            var rowData = [];
            for (var j = 0; j < cols.length; j++) {
                rowData.push(cols[j].innerText);
            }
            tableData.push(rowData);
        }
        
        // Prepare data to send to the backend
        var data = {
            filename: filename,
            tableData: tableData,
            selectedLogins: selectedLogins,
            fromDate: fromDate,
            toDate: toDate,
            weeklyDate: weeklyDate,
            skipWeekly: skipWeekly,
            selectedColumns: selectedColumns,
            _token: "{{ csrf_token() }}" // CSRF token for security
        };

        // Log the data to the console before sending
        console.log("Data to be sent to the server:", data);

        // AJAX call to save data in the backend
        $.ajax({
            url: "{{ route('save.report') }}", // Ensure this route is correct
            type: "POST",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function(response) {
                console.log("Report saved successfully");
                displaySuccessMessage("Report saved successfully!");
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
            }
        });
    });
}


function displaySuccessMessage(message) {
    var alertContainer = document.getElementById("alertContainer");
    alertContainer.innerHTML = `
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>`;
}

function displayErrorMessage(message) {
    var alertContainer = document.getElementById("alertContainer");
    alertContainer.innerHTML = `
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>`;
}

// // Initialize SaveFile function with a filename
// SaveFile("report");


    document.addEventListener("DOMContentLoaded", function() {
    var summaryModal = new bootstrap.Modal(document.getElementById('summaryModal'), {
        backdrop: 'static',
        keyboard: false
    });

    var closeModalButton = document.getElementById('closeModalButton');

    closeModalButton.addEventListener('click', function() {
        var userConfirmed = confirm("Are you sure you want to close this report?");
        if (userConfirmed) {
            summaryModal.hide();
        }
    });
});

    
    $(document).ready(function() {
    // Hide all wizard steps except the first one
    $(".wizard-step").hide();
    $("#step1").show();
    
    // Check all checkbox for groups
    $("#checkAllGroups").change(function() {
        $("input[name='selectedGroups[]']").prop('checked', $(this).prop("checked"));
    });
    
    // Check all checkbox for logins
    $("#checkAllLogins").change(function() {
        $("input[name='logins[]']").prop('checked', $(this).prop("checked"));
    });

    $(document).ready(function() {
    $('#archiveButton').on('click', function() {
        // Call the archiveReportData function and pass the globalReportData as a parameter
        archiveReportData(globalReportData);
    });
});
});

$(document).ready(function() {
    // Bind click event to export button
    $('#exportButton').click(function() {
        exportTableToExcel('filename');
    });
});

document.querySelectorAll('.group-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            var groupId = this.getAttribute('data-group-id');
            var checkboxes = document.querySelectorAll('.group-' + groupId);
            checkboxes.forEach(function(cb) {
                cb.checked = checkbox.checked;
            });
        });
    });


</script>

@endsection