@extends('layouts.app',['dashBoardTitle'=>' Imported Excel'])
@section('buttons')
<a href="#" onclick="importfunction({{$company_id}})" class="export-btn btn btn-success"style="margin-left: 280px;width:123px;">Re-upload</a>
@endsection
@section('content')
<style>
    table{
        width:100%;
    }
    td{
        border: 1px solid black;
    }
    .grid-row{
        display: grid;
        grid-template-columns: 20% 80%;
    }
    .selection_part{
        text-decoration:none;
        list-style:none;
        color:black;
    }

    .selection_part:hover{
        color:#ccc;
    }

    ul{
        list-style:none;
        
    }

    .form-container{
        padding:15px;
    }

    ul {
    padding-left: 0rem;
    }

    .line_item_row_checked{
        display:none;
    }

    .cd_selected_row{
        display:none;
    }
    .cd_cells{
        display:none;
    }

    #step2_modal_btn{
        display:none;
    }

    #step3_modal_btn{
        display:none;
    }

    #step4_modal_btn{
        display:none;
    }
    #step4_modal_btn_bck{
        display:none;
    }
    .next_icon{
        display:none;
    }

    .table-container{
        max-while: 300px;
        overflow-y: scroll;
        overflow-x: none;
    }
    .bg-grey{
        background-color:#ccc !important;
        position: sticky;
        top:0;
    }


</style>
<div id="main-container">
<!-- <div class="card">
<div class="card-header font-weight-bold d-flex justify-content-between bg-al">
    <div class="align-self-center p-2">
       
    </div>
    <div class="align-self-center  p-2">
        <a href="#" onclick="importfunction({{$company_id}})" class="export-btn btn btn-success">Re-upload</a>
    </div>
</div> -->

<div class="card-body clr-al">
        <div class="row grid-row d-flex">
        <div class="col grid-col d-flex justify-content-between ">
            <div class="col-6 d-flex justify-content-start">
                <div class="col-3"><p> Steps to config excel </p></div>
                        <span>|</span>
                        <div class="mx-2">
                        <a class="selection_part" id="name_selector" href="#"><span class="next_icon" id="name_selector_icon"> > </span> Select company name cell</a>
                        </div>
                    
                    <!-- <li>
                        <div>
                        <a class="selection_part" id="date_selector" href="#">2. Select comapany date cell</a>
                        </div>
                    </li> -->
                    <span>|</span>
                  
                        <div class="ml-1">
                        <a class="selection_part " id="items_selector" href="#"><span class="next_icon" id="items_selector_icon"> > </span> Select Line Items, Credit, Debit</a>
                        </div>
            </div>
                <!-- <li>
                    <div>
                    <a class="selection_part" id="credit_debit_selector" href="#"><span class="next_icon" id="credit_debit_selector"> > </span> Select Credit & Debit columns</a>
                    </div>
                </li> -->
                <!-- <li>
                    <div>
                    <a class="selection_part" id="income_selector" href="#">5. Select Assets</a>
                    </div>
                </li> -->
                <!-- <li>
                    <div>
                    <a class="selection_part" id="expense_selector" href="#">6. Select Liabilities</a>
                    </div>
                </li> -->
                <!-- <li>
                    <div>
                    <a class="selection_part" id="profit_selector" href="#">7. Select Income</a>
                    </div>
                </li> -->
                <!-- <li>
                    <div>
                    <a class="selection_part" id="loss_selector" href="#">5. 
                        Mapping</a> 
                    </div>
                </li> -->
            </ul>
    <div class="d-flex justify-content-between">
            <div style="margin:5px 0;">
                <button id="step1_modal_btn" onClick="check_step1()" class="export-btn btn btn-success">Next</button>
            </div>

            <div style="margin:5px 0;">
                <button id="step2_modal_btn" onClick="check_step2()" class="export-btn btn btn-success">Next</button>
            </div>

            <div style="margin:5px 0;">
                <button id="step3_modal_btn" onClick="check_step3()" class="export-btn btn btn-success">Next</button>
            </div>

            <div style="margin:5px 0;" class="d-flex">
                <button id="step4_modal_btn_bck" onClick="back_step()" class="export-btn btn btn-success">Back</button>
                <button id="step4_modal_btn" onClick="check_step4()" class="export-btn btn btn-success">Next</button>
            </div>
     </div>
            
        </div>
        <div cass="col grid-col">
        <div id="step_one" class="table-container"></div>
        <div id="step_two" class="table-container"></div>
        <div id="step_three" class="table-container"></div>  
        <div id="step_four" class="table-container"></div>    
        </div>
        </div>
    </div>
