@extends('layouts.app')
@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">{{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;">{{trans('Balance Sheet')}}</button>
            <button class="btn type_selector btn-outline-dark" id="delete_selector" style="background-color:#f65454;">{{trans('Remove')}}</button>
            <div style="text-align:right; width:100%;">
            <button class="btn btn-outline-dark" id="unselected-filter-btn"  onclick="getUnselect()">{{trans('Un-Selected')}}</button>
            <a  style="color:black;" href="{{url('/trial_balance',['id'=>$report_id])}}" class="btn btn-success export-btn">{{trans('View Trial Balance')}}</a>
            <a class="btn btn-secondary export-btn" style="padding:0px 5px; color:white;" href="{{url()->full()}}">{{trans('Show All')}}</a>
            <button class="export-btn btn btn-secondary" 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%"  style="display:flex;"><span><input  type="checkbox" id="select_all_heading"></span><span>Heading</span></th>
                </tr>
                                @foreach($trialBalances->TrialBalanceItem as $trialBalance)
                
                @if($trialBalance->order != 0)
                @if(strtolower(str_replace(' ', '', $trialBalance->section_name)) != "grandtotal")
                @if($trialBalance->debit_value || $trialBalance->credit_value)