@extends('layouts.app', ['pageSlug' => 'customerlist'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Payments</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Cash Out
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <form id="payment_form">        
                    <table id="custom_table" class="table table-striped table-bordered">
                        <thead>
                            <th style="width: 50%;">Description</th>
                            <th style="width: 20%;">Amount</th>
                            <th style="width: 20%;">Cash out type</th>
                            <th style="width: 10%;">action</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <input type="text" class="form-control" name="description[]" id="description__0" required>
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="amount[]" id="amount__0" required>
                                </td>
                                <td>
                                    <select name="type[]" class="select2 form-control" id="type__0" required>
                                        @foreach($cateogory_types as $t)
                                        <option value="{{$t->type}}">{{$t->type}}</option>
                                        @endforeach
                                    </select>
                                </td>                                
                                <td>
                                    <a class="deleteRow"></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn btn-lg btn-block" id="addrow" ><i class="fa fa-fw fa-plus"></i>Add new</button>
                    <button type="button" class="btn btn-success save-btn">Done</button>
                </form>    
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
   $(document).ready(function(){
        var counter = 0;

       $('.select2').select2();

        $("#addrow").on("click", function () {
            counter++;
            var newRow = $("<tr>");
            var cols = "";
            cols += '<td><input type="text" class="form-control" name="description[]" id="description__'+counter+'" required></td>';
            cols += '<td><input type="text" class="form-control" name="amount[]" id="amount__'+counter+'" required></td>';
            cols += '<td><select name="type[]" class="select2 form-control" id="type__'+counter+'" required>';
                @foreach($cateogory_types as $t)
                    cols +='<option value="{{$t->type}}">{{$t->type}}</option>';
                @endforeach
                cols +='</select></td>';
            cols += '<td><a class="ibtnDel a-red btn"><i class="fa fa-fw fa-trash-alt"></i></a></td>';
            newRow.append(cols);

            $("table#custom_table").append(newRow);
            
            $('.select2').select2();
        });



        $("table#custom_table").on("click", ".ibtnDel", function (event) {
            $(this).closest("tr").remove();
            counter -= 1
        });

        $('.save-btn').click(()=>{  
            $.confirm({
                title: "Please confirm!",
                content: 'Are you sure all values are OK?',
                buttons: {
                    OK: {
                        text: 'OK',
                        action: function() {
                            $('.save-btn').attr('disabled', true);
                            var data = $('#payment_form').serialize();
                            axios.post('{{route('customer.record.cashout')}}', data).then((res)=>{
                                
                                toastr.success('success');
                                setTimeout(()=>{
                                    location.reload();
                                }, 1000)
                                
                            });
                        },
                    },
                    close: {
                        text: 'Cancel',
                        // action: function(){
                        //     form_validator.settings.ignore = "";
                        // },
                    },
                }
            });
        })
   });

</script>
    
@endpush