@extends('layouts.main_frontend')
@section('main-content')
<link rel="stylesheet" href="{{asset('/css/frontend/upload.css')}}" type="text/css" />

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 dashboard-page-head edit-document document pt-3 pb-5 mb-2">
    <div class="status">
        <form action="">
            <div class="form-group">
                <center>  <span class="success_message" style="color:#5cb85c!important;text-align: center!important;">
                    {{ session()->has('flash_message') ? session()->get('flash_message') : '' }} </span></center>
            </div>
        </form>
    </div>
    <div class="row loss-event-buttons p-0" style="background-color: transparent!important;">
        <div class="col-md-12">
            <div class="user_add_btn">
                <div class="searchbox">
                <form id="data" method="post" enctype="multipart/form-data" >
                    @csrf
                    <div class="col-lg-12 col-md-12">
                        <div class="form-group {{ $errors->has('documents') ? 'has-error' : '' }}">
                           <div>
                                <label for="organizationName">Upload the Loss Event File</label>
                                <div class="upload_wrap">
                                <i class="fas fa-upload"></i>
                                <div>
                                    <input type="hidden" class="form-control" id="uploadFileName" placeholder="Upload File Name">
                                    <input type="hidden" id="batchId" name="batchId" value="1">
                                    <input type="file" id="fileUpload" class="browse" name="userfile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" size="20">
                                </div>
                                <p class="upload_sub_text"><span>Supports Only Excel :</span> xlx / xlxs   </p>
                            </div>
                            <label for="documents" class="error"></label>
                            <span class="alert-message" id="documents_err"></span>   
                           </div>
                        </div>
                    </div>

                    <div class="user_add_btn">
                        <button type="button" class="btn btn-primary btn-custom btn_custom_bg" id="upload" style="margin-right:10%;">View Uploaded Records</button>
                        <input type="submit" value="Proceed to Insert Data" class="btn btn-primary btn-custom btn_custom_bg" id="submit" />
                        <a href="{{ config('common.rcsa_base_url').'/'.'sample_files/sample_loss_events.xlsx' }}" target="_blank" class="btn btn-primary btn-custom btn_custom_noBg" id="sampleExcel" style="cursor: pointer;"> Download Sample Sheet </a>
                    </div>
                </form>
              </div>
            </div>
        </div>
    </div>

    <!-- <div>
        <div class="list-section table-responsive mt-4" id="tableShow">
            <div class="row">
                <table class="list-table table-responsive" id="eventsTableData" cellpadding="10" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Organization Name</th>
                            <th>Department Name </th>
                            <th>Risk Ref No</th>
                            <th>Description of the Incident</th>
                            <th>Key Risk Category Relation</th>
                            <th>Key Risk Sub Category Relation</th>
                            <th>Key Risk Level Relation</th>
                            <th>Actual or Estimated Loss Due to Incident</th>
                            <th>First Date of Occurence</th>
                            <th>Last Date of Occurence</th>
                            <th>Date of Discovery</th>
                            <th>Date of Settlement</th>
                            <th>Date of Financial Impact</th>
                            <th>Expected Closure Date</th>
                            <th>Root Cause</th>
                            <th>Did it have customer Impact</th>
                            <th>Was it Reported Internally/Externally</th>
                            <th>Potential Cause of the Incident</th>
                            <th>Suggested Remedy to Prevent Recurrence</th>
                            <th>Related to Already Added Risk</th>
                            <th>Comments</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div> -->
</main>
<!--for Excel-->
@endsection
@section('additionaljs')
<!--<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>-->
<script src="{{asset('/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('/js/jquery.js')}}"></script>
<script src="{{asset('/js/jquery.validate.min.js')}}"></script>
<script src="{{asset('/js/jquery-ui.js')}}"></script>
<script>
    var indexUrl = "{{ route('loss-events.index') }}";
    var csrfTokens = "{{ csrf_token() }}";
    var getFileNameUrl = "{{ route('loss-events.filename') }}";
    var getEventsBulkDataUrl = "{{ route('loss-events.geteventsbulkdata') }}";
</script>
<script type="text/javascript" src="{{ asset('/js/xlsx/0.13.5/xlsx.full.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('/js/xlsx/0.13.5/jszip.js') }}"></script>

