@extends(!$download ?  'layouts.app' : 'layouts.app_with_out_nav')
    @section('script')
    <link rel="stylesheet" href="{{asset('css/vsk_css_script.css')}}">
    @endsection
@section('content')

<div class="container"  id="main-container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between bg-al bold">
                @if(!$download)
                <div>
                <a  href="{{url('tax-report',['id'=>$id])}}" class="btn clr-al"style="border-color:white">
                    <i class="fa-sharp fa-solid fa-arrow-left clr"></i>
                </a>
                </div>
                @endif
                <div class="p-lt">
                {{ __('ARTICLE 32') }}
</div>
                @if(!$download)
                <div class="d-flex justify-content-end">
                <a title="Trial Balance" class="export-btn btn btn-success btn-wdth"  href="{{url('trial_balance',['id'=>$id])}}"><i class="fa-regular fa-sheet-plastic"></i>&nbsp;TB</a>
                <a title="Profit & Loss" class="export-btn btn btn-success btn-wdth"  href="{{url('profit_loss',['id'=>$id])}}"><i class="fa-solid fa-money-bills"></i>&nbsp;P&L</a>
                <a title="Balance Sheet" class="export-btn btn btn-success btn-wdth" href="{{url('balance_sheet',['id'=>$id])}}"><i class="fa-sharp fa-solid fa-file-contract"></i>&nbsp;BS</a>
                <a title="Tax Report" class="export-btn btn btn-success btn-wdth"  href="{{url('tax-report',['id'=>$id])}}"><i class="fa-regular fa-file-pen"></i>&nbsp;TR</a>
                </div>
                @endif
    </div>

    <table class="table table-bordered fnt" id="">
        <tr class="bd mrn bg">
            <td class="bd head-capt" style="padding-right:320
            px;">
            {{$companyDetails->taxpayer}}
            </td>
            <td style="
    width: 30%"> <span style="float:right">T.R.NO : {{($companyDetails->tax_registration_number)}}</span>
          </td>
            <td style="
    width: 88px;
">
            From Date:
            </td>
            <td style="
    width: 106px;
">
            {{date('d-M-Y',strtotime(@$trialBalanceDetails->from))}}
            </td>
            <td style="
    width: 71px;
">
            To Date:
            </td>
            <td style="width:110px">
            {{date('d-M-Y',strtotime(@$trialBalanceDetails->to))}}
            </td>
        </tr>
