@extends('layouts.app',['dashBoardTitle'=>'MAPPING DATA'])
@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;
    }
    .checkbox{
        display:none;
    }
    .option-grid{
        display:flex;
        gap:10px;
        padding:5px;
        position: sticky;
        top:0;
        background-color:white;
    }
    /* .type_selector{
       // cursor:pointer;
    } */
    .type_selector.active{
        background-color:#ccc !important;
    }

    #selectable_table{
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
        
    }

    </style>
    


<div id="main-container">
    <!-- <div class="card ">
        <div class=" card-header  bg-al">
            <div style="height:11px;width:270px">
            <a href="{{url('dashboard',['id'=>$company_id])}}" class="btn clr-al"style="border-color:white">
                <i class="fa-sharp fa-solid fa-arrow-left clr"></i>
                </a>
            </div>
            <div class="text-center bold head-capt">
            {{trans('Mapping Data')}}
            </div>
        </div> -->



<div class="card-body clr-al">
        <div class="row grid-row">
        <div class="option-grid col grid-col">
            <!-- <button class="type_selector" id="income_selector" style="background-color:#005eff; padding:0px 5px;">Income</button> -->
            <button class="btn type_selector btn-outline-dark" id="expense_selector" style="background-color:#f2d6d6;white-space: nowrap;margin-left:10px;width:220px">{{trans('Profit & Loss')}}</button>
            <!-- <button class="type_selector" id="asset_selector" style="background-color:#2a6c9a; padding:0px 5px;">Assets</button> -->
            <button class="btn type_selector btn-outline-dark" id="liabilite_selector" style="background-color:#fff2d1;white-space: nowrap;width:220px">{{trans('Balance Sheet')}}</button>
                <button class="btn type_selector btn-outline-dark" id="delete_selector" style="background-color:#f65454;width:220px">{{trans('Remove')}}</button>
                <button class="btn btn-outline-dark"style="width:310px" id="unselected-filter-btn"  onclick="getUnselect()">{{trans('Show Un-Selected')}}</button>
            <div style="text-align:right; width:100%;">
            <a class="btn btn-secondary export-btn" style="padding:0px 5px; color:white;width:140px" href="{{url()->full()}}">{{trans('Show All')}}</a>
            <a  style="color:black;width:150px" href="{{url('/trial_balance',['id'=>$report_id])}}" class="btn btn-success export-btn">{{trans('View Trial Balance')}}</a>
            <button class="export-btn btn btn-secondary" style="width:150px"href="report" id="save_change_btn" onclick="saveChangeBtn()" disabled>Save change</buuton>

            </div>
        </div>

        <div cass="col grid-col table-wrapper-scroll-y my-custom-scrollbar">
            <table class="table table-hover table-bordered " id="selectable_table">
                <tr class="bgcl" style="position: sticky; top:6%;">
                    <th>{{trans('Particular')}}</th>
                    <th>{{trans('Debit')}}</th>
                    <th>{{trans('Credit')}}</th>
                    <!-- <th width="5%" >
                     <span><input  type="checkbox" id="select_all_heading"></span> 
                    <span>Heading</span></th> -->
                    <th width="5%"style="display: contents;">
                    <span style="margin-left: 5px;"><input  type="checkbox" id="select_all_heading"></span>
                    <span style="padding:5px;">Heading</span></th>
                </tr>

                    
                    @foreach($trialBalances['trial_balance'] as $trialBalanceItem)
                                        <tr onclick="selectEntry({{$key_id}},'entry_{{$key_id}}')"   id="checkbox_row_{{$key_id}}" 
                    style=" background-color:"
                    
                    
                    > 
                    <td>
                    <input class="checkbox liability entry_input_{{$key_id}}" name="liability" type="checkbox" value="{{$key_id}}">
                    <input class="checkbox assets entry_input_{{$key_id}}" name="assets" type="checkbox" value="{{$key_id}}">
                    <input class="checkbox expense entry_input_{{$key_id}}" name="expense" type="checkbox" value="{{$key_id}}"> 
                    <input class="checkbox income entry_input_{{$key_id}}" name="income" type="checkbox" value="{{$key_id}}"> {{$trialBalanceItem['section_name']}}</td>
                    <td>@if($trialBalanceItem['debit_value'])  {{numbermillions($trialBalanceItem['debit_value'])}} @else  @endif</td>
                    <td>@if($trialBalanceItem['credit_value'])  {{numbermillions($trialBalanceItem['credit_value'])}} @else  @endif</td>
                    <td><input class="form-check-input" type="checkbox" name="data_type" id="select_data_type_{{$key_id}}" 

                    
                    onclick="selectHeading({{$key_id}},{{$trialBalanceItem['key_id']}})"></td>
                    </tr>
                    @endforeach




                </table>
        </div>

        
    </div>