</div>
</div>


<div class="modal" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header ppup">
        <h4 class="modal-title">Upload Excel</h4>
          <button type="button" class="close import-excel-btn" data-dismiss="modal" onclick="importclose()">&times;</button>
         
        </div>
        <div class="modal-body">
          <form method="POST" action="{{url('import-excel')}}" enctype="multipart/form-data">
            <div>
              @csrf
          <div class="form-group row">
              <div class="col-6">
              <input class="form-control" id="reupload" type="hidden" name="re_upload" value="1" required="required"> </input>
                <label>Start Date:</label>
                <input class="form-control" id="start_date" type="date" name="start_date" required="required"> </input>
              </div>

              <div class="col-6">
              <label>End Date:</label>
                <input class="form-control" id="end_date" type="date" name="end_date" required="required"> </input>
              </div>
          </div>

          <div class="form-group my-1">
            <input class="form-control" type="file" name="import-excel" required="required"> </input>
          </div>

              <input id="company_id" type="hidden" name="company_id" required="required"> </input>
            </div>
        </div>
        <div class="modal-footer">
          <!-- <button class="import-excel-btn" type="button" class="btn btn-default" data-dismiss="modal" onclick="importclose()">Close</button> -->
          <button class="btn-success btn" type="submit" name="submit-excel" >Import</button>
        </div>
        </from>
      </div>
    </div>
  </div>
</div>

<script>

function importfunction(id){
    $("#myModal").toggle();
    $('#company_id').val(id);
}

function importclose(){
    $("#myModal").toggle();
}

function getExcelColumn(x){        
        return String.fromCharCode(65 + x);
}



function back_step(){
    location.reload();
}

//Step 1 starts
function step1(Data){
        var companyData = Data;
        excelData = JSON.parse(companyData.excelData);
        var company_id = Data.company_id;
        var excelDataColCount =  companyData.excelDataColCount;
        var excelDataRowCount =  companyData.excelDataRowCount;

        var table = `<table class="table table-hover table-bordered">`;
        for(var row = -1; row <= excelDataRowCount; row++){
            table += `<tr>`;  
            if(row >= 0){
            var rowNumber = parseInt(row)+1;
            table +=`<td class="bg-grey">`+rowNumber+`</td>`;
            }else{
            table +=`<td></td>`;
            }

            for(var col = 0; col < excelDataColCount; col++){

                if(row < 0){
                    table +=`<td class="bg-grey">`+getExcelColumn(col)+`</td>`;
                }else{

                var cellData = getData(excelData,row,col);
                    table += `<td>`;
                    if(cellData){
                        var inputValue = `{"id":${cellData.id},"row":${row},"col":${col},"cell_value":"${cellData.cell_value}"}`;
                        var javascriptString = cellData.cell_value;
                        var company_name_error = 0;
                        var phpString = "{{$company_name}}";
                        table += `<input name="company_name"`;
                                if(phpString.toLowerCase().replaceAll(' ','') == javascriptString.toLowerCase().replaceAll(' ','')){
                                    company_name_error = 1;
                                    table += `checked `;   
                                }
                        table +=`type="radio" value='`+inputValue+`'></input> <label>`; 
                        var checkingChar = /[a-zA-Z]/g;
                        if(!checkingChar.test(cellData.cell_value)){
                        if(Number.isInteger(cellData.cell_value)){
                            table += `${cellData.cell_value} </label>`;
                        }else{
                            table += `${cellData.cell_value} </label>`;
                        }
                        }else{
                            table += `${cellData.cell_value} </label>`;
                        }
                        
                    }
                    table += `</td>`

                }

                }
            table += `</tr>`; 
        }   
        table += `</table>`;
        table += ``;
        const stepOneTableContainer = document.createElement("div");
        stepOneTableContainer.innerHTML = table;
        document.getElementById('step_one').appendChild(stepOneTableContainer);
        document.getElementById('name_selector').style.color = "black";
        document.getElementById('name_selector').style.fontStyle = "italic";
        document.getElementById('name_selector').style.fontWeight = "900";
        document.getElementById('name_selector_icon').style.display = "inline-block";
        var companyName = document.querySelector('input[name="company_name"]:checked');
        // If name is matching skip to next step.
        if(companyName){
            check_step1();
           // steps('3');
        }
    }

    function check_step1(){
        var companyName = document.querySelector('input[name="company_name"]:checked');
        if(!companyName){
            alert("Please Select Company Name Cell");
        }else{
        var model = `<div id="step1_modal" class="modal" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Company Name Confirmation</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="closeModal('step1_modal')">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p id="company_name_col"></p>
                            </div>
                            <div class="modal-footer">
                                <button id="step1_in_modal_btn" type="button" class="btn btn-primary" onClick="steps('3')">Confirm</button>
                            </div>
                            </div>
                        </div>
                        </div>`;

                        if(!document.getElementById('step1_modal')){
                            //var div =  document.createElement("div");
                           // document.getElementById('main-container').appendChild(div);
                            //div.innerHTML = model;
                        }       
                        //check_step1();
                        steps('3');
                            companyName = document.querySelector('input[name="company_name"]:checked');
                            //document.getElementById('company_name_col').textContent = JSON.parse(companyName.value).cell_value;
                    
                    //document.getElementById('step1_modal').style.display = "block";
                    document.getElementById('step1_modal_btn').style.display = "none";
                    
        }
    }

