@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" id="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" id="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" id="cheque_no" 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" id="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>
                                @foreach ($cheque_details as $item)
                                    <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 ($charts as $c)
                                                        <option data-id="{{ $c->category }}" value="{{ $c->id }}"
                                                            @if ($c->id == $item->account_lists) {{ 'selected' }} @endif>

                                                            {{ $c->name }}</option>
                                                    @endforeach
                                                    @foreach ($accounts as $acc)
                                                        <option value="{{ $acc->id }}"
                                                            @if ($acc->id == $item->account_lists) {{ 'selected' }} @endif>
                                                            {{ $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 }}"
                                                            @if ($j->id == $item->job_no) {{ 'selected' }} @endif>
                                                            {{ $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[]" value="{{ $item->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[]" value="{{ $item->memo_list }}"
                                                    class="form-control" placeholder="Memo">
                                            </div>
                                        </div>
                                        <input type="hidden" name="account_debited[]" class="account_debited_0">
                                    </div>
                                    <hr>
                                @endforeach
                            </div>

                            <div>
                                @if ($cheque->status=='Active')
                                <div>
                                    <button type="button" class="btn btn-danger mr-1" id="reverse">
                                        <i class="icon-trash"></i> Reverse
                                    </button>
                                </div>
                                @else
                                <div>
                                    <label for="" style="font-size: 20">Reason Of Cancellation:</label>
                                    <p>{{$cheque->reason}}</p>
                                </div>
                                @endif
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade text-left" id="reverse_modal" 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">Reverse Cheque</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="reversal_form" method="POST" action="">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="text-bold-500" for="note"> Reason </label>
                                            <input type="text" hidden name="entry_no" id="entry_no"
                                                value="{{ $cheque->id }}" class="form-control">
                                                <input type="text" name="transaction_name" id="transaction_name"
                                                value="Issue Cheque" hidden class="form-control">
            
                                    <textarea name="cancel_reason" required id="cancel_reason" class="form-control"></textarea>
                                </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="submit" class="btn btn-raised btn-success btn_reverse" id="btn_reverse">
                                <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_name').val('{{ $cheque->account_name }}')
            $('#date').val('{{ $cheque->date }}')
            $('#ref_no').val('{{ $cheque->ref_no }}')
            $('#cheque_no').val('{{ $cheque->cheque }}')
            $('.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('click', '#reverse', function() {
                $('#reverse_modal').modal('toggle');
            })
            $('#reversal_form').submit(function(e) {
                $('.btn_reverse').hide();
                e.preventDefault();
                var form_data = new FormData($("#reversal_form")[0]);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: "/general_journal_update",
                    type: "POST",
                    data: form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function(res) {
                        $('#btn_reverse').show();
                        swal("Success", "Entry has been Reversed", "success");
                        setTimeout(function() {
                            location.reload(true);
                        }, 1000);
                    },
                    error: function(err) {
                        swal('Not Valid', err.responseJSON.message, 'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    }
                });
            });
        })
    </script>