<div>
    <button type="button" class="btn btn-info btn-sm float-right" data-toggle="modal" data-target="#addBill" style="margin: 5px">
        Add Bill
    </button>
</div>
<div class="modal fade" id="addBill">
    <div class="modal-dialog">
        <form id="paid_form" class="form" role="form" enctype="multipart/form-data" method="post"
            action="{{ route('addBill', $r->id) }}">
            @method('post')
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="text-center">Add Custom Bill</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="text-center" id="modalAlert"></div>
                    <div class="row">
                        <input type="hidden" name="client_id" value="{{ $r->id }}">
                        <div class="row">

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Bill Amount</label>
                                    <input id="in_amount" min="0" class="form-control" onkeypress="return numbersOnly(event)"
                                        type="number" name="amount" required="">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="type">Select Bill Type</label>
                                    <select name="billing_type" id="billing_type" class="form-control" required>
                                        <option value="">Select a Type</option>
                                        <option value="other" selected>Other</option>
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="col-md-12">
                                <div class="form-group">
                                    <label for="payment_status">Payment Status</label>
                                    <select name="payment_status" id="payment_status"  class="form-control" required>
                                        <option value="">Select a Status</option>
                                        <option value="paid">Paid</option>
                                        <option value="due">Due</option>
                                    </select>
                                </div>
                            </div> --}}

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Description</label>
                                    <textarea name="description" class="form-control" required></textarea>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" type="submit" id="modalSave">Submit</button>
                </div>

            </div>
            <!-- /.modal-content -->
        </form>
    </div>
    <!-- /.modal-dialog -->
</div>


