@extends('layouts.user')



{{-- Web site Title --}}



<style>

    button {

        display: block;

        border: solid white;

        border-width: 0 10px;

        border-radius: 0;

        background: green;

        color: white;

        font-size: 18px;

        margin: -60px auto 15px;

        padding: 15px;

    }



    .dropdown {

        position: absolute;

        display: inline-block;

    }



    .dropdown-content {

        display: none;

        position: absolute;

        background-color: #f1f1f1;

        min-width: 160px;

        z-index: 1;

    }



    .dropdown-content a {

        color: black;

        padding: 12px 16px;

        text-decoration: none;

        display: block;

    }



    .dropdown-content a:hover {

        background-color: #ddd

    }



    .dropdown:hover .dropdown-content {

        display: block;

    }



    .btn:hover,

    .dropdown:hover .btn {

        background-color: #0b7dda;

    }

</style>

{{-- Content --}}

@section('content')

<div class="panel panel-default">

    <div class="panel-heading">

        <h4 class="panel-title">

            <i class="material-icons">format_list_numbered_rtl</i>

            {{ 'All Invoices ' }}

        </h4>

        <span class="pull-right"><i class="fa fa-fw fa-chevron-up clickable"></i></span>

    </div>

    <div class="panel-body">

        <div class="table-responsive">

            <table id="data_data" class="table table-bordered table-hover payinvoice">

                <thead>

                    <tr>

                        <th>#. </th>

                        <th>Customer Name</th>

                        <th>Total Amount</th>

                        <th>Invoice Date</th>

                        <th>Paid</th>

                        <th>Pending Amount</th>

                        <th>Status</th>
                   <th>{{ trans('table.actions') }}</th>



                    </tr>

                </thead>

                <tbody>

                </tbody>

            </table>

        </div>

    </div>



    <div id="add_payment" class="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Add Payment</h2>

                    <div class="modal-body">

                        {!! Form::open(['route' => 'invoice.add_payment','files' =>true,'enctype'=>'multipart/form-data']) !!}

                        <div class="form-group"> 
                            <input id="order_id" name="order_id" type="hidden"></div>
                        <div class="form-group">
                            <label for="description_ar">
                                Select Account
                            </label>

                            <select class="select-2" name="account" id="ex2" required>
                                                            </select>
                        </div>


                        <div class="form-group ">
                            {!! Form::label('amount', 'Enter Amount:', ['class' => 'control-label']) !!}
                            {!! Form::text('amount', null, ['class' => 'form-control','required']) !!}
                        </div>
                        <div class="form-group ">
                            {!! Form::label('ref', 'Ref #.:', ['class' => 'control-label']) !!}
                            {!! Form::text('ref', null, ['class' => 'form-control','required']) !!}
                        </div>


                        <div class="form-group">
                            <label for="description_ar">
                                File
                            </label>
<input type="file" name="attachment">
                        </div>










                        {!! Form::submit('Add ', ['class' => 'btn btn-primary']) !!}
                        {!! Form::close() !!}


                    </div>

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


    @stop

    @section('scripts')









    <script type="text/javascript" language="javascript">

        $(document).ready(function() {



            $(function() {

                $('#data_data').DataTable({

                    processing: true,

                    serverSide: true,

                    ajax: {

                        url: "index/data",

                        type: "GET"

                    },

                    columns: [



                        {

                            render: (data, type, row, meta) => meta.row + 1,

                        },



                        {

                            data: 'name',

                        },

                        {

                            data: 'final_price',

                        },



                        {

                            data: 'invoice_date',

                        },
                        {

                            data: 'paid',

                        },



                        {

                            data: 'remaining',

                        },

                        {

                            data: 'status'

                        },
                        {

                            data: 'action',

                            name: 'action',

                            orderable: false,

                            searchable: false

                        }









                    ],
                    "order": [[ 0, "desc" ]]
                });

            });



        });


        
$(document).ready(function(){
  $(".payinvoice").on('click','.paybtn',function(){
    var currentRow=$(this).closest("tr"); 
    var id=currentRow.find("td:eq(1) input[type='hidden'] ").val(); // get current row 1st TD value
    var data=id;
//    alert(data);
$('#add_payment').modal('show');

$('#order_id').val(id);

  });

  });
    </script>



    @stop