@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-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 table-hover table-striped" id="kt_table_swap_fee_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">Swap Long</th>
                                        <th class="min-w-100px">Swap Short</th>
                                        <th class="min-w-100px">Sunday</th>
                                        <th class="min-w-100px">Monday</th>
                                        <th class="min-w-100px">Tuesday</th>
                                        <th class="min-w-100px">Wednesday</th>
                                        <th class="min-w-100px">Thursday</th>
                                        <th class="min-w-100px">Friday</th>
                                        <th class="min-w-100px">Saturday</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_swap_fee_symbols');        

        var dataColumns = [
            {
                data: 'Symbol',
                name: 'Symbol',
            },
            {
                data: 'SwapLong',
                name: 'SwapLong',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapShort',
                name: 'SwapShort',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapRateSunday',
                name: 'SwapRateSunday',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapRateMonday',
                name: 'SwapRateMonday',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapRateTuesday',
                name: 'SwapRateTuesday',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapRateWednesday',
                name: 'SwapRateWednesday',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapRateThursday',
                name: 'SwapRateThursday',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapRateFriday',
                name: 'SwapRateFriday',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            },
            {
                data: 'SwapRateSaturday',
                name: 'SwapRateSaturday',
                render: function(data, type, full, meta) {
                    return parseFloat(data).toFixed(2);
                }
            }
        ];

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

        function makeDataTable(table, dataColumns) {
            var reloadAjax  = $(table).dataTable({
                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,
                serverSide: true,
                pageLength: 10,
                language: {
                    searchPlaceholder: "Search Symbol",
                    search: ""
                },
                ajax: {
                    url : "{{ route('swapFeeSymbols') }}",
                    method: "GET",
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                order: [
                    [0, "desc"]
                ],
            });
        } 
    </script>
@endsection