//Step 1 ends
//Step 2 start

function step2(Data){
    var step_modal_btn = document.getElementById('step1_in_modal_btn');
        step_modal_btn.disabled = true;
        step_modal_btn.style.background = "#ccc";
        var companyData = Data;
        excelData = JSON.parse(companyData.excelData);
        var company_id = Data.company_id;
        var excelDataColCount =  companyData.excelDataColCount;
        var excelDataRowCount =  companyData.excelDataRowCount;
        var table = `<table class="table table-hover table-bordered">`;
        for(var row = 0; row <= excelDataRowCount; row++){
            table += `<tr>`;  

            if(row >= 0){
            var rowNumber = parseInt(row)+1;
            table +=`<td>`+rowNumber+`</td>`;
            }else{
            table +=`<td></td>`;
            }

            for(var col = 0; col < excelDataColCount; col++){
                var cellData = getData(excelData,row,col);
                    table += `<td>`;
                    if(cellData){
                        var inputValue = `{"id":${cellData.id},"row":${row},"col":${col},"cell_value":"${cellData.cell_value}"}`;
                        var javascriptString = cellData.cell_value;
                        var company_name_error = 0;
                        var phpString = "{{$company_name}}";
                        table += `<input name="date"`;
                        table +=`type="radio" value='`+inputValue+`'>${cellData.cell_value}</input>`;
                    }
                    table += `</td>`

                }
            table += `</tr>`; 
        }   
        table += `</table>`;
        table += ``;
        const stepOneTableContainer = document.createElement("div");
        stepOneTableContainer.innerHTML = table;
        document.getElementById('step_two').appendChild(stepOneTableContainer);
        document.getElementById('step2_modal_btn').style.display = "block";
        document.getElementById('date_selector').style.color = "black";
        document.getElementById('date_selector').style.fontStyle = "italic";
        document.getElementById('date_selector').style.fontWeight = "900";

        document.getElementById('name_selector').style.color = "black";
        document.getElementById('name_selector').style.fontStyle = "normal";
        document.getElementById('name_selector').style.fontWeight = "400";
    }
    function check_step2(){
        var model = `<div id="step2_modal" class="modal" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Dates</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="closeModal('step2_modal')">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>Modal body text goes here.</p>
                            </div>
                            <div class="modal-footer">
                                <button id="step2_in_modal_btn" type="button" onClick="steps(3)" class="btn btn-primary">Confirm</button>
                            </div>
                            </div>
                        </div>
                        </div>`;

                        if(!document.getElementById('step2_modal')){
                        var div =  document.createElement("div");
                        document.getElementById('main-container').appendChild(div);
                        div.innerHTML = model;
                        }
                    document.getElementById('step2_modal').style.display = "block";
                    document.getElementById('step2_modal_btn').style.display = "none";
    }

