@extends('layouts.user.main')
@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card card-flush">
                    <!--begin::Card body-->
                    <form action="{{ route('depositWithdrawal') }}" method="post" id="dateRangeForm">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                    </form>
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle table-row-dashed fs-6 gy-5" id="kt_table_deposit_withdrawal">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">Login</th>
                                        <th class="min-w-100px">Amount</th>
                                        <th class="min-w-100px">Date</th>
                                        <th class="min-w-100px">Type</th>
                                        <th class="min-w-100px">Lotus Share</th>
                                        <th class="min-w-100px">Lotus Value</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold">
                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const table     = $('#kt_table_deposit_withdrawal');
        const token     = "{{ csrf_token() }}";

        var fileName    = "DEPOSIT_WITHDRAWAL";
        var title       = fileName + '_' +Date.now();
        var columns     = [0, 1, 2, 3, 4, 5];

        var dataColumns = [
            {
                data: 'loginId',
                name: 'loginId',
            },
            {
                data: 'profit',
                name: 'profit',
            },
            {
                data: 'date',
                name: 'date',
            },
            {
                data: 'comment',
                name: 'comment',
                render: function(data, type, full, meta) {
                    var className = (full.comment == 'Withdrawal' ? 'primary' : 'success');
                    return '<div class="badge badge-light-' + className + '">' + full.comment + '</div>';
                }
            },
            {
                data: 'lotusShare',
                name: 'lotusShare',
                render: function(data, type, full, meta) {
                    var lotusPercentage = '-';
                    if (full.lotusShare !== null) {
                        lotusPercentage = full.lotusShare.toFixed(2) + ' %';
                    } 
                    return lotusPercentage;
                },
            },
            {
                data: 'lotusValue',
                name: 'lotusValue',
                render: function(data, type, full, meta) {
                    var lotusValue  = '-';
                    if (full.lotusValue !== null) {
                        lotusValue  = full.lotusValue.toFixed(2);
                    } 
                    return lotusValue;
                },
            }
        ];

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            makeDataTable(table, title, columns, dataColumns);
        });

        function showLoader(message) {
            const loaderHtml = `
                <div id="exportLoader" class="page-loader flex-column d-flex justify-content-center align-items-center bg-dark bg-opacity-25" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;">
                    <span class="spinner-border text-primary" role="status"></span>
                    <span class="text-gray-800 fs-6 fw-semibold mt-5">${message}</span>
                </div>`;
            $('body').append(loaderHtml);
        }

        // Hide Loader
        function hideLoader() {
            $('#exportLoader').remove();
        }

        function makeDataTable(table, title, columnArray, dataColumns) {

            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5 '<'card-title'<'d-flex position-relative my-1'>><'justify-content-center justify-content-md-end card-body d-flex flex-center'><'card-toolbar flex-row-fluid justify-content-end gap-6'<'custom-button-container'>B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5 gap-2 d-flex align-items-center justify-content-center justify-content-md-start'l<i>><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>",
                processing: true,
                serverSide: true,
                pageLength: 10,
                buttons: [{
                        extend: "collection",
                        className: "exportButton",
                        text: "<i class='fa fa-download'></i>",
                            buttons: [
                            {
                                extend: "excelHtml5",
                                text: "Export",
                                className: "btn btn-default btn-sm gap-5",
                                title: title,
                                exportOptions: {
                                    columns: columnArray
                                },
                                customizeData: function(data) {
                                    var totalLotusValue = 0;

                                    var parseNumber = function(value) {
                                        value = value.replace(/,/g, '');
                                        return value !== "-" && !isNaN(value) ? parseFloat(value) : 0;
                                    };

                                    // Calculate totals
                                    data.body.forEach(row => {                                                                        
                                        totalLotusValue     += parseNumber(row[5]);
                                    });

                                    // Calculate differences
                                    var total    = totalLotusValue.toFixed(2);  

                                    // Add "Total Amount" row at the bottom
                                    data.body.push([
                                        "Total Amount", "", "", "", "", total
                                    ]);
                                }
                            },{
                                extend: "excelHtml5",
                                text: "Export All",
                                className: "btn btn-default btn-sm gap-5",
                                title: title,
                                "action": exportAllAction,
                                exportOptions: {
                                    columns: columnArray
                                },
                                customizeData: function(data) {
                                    var totalLotusValue = 0;

                                    var parseNumber = function(value) {
                                        value = value.replace(/,/g, '');
                                        return value !== "-" && !isNaN(value) ? parseFloat(value) : 0;
                                    };

                                    // Calculate totals
                                    data.body.forEach(row => {                                
                                        totalLotusValue     += parseNumber(row[5]);
                                    });

                                    // Calculate differences
                                    var total    = totalLotusValue.toFixed(2);                                    

                                    // Add "Total Amount" row at the bottom
                                    data.body.push([
                                        "Total Amount", "", "", "", "", total
                                    ]);
                                }
                            },{
                                extend: "csvHtml5",
                                text: "CSV",
                                className: "btn btn-default btn-sm gap-5 d-none",
                                title: title,
                                exportOptions: {
                                    columns: columnArray
                                }
                            },{
                                extend: "pdfHtml5",
                                text: 'Pdf',
                                className: "btn btn-default btn-sm",
                                title: title,
                                "action": exportAllAction,
                                exportOptions: {
                                    columns: columnArray
                                },
                                customize: function(doc) {
                                    var api             = reloadAjex; 
                                    // Assuming reloadAjex is your DataTable instance
                                    var rows            = api.api().rows().data();
                                    var lastGroup       = null;
                                    var newRows         = [];

                                    // Remove existing first element in content (assuming it's a placeholder)
                                    doc.content.splice(0, 1);

                                    // Date string for footer
                                    var now = new Date();
                                    var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();

                                    // Margins and styles
                                    doc.pageMargins = [20, 60, 20, 30];
                                    doc.defaultStyle.fontSize = 7;
                                    doc.styles.tableHeader.fontSize = 7;

                                    // Header definition
                                    doc['header'] = function() {
                                        return {
                                            columns: [
                                                {
                                                    alignment: 'left',
                                                    text: "",
                                                    fontSize: 14,
                                                    margin: [10, 10, 10, 10]
                                                },
                                                {
                                                    alignment: 'center',
                                                    text: "Deposit Withdrawal",
                                                    fontSize: 10,
                                                    margin: [20, 0, 0, 0]
                                                },
                                                {
                                                    alignment: 'right',
                                                    text: [
                                                        { text: 'Week Date : ', fontSize: 10 },
                                                        { text: moment("{{ $start_date }}").isoWeekday(1).format('DD-MM-YYYY') + ' - ' + moment("{{ $end_date }}").isoWeekday(7).format('DD-MM-YYYY'), fontSize: 10, color: 'red' }
                                                    ],
                                                    margin: [0, 20, 20, 20]
                                                }
                                            ],
                                            margin: 20
                                        };
                                    };

                                    // Footer definition
                                    doc['footer'] = function(page, pages) {
                                        return {
                                            columns: [
                                                {
                                                    alignment: 'left',
                                                    text: ['Created on: ', { text: jsDate.toString() }]
                                                },
                                                {
                                                    alignment: 'right',
                                                    text: ['page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
                                                }
                                            ],
                                            margin: 20
                                        };
                                    };

                                    // Table layout
                                    var objLayout = {
                                        hLineWidth: function(i) { return 0.5; },
                                        vLineWidth: function(i) { return 0.5; },
                                        hLineColor: function(i) { return '#aaa'; },
                                        vLineColor: function(i) { return '#aaa'; },
                                        paddingLeft: function(i) { return 4; },
                                        paddingRight: function(i) { return 4; }
                                    };

                                    // Applying layout
                                    doc.content[0].table.widths = Array(6).fill('16.66%');
                                    doc.content[0].layout       = objLayout;

                                    var parseNumber = function(value) {
                                        if (typeof value === 'string') {
                                            value = value.replace(/,/g, '');
                                        }
                                        return value !== "-" && !isNaN(value) ? parseFloat(value) : 0;
                                    };

                                    let totalLotusValue = 0;

                                    doc.content[0].table.body.forEach(row => {
                                        if (row.length < 6) return;

                                        row[5].alignment = 'right';

                                        const lotusValue     = parseNumber(row[5].text || row[5]);                                        

                                        totalLotusValue  += lotusValue;
                                    });

                                    var total = totalLotusValue.toFixed(2);

                                    // Insert Difference Amount as the **first row after the headers**
                                    doc.content[0].table.body.push([
                                        { text: 'Total Amount', alignment: 'center', colSpan: 2, bold: true, fontSize: 10 },
                                        {},
                                        {}, 
                                        {},
                                        {},
                                        { text: total, alignment: 'right', bold: true, fontSize: 10 }
                                    ]);
                                }
                            },
                        ]
                    }],
                ajax: {
                    url: "{{ route('depositWithdrawal') }}",
                    method: "GET",
                    data: function(d) {
                        d.start_date    = "{{ $start_date }}";
                        d.end_date      = "{{ $end_date }}";
                        d.managerId     = $("#managers").val();
                        d.userId        = $("#users").val();
                    }
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [0, "asc"]
                ],
            }, );
        }

        $(document).ready(function() {

            $('.card-toolbar').prepend(`
                <button class="btn btn-secondary" id="depositWithdrawal">
                    <span class="fas fa-sync-alt me-2" id="depositWithdrawalLoader"></span><span>Update</span>
                </button>
            `);

            $("#depositWithdrawal").click(function(){
                var updateButton = $(this);

                $('#depositWithdrawalLoader').addClass('loader');
                updateButton.prop('disabled', true);

                $.ajax({
                    url: "{{ route('updateDepositWithdrawal') }}",
                    method: "POST",
                    data: {
                        _token: token
                    },
                    success: function(response){
                        $('#depositWithdrawalLoader').removeClass('loader');
                        updateButton.prop('disabled', false);
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        $('#depositWithdrawalLoader').removeClass('loader');
                        updateButton.prop('disabled', false);
                        console.error(xhr.responseText);
                    }
                });
            });

            $('.card-toolbar').after(`<div class="input-group w-250px">
                            <input type="week" id="weekPicker" class="form-control form-control-solid rounded rounded-end-0" placeholder="Pick date range"/>
                            <button class="btn btn-icon btn-light" id="weekPickerClear">
                                <span class="fas fa-times">
                                </span>
                            </button></div>             
            `);

            // Retrieving start and end dates (in case they are passed from the server-side)
            var start_date = "{{ $start_date }}";
            var end_date = "{{ $end_date }}";

            // Function to determine the current week either based on provided dates or today's date
            function getCurrentWeek() {
                if (start_date && end_date) {
                // If start_date and end_date are provided, convert the start_date into the corresponding week
                return convertToWeekSelection(start_date);
                } else {
                // If no dates are provided, calculate the current ISO week
                return getISOWeek(new Date());
                }
            }

            // Convert the given start_date (YYYY-MM-DD) into the corresponding ISO week (YYYY-WW)
            function convertToWeekSelection(start_date) {
                var startDateObj = new Date(start_date); // Convert the start_date string to a Date object
                return getISOWeek(startDateObj); // Calculate the ISO week for the given date
            }

            // Function to calculate the ISO week (YYYY-WW) for a given date
            function getISOWeek(date) {
                // Find the day of the week for the given date (Sunday = 0, Monday = 1, ..., Saturday = 6)
                var dayOfWeek = date.getDay();

                // Find the Monday of the current week (ISO weeks start on Monday)
                var mondayDate = new Date(date);
                mondayDate.setDate(date.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1)); // Adjust the date to Monday of the week

                // Adjust to the nearest Thursday to determine the ISO week year
                var adjustedDate = new Date(mondayDate);
                adjustedDate.setDate(mondayDate.getDate() + 4 - (mondayDate.getDay() || 7)); // Move to the nearest Thursday

                // Calculate the start of the year and determine the week number
                var yearStart = new Date(adjustedDate.getFullYear(), 0, 1); // January 1st of the adjusted year
                var weekNumber = Math.ceil(((adjustedDate - yearStart) / 86400000 + 1) / 7); // Calculate the week number

                // Format and return the week as YYYY-WW
                return adjustedDate.getFullYear() + "-W" + ("0" + weekNumber).slice(-2);
            }

            // Function to calculate the start and end dates for a given ISO week (YYYY-WW)
            function getWeekDateRange(weekString) {
                var [year, week] = weekString.split("-W").map(Number); // Split the weekString into year and week

                // Find the first Thursday of the given year to determine the ISO week start
                var firstThursday = new Date(year, 0, 1);
                firstThursday.setDate(firstThursday.getDate() + (4 - (firstThursday.getDay() || 7))); // Adjust to the nearest Thursday

                // Calculate the start date of the ISO week (Monday)
                var startOfWeek = new Date(firstThursday);
                startOfWeek.setDate(firstThursday.getDate() + (week - 1) * 7 - 3); // Calculate the Monday of the selected week

                // Calculate the end date of the ISO week (Sunday)
                var endOfWeek = new Date(startOfWeek);
                endOfWeek.setDate(startOfWeek.getDate() + 6); // Sunday of the same week

                const formatDate = (date) =>
                new Date(date.getTime() - date.getTimezoneOffset() * 60000)
                    .toISOString()
                    .split("T")[0];

                // Return the formatted date range (start date - end date)
                return formatDate(startOfWeek) + " - " + formatDate(endOfWeek);
            }

            // Set the current week in the week picker
            var currentWeek = getCurrentWeek();
            $("#weekPicker").val(currentWeek); // Set the value of the week picker to the current or provided week

            // Set the maximum allowed week selection to the current week
            var maxAllow = getDefaultSelectedWeek();
            $("#weekPicker").attr("max", maxAllow); // Set the max attribute for the week picker to prevent selecting past weeks

            // Event handler for changes in the week picker input field
            $("#weekPicker").on("change", function () {
                var selectedWeek = $(this).val(); // Get the selected week in the format YYYY-WW

                if (!selectedWeek) {
                // If the input is cleared (empty), trigger the click event of the "clear" button
                $("#weekPickerClear").trigger("click");
                } else {
                // If a valid week is selected, process the selected week
                var dateRange = getWeekDateRange(selectedWeek); // Get the start and end date for the selected week
                var [startDate, endDate] = dateRange.split(" - "); // Split the date range into start and end dates

                // Update the attributes and values based on the selected week
                $("#weekPicker").attr("data-date-range", dateRange); // Store the date range in a custom attribute
                $(this).attr("placeholder", dateRange); // Set the placeholder to the date range
                $("#start_date").val(startDate); // Set the start date in the form field
                $("#end_date").val(endDate); // Set the end date in the form field

                // Submit the form with the selected date range
                $("#dateRangeForm").submit();
                }
            });

            // Event handler for the "clear" button
            $("#weekPickerClear").on("click", function () {
                // When the clear button is clicked, set the current week as the selected week
                var currentWeek = getDefaultSelectedWeek();
                $("#weekPicker").val(currentWeek); // Set the value of the week picker to the current week

                // Submit the form with the default week
                $("#dateRangeForm").submit();
            });

            // Function to get the default selected week (current ISO week)
            function getDefaultSelectedWeek() {
                return getISOWeek(new Date()); // Calculate the current ISO week and return it
            }
        });

        $(document).ready(function() {
            var managers    = @json($managers);
            var users       = @json($users);
            var managerId   = $("#managers").val();
            var userId      = $("#users").val();

            $('.card-title').append(`<div class="w-100 d-flex ms-2" id="managerFilterDiv"><select class="js-example-basic-multiple
                form-select form-select-solid multi-select-option" data-placeholder="Manager" id="managers" data-allow-clear="true">
                <option value=""></option>'
                ${managers.map(element => {
                    var selected = managerId == element.id ? 'selected' : '';
                    return '<option value="'+element.id+'" '+selected+'>'+element.loginId+'</option>';
                }).join('')}
            </select>
            </div>`);

            @hasrole(CommonConstants::ADMIN_ROLES['MANAGER_ADMIN'])
                $('#managerFilterDiv').addClass('d-none');
            @endhasrole

            $('.card-title').append(`<div class="w-100 d-flex ms-2"><select class="js-example-basic-multiple
                form-select form-select-solid multi-select-option d-none" data-placeholder="User" id="users" data-allow-clear="true" multiple="multiple">
                ${users.map(element => {
                    var selected = userId == element.loginId ? 'selected' : '';
                    return '<option value="'+element.loginId+'" '+selected+'>'+element.loginId+'</option>';
                }).join('')}
            </select>
            </div>`);

            // Initialize Select2 on the users dropdown
            $('#users').select2({
                allowClear: true,
                tokenSeparators: [','],
            });

            // Event listener for manager dropdown change
            $('#managers').on('change', function() {
                var selectedManagerId = $(this).val(); // Get the selected manager's ID

                // Clear the user dropdown
                $('#users').empty();

                // If no manager is selected, show all users
                if (selectedManagerId === '') {
                    users.forEach(function(user) {
                        $('#users').append(`<option value="${user.loginId}">${user.loginId}</option>`);
                    });
                } else {
                    // Filter users whose managerId matches the selected manager
                    var filteredUsers = users.filter(function(user) {
                        return user.managerId == selectedManagerId;
                    });

                    // Append the filtered users to the dropdown
                    filteredUsers.forEach(function(user) {
                        $('#users').append(`<option value="${user.loginId}">${user.loginId}</option>`);
                    });
                }

                // Get the Select2 container
                var select2Container = $('#users').data('select2').$container;

                // Check if the Select2 dropdown is open by looking for the class in the container
                if (select2Container.hasClass('select2-container--open')) {
                    $('#users').select2('close'); // Close the dropdown if it's open
                }
            });

            var reloadTimeout;
            $('#managers, #users').on('change', function() {
                clearTimeout(reloadTimeout); // Clear any previously set timeout

                reloadTimeout = setTimeout(function() {
                    var table = $('#kt_table_deposit_withdrawal').DataTable();
                    table.ajax.reload();
                }, 1000); // 1000ms = 1 second
            });

            $('#users').on('select2:open', function () {
                let searchField = $('#users').siblings('.select2-container').find('.select2-search__field');

                searchField.on('input', function () {
                    let inputValue = searchField.val().trim();

                    if (inputValue.includes(',')) {
                        let inputValues = inputValue.split(',').map(val => val.trim());
                        let options = $('#users option').map(function () {
                            return $(this).val();
                        }).get();

                        let selectedValues = $('#users').val() || [];
                        let validValues = inputValues.filter(value => options.includes(value));

                        selectedValues = [...new Set([...selectedValues, ...validValues])];

                        if (validValues.length > 0) {
                            $('#users').val(selectedValues).trigger('change');
                        }

                        searchField.val('');
                    }
                });
            });
        });

    </script>
@endsection