@extends('layouts.app')
@section('content')

<style>
    .foregin_dividend_container > div{
            margin: 0 5px;
    }
</style>

<div class="container mt-4">
  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif
  <div class="card">
    <div class="card-header font-weight-bold bg-al">
        <div class="text-center">
            Dividend From UAE Company
        </div>
    </div>

    <div class="card-body clr-al">

    

<table class="table" >

@if(count($exemptDatas) <= 0)
<tr>
    <td colspan=3>
        <a id="local_entry_0" class="export-btn" onclick="addLocalIncome()" href="#">Add Record+</a>
    </td>
</tr>
@endif

 <tr>
    <td class="bold di">Dividend Income </td>
    <td class="amt"></td>
 </tr>
 <tr>
    <td><br></td>
    <td></td>
 </tr>
 <tr>
    <td class="bold">Dividend from UAE Company </td>
    <td class="bold center">Amount </td>
 </tr>
 <tr>
    <td><br></td>
    <td></td>
 </tr>
 </table>
<div id="dividend_local_income_container">
 <input id="local_entry_count" type="hidden" name="entry_count" value="{{count($exemptDatas)}}">
@if(count($exemptDatas) > 0)
@foreach($exemptDatas as  $exemptData)
 <div>
    <form method="POST" action="{{url('/dividend_local_income')}}" style="display:flex; width:100%;" >
    <div style="margin:0 5px;">
    <label>Company Name</label>
    @csrf
    <input type="hidden" name="data_id" value="{{$exemptData->id}}">
    <input class="form-control" type="hidden" name="company_id" value="{{$exemptData->company_id}}" placeholder="Enter Company Name" />  
    <input class="form-control" type="text" name="company_name" value="{{$exemptData->company_name}}" placeholder="Enter Company Name" />  
    </div> 
    
    <div style="display:flex;">
        <div>
            <label>Amount</label>
            <input class="form-control" type="text" name="company_amount" value="{{$exemptData->amount}}" placeholder="Amount" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" required="required">
        </div>
        <div style="display:flex; align-items:end">
            <button type="submit" class="export-btn">update</button>
            @if($loop->last)
            <a id="local_entry_{{$loop->iteration}}" class="export-btn" onclick="addLocalIncome()" href="#">+</a>
            @endif
        </div>  
    </div>
    </form>
</div>

@endforeach
@endif


<br>
<!-- <table class="table">
<tr>
    <td class="di bold">Dividend from Foreign Company *</td>
    <td class="amt bold">Country Name </td>
    <td class="amt bold">% of holding </td>
    <td class="amt bold">Corporate tax rate %</td>
    <td class="amt bold">Amount </td>
    <td class="amt bold">Taxability </td>
</tr>
<tr>
    <td><br></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>ABCD Ltd </td>
    <td>Afghanistan</td>
    <td class="fright">8%</td>
    <td class="fright">30%</td>
    <td class="fright">200000</td>
    <td>Exempt </td>
    <td>Drop down option</td>
</tr>
<tr>
    <td></td>
    <td>Albania</td>
    <td></td>
    <td></td>
    <td></td>
    <td>Taxable</td>
</tr>
</table> -->

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


<div class="container mt-4">
  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif
  <div class="card">
    <div class="card-header font-weight-bold">
        <div class="text-center">
            Dividend From Foreign Company
        </div>
    </div>

<div class="card-body">
<input type="hidden" id="foregin_income_count" value="1">
<table class="table" id="foregin_dividend_container_row">
<tr>
    <td class="di bold">Dividend from Foreign Company *</td>
    <td class="amt bold">Country Name </td>
    <td class="amt bold">% of holding </td>
    <td class="amt bold">Corporate tax rate %</td>
    <td class="amt bold">Amount </td>
    <td class="amt bold">Taxability </td>
</tr>

<tr >
    <td colspan="6">
        <form class="foregin_dividend_container" style="display:flex;">
            <div>
                <input class="form-control" type="text" placeholder="Company Name" name="company_name" required="required"></input>
            </div>

            <div>
                <select class="form-control" name="country">
                    <option value="1">Algeria</option>
                    <option value="2">Bahamas</option>
                    <option value="3">Angola</option>
                </select>
            </div>

            <div>
                <input class="form-control" type="text" placeholder="eg:- 8%" name="holding" required="required"></input>
            </div>

            <div>
                <input class="form-control" type="text" placeholder="eg:- 10%" name="cooperate_tax" required="required"></input>
            </div>

            <div>
                <input class="form-control" type="text" placeholder="Amount" name="amount" required="required"></input>
            </div>

            <div>
                <select class="form-control" name="entry_type">
                    <option name="taxable">Taxability</option>
                    <option name="exempt">Excempt</option>
                </select>
            </div>
            <div style="display:flex;">
            <button type="submit" class="export-btn">Add</button>
            <a id="add_foregin_income_btn_0" href="#" class="export-btn" onclick="addForeginIncome()">+</a>
            </div>
        </form>
    </td>
    <!-- <td>Albania</td>
    <td></td>
    <td></td>
    <td></td>
    <td>Taxable</td> -->
