@extends(!$download ?  'layouts.app' : 'layouts.app_with_out_nav',['dashBoardTitle'=>'FOOTNOTES'])
    @section('script')
    <link rel="stylesheet" href="{{asset('css/vsk_css_script.css')}}">
    @endsection
@section('buttons')
    @if(!$download)
        <div class="d-flex justify-content-end hedr-wdth">
        <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
@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 head-capt">
                {{ __('Footnotes') }}
</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 bg">
            <td class="bd head-capt"style="width:300px;">
                {{strtoUpper($trialBalanceDetails->companyRelationShip->taxpayer)}}
            </td>
                <td style="width: 30%"> <span style="float:left">T.R.NO : {{($trialBalanceDetails->companyRelationShip->tax_registration_number)}}</span>
            </td>
            <td colspan="4">
                Tax Period:
                
                {{date('d-M-Y',strtotime(@$trialBalanceDetails->from))}}
                    to
                {{date('d-M-Y',strtotime(@$trialBalanceDetails->to))}}
            </td>
 
        </tr>
    </table>
    <!-- foot notes table -->
    <table class="table table-bordered fnt">
        <tr>
        <td colspan="4" class="blu fnt-pad" > Footnotes</td> 
        </tr>
        <td colspan="4">
                <a class="btn btn-success"data-toggle="modal" data-target="#TextBoxModal" colspan="1"  style=" height: 28.333334px;padding-top: 3px;padding-bottom: 3px;padding-left: 8px;padding-right: 8px;"> 
                <i class="fa-sharp fa-solid fa-plus" ></i></a>
                </td>
            <tr class="bg bd">
            <td class="mrn cent"style="width:80px">SI No.</td>
            
                <td class="blu fnt-pad" style="width:180px"> Subject</td>
                <td class="blu fnt-pad" > Context</td>
                <td class="blu fnt-pad" > Actions</td>
                
            </tr>
            <tr>
            
            </tr>
            
            @foreach($footnotes as $footnote)
            
                @php
                    $data = json_decode($footnote->data);
                @endphp
                @if(empty($footnote->deleted_at))
                    <tr>
                    <td>{{$loop->iteration}}</td>
                    <td>{{@$data->subject}}</td>
                    <td  class="tr">{{$data->context}}</td>
                    <td>
                    <div class="d-flex" style="gap:5px;">
                        <button class="btn btn-success" onclick='openModel(`{
                                id:"{{$footnote->id}}",
                                article_type:"footnote",
                                form_type:"footnote_form",
                                inputs:[
                                    {
                                        label:"subject",
                                        name:"subject",
                                        value:"{{$data->subject}}",
                                        id:"update_",
                                        isRequired:"1",
                                        editable:"0",
                                        type:"text",
                                        is_textarea:"0",
                                        placeholder:"Subject"
                                    },
                                    {
                                        label:"context",
                                        name:"context",
                                        value:"{{htmlspecialchars($data->context)}}",
                                        id:"update_context",
                                        isRequired:"1",
                                        editable:"0",
                                        type:"text",
                                        is_textarea:"1",
                                        placeholder:"body"

                                    }
                                ]}`)'>
                        <i class="fa-sharp fa-regular fa-pen-to-square"></i>
                        </button>
                        <button class="btn btn-success" onclick='deleteModel(`{
                                id:"{{$footnote->id}}"
                            }`)'>
                        <i class="fa-sharp fa-regular fa-trash"></i>
                        </button>
                    </div>
                    </td>
                    </tr>
                    @endif
            @endforeach
           
    </table>
    <!-- pending issue table -->
    <table class="table table-bordered fnt">
        <tr>
            <td colspan="5" class="blu fnt-pad" > Pending Issue</td> 
        </tr>
        <td colspan="5">
                <a class="btn btn-success"data-toggle="modal" data-target="#PendingModal" colspan="1"  style=" height: 28.333334px;padding-top: 3px;padding-bottom: 3px;padding-left: 8px;padding-right: 8px;"> 
                <i class="fa-sharp fa-solid fa-plus" ></i></a>
                </td>
            <tr class="bg bd">
                
            <td class="mrn cent"style="width:80px">SI No.</td>
            
                <td class="blu fnt-pad" style="width:180px"> Subject</td>
                <td class="blu fnt-pad" > Context</td>
                <td class="blu fnt-pad" style="width:120px" > Clear By</td>
                <td class="blu fnt-pad" > Actions</td>
            
            </tr>
            <tr>
            
            </tr>
            
            @foreach($pendingissue as $pending)
            
                @php
               
                    $pdata = json_decode($pending->data);   
                    
                @endphp
                @if(empty($pending->deleted_at))
                <tr>
                    <td>{{$loop->iteration}}</td>
                    <td>{{@$pdata->pending_sub}}</td>
                    <td  class="tr">{{@$pdata->pending_clear}}</td>
                    <td>{{@$pdata->pending_context}}</td>
                    <td>
                    <div class="d-flex" style="gap:5px;">
                        <button class="btn btn-success" onclick='openModel(`{
                                id:"{{$pending->id}}",
                                article_type:"pendingissue",
                                form_type:"pendingissue_form",
                                inputs:[
                                    {
                                        label:"pending_sub",
                                        name:"pending_sub",
                                        value:"{{@$pdata->pending_sub}}",
                                        id:"update_",
                                        isRequired:"1",
                                        editable:"0",
                                        type:"text",
                                        is_textarea:"0",
                                        placeholder:"Subject"
                                    },
                                    {
                                        label:"pending_clear",
                                        name:"pending_clear",
                                        value:"{{@$pdata->pending_clear}}",
                                        id:"update_",
                                        isRequired:"1",
                                        editable:"0",
                                        type:"text",
                                        is_textarea:"0",
                                        placeholder:"Subject"
                                    },
                                    {
                                        label:"pending_context",
                                        name:"pending_context",
                                        value:"{{htmlspecialchars(@$pdata->pending_context)}}",
                                        id:"update_context",
                                        isRequired:"1",
                                        editable:"0",
                                        type:"text",
                                        is_textarea:"1",
                                        placeholder:"body"

                                    }
                                ]}`)'>
                        <i class="fa-sharp fa-regular fa-pen-to-square"></i>
                        </button>
                        <button class="btn btn-success" onclick='deleteModel(`{
                                id:"{{$pending->id}}"
                            }`)'>
                        <i class="fa-sharp fa-regular fa-trash"></i>
                        </button>
                    </div>
                    </td>
                    </tr>
                    @endif
            @endforeach       
    </table>
    </div>
</div>
</div>
</div>
</div>

        

 <!--Foot Notes Modal -->
 <div class="modal fade" id="TextBoxModal" tabindex="-1" role="dialog" aria-labelledby="TextBoxModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="POST" action="{{url('/tax-report/article/add',['id'=>$id])}}">
                    @csrf
                    <input name="article_type"  class="form-control" type="hidden" value="footnote" placeholder="Eg: 10000"  required>
                    <input name="form_type"  class="form-control" type="hidden" value="footnote_form" placeholder="Eg: 10000" required>
                    
                    <div class="modal-header ppup">
                        <h5 class="modal-title" id="TextBoxModalLabel">Footnote</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="form-group p-1 bold">
                    <div class="modal-body">
                        <label for="textInput" class="bold">Subject</label>
                        <input type="text" name="subject" class="form-control" id="textInput">
                    </div>

                        <label for="exampleFormControlTextarea1"style=" padding-left: 10px;">Context</label>
                        <textarea style="margin: 10px;width:95%;" name="context" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- pending issue Modal -->
    <div class="modal fade" id="PendingModal" tabindex="-1" role="dialog" aria-labelledby="PendingModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form method="POST" action="{{url('/tax-report/article/add',['id'=>$id])}}">
                    @csrf
                    <input name="article_type"  class="form-control" type="hidden" value="pendingissue" placeholder="Eg: 10000"  required>
                    <input name="form_type"  class="form-control" type="hidden" value="pendingissue_form" placeholder="Eg: 10000" required>
                    
                    <div class="modal-header ppup">
                        <h5 class="modal-title" id="PendingModalLabel">Pending Issue</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="form-group p-1 bold">
                        <div class="modal-body">
                            <label for="textInput" class="bold">Subject</label>
                            <input type="text" name="pending_sub" class="form-control" id="textInput">
                            <label for="exampleFormControlTextarea1"style=" padding-left: 10px;">Clear By</label>
                            <textarea style="margin: 10px;width:95%;" name="pending_clear" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                   
                        </div>

                            <label for="exampleFormControlTextarea1"style=" padding-left: 10px;">Context</label>
                            <textarea style="margin: 10px;width:95%;" name="pending_context" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
 
 <script>
        function openModel(data){
        eval('var obj='+data);
        var objData = {...obj};
            console.log(objData);
        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 ppup">
                <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-12">
                            <label class="form-label">`+element.label+`</label>`;

                            if(!parseInt(element.is_textarea)){
                            model +=`<input class="form-control" name="`+element.name+`" type="`+element.type+`" 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 +=` >`;
                            }else{
                            model +=`<textarea class="form-control" name="`+element.name+`" type="`+element.type+`" 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 +=` cols="8" rows="8" >`+element.value+`</textarea>`;
                            }
                            
                            
                            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);
                }


    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 ppup">
                <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);
    }

    </script>
@endsection