@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('getManualClosingPrice') }}" method="post" class="form" id="dateRangeForm" onsubmit="showLoader()">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                    </form>
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <form action="{{ route('updateManualClosingPrice') }}" method="post" class="form" id="manualPrice" onsubmit="showLoader()">
                            @csrf
                                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_closing_price">
                                    <!--begin::Table head-->
                                    <thead>
                                        <!--begin::Table row-->
                                        <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                            <th class="min-w-125px">Symbol</th>
                                            <th class="min-w-125px">Price</th>
                                            <th class="min-w-125px d-none">OldPrice</th>
                                            <th class="min-w-125px d-none">Id</th>
                                        </tr>
                                        <!--end::Table row-->
                                    </thead>
                                    <!--end::Table head-->
                                    <!--begin::Table body-->
                                    <tbody class="fw-bold">
                                    </tbody>
                                    <!--end::Table body-->
                                </table>
                            </form>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const token   = "{{ csrf_token() }}";
        const table   = $('#kt_table_closing_price');
        var columns   = [0, 1];

        var dataColumns = [
            {
                data: 'symbol',
                name: 'symbol'
            },
            {
                data: 'closePrice',
                name: 'closePrice',
                render: function (data, type, row) {
                    return `<div class="d-flex justify-content-center">
                            <input type="number" class="form-control form-control-solid price-input w-200px" name="closingPrices[${row.id}][newClosingPrice]" value="${data}" step="0.01" min="0"/>
                        </div>`;
                }
            },
            {
                data: 'closePrice',
                name: 'closePrice',
                render: function (data, type, row) {
                    return `<div class="d-flex justify-content-center">
                            <input type="hidden" name="closingPrices[${row.id}][oldClosingPrice]" value="${data}"/>
                        </div>`;
                }
            },
            {
                data: 'id',
                name: 'id',
                render: function (data, type, row) {
                    return `<div class="d-flex justify-content-center">
                            <input type="hidden" name="closingPrices[${row.id}][id]" value="${data}"/>
                        </div>`;
                }
            },
        ];

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

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

        function makeDataTable(table, 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'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 Closing Price",
                    search: ""
                },
                select: {
                    style: 'multi',
                    selector: 'td:first-child div input'
                },
                buttons: [],
                columnDefs: [{ className: 'text-center', targets: "_all" }],
                ajax: {
                    url: "{{ route('getClosingManualClosingPrice') }}",
                    method: "GET",
                    data: {
                        start_date: "{{ $start_date }}"
                    },
                    dataSrc: function (json) {
                        if (json.data.length === 0) {
                            $('#updatePricesBtn').hide();
                        } else {
                            $('#updatePricesBtn').show();
                        }
                        return json.data;
                    }
                },
                columns: dataColumns,
                order: [
                    [0, "asc"]
                ],
            });
        }

        $(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_manual_closing_price_flatpickr" />
                            <button class="btn btn-icon btn-light" id="kt_manual_closing_price_flatpickr_clear">
                            <span class="fas fa-times"></span></button></div>` + 
                            `<div class="d-flex justify-content-end">
                                <button class="btn btn-primary" id="updatePricesBtn" style="display: none;">Update Prices</button>
                            </div>`);

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

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

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

            document.querySelector("#kt_manual_closing_price_flatpickr_clear").addEventListener("click", () => {
                event.preventDefault();
                fp.clear();
                $('#start_date').val('');
                $('#dateRangeForm').submit();
            });
        });
        
        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);
        }

        $(document).on('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
            }
        });

        $("#updatePricesBtn").click(function(e) {
            $('#manual_closing_price').submit();
        });
    </script>
@endsection