@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">
                    <form action="{{ route('mostTradedScript') }}" method="post" id="dateRangeForm" onsubmit="showLoader()">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                    </form>
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <div class="d-flex align-items-center justify-content-end d-none">
                            <label class="form-label fs-6 fw-bolder text-dark me-2 mb-0">Trade Filter : </label>
                            <div class="w-100 mw-150px">
                                <select class="form-select form-select-solid" data-control="select2" data-hide-search="true" id="filter">
                                    <option selected value="1">All</option>
                                    <option value="2">Buy</option>
                                    <option value="3">Sell</option>
                                </select>
                            </div>
                        </div>
                        <!--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_most_traded_symbols">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">Symbol</th>
                                        <th class="min-w-100px">Net Hold</th>
                                        <th class="min-w-100px">Buy Quantity</th>
                                        <th class="min-w-100px">Buy Turn Over</th>
                                        <th class="min-w-100px">Sell Quantity</th>
                                        <th class="min-w-100px">Sell Turn Over</th>
                                        <th class="min-w-100px">Gross Total</th>
                                        <th class="min-w-100px">Net Total</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_most_traded_symbols');
        var dataColumns = [
            {
                data: 'symbols',
                name: 'symbols.symbols'
            },
            {
                data: 'netHold',
                name: 'netHold',
                render: function(data, type, full, meta) {
                    var buyQuantity     = full.buyQuantity;
                    var sellQuantity    = full.sellQuantity;
                    var netHold         = (buyQuantity - sellQuantity).toLocaleString('en-IN');
                    return netHold;
                }
            },
            {
                data: 'buyQuantity',
                name: 'buyQuantity',
                render: function(data, type, full, meta) {
                    return full.buyQuantity.toLocaleString('en-IN');
                }
            },
            {
                data: 'buyTurnOver',
                name: 'buyTurnOver',
                render: function(data, type, full, meta) {
                    return full.buyTurnOver.toLocaleString('en-IN');
                }
            },
            {
                data: 'sellQuantity',
                name: 'sellQuantity',
                render: function(data, type, full, meta) {
                    return full.sellQuantity.toLocaleString('en-IN');
                }
            },
            {
                data: 'sellTurnOver',
                name: 'sellTurnOver',
                render: function(data, type, full, meta) {
                    return full.sellTurnOver.toLocaleString('en-IN');
                }
            },
            {
                data: 'totalTurnOver',
                name: 'totalTurnOver',
                render: function(data, type, full, meta) {
                    return full.totalTurnOver.toLocaleString('en-IN');
                }
            },
            {
                data: 'netTotal',
                name: 'netTotal',
                render: function(data, type, full, meta) {
                    return full.netTotal.toLocaleString('en-IN');
                }
            }
        ];

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

        $(document).ready(function() {
            // $('#filter').on('change', function() {
            //     var searchValue = $('#kt_table_most_traded_symbols').DataTable().search();
            //     var filterValue = $(this).val();
            //     var newColumns = getDynamicColumns(filterValue);
            //     reloadDataTable(newColumns, searchValue);
            // });

            function reloadDataTable(newColumns, searchValue) {
                $('#kt_table_most_traded_symbols').DataTable().destroy();
                $('#updateSymbolsContainer').remove();
                makeDataTable($('#kt_table_most_traded_symbols'), newColumns);
                $('.custom-button-container').prepend(`<div id="updateSymbolsContainer" 
                                                        class="d-xl-inline-flex"><button class="btn btn-secondary" id="updateSymbols">
                                                        <span class="fas fa-sync-alt me-2" id="updateSymbolsLoader"></span><span>Update</span></button></div>`);
                $('#kt_table_most_traded_symbols').DataTable().search(searchValue).draw();
            }
            makeDataTable(table, dataColumns);
        });

        function makeDataTable(table, 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'f>><'card-toolbar flex-row-fluid justify-content-end gap-6'<'custom-button-container'>>>" +
                        "<'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: true,
                serverSide: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Symbols",
                    search: ""
                },
                select: {
                    style: 'multi',
                    selector: 'td:first-child div input'
                },
                ajax: {
                    url: "{{ route('mostTradedScript') }}",
                    data: {
                        start_date: "{{ $start_date }}",
                    },
                    method: "GET"
                },
                columns: getDynamicColumns($('#filter').val()),
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [6, "desc"]
                ],
            }, );
        }

        function getDynamicColumns(filterValue) {
            if (filterValue == '2') {
                return [
                    {
                        data: 'symbols',
                        name: 'symbols.symbols'
                    },
                    {
                        data: 'buyQuantity',
                        name: 'most_traded_scripts.buyQuantity',
                        render: function(data, type, full, meta) {
                            return full.buyQuantity.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'buyTurnOver',
                        name: 'most_traded_scripts.buyTurnOver',
                        render: function(data, type, full, meta) {
                            return full.buyTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'sellQuantity',
                        name: 'most_traded_scripts.sellQuantity',
                        render: function(data, type, full, meta) {
                            return full.sellQuantity.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'sellTurnOver',
                        name: 'most_traded_scripts.sellTurnOver',
                        render: function(data, type, full, meta) {
                            return full.sellTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'buyTurnOver',
                        name: 'most_traded_scripts.buyTurnOver',
                        render: function(data, type, full, meta) {
                            return full.buyTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'totalTurnOver',
                        name: 'totalTurnOver',
                        render: function(data, type, full, meta) {
                            var buyTurnOver     = full.buyTurnOver;
                            var sellTurnOver    = full.sellTurnOver;
                            var netTotal        = (buyTurnOver - sellTurnOver);
                            return netTotal.toLocaleString('en-IN');
                        }
                    },
                ];
            } else if (filterValue == '3') {
                return [
                    {
                        data: 'symbols',
                        name: 'symbols.symbols'
                    },
                    {
                        data: 'buyQuantity',
                        name: 'most_traded_scripts.buyQuantity',
                        render: function(data, type, full, meta) {
                            return full.buyQuantity.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'buyTurnOver',
                        name: 'most_traded_scripts.buyTurnOver',
                        render: function(data, type, full, meta) {
                            return full.buyTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'sellQuantity',
                        name: 'most_traded_scripts.sellQuantity',
                        render: function(data, type, full, meta) {
                            return full.sellQuantity.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'sellTurnOver',
                        name: 'most_traded_scripts.sellTurnOver',
                        render: function(data, type, full, meta) {
                            return full.sellTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'sellTurnOver',
                        name: 'most_traded_scripts.sellTurnOver',
                        render: function(data, type, full, meta) {
                            return full.sellTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'totalTurnOver',
                        name: 'totalTurnOver',
                        render: function(data, type, full, meta) {
                            var buyTurnOver     = full.buyTurnOver;
                            var sellTurnOver    = full.sellTurnOver;
                            var netTotal        = (buyTurnOver - sellTurnOver);
                            return netTotal.toLocaleString('en-IN');
                        }
                    },
                ];
            } else {
                return [
                    {
                        data: 'symbols',
                        name: 'symbols.symbols'
                    },
                    {
                        data: 'netHold',
                        name: 'netHold',
                        render: function(data, type, full, meta) {
                            var buyQuantity     = full.buyQuantity;
                            var sellQuantity    = full.sellQuantity;
                            var netHold         = (buyQuantity - sellQuantity).toLocaleString('en-IN');
                            return netHold;
                        }
                    },
                    {
                        data: 'buyQuantity',
                        name: 'most_traded_scripts.buyQuantity',
                        render: function(data, type, full, meta) {
                            return full.buyQuantity.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'buyTurnOver',
                        name: 'most_traded_scripts.buyTurnOver',
                        render: function(data, type, full, meta) {
                            return full.buyTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'sellQuantity',
                        name: 'most_traded_scripts.sellQuantity',
                        render: function(data, type, full, meta) {
                            return full.sellQuantity.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'sellTurnOver',
                        name: 'most_traded_scripts.sellTurnOver',
                        render: function(data, type, full, meta) {
                            return full.sellTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'totalTurnOver',
                        name: 'most_traded_scripts.totalTurnOver',
                        render: function(data, type, full, meta) {
                            return full.totalTurnOver.toLocaleString('en-IN');
                        }
                    },
                    {
                        data: 'totalTurnOver',
                        name: 'totalTurnOver',
                        render: function(data, type, full, meta) {
                            var buyTurnOver     = full.buyTurnOver;
                            var sellTurnOver    = full.sellTurnOver;
                            var netTotal        = (buyTurnOver - sellTurnOver);
                            var textClass       = netTotal > 0 ? 'text-success' : 'text-danger';
                            return '<span class="'+textClass+'">' + netTotal.toFixed(2) + '</span>';
                        }
                    }
                ];
            }
        }

        $(document).ready(function() {
            $('.card-toolbar').prepend(`<div class="input-group w-250px">
                            <input class="form-control form-control-solid rounded rounded-end-0" placeholder="Pick date range" id="kt_most_traded_script_flatpickr" />
                            <button class="btn btn-icon btn-light" id="kt_most_traded_script_flatpickr_clear">
                            <span class="fas fa-times"></span></button></div>
                            <div class="d-xl-inline-flex"><button class="btn btn-secondary" id="updateSymbols">
                            <span class="fas fa-sync-alt me-2" id="updateSymbolsLoader"></span><span>Update</span></button></div>`);

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

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

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

            let element = document.querySelector("#kt_most_traded_script_flatpickr");
            let selectedDate;

            @if (isset($start_date) && $start_date !== '')
                selectedDate = moment("{{ $start_date }}");
            @else
                selectedDate = moment();
            @endif

            var fp = $(element).flatpickr({
                altInput: !0,
                altFormat: "d/m/Y",
                dateFormat: "Y-m-d",
                defaultDate: selectedDate.format('Y-M-D'),
                maxDate: moment().toDate(),
                onChange: function(selectedDates, dateStr, instance) {
                    if (selectedDates.length === 1) {
                        var selectedDate = moment(selectedDates[0]);
                        $('#start_date').val(selectedDate.format('YYYY-MM-DD'));
                        $('#dateRangeForm').submit();
                    }
                },
            });

            document.querySelector("#kt_most_traded_script_flatpickr_clear").addEventListener("click", () => {
                var currentDate = moment();

                if (moment(fp.selectedDates[0]).format('Y-M-D') !== currentDate.format('Y-M-D')) {
                    fp.setDate(currentDate.toDate());
                    $('#start_date').val(currentDate.format('YYYY-MM-DD'));
                    $('#dateRangeForm').submit();
                }

                fp.setDate(moment(fp.selectedDates[0]).format('Y-M-D'));
            });
        });

        function showLoader() {
            var pageLoader = $('<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>');
            $('html, body').animate({ scrollTop: 0 }, 'slow');
            $('body').append(pageLoader);
        }
    </script>
@endsection