<script>
    var dataTableRecords;

    

    $(document).ready(function () {
        // console.log("Hello, this is Mike (example)".replace(/ *\([^)]*\) */g, ""));

        var input = document.getElementById('fileUpload');
        input.addEventListener('change', showFileName);

        function showFileName(event) {
            var ext = $('#fileUpload').val().split('.').pop().toLowerCase();
            if (ext === 'xls' || ext === 'xlsx') {
                $('#upload').show();
                $("#reportDialog").hide();
                $("#tableShow").hide();
                $("#submit").hide();
            } else {
                $("#upload").hide();
                $("#fileUpload").val(null);
                alert('Please upload a valid Excel file.');
            }
        }
        $("#upload").click(function () {
            // console.log(dataTableRecords);
            // alert('11');
            // dataTableRecords.draw();
            $('#submit').show();
            $('#tableShow').show();
            $("#upload").hide();

        });

        $(document).on('click', '.browse', function () {
            var file = $(this).parent().parent().parent().find('.file');
            $("#fileUpload").val('');
            $("#uploadFileName").val("");
            file.trigger('click');
        });

            //Reference the FileUpload element.
        $("body").on("click", "#upload", function () {
            var ext = $('#fileUpload').val().split('.').pop().toLowerCase();
            var fileUpload = $("#fileUpload")[0];
            var fileData;
            if (ext === 'xls' || ext === 'xlsx') {
                if (typeof (FileReader) != "undefined") {
                    var reader = new FileReader();
                    $('.table-responsive').attr('style','display: block !important');

                    if (reader.readAsBinaryString) {
                        reader.onload = function (e) {
                            fileData = ProcessExcel(e.target.result);
                            // console.log(fileData);
                            //dataTableRecords.clear();
                            $.each(fileData, function (index, value) {
                                record = [];

                                if(index==='Organization Name'){record.push(value.join(' , '))}else{''}
                                if(index==='Department Name'){record.push(value.join(' , '))}else{''}
                                if(index==='Risk Ref No'){record.push(value.join(' , '))}else{''}
                                if(index==='Description of the Incident'){record.push(value.join(' , '))}else{''}
                                if(index==='Key Risk Category Relation'){record.push(value.join(' , '))}else{''}
                                if(index==='Key Risk Sub Category Relation'){record.push(value.join(' , '))}else{''}
                                if(index==='Key Risk Level Relation'){record.push(value.join(' , '))}else{''}
                                if(index==='Actual or Estimated Loss Due to Incident'){record.push(value.join(' , '))}else{''}
                                if(index==='First Date of Occurence'){record.push(value.join(' , '))}else{''}
                                if(index==='Last Date of Occurence'){record.push(value.join(' , '))}else{''}
                                if(index==='Date of Discovery'){record.push(value.join(' , '))}else{''}
                                if(index==='Date of Settlement'){record.push(value.join(' , '))}else{''}
                                if(index==='Date of Financial Impact'){record.push(value.join(' , '))}else{''}
                                if(index==='Expected Closure Date'){record.push(value.join(' , '))}else{''}
                                if(index==='Root Cause'){record.push(value.join(' , '))}else{''}
                                if(index==='Did it have customer Impact'){record.push(value.join(' , '))}else{''}
                                if(index==='Was it Reported Internally/Externally'){record.push(value.join(' , '))}else{''}
                                if(index==='Potential Cause of the Incident'){record.push(value.join(' , '))}else{''}
                                if(index==='Suggested Remedy to Prevent Recurrence'){record.push(value.join(' , '))}else{''}
                                if(index==='Related to Already Added Risk'){record.push(value.join(' , '))}else{''}
                                if(index==='Comments'){record.push(value.join(' , '))}else{''}
                                
                                //dataTableRecords.row.add(record);
                            });
                            //dataTableRecords.draw();
                        };
                        reader.readAsBinaryString(fileUpload.files[0]);
                    }
                     /*else {
                        reader.onload = function (e) {
                            var data = "";
                            var bytes = new Uint8Array(e.target.result);
                            for (var i = 0; i < bytes.byteLength; i++) {
                                data += String.fromCharCode(bytes[i]);
                            }
                            fileData = ProcessExcel(data);
                            
                            dataTableRecords.clear();
                            $.each(fileData, function (index, value) {
                                record = [];

                                if(value["Organization Name"]){record.push(value["Organization Name"]);}else{record.push("");}
                                if(value["Department Name"]){record.push(value["Department Name"]);}else{record.push("");}

                                if(value["Risk Ref No"]){record.push(value["Risk Ref No"]);}else{record.push("");}
                                if(value["Description of the Incident"]){record.push(value["Description of the Incident"]);}else{record.push("");}
                                if(value["Key Risk Category Relation"]){record.push(value["Key Risk Category Relation"]);}else{record.push("");}
                                if(value["Key Risk Sub Category Relation"]){record.push(value["Key Risk Sub Category Relation"]);}else{record.push("");}
                                if(value["Key Risk Level Relation"]){record.push(value["Key Risk Level Relation"]);}else{record.push("");}
                                if(value["Actual or Estimated Loss Due to Incident"]){record.push(value["Actual or Estimated Loss Due to Incident"]);}else{record.push("");}
                                if(value["First Date of Occurence"]){record.push(value["First Date of Occurence"]);}else{record.push("");}
                                if(value["Last Date of Occurence"]){record.push(value["Last Date of Occurence"]);}else{record.push("");}
                                if(value["Date of Discovery"]){record.push(value["Date of Discovery"]);}else{record.push("");}
                                if(value["Date of Settlement"]){record.push(value["Date of Settlement"]);}else{record.push("");}
                                if(value["Date of Financial Impact"]){record.push(value["Date of Financial Impact"]);}else{record.push("");}
                                if(value["Expected Closure Date"]){record.push(value["Expected Closure Date"]);}else{record.push("");}
                                if(value["Root Cause"]){record.push(value["Root Cause"]);}else{record.push("");}
                                if(value["Did it have customer Impact"]){record.push(value["Did it have customer Impact"]);}else{record.push("");}
                                if(value["Was it Reported Internally/Externally"]){record.push(value["Was it Reported Internally/Externally"]);}else{record.push("");}
                                if(value["Potential Cause of the Incident"]){record.push(value["Potential Cause of the Incident"]);}else{record.push("");}
                                if(value["Suggested Remedy to Prevent Recurrence"]){record.push(value["Suggested Remedy to Prevent Recurrence"]);}else{record.push("");}
                                if(value["Related to Already Added Risk"]){record.push(value["Related to Already Added Risk"]);}else{record.push("");}
                                if(value["Comments"]){record.push(value["Comments"]);}else{record.push("");}
                               
                                
                                record.push("");
                                dataTableRecords.row.add(record);
                            });
                            dataTableRecords.draw();
                        };
                        reader.readAsArrayBuffer(fileUpload.files[0]);*/
                    // }
                    $('#upload').hide();
                } else {
                    alert("This browser does not support HTML5.");
                }
            } else {
                alert("Please upload a valid Excel file.");
            }
        });
        function ProcessExcel(data) {
            //Read the Excel File data.
            var workbook = XLSX.read(data, {
                type: 'binary'
            });
            var returnJson = [];
            var returnData = [];

            //Fetch the name of First Sheet.
            var firstSheet = workbook.SheetNames[0];
            //Read all rows from First Sheet into an JSON array.
            var excelRows = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[firstSheet]);
            //Add the data rows from Excel file.
            for (var i = 0; i < excelRows.length; i++) {
                //Add the data row.
                returnJson.push(excelRows[i]);
            }

            // var kId = [];
            // var vId = [];
            // $.each(returnJson, function(keyArr, valArr) {
            //     $.each(valArr, function(k, v){
                    //kId += (k.replace(/ *\([^)]*\) */g, ''))+':';
                    //vId += v+':';
                   // returnData.push(k.replace(/ *\([^)]*\) */g, '')+':'+v);
            //     });
            // });

            /*var keys = kId.split(":");
            var values = vId.split(":");
            var keysNew = keys.filter(function (el) {
                return el != null && el != "";
            });
            var valuesNew = values.filter(function (el) {
                return el != null && el != "";
            });

            result = {};
            for(i = 0; i < keys.length; i++) {
                result[keys[i]] ? result[keys[i]].push(values[i]) : result[keys[i]] = [values[i]];
            }
            var finals = [];
            $.each(result, function(key, val) {
                finals.push(key+':'+val);
            });

            console.log(result);*/
            console.log(returnJson);
            // console.log(returnData);

            return returnJson;
        };
    });

    $(document).on('change', '#fileUpload', function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
        // var uploadFileName = $('#fileUpload').val();
        var uploadFileName = document.getElementById("fileUpload").files[0].name

        // alert(uploadFileName);
        $.ajax({
            url: getFileNameUrl,
            dataType : "JSON",
            method : "POST",
            // async:false,
            data : {
                'uploadFileName' : uploadFileName
            },
            success: function(resp){
                if(resp.data.is_file_save==0){
                    alert(resp.data.msg);
                    window.location.reload();
                }
            },
            error: function(resp){
            }
        });
    });

    $("form#data").submit(function(e) {
        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var uploadFileName = $('#uploadFileName').val();
        var formData = new FormData(this);
        formData.append('uploadFileName',$('#uploadFileName').val());
        $.ajax({
            url: getEventsBulkDataUrl,
            method:"POST",
            data:formData,
            dataType:'JSON',
            contentType: false,
            cache: false,
            processData: false,      
            success: function (response) {
                data = JSON.stringify(response);

                if(data.msg=='failed'){
                    // console.log(data.data);
                    window.location.reload();
                } else {
                    $('#submit').hide();
                    $('#upload').hide();
                    
                    $("#reportDialog").hide();
                    $("#fileUpload").val('');
                    $("#uploadFileName").val("");
                    window.location = indexUrl;
                }
            },
        });
    });
   
</script>
@endsection