</tr>
</table>

    </div>



<br>


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

<script>

    function addForeginIncome(){
        var addForeginIncome = document.getElementById('foregin_dividend_container_row');
        const tr = document.createElement("tr");
        var entry_count = document.getElementById('foregin_income_count').value;
        document.getElementById('foregin_income_count').value = parseInt(entry_count)+1;
        var newForm = `<td colspan="6">
        <form class="foregin_dividend_container" style="display:flex;">
            <div>
                <input class="form-control" type="text" placeholder="Company Name" name="company_name" required="required"></input>
            </div>

            <div>
                <select class="form-control" name="country">
                    <option value="1">Algeria</option>
                    <option value="2">Bahamas</option>
                    <option value="3">Angola</option>
                </select>
            </div>

            <div>
                <input class="form-control" type="text" placeholder="eg:- 8%" name="holding" required="required"></input>
            </div>

            <div>
                <input class="form-control" type="text" placeholder="eg:- 10%" name="cooperate_tax" required="required"></input>
            </div>

            <div>
                <input class="form-control" type="text" placeholder="Amount" name="amount" required="required"></input>
            </div>

            <div>
                <select class="form-control" name="entry_type">
                    <option name="taxable">Taxability</option>
                    <option name="exempt">Excempt</option>
                </select>
            </div>
            <div style="display:flex;">
            <button type="submit" class="export-btn">Add</button>
            <a id="add_foregin_income_btn_`+parseInt(entry_count)+`" href="#" class="export-btn" onclick="addForeginIncome()">+</a>
            </div>
        </form>
    </td>`;

        //console.log(parseInt(entry_count));
        //  console.log(document.getElementById(`add_foregin_income_btn_`+parseInt(entry_count)));

        tr.innerHTML = newForm;
        addForeginIncome.appendChild(tr);
    

    }

    function addLocalIncome(){
        //local_entry_0
        var addLocalIncome = document.getElementById('dividend_local_income_container');
        const tr = document.createElement("div");
        var entry_count = document.getElementById('local_entry_count').value;
        document.getElementById('local_entry_'+entry_count).style.display = "none";
        document.getElementById('local_entry_count').value = entry_count+1;
        var newForm = ` <form method="POST" action="{{url('/dividend_local_income')}}" style="display:flex; width:100%; margin-top:25px;">
                           
                            <div style="margin:0 5px;">
                            <label>Company Name</label>
                            @csrf
                            <input type="hidden" name="company_id" value="{{$company_id}}">
                            <input class="form-control" type="text" name="company_name" value="" placeholder="Enter Company Name" required="required"/>     
                            </div>
                        
                                <div>
                                <label>Amount</label>
                                <input class="form-control" type="text" name="company_amount" value="" placeholder="Amount"  required="required"/>
                                </div>

                                <div style="display:flex; align-items:end;">
                                <button type="submit" style="background-color: #4CAF50;
                                                                        border: none;
                                                                        color: white;
                                                                        padding: 5px 5px;
                                                                        text-align: center;
                                                                        text-decoration: none;
                                                                        display: inline-block;
                                                                        font-size: 14px;
                                                                        margin: 0 5px;">Add</button>
                                <a id='local_entry_`+entry_count+1+`' onclick="addLocalIncome()" href="#" style="background-color: #4CAF50;
                                                                        border: none;
                                                                        color: white;
                                                                        padding: 5px 5px;
                                                                        text-align: center;
                                                                        text-decoration: none;
                                                                        display: inline-block;
                                                                        font-size: 14px;
                                                                        margin: 0 5px;">+</a>
                                </div>                        
                        </form>`;
                            tr.innerHTML = newForm;

    addLocalIncome.appendChild(tr);
    if(document.getElementById('local_entry_0').value > 0){
        document.getElementById('local_entry_0').style.display = "none";
    }
    


    }
</script>

@endsection