@extends('layouts.user.main')

@section('content')


<script src="{{asset('assets/js/validation/uploadPosition.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="kt_modal_note_listing" 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 positions?</span>
                                    <span>
                                        <a href="{{ route('bulkPositionUpload') }}" data-kt-contacts-type="cancel" class="btn btn-sm btn-secondary me-3">Cancel</a>
                                        <button id="uploadPositions" class="btn btn-sm btn-primary">Upload</button>
                                    </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="kt_table_notes">
                                    <input type="hidden" id="mappedPositionsData" name="mappedPositions" 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">Login</th>
                                            <th class="min-w-80px">Volume</th>
                                            <th class="min-w-150px">Symbol</th>
                                            <th class="min-w-80px">Price</th>
                                            <th class="min-w-80px">Action</th>
                                            <th class="min-w-80px">Comment</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_manual_position" class="form" action="{{ route('storeBulkPosition') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card card-flush py-4">
                        <div class="card-header">
                            <div class="card-title">
                                <h2>Upload Bulk Positions</h2>
                            </div>
                        </div>
                        <div class="card-body row">
                            <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('downloadBulkPosition') }}>Download Template</a>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="d-flex">
                                <a href="{{ route('bulkPosition') }}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                                <button type="reset" id="btn-reset" class="btn btn-secondary me-3">Reset</button>
                                <button id="submit" class="btn btn-primary me-3">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function () {

    $("#submit").click(function(e) {
        e.preventDefault();

        var fileInput = $('input[name="file"]');

        $(fileInput).click(function() {
            $("#file-error").remove();
        });

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

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

        $.ajax({
            type: 'POST',
            url: "{{ route('storeBulkPosition') }}",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success == false) {
                    location.reload();
                } else {

                    if (response.mappedPositions) {
                        var data        = response.mappedPositions;
                        var tableBody   = $('#kt_table_notes tbody');
                        var divideValue = "{{ CommonConstants::MANUAL_POSITION['DIVIDE_VALUE'] }}";
                        $('#mappedPositionsData').val(JSON.stringify(response));
                        tableBody.empty();
                    
                        $("#error-message-container").empty();
                        var positionCommentError = response.error;

                        if (positionCommentError == true) {
                            $('#uploadButton').hide();
                            var errorMessage = '<div class="container-xxl alert-custom-class">' +
                                    '<div class="alert alert-danger d-flex align-items-center alert-dismissible" role="alert">' +
                                        '<span class="fa fa-exclamation-triangle fa-lg me-2"></span>' +
                                        '<div>' + '<strong>{{ WebMessages::SUCCESS["POSITION_UPLOAD_FAILED"] }}</strong>' + '</div>' +
                                    '</div>' +
                                '</div>';
                            $("#error-message-container").html(errorMessage);
                        } else {
                            $('#uploadButton').show();
                        }

                        data.forEach(function(position) {
                            var positionData    = position.substring(1, position.length - 1).split("', '");
                            var className       = positionData[3] == 0 ? 'success' : 'danger';
                            var label           = (positionData[3] == '0' ? "{{ CommonConstants::MANUAL_POSITION['BUY_TEXT_VALUE'] }}" : "{{ CommonConstants::MANUAL_POSITION['SELL_TEXT_VALUE'] }}");

                            var row = '<tr class="text-center">' +
                                "<td>" + positionData[1] + "</td>" +
                                "<td>" + positionData[2] / divideValue + "</td>" +
                                "<td>" + positionData[0].replace(/^'/, '').replace(/'$/, '') + "</td>" +
                                "<td>" + positionData[4] + "</td>" +
                                "<td>" + '<div class="badge badge-light-' + className + '">' + label + '</div>' + "</td>" +
                                "<td>" + positionData[5] + "</td>" +
                                "</tr>";

                            tableBody.append(row);
                        });

                        $('#kt_modal_note_listing').modal('show');
                    } else {
                        $("#file-error").remove();
                        fileInput.after('<div id="file-error" class="help-block file-error">Invalid data uploaded. Please check your file.</div>');
                    }
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error:', errorThrown);
                if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                    var errors = jqXHR.responseJSON.errors;
                    $("#file-error").remove();
                    Object.keys(errors).forEach(function(key) {
                        var errorMessages = errors[key].join(', ');
                        fileInput.after('<div id="file-error" class="help-block file-error">' + errorMessages + '</div>');
                    });
                }
            },
            complete: function() {
                $("#loader").hide();
            }
        });
    });

    $("#uploadPositions").click(function() {
        $("#kt_modal_note_listing").append($("#loader"));
        $("#loader").show();
        $(this).prop('disabled', true);

        var mappedPositionsData = JSON.parse($('#mappedPositionsData').val());
        $.ajax({
            type: 'POST',
            url: "{{ route('storeAllPosition') }}",
            data: {
                _token: '{{ csrf_token() }}',
                positionsData: mappedPositionsData,
            },
            success: function(response) {
                if (response.success) {
                    window.location.href = "{{ route('bulkPosition') }}";
                    $("#loader").hide();
                } else {
                    $("#error-message-container").empty();
                    var errorMessage = '<div class="container-xxl alert-custom-class">' +
                                '<div class="alert alert-danger d-flex align-items-center alert-dismissible" role="alert">' +
                                    '<span class="fa fa-exclamation-triangle fa-lg me-2"></span>' +
                                    '<div>' + '<strong>'+response.symbols+'</strong>' + '</div>' +
                                '</div>' +
                            '</div>';
                    $("#error-message-container").html(errorMessage);

                    console.error('Upload failed.');
                    $("#loader").hide();
                    $(this).prop('disabled', false);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('Error:', errorThrown);
                $("#loader").hide();
                $(this).prop('disabled', false);
            }
        });
    });
});
</script>
    
@endsection