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


<script src="{{asset('assets/js/validation/uploadExpirySymbols.js?v3')}}"></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 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">
                <div class="modal fade" id="kt_modal_symbols_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 d-flex justify-content-center align-items-center gap-3 position-relative">
                                <h3>Are you sure you want to upload these symbols?</h3>
                                <a href="{{ route('allSymbols') }}" data-kt-contacts-type="cancel" class="btn btn-sm btn-secondary">Cancel</a>
                                <button id="uploadSymbols" class="btn btn-sm btn-primary">Upload</button>
                                <button type="button" class="btn btn-sm btn-icon btn-active-color-primary position-absolute top-0 end-0 m-2" data-bs-dismiss="modal">
                                    <span class="fa fa-times"></span>
                                </button>
                            </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_symbols">
                                    <input type="hidden" id="mappedSymbolsData" name="mappedSymbols" 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">Time</th>
                                            <th class="min-w-80px">Type</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>
				<!--begin::Card header-->
				<div class="card-header">
					<!--begin::Card title-->
					<div class="card-title">
						<!--begin::Search-->
						<span class="me-2">
                            {{$report_type == 0 ? CommonConstants::EXPIRY_SYMBOLS['ADD_EXPIRY_SYMBOLS'] : ($report_type == 1 ? CommonConstants::EXPIRY_SYMBOLS['ACTIVE_SYMBOLS'] : CommonConstants::EXPIRY_SYMBOLS['EXPIRED_SYMBOLS']);}}
                        </span>
                        <button class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Update Symbols" data-bs-original-title="Update Symbols" id="updateExpirySymbols">
                            <span class="fas fa-sync-alt" id="updateExpirySymbolsLoader"></span>
                        </button>
						<!--end::Search-->
					</div>
					<div class="card-title">
						<!--begin::Expiry symbol upload-->
                        <form id="upload_expiry_symbols" class="form" action="{{ route('uploadExpirySymbols') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="card card-flush">
                                <div class="card-body row">
                                    <div class="col-md-4 fv-row fs-7">
                                        <input type="file" class="form-control form-control-solid" name="file" value="" />
                                    </div>
                                    <div class="col-md-4 fv-row">
                                        <button type="reset" id="btn-reset" class="btn btn-secondary me-3 btn-reset">Reset</button>
                                        <button id="submit" class="btn btn-primary me-3">Submit</button>
                                    </div>
                                    <div class="col-md-4 fv-row">
                                        <a class="btn btn-block btn-primary" type="button" aria-pressed="true" href={{ route('downloadExpirySymbols') }}>Download Template</a>
                                        <div class="text-muted fs-7 m-2">Use <code>dd-mm-YYYY H:i</code> for Date and Time</div>
                                    </div>
                                </div>
                            </div>
                        </form>
						<!--end::Expiry symbol upload-->
					</div>
					<!--begin::Card title-->
				</div>
				<!--end::Card header-->
				<!--begin::Card body-->
				<div class="card-body py-4">
					<form class="form" method="POST" action="{{route('storeExpirySymbols')}}" id="expiry_symbol_form">
						@csrf
						<div class="card-body">
                            @if(!empty($symbols))
                            @foreach($symbols as $key => $symbol) 
                            <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">Symbol</label><br/>
                                    <span>{{ $symbol['symbol'] }}</span>
                                    <input type="hidden" name="symbols[{{ $key }}][symbol]" value="{{ $symbol['symbol'] }}" />
                                </div>
                                <div class="col-md-2 d-flex align-items-center justify-content-center">
                                    <div class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" value="1" 
                                            id="type_{{ $key }}" name="symbols[{{ $key }}][type]" {{ $symbol['type'] === CommonConstants::EXPIRY_SYMBOLS['CLOSE_POSITION_AUTO_VALUE'] ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold text-gray-400 ms-2" for="type_{{ $key }}">Auto Close</label>
                                    </div>
                                </div>
                                <div class="col-md-6 fv-row">
                                    <label class="form-label">Date & Time</label>
                                    <input class="form-control form-control-solid datepicker" 
                                        placeholder="Pick date range" value="{{ $symbol['time'] }}" id="date_{{ $key }}"/>
                                    <input type="hidden" name="symbols[{{ $key }}][expiry_date]" value="{{ $symbol['time'] }}" id="hidden_date_{{ $key }}" />
                                </div>
                            </div>
                            @endforeach
                            @else
                                <div class="row">
                                    <label class="fw-bold fs-6 mb-2 text-center text-muted">
                                        No data available for {{$report_type == 0 ? CommonConstants::EXPIRY_SYMBOLS['ADD_EXPIRY_SYMBOLS'] : ($report_type == 1 ? CommonConstants::EXPIRY_SYMBOLS['ACTIVE_SYMBOLS'] : CommonConstants::EXPIRY_SYMBOLS['EXPIRED_SYMBOLS']);}}
                                    </label>
                                </div>
                            @endif
                        </div>
                        @if(!empty($symbols))
                        <div class="card-footer">
                            <div class="row">
								<div class="col-lg-6">
                                    <a href="{{$report_type == 0 ? route('allSymbols') : route('activeSymbols')}}" data-kt-contacts-type="cancel" class="btn btn-secondary me-3">Cancel</a>
                                    <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>
    $(document).ready(function () {
        $('#expiry_symbol_form').submit(function (event) {
            $(this).find('[type=submit]').prop('disabled', true);
        });

        $(".datepicker").each(function (index) {
            let datepickerInput = $(this);
            let hiddenDateInput = $(`#hidden_date_${index}`);
            let initialDate     = datepickerInput.val();

            datepickerInput.daterangepicker({
                singleDatePicker: true,
                timePicker: true,
                timePicker24Hour: true,
                autoUpdateInput: false,
                minDate:new Date(),
                locale: {
                    format: "M/DD/YYYY HH:mm:ss",
                },
                startDate: initialDate ? moment(initialDate, 'YYYY-MM-DD HH:mm:ss') : moment(),
            }).on('apply.daterangepicker', function (ev, picker) {
                datepickerInput.val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
                hiddenDateInput.val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
            }).on('cancel.daterangepicker', function (ev, picker) {
                if("{{$report_type}}" == 0) {
                    datepickerInput.val('');
                    hiddenDateInput.val('');
                }
            });
        });

        $("#updateExpirySymbols").click(function(){
            $("#loader").show();
            var updateButton = $(this);

            $('#updateExpirySymbolsLoader').addClass('loader');
            updateButton.prop('disabled', true);

            $.ajax({
                url: "{{ route('updateExpirySymbols') }}",
                method: "GET",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response){
                    $('#updateExpirySymbolsLoader').removeClass('loader');
                    updateButton.prop('disabled', false);
                    location.reload();
                },
                error: function(xhr, status, error) {
                    $('#updateExpirySymbolsLoader').removeClass('loader');
                    updateButton.prop('disabled', false);
                    console.error(xhr.responseText);
                    location.reload();
                }
            });
        });

        $("#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_expiry_symbols')[0];
            var formData    = new FormData(form);
    
            $.ajax({
                type: 'POST',
                url: "{{ route('uploadExpirySymbols') }}",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    
                    if (!response.success) {
                        location.reload();
                    } else {

                        if (response.mappedSymbols) {
                            var data        = response.mappedSymbols;
                            var tableBody   = $('#kt_table_symbols tbody');
                            $('#mappedSymbolsData').val(JSON.stringify(response));
                            tableBody.empty();

                            data.forEach(function(symbol) {
                                var symbolData  = symbol.substring(1, symbol.length - 1);
                                symbolData      = symbolData.split("', '").map(function(value) {
                                    return value.replace(/^'/, '').replace(/'$/, '');
                                });

                                var label   = (symbolData[2] == '0' ? "{{ CommonConstants::EXPIRY_SYMBOLS['CLOSE_POSITION_MANUAL_TEXT'] }}" : "{{ CommonConstants::EXPIRY_SYMBOLS['CLOSE_POSITION_AUTO_TEXT'] }}");

                                var row = '<tr class="text-center">' +
                                    "<td>" + symbolData[0] + "</td>" +
                                    "<td>" + symbolData[1] + "</td>" +
                                    "<td>" + label + "</td>" +
                                    "</tr>";

                                tableBody.append(row);
                            });

                            $('#kt_modal_symbols_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();
                }
            });
        });

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

            var mappedSymbolsData = JSON.parse($('#mappedSymbolsData').val());
            $.ajax({
                type: 'POST',
                url: "{{ route('storeAllSymbols') }}",
                data: {
                    _token: '{{ csrf_token() }}',
                    symbolsData: mappedSymbolsData
                },
                success: function(response) {
                    
                    if (response.success) {
                        $("#loader").hide();
                        location.reload();
                    } else {
                        $("#loader").hide();
                        $(this).prop('disabled', false);
                        console.error('Upload failed.');
                        location.reload();
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('Error:', errorThrown);
                    $("#loader").hide();
                    $(this).prop('disabled', false);
                    location.reload();
                }
            });
        });
    });
</script>
@endsection