// Step2 end's


// Step3 start
function step3(Data){
        //var step_modal_btn = document.getElementById('step1_in_modal_btn');
       // step_modal_btn.disabled = true;
      //  step_modal_btn.style.background = "#ccc";
        var companyData = Data;
        excelData = JSON.parse(companyData.excelData);
        var company_id = Data.company_id;
        var excelDataColCount =  companyData.excelDataColCount;
        var excelDataRowCount =  companyData.excelDataRowCount;
        var tablehead = `<table class="table table-hover table-bordered">`;
        var table = ``;
        var headCol =  `<tr><td></td>`;
        for(var row = -1; row <= excelDataRowCount; row++){
            table += `<tr>`;
            if(row >= 0){
            var rowNumber = parseInt(row)+1;
            table +=`<td class="bg-grey">`+rowNumber+`</td>`;
            }else{
            table +=`<td></td>`;
            }

            for(var col = 0; col <= excelDataColCount; col++){
                var cellData = getData(excelData,row,col);
                table += `<td class="line_item_row_`+row+` line_item_col_`+col+`">`;
                    if(row >= 0){
                    if(cellData){
                        var string = cellData.cell_value;
                       // console.log(string);
                            //#made change: because of language handling
                            var string = string.replace(/[^A-Za-z0-9.-\s]/g , '').trim();
                            //console.log(string);
                            //var string = string.replace(/[.]/g , '.');
                        var inputValue = '{"id":'+cellData.id+',"row":'+row+',"col":"'+col+'","cell_value":"'+string+'"}';
                        var javascriptString = cellData.cell_value;
                        var company_name_error = 0;
                        var phpString = "{{$company_name}}";
                        table += `  <input class="line_item_row_checked line_item_row_checked_`+row+` line_item_col_checked_`+col+` line_item_cell_`+row+`_`+col+`" id="line_item_cell_`+row+`_`+col+`" type="checkbox" value='`+inputValue+`'>`;  
                        var checkingChar = /[a-zA-Z]/g;
                        if(!checkingChar.test(cellData.cell_value)){
                        if(Number.isInteger(parseInt(cellData.cell_value))){
                        table += `${cellData.cell_value} </input>`;
                        }else{
                        table += `${cellData.cell_value} </input>`;
                        }
                        }else{
                            table += `${cellData.cell_value} </input>`;
                        }
                        
                        
                    }else{
                        table += `  <input class="line_item_row_checked line_item_row_checked_`+row+` line_item_col_checked_`+col+` line_item_cell_`+row+`_`+col+`" id="line_item_cell_`+row+`_`+col+`" type="checkbox" value=''>  </input>`;
                    }
                }else{
                    headCol += `<td class="bg-grey">`+getExcelColumn(col)+`</td>`; 
                    table += `<select  id="line_item_`+col+`" class="form-select form-control line_item_selector" onChange="lineItemSelect('line_item_`+col+`',`+col+`)">
                    <option value="0">-- Select particulars column ---</option>
                    <option value="1">Particulars</option>
                    </select>`; 
                }
                    
                }
               
            table += `</tr>`; 
            headCol +=`</tr>`;
        }           
        tablehead += headCol;
        tablehead += table;

        tablehead += `</table>`;
        tablehead += ``;
        const stepOneTableContainer = document.createElement("div");
        stepOneTableContainer.innerHTML = tablehead;
        document.getElementById('step_three').appendChild(stepOneTableContainer);
        document.getElementById('items_selector').style.color = "green";


        document.getElementById('step3_modal_btn').style.display = "block";
        document.getElementById('items_selector').style.color = "black";
        document.getElementById('items_selector').style.fontStyle = "italic";
        document.getElementById('items_selector').style.fontWeight = "900";
        document.getElementById('items_selector_icon').style.display = "inline-block";


        document.getElementById('name_selector').style.color = "black";
        document.getElementById('name_selector').style.fontStyle = "normal";
        document.getElementById('name_selector').style.fontWeight = "400";
        document.getElementById('name_selector_icon').style.display = "none";


    }
    function check_step3(){
        var lineItemList = document.querySelectorAll('.line_item_row_checked:checked');
        //console.log(lineItemList);
        if(lineItemList.length > 0){
        steps(4);
        var model = `<div id="step3_modal" class="modal" tabindex="-1" role="dialog" >
                        <div class="modal-dialog modal-xl" role="document" >
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Line Items</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="closeModal('step3_modal')">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div id="step_3_container">
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button id="step3_in_modal_btn" type="button" onClick="steps(4)" class="btn btn-primary">Confirm</button>
                            </div>
                            </div>
                        </div>
                        </div>`;
                    

                        if(!document.getElementById('step3_modal')){
                        var div =  document.createElement("div");
                        //document.getElementById('main-container').appendChild(div);
                        //div.innerHTML = model;
                        }

                    var table = `<table class="table table-hover table-bordered">`;
                    table += `<tr>
                                <td>Particulars</td>
                                <td>Debit</td>
                                <td>Credit</td>
                                </tr>`;
                    lineItemList.forEach(function (element){
                        var json_value = element.value;
                        console.log(json_value);
                        if(json_value){

                        json_value = JSON.parse(json_value);
                        table += `<tr>`;
                        table += `<td></td>`;
                        }
                        table += `<tr>`;
                        table += `<td>${json_value.cell_value}</td>`;
                        table += `<td style="width:20%"> xxx </td>`;
                        table += `<td style="width:20%"> xxx </td>`;
                        table += `</tr>`;

                    });
                    table += `</table>`;
                    var div_model_container =  document.createElement("div");
                    //document.getElementById('step_3_container').appendChild(div_model_container);
                    //div_model_container.innerHTML = table;
                    //document.getElementById('step3_modal').style.display = "block";
                    document.getElementById('step3_modal_btn').style.display = "none";
                }else{
                    alert("No Item Selected");
                }
    }

    function lineItemSelect(id,col){
    var selectElement = document.querySelectorAll('.line_item_selector');
    var lineItemCol = document.querySelectorAll('.line_item_col_checked_'+col);
    var lineItemRowChecked = document.querySelectorAll('.line_item_row_checked');
        lineItemRowChecked.forEach(function (element){
            element.style.display = "none";
        });
        var currentSelect = document.getElementById(id);
            selectElement.forEach(function (element){
            if(currentSelect.value != 0){
                if(element.id != id){
                    element.style.display = "none";
                }
            }else{
                element.style.display = "inline-block";
            }
    });

    if(currentSelect.value != 0){
        lineItemCol.forEach(function (element,index){
                    if(element.value){
                    element.checked = true;
                    element.style.display = "inline-block";
                    }
        });
    }

        if(currentSelect.value != 0){
            document.getElementById('step_three').style.display = "none";
            document.getElementById('step_four').style.display = "none";
            check_step3();
            document.getElementById('step_four').style.display = "block";
        }
    }

