@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::Toolbar-->
                    <form action="{{ route('expiredSymbolsPositions') }}" method="post" id="dateRangeForm">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                        <input type="hidden" name="selected_range" id="selected_range">
                    </form>
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle text-center table-row-dashed fs-6 gy-5 table-striped" id="expiredSymbolsPositionsTable">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-80px d-none">Id</th>
                                        <th class="min-w-80px">Position</th>
                                        <th class="min-w-200px">Time</th>
                                        <th class="min-w-80px">Login</th>
                                        <th class="min-w-80px">Credit</th>
                                        <th class="min-w-80px">Volume</th>
                                        <th class="min-w-80px">Symbol</th>
                                        <th class="min-w-80px">Price Open</th>
                                        <th class="min-w-100px">Price Current</th>
                                        <th class="min-w-80px">Profit</th>
                                        <th class="min-w-80px">Action</th>
                                        <th class="min-w-80px">Status</th>
                                        <th class="min-w-200px">Response Code</th>
                                        <th class="min-w-200px">Last Updated Time</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>
                <div class="modal fade" id="close_positions_listing_modal" tabindex="-1" aria-hidden="true">
                    <div class="modal-dialog modal-fullscreen p-9">
                        <div class="modal-content modal-rounded">
                            <div class="modal-header">
                                <span></span>
                                <div class="d-flex justify-content-center">
                                    <h4 class="mt-2 mx-2">Close Positions</h4>
                                    <button class="btn btn-sm btn-primary d-none" id="closePositionsButton">Close Positions</button>
                                </div>
                                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                                    <span class="fa fa-times"></span>
                                </div>
                            </div>
                            <div id="positionErrorMessageContainer" class="container-xxl alert-custom-class mt-2" style="display: none;">
                                <div class="alert reverse-alert-danger d-flex align-items-center alert-dismissible" role="alert">
                                    <span class="fas fa-times-circle fa-lg"></span>
                                    <div id="positionErrorMessageText" class="mx-1">
                                    </div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            </div>
                            <div class="modal-body scroll-y m-5">
                                <div id="close_positions_loader" style="display: none;">
                                    <div class="d-flex justify-content-center">
                                        <div class="spinner-border text-gray-800" role="status">
                                            <span class="visually-hidden">Loading...</span>
                                        </div>
                                    </div>
                                </div>
                                <table class="table table-striped align-middle table-hover fs-6 gy-3" id="close_positions_table">
                                    <thead>
                                        <tr class="fw-bolder fs-7 text-uppercase gs-0">
                                            <th class="min-w-100px">Position</th>
                                            <th class="min-w-150px text-center">Time</th>
                                            <th class="min-w-80px text-center">Login</th>
                                            <th class="min-w-80px text-center">Volume</th>
                                            <th class="min-w-100px text-center">Symbol</th>
                                            <th class="min-w-80px text-center">Price Open</th>
                                            <th class="min-w-100px text-center">Price Current</th>
                                            <th class="min-w-100px text-center">Profit</th>
                                            <th class="min-w-100px text-center">Action</th>
                                            <th class="w-10px text-start">
                                                <div class="form-check form-check-sm form-check-custom" style="padding-left: 2.50rem">
                                                    <input class="form-check-input bulk-action-model" id="closePositionsSellectAll" type="checkbox" data-kt-check="true"
                                                            data-kt-check-target="#close_positions_table .bulk-action-model"
                                                            value="1" />
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Card-->
                <div id="loader" style="display: none;" >
                    <div class="page-loader flex-column d-flex justify-content-center align-items-center bg-dark bg-opacity-25">
                        <span class="spinner-border text-primary" role="status"></span>
                        <span class="text-gray-800 fs-6 fw-semibold mt-5">Loading...</span>
                    </div>
                </div>
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const table         = $('#expiredSymbolsPositionsTable');
        var fileName        = "Expired_Symbols_Positions";
        var title           = fileName + '_' +Date.now();
        var columns         = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];

        var dataColumns = [
            {
                data: 'id',
                name: 'id',
                visible: false,
                searchable: false
            },
            {
                data: 'positionId',
                name: 'positionId'
            },
            {
                data: 'time',
                name: 'time',
            },
            {
                data: 'loginId',
                name: 'loginId',
                render: function(data, type, full, meta) {
                    var url = "{{ route('lifeTimeBalance', ['loginId' => ':id']) }}".replace(':id', data);
                    return '<a target="_blank" class="text-black" href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: 'credit',
                name: 'credit'
            },
            {
                data: 'volume',
                name: 'volume',
                render: function(data, type, full, meta) {
                    var divideValue = "{{ CommonConstants::EXPIRY_SYMBOLS['DIVIDE_VALUE'] }}";
                    var volume = (full.volume && full.volume > 0) ? full.volume / divideValue : full.volume;
                    return volume;
                }
            },
            {
                data: 'symbol',
                name: 'symbol'
            },
            {
                data: 'priceOpen',
                name: 'priceOpen'
            },
            {
                data: 'priceCurrent',
                name: 'priceCurrent'
            },
            {
                data: 'profit',
                name: 'profit'
            },
            {
                data: 'action',
                name: 'action',
                render: function(data, type, full, meta) {
                    var className = full.action == 1 ? 'danger' : 'success';
                    var label = full.action == 1 ? 'SELL' : 'BUY';
                    return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                },
                searchable: false
            },
            {
                data: 'status',
                name: 'status',
                render: function(data, type, full, meta) {
                    var className = (full.status == 3 ? 'danger' : (full.status == 1 ? 'primary' : (full.status == 2 ? 'success' : 'warning')));
                    var label = (full.status == 3 ? 'Failed' : (full.status == 1 ? 'Submitted' : (full.status == 2 ? 'Approved' : 'Pending')));
                    return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                }
            },
            {
                data: 'responseId',
                name: 'responseId',
                render: function(data, type, full, meta) {
                    var responseId      = full.responseId;
                    var responseMessage = '-';

                    if(responseId) {
                        var apiResponse = @json(CommonConstants::TRADE_REQUEST_RETURN_CODE);
                        responseMessage = apiResponse[responseId];
                }

                    return responseMessage;
                },
            },
            {
                data: 'updated_at',
                name: 'updated_at',
                render: function(data, type, full, meta) {
                    var lastUpdatedTime = full.updated_at ?? full.created_at;
                            return moment(lastUpdatedTime).format("{{ CommonConstants::TIME_FORMATE }}");
                },
            },
        ];

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

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

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

            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-6'<'card-title col-6'<'d-flex position-relative my-1'f>><'card-toolbar flex-row-fluid justify-content-end gap-6'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,
                stateSave: false,
                serverSide: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Positions",
                    search: ""
                },
                select: {
                    style: 'multi',
                    selector: 'td:first-child div input'
                },
                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
                            }
                        },{
                            extend: "excelHtml5",
                            text: "Export All",
                            className: "btn btn-default btn-sm gap-5",
                            title: title,
                            "action": exportAllAction,
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            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 d-none",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        }
                    ]
                }],
                ajax: {
                    url: "{{ route('expiredSymbolsPositions') }}",
                    method: "GET",
                    data: function(d) {
                        d.managerId     = $("#managers").val();
                        d.userId        = $("#users").val();
                        d.status        = $('#status_filter').val();
                    }
                },
                columns: dataColumns,
                order: [
                    [2, "desc"]
                ],
                searchDelay: "{{CommonConstants::SEARCH_DELAY}}"
            }, );
        }

        $(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"><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>`);

            $('.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" 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>`);

            $('.card-toolbar').after(`<button class="btn btn-sm btn-primary" type="button" id="closePositions" onclick="" data-bs-toggle="modal" data-bs-target="#close_positions_listing_modal">Close Positions</button><div class="d-flex align-items-center gap-2 gap-lg-3"><div class="m-0"><button class="btn btn-sm btn-flex btn-light btn-active-primary fw-bolder" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"><span class="svg-icon svg-icon-5 svg-icon-gray-500 me-1"><i class="fas fa-filter"></i></span>Filter</button><div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="status_column_filter"><div class="px-7 py-5"><div class="fs-5 text-dark fw-bolder">Filter</div></div><div class="separator border-gray-200"></div><div class="px-7 py-5"><div class="mb-10"><label class="form-label fw-bold">Status:</label><div>
                <select class="form-select form-select-solid" data-kt-select2="true" data-placeholder="Select Status" data-dropdown-parent="#status_column_filter" data-allow-clear="true" id="status_filter">
                    <option></option>
                        <option value="{{ CommonConstants::EXPIRY_SYMBOLS['PENDING_STATUS'] }}">{{ CommonConstants::EXPIRY_SYMBOLS['PENDING_STATUS_TEXT'] }}</option>
                        <option value="{{ CommonConstants::EXPIRY_SYMBOLS['APPROVED_STATUS'] }}">{{ CommonConstants::EXPIRY_SYMBOLS['APPROVED_STATUS_TEXT'] }}</option>
                        <option value="{{ CommonConstants::EXPIRY_SYMBOLS['FAILED_STATUS'] }}">{{ CommonConstants::EXPIRY_SYMBOLS['FAILED_STATUS_TEXT'] }}</option>
                    </select>
                </div></div><div class="d-flex justify-content-end"><button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true" id="reset_filter">Reset</button>
            <button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true"id="apply_filter">Apply</button></div>
            </div></div></div><!--end::Filter menu--></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 = $('#expiredSymbolsPositionsTable').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('');
                    }
                });
            });

            $('#close_positions_table').on('click', '.bulk-action-model', function() {
                var isChecked = $(this).prop('checked');
                if (isChecked) {
                    if ($('#close_positions_table').DataTable().rows('.selected').count() >= 0) {
                        $('#closePositionsButton').removeClass('d-none');
                    } 
                } else {
                    if ($('#close_positions_table').DataTable().rows('.selected').count() <= 1) {
                        $('#closePositionsButton').addClass('d-none');
                    } 
                }
            });

            $('#closePositionsSellectAll').on('change', function() {
                var isChecked 	= $(this).is(':checked');
                var checkboxes 	= $('.bulk-action-model');
                var table		= $('#close_positions_table').DataTable();

                checkboxes.each(function() {
                    $(this).prop('checked', isChecked);
                });

                if (isChecked) {
                    table.rows({page: 'current'}).every(function(rowIdx, tableLoop, rowLoop) {
                        $(this.node()).addClass('selected'); 
                    });
                } else {
                    $('#close_positions_table').DataTable().rows({page: 'current'}).deselect();
                }

                if (!$('#close_positions_table tbody .bulk-action-model:checked').length > 0) {
                    $('#closePositionsButton').hide();
                } else {
                    $('#closePositionsButton').show();
                }
            });

            $(document).on('change', '.bulk-action-model:not(#closePositionsSellectAll)', function() {
                var checkbox    = $(this);
                var row         = checkbox.closest('tr');
                var isChecked   = checkbox.is(':checked');
                var table       = $('#close_positions_table').DataTable();

                if (isChecked) {
                    row.addClass('selected');
                } else {
                    row.removeClass('selected');
                }

                var rowIdx = table.row(row).index();
                if (rowIdx !== undefined) {
                    if (isChecked) {
                        table.row(rowIdx).select();
                    } else {
                        table.row(rowIdx).deselect();
                    }
                }

                var allChecked = $('#close_positions_table tbody .bulk-action-model').length === 
                        $('#close_positions_table tbody .bulk-action-model:checked').length;

                // If all checkboxes are checked, check the 'Select All' checkbox, else uncheck it
                $('#closePositionsSellectAll').prop('checked', allChecked);

                if (!$('#close_positions_table tbody .bulk-action-model:not(:disabled):checked').length > 0) {
                    $('#closePositionsButton').hide();
                } else {
                    $('#closePositionsButton').show();
                }
            });

            $('#closePositions').on('click', function() {
                $('#close_positions_loader').show();
                $('#close_positions_table').hide();

                if ($('#close_positions_table').DataTable().settings()[0].jqXHR != null) {
                    $('#close_positions_table').DataTable().settings()[0].jqXHR.abort();
                }

                var table = $('#close_positions_table').DataTable({
                    serverSide: true,
                    paging: false,
                    bInfo: false,
                    destroy: true,
                    select: {
                        style: 'multi',
                        selector: 'td:first-child div input'
                    },
                    ajax: "{{route('expiredSymbolsPositionsList')}}",
                    columns: [
                        {
                            data: 'positionId',
                            name: 'positionId',
                        },
                        {
                            data: 'time',
                            name: 'time',
                            render: function(data, type, full, meta) {
                                return '<div class="text-center">' + full.time + '</div>';
                            }
                        },
                        {
                            data: 'loginId',
                            name: 'loginId',
                            render: function(data, type, full, meta) {
                                return '<div class="text-center">' + full.loginId + '</div>';
                            }
                        },
                        {
                            data: 'volume',
                            name: 'volume',
                            render: function(data, type, full, meta) {
                                var divideValue = "{{ CommonConstants::EXPIRY_SYMBOLS['DIVIDE_VALUE'] }}";
                                var volume = (full.volume && full.volume > 0) ? full.volume / divideValue : full.volume;
                                return '<div class="text-center">' + volume + '</div>';

                            }
                        },
                        {
                            data: 'symbol',
                            name: 'symbol',
                            render: function(data, type, full, meta) {
                                return '<div class="text-center">' + full.symbol + '</div>';
                            }
                        },
                        {
                            data: 'priceOpen',
                            name: 'priceOpen',
                            render: function(data, type, full, meta) {
                                return '<div class="text-center">' + full.priceOpen + '</div>';
                            }
                        },
                        {
                            data: 'priceCurrent',
                            name: 'priceCurrent',
                            render: function(data, type, full, meta) {
                                return '<div class="text-center">' + full.priceCurrent + '</div>';
                            }
                        },
                        {
                            data: 'profit',
                            name: 'profit',
                            render: function(data, type, full, meta) {
                                return '<div class="text-center">' + full.profit + '</div>';
                            }
                        },
                        {
                            data: 'action',
                            name: 'action',
                            render: function(data, type, full, meta) {
                                var className = full.action == 1 ? 'danger' : 'success';
                                var label = full.action == 1 ? 'SELL' : 'BUY';
                                return '<div class="text-center"><div class="badge badge-light-' + className + '">' + label + '</div></div>';
                            }
                        },
                        {
                            data: 'checkbox',
                            name: 'checkbox',
                            orderable: false,
                            searchable: false,
                            render: function(data, type, full, meta) {
                                return '<div class="form-check form-check-sm form-check-custom text-start" style="padding-left: 2.50rem">' +
                                    '<input class="form-check-input bulk-action-model" type="checkbox" value="'+ full.positionId +'" />' +
                                    '</div>';
                            }
                        }
                    ],
                    ordering: false,
                    drawCallback: function() {
                        if ($('#close_positions_table').DataTable().rows().count() == 0) {
                            $('#closePositionsSellectAll').attr("disabled", true);
                        } else {
                            $('#closePositionsSellectAll').attr("disabled", false);
                        }
                    },
                    initComplete: function() {
                        $('#close_positions_table').show();
                        $('#close_positions_loader').hide();
                    }
                });
            });

            $('#closePositionsButton').on('click', function() {
                $("#close_positions_listing_modal").append($("#loader"));
                $("#loader").show();
                $('#positionErrorMessageContainer').hide();
                $('#positionSuccessMessageContainer').hide();
                $('#closePositionsButton').hide();

                var selectedRowsData = $('#close_positions_table').DataTable().rows('.selected').data().toArray();
                var positionIds = selectedRowsData.map(function(rowData) {
                    return rowData.positionId;
                });

                $.ajax({
                    url: "{{route('closeExpiredSymbolsPositions')}}",
                    type: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        positionIds : positionIds
                    },
                    success: function(response) {
                        location.reload();
                    },
                    error: function(xhr, status, error) {
                        $("#loader").hide();
                        $('#positionSuccessMessageContainer').hide();
                        if (xhr.status == 400 || 422) {                        
                                var errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : (xhr.responseJSON.error ? xhr.responseJSON.error : 'Something went wrong !');
                                $('#positionErrorMessageText').html('<strong>' + errorMessage + '</strong>');
                                $('#positionErrorMessageContainer').show();

                                if ($('#positionErrorMessageContainer').is(':visible')) {
                                    setTimeout(function() {
                                        $('#positionErrorMessageContainer').hide();
                                    }, 5000);
                                }
                        } else {
                            console.error('An error occurred : ', error);
                        }
                        $('#closePositionsButton').show();
                    }
                });
            });

            $('#close_positions_listing_modal').on('hidden.bs.modal', function () {
                $('#closePositionsButton').hide();
                $('#closePositionsSellectAll').prop('checked', false);
            });
            
            KTMenu.createInstances(); // Initialize dropdown
            $('#status_filter').select2(); // Initialize Select2 dropdown

            // Filter using status
            $(document).ready(function () {
                $('#apply_filter').on('click', function () {
                    $('#expiredSymbolsPositionsTable').DataTable().ajax.reload();
                });

                $('#reset_filter').on('click', function () {
                    $('#status_filter').val('').trigger('change');
                    $('#expiredSymbolsPositionsTable').DataTable().ajax.reload();
                });
            });
        });
    </script>
@endsection