</div>
        
</div>


<script>

    function showLoader(){
        $('#loader').show();
    }

    function hideLoader(){
    setTimeout(function(){
    $("#loader").fadeOut(1000);
    }, 500);
    }

    function selectHeading(item_id,id){
        var selectData = $('#select_data_type_'+item_id).is(":checked");
        console.log(id);
            var request = $.ajax({
            url: "{{url('update-heading-item')}}",
            type: "POST",
            data: {"_token": "{{ csrf_token() }}", "checked":selectData,"id":id,"company_id":"{{$company_id}}"},
            dataType: "json"
            });
            request.done(function(msg) {
            });
    }

    function checktotalNUmbercheckBox(){
        var checkedBox = $('.form-check-input:checked').length-1;
        var checkBox = $('.form-check-input').length-1;

        if(checkedBox == checkBox){
            $('#select_all_heading').prop('checked', true);
        }else{
            $('#select_all_heading').prop('checked', false);
        }
    }


    function saveChangeBtn(){
        var getMapData = localStorage.getItem('addEntries');
            getMapData = JSON.parse(getMapData);
            var request = $.ajax({
            url: "{{url('mapping-item',['company_id'=>$company_id])}}",
            type: "POST",
            data: {"_token": "{{ csrf_token() }}", "data":getMapData},
            dataType: "json",
            async: false,
            });
            $('#loader').show();
            
            request.done(function(msg) {
                var deleteMapData = localStorage.getItem('deleteEntries');
                deleteMapData = JSON.parse(deleteMapData);
                var request = $.ajax({
                url: "{{url('delete-map-item',['company_id'=>$company_id])}}",
                type: "POST",
                data: {"_token": "{{ csrf_token() }}", "data":deleteMapData},
                dataType: "json",
                async: false,
                });

                request.done(function(msg) {
                    console.log(deleteMapData);
                    location.reload();
                });
               
            });
    }

    function addEntriesInArray(data,type){
        mappingData = null;
        if(type == "delete"){
            mappingData = localStorage.getItem('deleteEntries');
            mappingData = JSON.parse(mappingData);
            mappingData.push(data);
            mappingData = JSON.stringify(mappingData);
            localStorage.setItem('deleteEntries',mappingData);
            mappingData = localStorage.getItem('deleteEntries');
            
        }
        
        if(type == "add"){
            var mappingDataAdd = [];
            mappingDataAdd = localStorage.getItem('addEntries');
            mappingDataAdd = JSON.parse(mappingDataAdd);
            mappingDataAdd.push(JSON.stringify({...data}));
            mappingDataAdd = JSON.stringify(mappingDataAdd);
            localStorage.setItem('addEntries',mappingDataAdd);
            mappingData = localStorage.getItem('addEntries');
        }
    }





    $( document ).ready(function() {
        localStorage.removeItem("addEntries");
        localStorage.removeItem("deleteEntries");
        checktotalNUmbercheckBox();
        var addEntries  = new Array();
        var deleteEntries  = new Array();
        // ArrayEntries['add'] = new Array();
        // ArrayEntries['delete'] = new Array();
        addEntries = JSON.stringify(addEntries);
        localStorage.setItem('addEntries',addEntries);

        deleteEntries = JSON.stringify(deleteEntries);
        localStorage.setItem('deleteEntries',deleteEntries);
       



        localStorage.removeItem("first_element");
       // localStorage.removeItem("last_element");
       //select_data_type
       $('#select_data_type').on('click', function() {
           var selectData = $('#select_data_type').is(":checked");
            checktotalNUmbercheckBox();
        });

        $('#select_all_heading').on('change', function() { 
            var trialBalanceId = `{{$report_id}}`; 
            //console.log(trialBalanceId);
            if($('#select_all_heading').is(":checked")){
                $(".form-check-input").prop('checked', true);
                checktotalNUmbercheckBox();

                var request = $.ajax({
                url: "{{url('select-heading-all',['company_id'=>$company_id])}}",
                type: "POST",
                data: {"_token": "{{ csrf_token() }}", "id":trialBalanceId, "is_checked":1},
                dataType: "json",
                async: false,
                });
                request.done(function(msg) {
                    
                });
                 

            }else{
                $(".form-check-input").prop('checked', false);
                
                var request = $.ajax({
                url: "{{url('select-heading-all',['company_id'=>$company_id])}}",
                type: "POST",
                data: {"_token": "{{ csrf_token() }}", "id":trialBalanceId, "is_checked":0},
                dataType: "json",
                async: false,
                });
                request.done(function(msg) {
                    
                });

            }

                //form-check-input
        });
    });
    

    var shitKeyUp;
    $(document).on('keyup keydown', function(e){
        if(e.type == "keyup"){
        //console.log("hello");
        //localStorage.removeItem("first_element");
        //localStorage.removeItem("last_element");
        shitKeyUp = 1;
        }
        
    });


    function getUnselect(){
        var rows = document.querySelectorAll('tr');
        rows.forEach(function (element,index){
            if(element.style.backgroundColor){
                element.style.display = "none";
                element.style.visibility = "hidden";
            }

        });
    }

    function selectTable(){
        console.log(window.event);
    }

    function deleteEntry(id){
        $('#save_change_btn').css('background-color','#22b3ab');
        addEntriesInArray(id,'delete');
        // var request = $.ajax({
        //     url: "{{url('delete-map-item',['company_id'=>$company_id])}}",
        //     type: "POST",
        //     data: {"_token": "{{ csrf_token() }}", "id":id},
        //     dataType: "json",
        //     async: false,
        //     });
        //     request.done(function(msg) {
                
        //     });
            $('#checkbox_row_'+id).css('background-color','white');
    }

    function addEntry(id,selectType){
        $('#save_change_btn').css('background-color','#22b3ab');
            var data = new Array();
            data['id'] = id;
            data['type'] = selectType;
            addEntriesInArray(data,'add');
        // var request = $.ajax({
        //     url: "{{url('mapping-item',['company_id'=>$company_id])}}",
        //     type: "POST",
        //     data: {"_token": "{{ csrf_token() }}", "id":id,"type":selectType},
        //     dataType: "json",
        //     async: false,
        // });

        // request.done(function(msg) {
        // });

    }


    function selectEntry(id,row,keyEvent){

        $('#save_change_btn').css('background-color','#22b3ab');
        $('#save_change_btn').removeAttr('disabled');

        $('#selectable_table').mouseup(function(e){
            document.getElementById("selectable_table").style.cursor = "default";
        });

        $('#selectable_table').mousedown(function(e){
            if(e.buttons == 1){
                document.getElementById("selectable_table").style.cursor = "cell";
            }
        });
    

        var selectId  = $('.type_selector.active').attr('id');
        var selectType = "";
        if(selectId == "expense_selector"){

            selectType = "expense";
            console.log(document.getElementById('checkbox_row_'+id));
            var colorRBG = document.getElementById('checkbox_row_'+id).style.backgroundColor;
            if(window.event.type == "click" && 
                !window.event.ctrlKey && 
                !window.event.shiftKey){
                    localStorage.setItem("first_element",id);
                    console.log($('#checkbox_row_'+id));
                    $('#checkbox_row_'+id).css('background-color','#f2d6d6');
                    $('.entry_input_'+id).prop('checked', false);
                    $('.entry_input_'+id+'.active_box').prop('checked', true);
                   addEntry(id,selectType);
                    
                    
            }else if(window.event.type == "click" && 
                colorRBG === "rgb(42, 149, 39)" && 
                window.event.ctrlKey){
                $('#checkbox_row_'+id).css('background-color','white');
                $('.entry_input_'+id).prop('checked', false);
                $('.entry_input_'+id+'.active_box').prop('checked', false);
                deleteEntry(id);
            }else if(window.event.type == "click" && window.event.shiftKey){
                var first_element = localStorage.getItem("first_element");
                if(first_element){
                    if(first_element > id){
                        first_element = parseInt(first_element) + parseInt(id);
                        id = parseInt(first_element) - parseInt(id);
                        first_element = parseInt(first_element) - parseInt(id);
                    }
                    
                    for(var i = first_element; i <= id; i++){
                        
                        $('#checkbox_row_'+i).css('background-color','#f2d6d6');
                        $('.entry_input_'+i).prop('checked', false);
                        $('.entry_input_'+i+'.active_box').prop('checked', true);
                       addEntry(i,selectType);
                        if(i == id){
                            
                        }else{
                            
                        }
                    }

                        

                }else{
                    localStorage.setItem("first_element",id);
                    $('#checkbox_row_'+id).css('background-color','#f2d6d6');
                    $('.entry_input_'+id).prop('checked', false);
                    $('.entry_input_'+id+'.active_box').prop('checked', true);
                    addEntry(id,selectType);
                }
            }
        }

        if(selectId == "liabilite_selector"){
            
            selectType = "liabilite";
            var colorRBG = document.getElementById('checkbox_row_'+id).style.backgroundColor;
            if(window.event.type == "click" && 
                !window.event.ctrlKey && 
                !window.event.shiftKey){
                    localStorage.setItem("first_element",id);
                    $('#checkbox_row_'+id).css('background-color','#fff2d1');
                    $('.entry_input_'+id).prop('checked', false);
                    $('.entry_input_'+id+'.active_box').prop('checked', true);
                   addEntry(id,selectType);
                    
                    
            }else if(window.event.type == "click" && 
                colorRBG === "rgb(241, 138, 138)" && 
                window.event.ctrlKey){
                $('#checkbox_row_'+id).css('background-color','white');
                $('.entry_input_'+id).prop('checked', false);
                $('.entry_input_'+id+'.active_box').prop('checked', false);
                deleteEntry(id);
                
            }else if(window.event.type == "click" && window.event.shiftKey){
                var first_element = localStorage.getItem("first_element");
                if(first_element){
                    if(first_element > id){
                        first_element = parseInt(first_element) + parseInt(id);
                        id = parseInt(first_element) - parseInt(id);
                        first_element = parseInt(first_element) - parseInt(id);
                    }
                    
                    for(var i = first_element; i <= id; i++){
                        
                        console.log(i+"  BS");

                        $('#checkbox_row_'+i).css('background-color','#fff2d1');
                        $('.entry_input_'+i).prop('checked', false);
                        $('.entry_input_'+i+'.active_box').prop('checked', true);
                        addEntry(i,selectType);
                        if(i == id){
                            
                        }else{
                            
                        }
                    }
                    

                }else{
                    localStorage.setItem("first_element",id);
                    $('#checkbox_row_'+id).css('background-color','#fff2d1');
                    $('.entry_input_'+id).prop('checked', false);
                    $('.entry_input_'+id+'.active_box').prop('checked', true);
                    
                }
            }
        }

        if(selectId == "delete_selector"){
        
        if(window.event.type == "click" && 
            !window.event.ctrlKey && 
            !window.event.shiftKey){
                localStorage.setItem("first_element",id);
                $('#checkbox_row_'+id).css('background-color','white');
                $('.entry_input_'+id).prop('checked', false);
                $('.entry_input_'+id+'.active_box').prop('checked', false);
                deleteEntry(id);
                

            }else if(selectId == "delete_selector"){
            $('#checkbox_row_'+id).css('background-color','white');
            $('.entry_input_'+id).prop('checked', false);
            $('.entry_input_'+id+'.active_box').prop('checked', false);
            deleteEntry(id);
            
            if(window.event.type == "click" && window.event.shiftKey){
                var first_element = localStorage.getItem("first_element");
                if(first_element){
                    if(first_element > id){
                        first_element = parseInt(first_element) + parseInt(id);
                        id = parseInt(first_element) - parseInt(id);
                        first_element = parseInt(first_element) - parseInt(id);
                    }
                    for(var i = first_element; i <= id; i++){
                        $('#checkbox_row_'+i).css('background-color','white');
                        $('.entry_input_'+i).prop('checked', false);
                        $('.entry_input_'+i+'.active_box').prop('checked', false);
                        deleteEntry(i);
                        if(i == id){
                            
                        }else{
                            
                        }
                    }
                    
            }else{
                localStorage.setItem("first_element",id);
                $('#checkbox_row_'+id).css('background-color','white');
                $('.entry_input_'+id).prop('checked', false);
                $('.entry_input_'+id+'.active_box').prop('checked', false);
                deleteEntry(id);
                
                    }
                }
            }
        }
    
    }

    $( document ).ready(function() {
        $('.checkbox_row').click(function(event){
                //console.log(event.target);
        });

        $(".type_selector").click(function(event){
            var selectId  = event.target.id;
            if(selectId == "income_selector"){
                $(".checkbox").removeClass("active_box");
                $(".income").addClass("active_box");
            }

            if(selectId == "expense_selector"){
                $(".checkbox").removeClass("active_box");
                $(".expense").addClass("active_box");
                localStorage.removeItem("first_element");
            }

            if(selectId == "asset_selector"){
                $(".checkbox").removeClass("active_box");
                $(".assets").addClass("active_box");
            }


            if(selectId == "liabilite_selector"){
                $(".checkbox").removeClass("active_box");
                $(".liability").addClass("active_box");
                localStorage.removeItem("first_element");
            }

            if(selectId == "delete_selector"){
                localStorage.removeItem("first_element");
            }

                $( ".type_selector" ).removeClass( "active" );
                $("#"+selectId).addClass("active");
        });
    });
</script>
@endsection