@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="card-title-wrap bar-success">
                    <h4 class="card-title" id="basic-layout-form">Refund or Credit Memo</h4>
                </div>
                {{-- <p class="mb-0">This is the most basic and cost estimation form is the default position.</p> --}}
            </div>
            <div class="card-body">
                <div class="px-3">
                    <form class="form" id="refundMemoForm">
                        <div class="form-body">
                            {{-- <h4 class="form-section">
                                <i class="icon-user"></i> Personal Details</h4> --}}
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="memo_no">Memo Number</label>
                                        <input type="text" id="memo_no" class="form-control" name="memo_no">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="pay_to">Pay To </label>
                                        <select name="pay_to" id="pay_to" class="form-control">
                                            <option selected  disabled>Select Customer</option>
                                            @foreach ($clients as $client)
                                            <option value="{{$client->id}}">{{$client->client_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="date">Posting Date</label>
                                        <input type="date" id="date" class="form-control" name="date">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="mode_pmt">Mode of Payment</label>
                                        <select name="mode_pmt" id="mode_pmt" class="form-control">
                                            <option selected  disabled>Select Mode</option>
                                            @foreach ($modes as $mod)
                                                <option value="{{$mod->id}}">{{$mod->mode_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="amount">Amount</label>
                                        <input type="text" id="amount" class="form-control" name="amount">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="memo">Memo</label>
                                        <input type="text" id="memo" class="form-control" name="memo">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="instrument_number">Instrument Number</label>
                                        <input type="text" id="instrument_number" class="form-control" name="instrument_number">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="">Account Type</label>
                                        <select name="account_type" class="form-control" id="account_type">
                                            <option value="">Please Select</option>
                                            <option value="Bank">Bank</option>
                                            <option value="Employee">Employee</option>
                                            <option value="Client">Client</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="deposit_to">Select Deposit To </label>
                                        <select name="pay_from" id="pay_from" class="form-control">
                                            <option selected  disabled>Please Select</option>
                                                                                   
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="deposit_id_select">
                                <input type="hidden" name="deposit_mode_select">
                            </div>

                            
                        </div>

                        <div class="form-actions">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                            <button type="button" class="btn btn-success" id="saveBtn">
                                <i class="icon-note"></i> Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('afterScript')
<script src="{{ asset('app-assets/vendors/js/core/jquery-3.3.1.min.js')}}"></script>

<script>
    $(document).ready(function(){

        $('#pay_from').select2();
        $(document).on('change','#account_type',function(){
            var type=$(this).val();
            var output='<option>Please Select</option>';
            if(type=='Bank'){
                output+='@foreach ($accounts as $items)';
                output+='<option data-id="{{$items->id}}" data-mode="bank" value="{{$items->id}}">{{$items->account_name}}-{{$items->banks->bank_name}}</option>';
                output+='@endforeach';
            }
            if(type=='Employee'){
                output+='@foreach ($employees as $emp)';
                output+='<option data-id="{{$emp->id}}" data-mode="employee" value="{{$emp->id}}">{{$emp->emp_name}}</option>';
                output+='@endforeach';
            }
            if(type=='Client'){
                output+='@foreach ($clients as $c)';
                output+='<option data-id="{{$c->id}}" data-mode="client" value="{{$c->id}}">{{$c->client_name}}</option>';
                output+='@endforeach';
            }
            $('#pay_from').empty();
            $('#pay_from').append(output);
        });

        $(document).on('change','#pay_from',function(){
            var id = $('#pay_from option:selected').attr('data-id');
            var mode = $('#pay_from option:selected').attr('data-mode');
            console.log(id,mode)
            $('[name=deposit_id_select]').val(id);
            $('[name=deposit_mode_select]').val(mode);
        });

        $(document).on('click',"#saveBtn", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#refundMemoForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('add_client_refund_memo.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Bank Transfer has been Added Successfully!", "success");
                    //  setTimeout(function() { 
                    //     // location.reload();
                    // }, 1000);
                    $('#refundMemoForm')[0].reset();
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

    })

</script>