@extends('front.layouts.main')
@section('header_style')

@section('content')
<!-- Content Wrapper. Contains page content -->

<div class="no-print">
    <div class="col-12 text-right">
        <a href="#" class="btn btn-primary fa fa-trash btn-sm" onclick="paymentFunc();">Payment</a>
        <a href="{{route('investor-payment-list',[$investorid])}}" class="btn btn-success  btn-sm">
            Payment History</a>
        <a href="javascript:void" onclick="printDiv('invoice_body')" rel="noopener" class="btn btn-success btn-sm">
            <i class="fas fa-print"></i>
            Print
        </a>
    </div>
</div>


<div class="col" id="invoice_body">

    <div class="page">
        <div class=" ">
            <div class="row">
                <div class="col-8">
                    <img src="{{ asset('importerhub.png')}}" class="img-fluid" style="width: 50%" alt="">
                    <div>
                        <i>All types of Cosmetics Importer,Seller</i>
                    </div>
                    <div>
                        H#25, R#12, Nikunja-12,khilkhet, Dhaka-1229
                    </div>
                    <div>
                        Phone: 01831 88 99 79
                    </div>



                </div>

            </div>

        </div>
        <br>

        <br>

        <br>
        <div class="row" style="margin-left:0px">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Invested Amount</th>
                        <th scope="col">Date</th>
                        <th scope="col">Profit Share Rate </th>
                        <th scope="col">Withdraw</th>
                        <th scope="col">Profit Amount </th>


                    </tr>
                </thead>
                                @foreach($investmentData as $key => $listing)
                <tbody>
                    <tr>
                        <th scope="row">{{$key + 1}}</th>
                        <td><i class="mdi mdi-currency-bdt"></i>{{$listing->totalamount}}</td>
                        <td>{{$listing->created_at}}</td>
                        <td> {{$listing->share}} {{$listing->sharetype}} </td>
                        <td>0 </td>
                        <td><i class="mdi mdi-currency-bdt"></i>{{$listing->shareprofit}}</td>

                    </tr>
                                    </tbody>
                @endforeach

                <tr>
                    <td colspan="1">Total</td>
                    <td><i class="mdi mdi-currency-bdt"></i> 0</td>
                    <td colspan="3"></td>
                    <td><i class="mdi mdi-currency-bdt"></i> <span id="totalshareprofit">0                        </span> </td>
                </tr>


            </table>
        </div>


        <br><br>
        <div class="row">
            <div class="col">
                <p>The amount is including all VAT &amp; TAX. </p>
                <h5 style="background: #3498db7a;">Terms &amp; conditons: </h5>
                <div> {{$investordata->termsAndConditions}}</div>
            </div>
        </div>
        <br>
        <p style="text-align: center;    font-size: 13px;">This POS Software Developed By: Ruby Pos</p>
        <br>




    </div>
    <br> <br>


</div>
</div>
<!-- /.content-wrapper -->


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <form action="{{route('investor-payment')}}" method="post">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Payment Issue</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <input type="hidden" name="investor_h_id" id="investor_h_id" value="{{$investorid}}">
                <div class="modal-body">
                    <div class="col-md-12">
                        <label for="">Date <span style="color:red;">*</span></label>
                        <input type="date" name="date" id="date" required class="form-control" autocomplete="off">
                    </div>
                   
                    <div class="col-md-12">
                        <label for="">Amount <span style="color:red;">*</span></label>
                        <input type="number" name="amount" id="amount" required class="form-control" autocomplete="off">
                    </div>
                    <div class="col-md-12">
                        <label for="inputEmail4">Paid</label>
                        <input type="number" name="paid" id="paid" onkeyup="paidFunc()" required class="form-control">
                    </div>
                    <div class="col-md-12">
                        <label for="inputEmail4">Due</label>
                        <input type="number" name="due" id="due" required class="form-control">
                    </div>
                    <div class="col-md-12">
                        <label for="">Short Note</label>
                        <textarea name="note" id="" class="form-control"></textarea>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Pay</button>
                </div>
            </div>
        </form>
    </div>
</div>


@endsection





<script>
function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
}

function paymentFunc() {
    var totalshareprofit = $('#totalshareprofit').text();
    var totalshareprofit = parseInt(totalshareprofit);
    $('#amount').val(totalshareprofit);

    $('#exampleModal').modal('show');
}

function paidFunc() {

    let totalamountValue = $('#amount').val();
    let paidvalue = $('#paid').val();
    let duevalue = totalamountValue - paidvalue;
    $('#due').val(duevalue);


}
</script>

</script>
<style>
.table-bordered td,
.table-bordered th {
    border: 1px solid #0e0f10 !important;
}

.table-bordered {
    border: 1px solid #0e0f10 !important;

}

.terms_condition li {
    font-style: italic;
}

.amount-box {
    border: 1px solid #181414;
    padding: 3px;
    margin-top: 10px;
    font-weight: 600;

}

body {
    margin: 0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    text-align: left !important;
    background-color: #fff !important;
}

strong {
    font-size: 12px !important;
}

.page {
    width: 27cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}


@page {
    size: A4;
    margin: 0;
}

@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

.delivery {
    font-size: 22px;
}

.deliverycontent {
    font-size: 17px;
}

.invoicetop {
    font-family: arial;
    position: relative;
    top: 80px;
}

.invoicecontent {
    font-size: 50px;
    color: #01395496;
    font-family: arial;
    text-transform: uppercase;
    font-weight: 700;
}
</style>