@extends('layouts.user.main')
@section('content')


@if ($errors->any())
    <div class="container-xxl alert-custom-class">
        <div class="alert alert-danger alert-dismissible" role="alert">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
@endif

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <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>
	<!--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">
                <form action="{{ route('cmxClosingPrice') }}" method="post" class="form" id="dateRangeForm" onsubmit="showLoader()">
                    @csrf
                    <input type="hidden" name="start_date" id="start_date">
                </form>
				<!--begin::Card header-->
				<div class="card-header">
					<!--begin::Card title-->
					<div class="card-title">
						<!--begin::Search-->
						<span class="me-2">
                            CMX Closing Price
                        </span>
						<!--end::Search-->
					</div>
                    <div class="card-toolbar">
                        <div class="input-group w-250px">
                            <input class="form-control form-control-solid rounded rounded-end-0" placeholder="Pick date range" id="kt_cmx_closing_price_flatpickr" />
                            <button class="btn btn-icon btn-light" id="kt_cmx_closing_price_flatpickr_clear" onsubmit="showLoader()">
                                <span class="fas fa-times"></span>
                            </button>
                        </div>
                    </div>
					<!--begin::Card title-->
				</div>
				<!--end::Card header-->
				<!--begin::Card body-->
				<div class="card-body py-4">
					<form class="form" method="POST" action="{{route('storeCmxClosingPrice')}}" id="cmx_closing_price_form">
						@csrf
						<div class="card-body">
                            @forelse($cmxPairs as $key => $pair)
                            <div class="form-group row" @if($key > 0) style="margin-top: 15px" @endif>
                                <div class="col-lg-4">
                                    <label class="fw-bold fs-6 mb-2">Pair</label><br/>
                                    <span>{{ $pair['name'] }}</span>
                                </div>
                                <div class="d-flex flex-wrap col-md-8 fv-row">
                                    <div class="me-3 mb-3 col-12 col-sm-6 col-md-4">
                                        <label class="form-label">Price 1</label>
                                        <input type="number" class="form-control form-control-solid price-input w-100" name="closingPrices[{{ $pair['id'] }}][price_1]" value="{{ $pair->price_1 ?? '' }}" step="0.01" min="0.1" required data-pair-id="{{ $pair['id'] }}"/>
                                    </div>
                                    <div class="me-3 mb-3 col-12 col-sm-6 col-md-4">
                                        <label class="form-label">Price 2</label>
                                        <input type="number" class="form-control form-control-solid price-input w-100" name="closingPrices[{{ $pair['id'] }}][price_2]" value="{{ $pair->price_2 ?? '' }}" step="0.01" min="0.1" required data-pair-id="{{ $pair['id'] }}"/>
                                    </div>
                                    <div class="me-3">
                                        <label class="form-label">Price 3</label>
                                        <input type="number" class="form-control form-control-solid price-input w-200px" name="closingPrices[{{ $pair['id'] }}][price_3]" value="{{ $pair->price_3 ?? '' }}" step="0.01" min="0.1" required data-pair-id="{{ $pair['id'] }}"/>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="startDate" id="startDate" value="{{ $start_date }}">
                            @empty
                                <div class="row">
                                    <label class="fw-bold fs-6 mb-2 text-center text-muted">
                                        No data available for CMX Closing Price
                                    </label>
                                </div>
                            @endforelse
                        </div>
                        @if(!($cmxPairs->isEmpty()))
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <button type="submit" class="btn btn-primary mr-2">Update</button>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </form>
				</div>
				<!--end::Card body-->
			</div>
			<!--end::Card-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Post-->
</div>
<script type="text/javascript">
    $(document).ready(function() {
        let element         = document.querySelector("#kt_cmx_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_cmx_closing_price_flatpickr_clear").addEventListener("click", () => {
            event.preventDefault();
            fp.clear();
            $('#start_date').val('');
            $('#dateRangeForm').submit();
        });
    });

    function showLoader() {
        $(this).find('button[id="submit"]').prop('disabled', true);

        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);
    }

    $('input[name^="closingPrices"][name$="[price_1]"]').on('blur', function() {
        var price1Value = $(this).val();
        var pairId      = $(this).data('pair-id');

        var price2Input = $('input[name="closingPrices[' + pairId + '][price_2]"]');
        var price3Input = $('input[name="closingPrices[' + pairId + '][price_3]"]');

        if (price2Input.val() == null || price2Input.val() == "") {
            price2Input.val(price1Value);
        }

        if (price3Input.val() == null || price3Input.val() == "") {
            price3Input.val(price1Value);
        }
    });

    $('#cmx_closing_price_form').on('submit', function() {
        showLoader();
    });
</script>
@endsection