</table>

 </table>

    <table class="table table-bordered fnt">
        <tr class="mrn bd">
        <td >Entertainment expenditure</td>
        <td >Expenditure </td>
        <td >% disallowed </td>
        <td >Disallowance </td>
        <td >Action </td>
        </tr>
        @php 
            $entertainmentExpTotal = 0;
        @endphp
        @foreach($entertainmentExps as $entertainmentExp)
        @php
            $data = json_decode($entertainmentExp->data);
            $entertainmentExpTotal += $data->disallowance;
        @endphp
            <tr>
                <td>{{$data->entertainment_expenditure}}</td>
                <td class="tr">{{number_format($data->expenditure,2)}}</td>
                <td  class="tr">{{$data->disallowed}}</td>
                <td  class="tr">{{number_format(@$data->disallowance,2)}}</td>
                <td>
                <div class="d-flex" style="gap:5px;">
                    <button class="btn btn-success" onclick='openModel(`{
                                                    id:"{{$entertainmentExp->id}}",
                                                    article_type:"article32",
                                                    form_type:"entertainment_expenditure",
                                                    inputs:[
                                                        {
                                                            label:"Entertainment expenditure",
                                                            name:"entertainment_expenditure",
                                                            placeholder:"Eg: Telephone charges",
                                                            value:"{{$data->entertainment_expenditure}}",
                                                            id:"uapdate_entertainment_expenditure",
                                                            isRequired:"1",
                                                            editable:"0"
                                                        },
                                                        {
                                                            label:"Expenditure",
                                                            name:"expenditure",
                                                            placeholder:"Eg: 100",
                                                            value:"{{$data->expenditure}}",
                                                            id:"uapdate_expenditure",
                                                            isRequired:"1",
                                                            editable:"0",
                                                            is_function:"1",
                                                            function_type:"onKeyup",
                                                            function_body:"[uapdate_expenditure,uapdate_disallowed,uapdate_disallowance]",
                                                            function_name:"calPer"
                                                            
                                                        },
                                                         {
                                                            label:"disallowed",
                                                            name:"disallowed",
                                                            placeholder:"Eg: 100",
                                                            value:"{{$data->disallowed}}",
                                                            id:"uapdate_disallowed",
                                                            isRequired:"1",
                                                            editable:"0",
                                                            is_function:"1",
                                                            function_type:"onKeyup",
                                                            function_body:"[uapdate_expenditure,uapdate_disallowed,uapdate_disallowance]",
                                                            function_name:"calPer"
                                                        },
                                                        {
                                                            label:"Disallowance",
                                                            name:"disallowance",
                                                            placeholder:"Eg: 100",
                                                            value:"{{$data->disallowance}}",
                                                            id:"uapdate_disallowance",
                                                            isRequired:"1",
                                                            editable:"1"
                                                        }
                                                        ]}`)'>
                    <i class="fa-sharp fa-regular fa-pen-to-square"></i>
                    </button>
                    <button class="btn btn-success" onclick='deleteModel(`{
                            id:"{{$entertainmentExp->id}}"
                        }`)'> 
                
    
                    <i class="fa-sharp fa-regular fa-trash"></i>
                    </button>
                </div>
                </td>
            </tr>
        @endforeach

        <tr class="blu">
            <form method="POST" action="{{url('/tax-report/article/add',['id'=>$id])}}" onsubmit="return validateForm()">
            <td>
                @csrf
                <input name="article_type"  class="form-control" type="hidden" value="article32" placeholder="Eg: 10000"  required>
                <input name="form_type"  class="form-control" type="hidden" value="entertainment_expenditure" placeholder="Eg: 10000" required>
                <input name="entertainment_expenditure" class="form-control string" type="text" id="myField" required>
            </td>
            <td>
                <input id="expenditure_0" name="expenditure" class="form-control tr numeric" type="text" required>
            </td>
            <td>
                <input id="disallowed_0" name="disallowed" class="form-control tr numeric" type="text" required>
            </td>
            <td>
                <input id="disallowance_0"  name="disallowance" class="form-control tr" type="text" readonly required>
            </td>
            <td>
            <button type="submit" class="btn btn-success">Add</button>
            <!-- <div class="d-flex" style="gap:5px;">
                    <button class="btn btn-success">
                    <i class="fa-sharp fa-regular fa-pen-to-square"></i>
                    </button>
                    <button class="btn btn-success">
                    <i class="fa-sharp fa-regular fa-trash"></i>
                    </button>
            </div> -->
            </td>
        </form>
        </tr>
        <tr class="mrn bd bg">
            <td>Total disallowance </td>
            <td></td>
            <td class="tr"> </td>
            <td colspan="2" class="tr">{{number_format($entertainmentExpTotal,2)}}</td>

        </tr>
    </table>


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

<script>

function importfunction(id){
        $("#myModal").toggle();
        // console.log(company_id);
    }

    function importclose(){
        $("#myModal").toggle();
        document.getElementById('model_container').remove();
    }

function deleteModel(data){
        eval('var obj='+data);
        var objData = {...obj};
        console.log(objData);

        var model = `<div class="modal" id="myModal" role="dialog">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title">Are you sure you want to delete</h4>
                <button type="button" class="close import-excel-btn" data-dismiss="modal" onclick="importclose()">&times;</button>
                </div>
                <div class="modal-body">
                
                    <div class="form-group row text-center">
                    <div class="col-6 text-center">
                        <button type="button" class="close import-excel-btn btn btn-secondary" data-dismiss="modal" onclick="importclose()">Cancel</button>
                    </div>

                    <div class="col-6 text-center">
                        <form method="POST" action="{{url('/tax-report/article/delete',['id'=>$id])}}">
                        @csrf
                            <input type="hidden" name="data_id" value="`+objData.id+`"/>
                            <button type="submit" class="close import-excel-btn btn btn-danger" data-dismiss="modal" >Delete</button>
                        </from>
                    </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                </div>
            </div>
            </div>
        </div>
        </div>`;

        var elem = document.createElement('div');
        elem.setAttribute("id", "model_container");
        elem.innerHTML = model;
        document.getElementById('main-container').appendChild(elem);
        importfunction(1);
    }

    function calPer(data){
            var percantage = data[1].value;
            var amount = data[0].value;
            var calculatedPer =  parseInt(amount)/100 * parseInt(percantage);
            var amount_filed = data[2];
            amount_filed.value = calculatedPer;
    }


    function openModel(data){
        eval('var obj='+data);
        var objData = {...obj};
        var inputArray = objData.inputs;
            //console.log(inputArray);
            var model = `<div class="modal" id="myModal" role="dialog">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title">Update</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('/tax-report/article/add',['id'=>$id])}}">
                    <div>
                    @csrf
                        <input name="data_id" type="hidden" id="update_data_id" value="`+objData.id+`"/>
                        <input name="article_type"  class="form-control" type="hidden" value="`+objData.article_type+`" placeholder="Eg: 10000"  required>
                        <input name="form_type"  class="form-control" type="hidden" value="`+objData.form_type+`" placeholder="Eg: 10000" required>
                    </div>
                    <div class="row">`;
                    inputArray.forEach((element) => {
                        // console.log(element.isRequired);
                        var isRequired;
                        if(element.isRequired){
                            isRequired = "required";
                        }else{
                            isRequired = "";
                        }
                        
                        var isEnable;
                        if(parseInt(element.editable)){
                            isEnable ="readonly";
                            console.log(isEnable);
                        }else{
                            var isEnable ="";
                        }
                        model +=`<div class="col-6">
                            <label class="form-label">`+element.label+`</label>
                            <input class="form-control" name="`+element.name+`" type="text" placeholder="`+element.placeholder+`"  value="`+element.value+`"  id="`+element.id+`"  `+isEnable+`  `+isRequired+`   `;
                            if(element.is_function){
                                model +=element.function_type+`=`+element.function_name+`(`+element.function_body+`)`;
                            }
                            model +=` ></div>`;
                        });
                        model +=`<div style='margin:10px 0;'><button class="export-btn btn btn-success" type="submit" name="submit-excel" >Update</button></div>
                    </from>
                </div>
                <div class="modal-footer">
                </div>
            </div>
            </div>
        </div>
        </div>`;

        var elem = document.createElement('div');
        elem.setAttribute("id", "model_container");
        elem.innerHTML = model;
        document.getElementById('main-container').appendChild(elem);
        importfunction(1);
    }



    $(document).ready(function(){
        $("#expenditure_0, #disallowed_0").on('keyup',function(){
            $('#disallowance_0').val(0);
            var expenditure = $('#expenditure_0').val();
            var disallowed = $('#disallowed_0').val();
                if(expenditure !="" && disallowed !=""){
                    if(Number.isInteger(parseInt(expenditure)) && Number.isInteger(parseInt(disallowed))){
                        var disallowenece = parseInt(expenditure)/100;
                            disallowenece = disallowenece * parseInt(disallowed);
                            $('#disallowance_0').val(disallowenece);
                    }
                }
        });
    });
    $('input.numeric').keyup(function(e){
        $(this).val($(this).val().replace(/[^0-9]/g, ''));
        });

        $('input.string').keyup(function(e){
        $(this).val($(this).val().replace(/[^a-zA-Z0-9]/g, ''));
        });

        function validateForm() {
      var fieldValue = document.getElementById("myField").value;
      
      if (fieldValue === "") {
        document.getElementById("errorMsg").textContent = "Field cannot be empty.";
        return false;
      }
      
      // Additional validations or form submission code can be added here
      
      return true;
    }
        
</script>

@endsection