@extends('layouts.user.main')

@section('content')


<script src="{{asset('assets/js/validation/closingPrice.js')}}"></script>

@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 class="post d-flex flex-column-fluid" id="kt_post">
        <div id="kt_content_container" class="container-xxl">
            <div class="d-flex flex-column gap-7 gap-lg-10">
                <!--begin::Modal - Note Listing-->
                <div class="modal fade" id="closing_price_upload" tabindex="-1" aria-hidden="true">
                    <!--begin::Modal dialog-->
                    <div class="modal-dialog modal-fullscreen p-9">
                        <!--begin::Modal content-->
                        <div class="modal-content modal-rounded">
                            <!--begin::Modal header-->
                            <div class="modal-header">
                                <!--begin::Modal title-->
                                <span></span>
                                <span id="error-message-container" class="text-danger"></span>
                                <h3 id="uploadButton">
                                    <span class="me-3">Are you sure you want to upload this Closing Price?</span>
                                    <span>
                                        <button id="cancelClosingPrice" class="btn btn-sm btn-secondary me-3">Cancel</button>
                                        <input type="submit" id="uploadClosingPrice" class="btn btn-sm btn-primary" form="upload_closing_price" value="Upload"/>
                                    </span>
                                </h3>
                                <!--end::Modal title-->
                                <!--begin::Close-->
                                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                                    <span class="fa fa-times"></span>
                                </div>
                                <!--end::Close-->
                            </div>
                            <!--end::Modal header-->
                            <!--begin::Modal body-->
                            <div class="modal-body scroll-y m-5">
                                <!--begin::Notes Table-->
                                <table class="table table-striped align-middle table-hover fs-6 gy-3" id="closing_price_table">
                                    <input type="hidden" id="closingPriceData" name="closingPrice" value="">
                                    <!--begin::Table head-->
                                    <thead>
                                        <!--begin::Table row-->
                                        <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                            <th class="min-w-80px">Symbol</th>
                                            <th class="min-w-80px">Price</th>
                                        </tr>
                                        <!--end::Table row-->
                                    </thead>
                                    <!--end::Table head-->
                                    <!--begin::Table body-->
                                    <tbody class="fw-bold text-center">
                                    </tbody>
                                    <!--end::Table body-->
                                </table>
                                <!--end::Notes Table-->
                            </div>
                            <!--end::Modal body-->
                        </div>
                        <!--end::Modal content-->
                    </div>
                    <!--end::Modal dialog-->
                </div>
                <!--end::Modal - Note Listing-->
                <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>
                <form id="upload_closing_price" class="form" action="{{ route('storeClosingPrice') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card card-flush py-4">
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Upload Closing Price</h2>
                            </div>
                        </div>
                        <div class="card-body row">
                            <div class="col-md-6 fv-row mb-5">
                                <label class="required form-label">Type</label>
                                <select class="js-example-basic-multiple form-select form-select-solid multi-select-option" name="symbolType" data-placeholder="Select Type" id="symbolType" data-allow-clear="true">
                                    <option value=""></option>
                                    @foreach ($symbolTypes as $symbolName => $id)
                                        @if ($id != CommonConstants::SYMBOL_TYPES["MANUAL_PRICE"])
                                            <option value="{{ $id }}">{{str_replace('_', ' ', $symbolName)}}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2" for="file-input">Select Date</label>
                                <input class="form-control form-control-solid" name="date" placeholder="Pick date rage" id="date">
                            </div>
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2" for="file-input">Select File</label>
                                <input type="file" class="form-control form-control-solid" name="file" value="" />
                            </div>
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">Download Demo File</label><br/>
                                <a class="btn btn-block btn-primary me-3" type="button" aria-pressed="true" href={{ route('downloadClosingPriceFile') }}>Download Template</a>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex">
                                <a href="{{ route('manualClosingPrice') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                                <button id="submit" type="submit" class="btn btn-primary me-3">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function () {
    let now         = moment();
    let today       = now.format('YYYY-MM-DD');
    let yesterday   = now.subtract(1, 'days').format('YYYY-MM-DD');
    let maxDate     = moment().hour() < 8 ? yesterday : today; //Change this time as per requirement (Currently 8 AM of current date)
    let lastMonday  = moment().isoWeekday(1).subtract(7, 'days').format('YYYY-MM-DD');
    let element     = document.querySelector("#date");

    var fp = $(element).flatpickr({
        altInput: !0,
        altFormat: "d/m/Y",
        dateFormat: "Y-m-d",
        mode: "single",
        defaultDate: maxDate,
        minDate: lastMonday,
        maxDate: maxDate
    });

    $('#cancelClosingPrice').click(function() {
        $('#closing_price_upload').modal('hide');
    });

    $('input[name="file"]').click(function() {
        $(".file-error").remove();
    });

    $('#symbolType').change(function() {
        $(".symbolType-error").remove();
    });

    $("#submit").click(function(e) {
        e.preventDefault();
        $(".file-error").remove();
        $(".symbolType-error").remove();

        if ($("#file-error").length == 0) {
            $("#loader").show();
        }

        var form        = $('#upload_closing_price')[0];
        var formData    = new FormData(form);

        $.ajax({
            type: 'POST',
            url: "{{ route('storeClosingPrice') }}",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {                
                if (response.success == true) {
                    var data        = response.closingPrices;
                    var tableBody   = $('#closing_price_table tbody');
                    $('#closingPriceData').val(JSON.stringify(response));
                    tableBody.empty();

                    data.forEach(function(closingPrice) {
                        var row = '<tr class="text-center">' +
                            "<td>" + closingPrice.symbol + "</td>" +
                            "<td>" + closingPrice.closePrice + "</td>" +
                            "</tr>";

                        tableBody.append(row);
                    });

                    $('#closing_price_upload').modal('show');
                } else {
                    location.reload();
                    $("#file-error").remove();
                }                
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error:', errorThrown);
                if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                    var errors = jqXHR.responseJSON.errors;

                    Object.keys(errors).forEach(function(key) {
                        var errorMessages   = errors[key].join(', ');
                        var errorContainer  = '';

                        if (key === 'file') {
                            errorContainer = '<div class="help-block file-error text-danger">' + errorMessages + '</div>';
                            $('input[name="file"]').after(errorContainer);
                        } else if (key === 'symbolType') {
                            errorContainer = '<div class="help-block symbolType-error text-danger">' + errorMessages + '</div>';
                            $('#symbolType').parent().append(errorContainer);
                        }
                    });
                }
            },
            complete: function() {
                $("#loader").hide();
            }
        });
    });

    $("#uploadClosingPrice").click(function(e) {
        $("#closing_price_upload").append($("#loader"));
        $("#loader").show();
        $('#upload_closing_price').submit();
    });
});
</script>

@endsection