// Step3 end's



    function step4(data){
        //var step_modal_btn = document.getElementById('step3_in_modal_btn');
        //step_modal_btn.disabled = true;
        //step_modal_btn.style.background = "#ccc";
        var colCount = data.excelDataColCount;
        var lineItemList = document.querySelectorAll('.line_item_row_checked:checked');
        var object = JSON.parse(lineItemList[0].value);
        var SelectedlineItemListCount = lineItemList.length;
            var selectedCol = object.col;
            var table = ``;
            var headCol =  ``;
            headCol +=  `<tr><td></td>`;
            var tablehead =`<table class="table table-hover table-bordered">`;
            for(var dataNum = -1; dataNum <= SelectedlineItemListCount; dataNum++){
                table +=`<tr>`;
                if(dataNum >= 0){
                var rowNumber = parseInt(dataNum)+1;
                table +=`<td class="bg-grey">`+rowNumber+`</td>`;
                }else{
                table +=`<td></td>`;
                }
              
                    for( var colNum = 0;  colNum <= colCount;  colNum++ ){
                        if(dataNum >= 0){
                            var rowNum = parseInt(dataNum)+parseInt(object.row);
                            var cellValue = lineItemList[dataNum];
                           // console.log(cellValue);
                            table +=`<td>`
                            if(cellValue){
                            var cellIndexElement = cellValue.id.split('_');
                            cellIndexElement[4] = colNum;
                            table +=`<input type="checkbox"`;
                            if(colNum == selectedCol){
                                cellValue = document.getElementById(`${cellIndexElement.toString().replaceAll(',', '_')}`);
                                table +=` id="cd_cell_row_`+dataNum+`_col_`+colNum+`" class="cd_cells cd_row_`+dataNum+` col_`+colNum+` cd_selected_row"`;
                                table +=` checked  `;
                            }else{
                                cellValue = document.getElementById(`${cellIndexElement.toString().replaceAll(',', '_')}`);
                                table +=`id="cd_cell_row_`+dataNum+`_col_`+colNum+`" class="cd_cells cd_row_`+dataNum+` col_`+colNum+`"`;
                            }
                            table +=`value='`+cellValue.value+`'`;
                            table +=`> </input>`;
                            if(cellValue.value){
                                var checkingChar = /[a-zA-Z]/g;
                                if(!checkingChar.test(JSON.parse(cellValue.value).cell_value)){
                                    if(Number.isInteger(parseInt(JSON.parse(cellValue.value).cell_value))){
                                        table += `${JSON.parse(cellValue.value).cell_value} `;
                                    }else{
                                        table += `${JSON.parse(cellValue.value).cell_value} `;
                                    }
                                }else{
                                    table += `${JSON.parse(cellValue.value).cell_value} `;
                                }
                            }
                            }else{
                                if(colNum == selectedCol){
                                    table +=`<input type="checkbox"`;
                                    table +=` id="cd_cell_row_`+dataNum+`_col_`+colNum+`" class="cd_cells cd_row_`+dataNum+` col_`+colNum+` cd_selected_row"`;
                                    table +=` checked  `;
                                    table +=`value=''`;
                                    table +=`> </input>`;
                                }
                            table += '';
                            }
                            table +=`</td>`;
                        }else{
                            if(colNum != selectedCol){
                            table +=`<td>`;
                            table +=`<select id="cd_selected_row_0_col_`+colNum+`" class="cd_seletor cd_select_`+colNum+` form-control cd_selected_row_0 form-select" onchange="selectCD('`+colNum+`')">
                            <option value="0">-- Select entry type --</option>
                                        <option value="1">Credit</option>
                                        <option value="2">Debit</option>
                                        <option value="3">Credit & Debit</option>

                                    </select>`;       
                            table +=`</td>`;
                            }else{
                                table +=`<td> Particulars </td>`;
                            }
                            headCol += `<td class="bg-grey">`+getExcelColumn(colNum)+`</td>`; 
                        }
                            
                    }
                   
            }

            console.log(headCol);
            table +=`</tr>`;
            headCol +=`</tr>`;

            tablehead += headCol;
            tablehead += table;

            tablehead +=`</table>`;
            tablehead += ``;

            document.getElementById('step4_modal_btn').style.display = "block";
            document.getElementById('step4_modal_btn_bck').style.display = "block";
            // document.getElementById('credit_debit_selector').style.color = "black";
            // document.getElementById('credit_debit_selector').style.fontStyle = "italic";
            // document.getElementById('credit_debit_selector').style.fontWeight = "900";

            document.getElementById('items_selector').style.color = "black";
            document.getElementById('items_selector').style.fontStyle = "italic";
            document.getElementById('items_selector').style.fontWeight = "900";
            //document.getElementById('items_selector_icon').style.display = "none";
            var div =  document.createElement("div");
            document.getElementById('step_four').innerHtml = "kk";
            console.log(document.getElementById('step_four'));
            document.getElementById('step_four').append(div);
            div.innerHTML = tablehead;
            
    }

    function check_step4(){
        showLoader();
        let url = new URL(window.location.href);
        let params = new URLSearchParams(url.search);
        var start_date = params.get('start_date');
        var end_date = params.get('end_date');
        var cd_selector =  document.querySelectorAll('.cd_seletor');
        var creditFlag = [];
        var debitFlag = [];
        creditFlag[0] = 0;
        debitFlag[0] = 0;
    cd_selector.forEach(function (element,index){
            if(element.value == 1){
                if(creditFlag[0]){
                creditFlag['credit'].push(element.id);
                }else{
                creditFlag['credit'] = [];
                creditFlag['credit'].push(element.id);
                }
                creditFlag[0] = 1;
            }

            if(element.value == 2){
                if(debitFlag[0]){
                debitFlag['debit'].push(element.id);
                }else{
                debitFlag['debit'] = [];
                debitFlag['debit'].push(element.id);
                }
                debitFlag[0] = 1;
            }

            if(element.value == 3){
                console.log(element.value);
                if(debitFlag[0]){
                debitFlag['debit'].push(element.id);
                }else{
                debitFlag['debit'] = [];
                debitFlag['debit'].push(element.id);
                }
                debitFlag[0] = 1;

                
                if(creditFlag[0]){
                creditFlag['credit'].push(element.id);
                }else{
                creditFlag['credit'] = [];
                creditFlag['credit'].push(element.id);
                }
                creditFlag[0] = 1;
            
            }
        
    });

        if(creditFlag[0] == 0 || debitFlag[0] == 0){
            if(creditFlag[0] ==0){
            alert('Please select credit values');
            }
            if(debitFlag[0] == 0){
            alert('Please select debit values');
            }

        }else{
        var step_modal_btn = document.getElementById('step4_modal_btn');
        step_modal_btn.style.background = "#ccc";
            var finalArray = [];
            var lineItems = document.querySelectorAll('.cd_selected_row');
            var credit_cell = "";
            var debit_cell = "";
            var line_item_col = "";
            lineItems.forEach(function (element,index){
               var dataRow = [];
                if(element.value){
                    dataRow['section_name'] = JSON.parse(element.value);
                }else{
                    dataRow['section_name'] = "";
                }
                
                dataRow['credit'] ="";
                dataRow['debit'] ="";

                // debitFlag
                // creditFlag
                var debitColumn = "";
                var creditColumn = "";
                var debitCellValue = 0;
                var creditCellValue = 0;
                

        debitFlag['debit'].forEach(function (debitElement,debitIndex){
            // console.log("Debit Element",debitElement);
            creditFlag['credit'].forEach(function (creditElement,creditIndex){
                // console.log("Credit Element",debitElement);
                var debitColumn = document.getElementById(debitElement);
                var creditColumn = document.getElementById(creditElement);

                

                debitColumn = debitColumn.classList[1].split("_")[2];
                creditColumn =  creditColumn.classList[1].split("_")[2];
                var debitValue = document.getElementById('cd_cell_row_'+index+'_col_'+debitColumn);
                    //console.log(debitValue);
                var creditValue = document.getElementById('cd_cell_row_'+index+'_col_'+creditColumn);
                //console.log(creditValue);

                if(debitElement != creditElement){
                if(creditValue){
                    if(creditValue.checked){
                        if(creditValue.value){
                            dataRow['credit'] = JSON.parse(creditValue.value);
                            creditCellValue = JSON.parse(creditValue.value).cell_value;
                           // console.log(creditCelValue);
                        }else{
                            dataRow['credit'] ="";
                            creditCellValue = 0;
                        }
                    }
                }else{
                    dataRow['credit'] = "";
                }
                
                if(debitValue){
                    if(debitValue.checked){
                        if(debitValue.value){
                            dataRow['debit'] = JSON.parse(debitValue.value);
                            debitCellValue = JSON.parse(debitValue.value).cell_value;
                        }else{
                            dataRow['debit'] = "";
                            debitCellValue = 0;
                        }
                    }
                }else{
                    dataRow['debit'] = "";
                }
            }else{
            //Selecting Credit & Debit Single Column

            if(creditValue){

                    if(creditValue.checked){
                        if(creditValue.value){
                            var creditValue1 = JSON.parse(creditValue.value).cell_value;
                            if(creditValue1.includes('(') || creditValue1 < 0){
                            dataRow['credit'] = JSON.parse(creditValue.value);
                            creditCellValue = JSON.parse(creditValue.value).cell_value;

                            }
                    }else{
                        dataRow['credit'] ="";
                        creditCellValue = 0;
                    }
                }
            }else{
                dataRow['credit'] = "";
            }

            if(debitValue){
                    if(debitValue.checked){
                        if(debitValue.value){
                            var debitValue1 = JSON.parse(debitValue.value).cell_value;
                            if(debitValue1 >= 0){
                            dataRow['debit'] = JSON.parse(debitValue.value);
                            debitCellValue = JSON.parse(debitValue.value).cell_value;
                            }
                        }else{
                            dataRow['debit'] = "";
                            debitCellValue = 0;
                        }
                    }
            }else{
                dataRow['debit'] = "";
            }

            }
                debit_cell = debitColumn;
                credit_cell = creditColumn;



            });
        });

                var regExp = /[a-zA-Z]/g;
                if(dataRow['section_name'] != "" ){
                    console.log(dataRow['section_name'].cell_value);
                    if(debitCellValue != "" || creditCellValue != "" || dataRow['section_name'].cell_value.toLowerCase() == "assets" || dataRow['section_name'].cell_value.toLowerCase() == "liabilities" || dataRow['section_name'].cell_value.toLowerCase() == "expense" || dataRow['section_name'].cell_value.toLowerCase() == "income"){
                        if(regExp.test(debitCellValue) == false && regExp.test(creditCellValue) == false){
                            
                            line_item_col = JSON.parse(element.value);
                            line_item_col = line_item_col.col;
                            
                            finalArray.push({ ...dataRow});
                        }
                    }
                }
            });
            var json = { ...finalArray };
            console.log(json);
            var companyName = document.querySelector('input[name="company_name"]:checked').value;
            var request = $.ajax({
            url: "{{url('excel-config',['company_id'=>$company_id])}}",
            type: "POST",
            data: {"data":json,"_token":"{{ csrf_token() }}","start_date":start_date,"end_date":end_date,"company_name":companyName,"debit_col":debit_cell,"credit_col":credit_cell,"line_item_col":line_item_col},
            dataType: "json"
            });
        
            request.done(function(msg) {
                    if(msg.success == true){
                    var trial_id =  msg.trial_id;
                    window.location = '{{env("APP_URL1")}}mapping/{{$company_id}}/'+trial_id;
                    }
            });
        }
    }

    function selectCD(id){
    var cd_selected_colID = document.getElementById('cd_selected_row_0_col_'+id);
    var cd_selected_col = document.querySelectorAll('.col_'+id);
        if(cd_selected_colID.value != 0){
            // console.log(id);
            if(cd_selected_colID.value == 3){
                $('.cd_seletor').css('display','none');
                $('#cd_selected_row_0_col_'+id).css('display','inline-block');
            }else{
                $('.cd_seletor').css('display','inline-block');
            }
            
            cd_selected_col.forEach(function (element,index){
                element.checked = true;
                element.style.display = "inline-block";
            });
        }else{
            cd_selected_col.forEach(function (element,index){
                element.checked = false;
                element.style.display = "none";
            });
        }  
    }

    function closeModal(id){
        document.getElementById(id).style.display = "none";
        document.getElementById(id+"_btn").style.display = "block";
    }

    function getData(Array,row,col){
            var row = row;
            var col = col;
            let obj = excelData.find((o, i) => {
            if (o.col == col && o.row == row) {
                return excelData[i];
            }        
            });
            return obj;
    }

