@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">Issue Cheque</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="issueChequeForm">
                        <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="account_name">Bank Name</label>
                                            <select name="account_name" class="form-control">
                                                <option value="" selected disabled="">Select Bank</option>
                                                @foreach ($accounts as $account)
                                                    <option value="{{$account->id}}">{{$account->account_name}}-{{$account->banks->bank_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Ref No</label>
                                            <input type="text" name="ref_no" class="form-control" placeholder="Ref No">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Cheque No</label>
                                            <input type="text" name="cheque" class="form-control" placeholder="Cheque No">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Date</label>
                                            <input type="date" name="date" class="form-control" placeholder="Date">
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="pay_to">Pay to</label>
                                            <select name="pay_to" class="form-control">
                                                <option value="" selected disabled="">Select Client</option>
                                                <optgroup label="Client">
                                                    @foreach ($clients as $cl)
                                                        <option value="{{$cl->client_name}}">{{$cl->client_name}}</option>
                                                    @endforeach
                                                </optgroup>
                                                <optgroup label="vendor">
                                                    @foreach ($vendors as $vendor)
                                                        <option value="{{$vendor->v_fname}}">{{$vendor->v_fname}}</option>
                                                    @endforeach
                                                </optgroup>
                                            </select>
                                        </div>
                                    </div> 
                                     <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Memo</label>
                                            <input type="text" name="memo" class="form-control" placeholder="Memo">
                                        </div>
                                    </div>--}}
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="account_lists">Accounts</label>
                                            <a class="float-right addAccount" href="#addExpense" data-toggle="modal" data-keyboard="false">Add Account</a>
                                            <select name="account_lists[]" class="form-control account_lists" data-id="0">
                                                <option value="0" selected disabled="">Select Accounts</option>
                                                <!-- @foreach ($exp as $e)
                                                    <option value="{{$e->exp_name}}">{{$e->exp_name}}</option>
                                                @endforeach -->
                                                @foreach ($charts as $c)
                                                    <option data-id="{{$c->category}}" value="{{$c->id}}">{{$c->name}}</option>
                                                @endforeach
                                                @foreach ($accounts as $acc)
                                                    <option value="{{$acc->id}}">{{$acc->account_name}}-{{$acc->banks->bank_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="job_no">Job</label>
                                            <span style="float:right" data-cheque="0"></span>
                                            <select name="job_no[]" data-job="0" class="form-control job_no">
                                                <option value="0" selected disabled="">Select Job</option>
                                                @foreach ($jobs as $j)
                                                    <option value="{{$j->id}}">{{$j->job_no}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Amount</label>
                                            <input type="text" name="amount[]" data-amount="0" class="form-control" placeholder="Amount">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="">Memo</label>
                                            <input type="text" name="memo_list[]" class="form-control" placeholder="Memo">
                                        </div>
                                    </div>
                                    {{-- <div class="col-md-6 account_receivable_0">
                                        <div class="form-group">
                                            <label for="client_vendor">Clients</label>
                                            <select name="client_vendor[]" class="form-control client_no">
                                                <option value="0" selected disabled="">Select Client</option>
                                                @foreach ($clients as $client)
                                                    <option value="{{$client->id}}">{{$client->client_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> --}}
                                    {{-- <div class="col-md-6 d-none account_payable_0">
                                        <div class="form-group">
                                            <label for="client_vendor">Vendors</label>
                                            <select name="client_vendor[]" class="form-control vendor_no">
                                                <option value="0" selected disabled="">Select Vendor</option>
                                                @foreach ($vendors as $v)
                                                    <option value="{{$v->id}}">{{$v->v_fname}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div> --}}
                                    <input type="hidden" name="account_debited[]" class="account_debited_0">
                                </div>
                                <div id="requests"></div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="button" class="btn btn-success addRequest">
                                            <i class="icon-plus"></i> Add More
                                        </button>
                                    </div>
                                </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>
<div class="modal fade text-left" id="addExpense" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Add Account</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="addForm" method="POST" action="">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="category"> Select Category: </label>
                                <select name="category" class="form-control" data-id="add">
                                    <option selected disabled>Select Option</option>
                                    <option>Income</option>
                                    <option>Expense</option>
                                    <option>Fixed Asset</option>
                                    <option>Loan</option>
                                    <option>Equity</option>
                                    <option>Inventory</option>
                                    <option>Account Receivable</option>
                                    <option>Account Payable</option>
                                    <option>Other Income</option>
                                    <option>Other Expense</option>
                                    <option>Other Asset</option>
                                    <option>Other Liability</option>
                                    <option>Cost Of Good Sold</option>
                                    <option>Current Asset</option>
                                    <option>Long Term Liability</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="name"> Name: </label>
                                <input type="text" class="form-control border-primary" name="name">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="is_sub_account"> Has Sub Account ? </label>
                                <select name="is_sub_account" class="form-control add_form_sub">
                                    <option selected disabled>Select Option</option>
                                    <option>Yes</option>
                                    <option>No</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6 d-none" id="add_form_sub">
                            <div class="form-group">
                                <label class="text-bold-500" for="sub_account"> Sub Account: </label>
                                <select name="sub_account" id="sub_account_add" class="form-control">
                                    <option selected disabled>Select Option</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="desc"> Description: </label>
                                <input type="text" class="form-control border-primary" name="desc">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="note"> Note: </label>
                                <input type="text" class="form-control border-primary" name="note">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="addAccount">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
@endsection


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

<script>
    var count = 1;
    $(document).ready(function(){
        $('.account_lists').select2();
        $('.job_no').select2();
        $('[name=account_name]').select2();

        $(document).on('change','.account_lists',function(){
            var id =$(this).attr('data-id');
            var category  = $('[data-id="'+id+'"] option:selected').attr('data-id');
            console.log(id,category);
            if(category=="Account Receivable")
            {
                $('.account_receivable_'+id).removeClass('d-none');
                $('.account_payable_'+id).addClass('d-none');
                $('.account_debited_'+id).val('client');
            } else if (category=="Account Payable") {
                $('.account_receivable_'+id).addClass('d-none');
                $('.account_payable_'+id).removeClass('d-none');
                $('.account_debited_'+id).val('vendor');
            }  else {
                $('.account_receivable_'+id).removeClass('d-none');
                $('.account_payable_'+id).addClass('d-none');
                $('.account_debited_'+id).val('client');
            }
        })

        $(document).on('change','[name=category]',function(){
            var id =$(this).val();
            var data_id=$(this).attr('data-id');
            console.log(data_id);
            $.ajax({
                url: 'fetch_account/'+id,
                method:'GET',
                dataType:'json',
                success:function(data)
                {
                    var html = '';
                    data.forEach(element => {
                        html+='<option>'+element.name+'</option>';
                    });

                    if(data_id=='add')
                    {
                        $('#sub_account_add').append(html);
                    } else {
                        $('#sub_account').append(html);
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });

        $(document).on('change','.add_form_sub',function(){
            if($(this).val()=='Yes'){
                $('#add_form_sub').removeClass('d-none');
            } else {
                $('#add_form_sub').addClass('d-none');
            }
        });

        $(document).on('click',"#addAccount", function(e){
            e.preventDefault();
        
            var form_data = new FormData($("#addForm")[0]);
            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : "{{ route('chart_account.store') }}",
                type: "POST",
                data : form_data,
                async: false,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (res) {
                    swal("Inserted!", "Account has been Added Successfully!", "success");
                    $('.account_lists').append('<option data-id="'+res.category+'" value="'+res.name+'">'+res.name+'</option>');
                    $('#addExpense').modal('hide');
                    $('#addForm')[0].reset();
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });

        $(document).on('change','.job_no',function(){
            var id = $(this).attr('data-job');
            var job_no  = $('[data-job="'+id+'"] option:selected').val();
            var expense  = $('[data-id="'+id+'"] option:selected').val();
            console.log(job_no,expense);

            $.ajaxSetup({
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url : '/fetch_cheque/'+job_no+'/expense/'+expense,
                type: "GET",
                success: function (res) {
                    console.log(res);
                    if(res['data']!=null) {
                        $('[data-cheque="'+id+'"]').text('Previously Cheque Issue for this job amount:  '+res['data']);
                    } else {
                        $('[data-cheque="'+id+'"]').text('');
                    }

                    $('[data-amount="'+id+'"]').val(res['do_charges']);
                },
                error: function(err) {
                    swal('Not Valid',err.responseJSON.message,'error');
                    // setTimeout(function() { 
                    //     location.reload();
                    // }, 1000);
                
                }
            });
        });


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

        $(document).on('click','.addRequest',function(e){
            e.preventDefault();

            var html='<div class="row" id="container_'+count+'">';
                html +='<div class="col-md-6">';
                html +='<div class="form-group">';
                html +='<label for="account_lists">Expenses</label>';
                html +='<select name="account_lists[]" class="form-control account_lists" data-id="'+count+'">';
                html +='<option value="0" selected disabled="">Select Expenses</option>';
                html +='@foreach ($exp as $e)';
                html +='<option value="{{$e->exp_name}}">{{$e->exp_name}}</option>';
                html +='@endforeach';
                html += '@foreach ($charts as $c)'
                html += '<option data-id="{{$c->category}}" value="{{$c->id}}">{{$c->name}}</option>'
                html += '@endforeach'
                html +='@foreach ($accounts as $acc)';
                html +='<option value="{{$acc->id}}">{{$acc->account_name}}-{{$acc->banks->bank_name}}</option>';
                html +='@endforeach';
                html +='</select>';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-6">';
                html +='<div class="form-group">';
                html +='<label for="job_no">Job</label>';
                html +='<span style="float:right" data-cheque="'+count+'"></span>';
                html +='<select name="job_no[]" data-job="'+count+'" class="form-control job_no">';
                html +='<option value="0" selected disabled="">Select Job</option>';
                html +='@foreach ($jobs as $j)';
                html +='<option value="{{$j->id}}">{{$j->job_no}}</option>';
                html +='@endforeach';
                html +='</select>';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-6">';
                html +='<div class="form-group">';
                html +='<label for="">Amount</label>';
                html +='<input type="text" name="amount[]" data-amount="'+count+'" class="form-control" placeholder="Amount">';
                html +='</div>';
                html +='</div>';
                html +='<div class="col-md-6">';
                html +='<div class="form-group">';
                html +='<label for="">Memo</label>';
                html +='<input type="text" name="memo_list[]" class="form-control" placeholder="Memo">';
                html +='</div>';
                html +='</div>';
                // html +='<div class="col-md-6 account_receivable_'+count+'">';
                // html +='<div class="form-group">';
                // html +='<label for="client_vendor">Clients</label>';
                // html +='<select name="client_vendor[]" class="form-control client_no">';
                // html +='<option value="0" selected disabled="">Select Client</option>';
                // html +='@foreach ($clients as $client)';
                // html +='<option value="{{$client->id}}">{{$client->client_name}}</option>';
                // html +='@endforeach';
                // html +='</select>';
                // html +='</div>';
                // html +='</div>';
                // html +='<div class="col-md-6 d-none account_payable_'+count+'">';
                // html +='<div class="form-group">';
                // html +='<label for="client_vendor">Vendors</label>';
                // html +='<select name="client_vendor[]" class="form-control vendor_no">';
                // html +='<option value="0" selected disabled="">Select Vendor</option>';
                // html +='@foreach ($vendors as $v)';
                // html +='<option value="{{$v->id}}">{{$v->v_fname}}</option>';
                // html +='@endforeach';
                // html +='</select>';
                // html +='</div>';
                // html +='</div>';
                html +='<input type="hidden" name="account_debited[]" class="account_debited_'+count+'">';
                html +='<div class="col-md-6 text-left text-md-right">';
                html +='<button class="btn btn-danger removeRequest" data-id="'+count+'">Remove</button>'
                html +='</div>';
                html +='</div>';
                $('#requests').append(html);
                count=count+1;
                $('.account_lists').select2();
                $('.job_no').select2();
        });

        $(document).on('click','.removeRequest',function(e){
            e.preventDefault();

            var data_id =$(this).attr('data-id');
            $('#container_'+data_id).remove();
        });
    })
    

</script>