@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" value="{{ $inputData->filename }}" 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 id="columnData" 
     data-selected-columns='{!! json_encode($inputData->columns) !!}'>
</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" value="{{ $inputData->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" value="{{ $inputData->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" value="{{ $inputData->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" {{ $inputData->skip_weekly === 'true' ? 'checked' : '' }}>
    <input type="hidden" id="skip_weekly_value" name="skip_weekly_value" value="{{ $inputData->skip_weekly }}">
    <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($inputData->logins as $login)
        <div class="form-check checkbox-style mb-20 form-check-inline">
            <input class="form-check-input logins" type="checkbox" name="logins[]" id="login{{ $login }}" value="{{ $login }}" {{ in_array($login, $inputData->logins) ? 'checked' : '' }}>
            <label class="form-check-label" for="login{{ $login }}">{{ $login }}</label>
        </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" data-report-id="{{ $report->id }}" data-url="{{ route('reports.update', $report->id) }}">Update</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' }
        ];

        // Get the selected columns from the input data
        var selectedColumns = {!! json_encode($inputData->columns) !!};

        // Initialize columns
        columns.forEach(function(column) {
            if (selectedColumns.includes(column.value)) {
                $('#selectedColumns').append('<div class="card" data-value="' + column.value + '">' + column.text + '</div>');
            } else {
                $('#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');
        });

        // 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 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);
            }
            var reportId = {{ $report->id }};
            // 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
                _method: "PUT" // Use PUT method for update
            };

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

            // AJAX call to update data in the backend
            $.ajax({
                url: "{{ route('reports.update', ['id' => ':reportId']) }}".replace(':reportId', reportId),
                type: "POST", // Use POST method because browsers don't natively support PUT method in AJAX
                data: JSON.stringify(data),
                contentType: "application/json",
                success: function(response) {
                    console.log("Report updated successfully");
                    displaySuccessMessage("Report updated 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>`;
    }



    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