steps(1);

function steps(stepCount){

    var request = $.ajax({
    url: "{{url('import-excel-format',['company_id'=>$company_id])}}",
    type: "POST",
    data: {callType : "default","_token": "{{ csrf_token() }}"},
    dataType: "json"
    });

    request.done(function(msg) {
        if(stepCount == 1){
            step1(msg)
        }
        if(stepCount == 2){
            document.getElementById('step1_modal').style.display = "none";
            document.getElementById('step_one').style.display = "none";
            document.getElementById('name_selector').style.color = "black";
            document.getElementById('date_selector').style.color = "green";
            step2(msg)
        }

        if(stepCount == 3){
           // document.getElementById('step1_modal').style.display = "none";
            document.getElementById('step_one').style.display = "none";
           // document.getElementById('date_selector').style.color = "black";
            //document.getElementById('items_selector').style.color = "green";
            step3(msg)
        }

        if(stepCount == 4){
           // console.log(stepCount);
            //document.getElementById('step3_modal').style.display = "none";
            document.getElementById('step_three').style.display = "none";
           // document.getElementById('items_selector').style.color = "black";
           // document.getElementById('credit_debit_selector').style.color = "green";
            step4(msg)
        }
        
    });

    request.fail(function (msg) {
            console.log(msg);
    });
}


</script>

@endsection