@extends('layouts/microfin_layout')
@section('title', '| Member Bank')
@section('content')
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-10 col-md-offset-1 fullbody">

                {{-- Title  --}}
                <div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url('viewMember/') }}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list viewIcon"></i> Member Lists
                    </a>
                </div>

                {{-- Panel start  --}}
                <div class="panel panel-default panel-border">

                    <div class="panel-heading">
                        <div class="panel-title">Member Bank Information</div>
                    </div>

                    {{-- form start  --}}
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Form::open(['url' => '']) !!}
                                @include('microfin.member.member.navtabs')
                                @include('microfin.member.member.introduction')


                                <div class="tab-content">

                                    <div id="bankAccount" class="tab-pane active">
                                        <div class="form-group">
                                            @if ($bankAccountFormShow == true)
                                                {!! Form::hidden('memberId', $memberId) !!}
                                                <table id="bankAccountTable" class="table">
                                                    <thead>
                                                        <tr>
                                                            <th colspan="10">Bank Account Form</th>
                                                        </tr>
                                                        <tr>
                                                            <th style="width:10%;">Bank Type</th>
                                                            <th style="width:15%;">Bank Name</th>
                                                            <th style="width:15%;">Holder Name</th>
                                                            <th style="width:15%;">Account Number</th>
                                                            <th style="width:10%;">Routing Number</th>
                                                            <th style="width:10%;">Branch</th>
                                                            <th style="width:5%;">Bank File</th>
                                                            <th style="width:10%;">Effective Date</th>
                                                            <th style="width:10%;">Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($pendingBankAccounts as $bankAccount)
                                                            <tr>
                                                                <td>
                                                                    {!! Form::hidden('bankAccountId[]', $bankAccount->id) !!}
                                                                    {!! Form::select('bankType[]', ['' => 'Select'] + $BANK_TYPES, $bankAccount->bankType, [
                                                                        'class' => 'form-control bankType',
                                                                    ]) !!}
                                                                </td>
                                                                <td>{!! Form::select(
                                                                    'bankId[]',
                                                                    ['' => 'Select'] + ($bankAccount->bankType == 'bank' ? $banks : $mobileBankings),
                                                                    $bankAccount->bankId,
                                                                    ['class' => 'form-control bankList'],
                                                                ) !!} </td>
                                                                <td>{{ $member->name }}</td>
                                                                <td>{!! Form::text('accountNumber[]', @$bankAccount->accountNumber, ['class' => 'text-center form-control']) !!}</td>
                                                                <td>{!! Form::text('routingNumber[]', @$bankAccount->routingNumber, [
                                                                    'class' => 'text-center form-control routingNo routingNumber',
                                                                    $bankAccount->bankType == 'mobile_banking' ? 'readonly' : null,
                                                                ]) !!}</td>
                                                                {{-- <td>{!! Form::select('routingNumber[]', (@$bankAccount->bankRoutings)? @$bankAccount->bankRoutings : [],@$bankAccount->routingNumber , ['class' => 'text-center form-control routingNo routingNumber select2', ($bankAccount->bankType == 'mobile_banking') ? 'disabled' : null]) !!}</td> --}}
                                                                {{-- <td>
                                                                    <select name="routingNumber[]" class = 'text-center form-control routingNo routingNumber select2' @if ($bankAccount->bankType == 'mobile_banking') disabled @endif>
                                                                        @if (!empty($bankAccount->bankRoutings))
                                                                            @foreach ($bankAccount->bankRoutings as $bankRouting)
                                                                                <option branch="{{$bankRouting->branch_name}}" value="{{$bankRouting->routing_number}}">{{$bankRouting->routing_number}}</option>
                                                                            @endforeach
                                                                        @endif

                                                                    </select>
                                                                </td> --}}
                                                                <td>
                                                                    <span class="bankBranchName">
                                                                        {{ @$bankAccount->branchName }}</span>
                                                                    {!! Form::hidden('branchName[]', @$bankAccount->branchName, [
                                                                        'class' => 'text-center form-control branchName',
                                                                        'readonly',
                                                                    ]) !!}
                                                                </td>
                                                                {{-- <td>{!! Form::text('branchName[]', @$bankAccount->branchName, ['class' => 'text-center form-control branchName', ($bankAccount->bankType == 'mobile_banking') ? 'readonly' : null]) !!}</td> --}}
                                                                <td>
                                                                    {!! Form::file('bankFile[]', [
                                                                        'class' => 'text-left',
                                                                        'style' => 'width:150px;',
                                                                        $bankAccount->bankType == 'mobile_banking' ? 'disabled' : null,
                                                                    ]) !!}
                                                                    @if (@$bankAccount->bankFile)
                                                                        <a target="_blank"
                                                                            class="pull-left text-info bankFile"
                                                                            href="{{ url('uploads/images/member/bankFile/' . $bankAccount->bankFile) }}">Show
                                                                            File</a>
                                                                    @endif
                                                                </td>
                                                                <td class="effectiveDateTd">{!! Form::text(
                                                                    'effectiveDate[]',
                                                                    isset($bankAccount->effectiveDate) && $bankAccount->effectiveDate
                                                                        ? date('d-m-Y', strtotime(@$bankAccount->effectiveDate))
                                                                        : null,
                                                                    ['class' => 'text-center form-control datepicker effectiveDate', 'readonly' => 'readonly'],
                                                                ) !!}</td>
                                                                <td class="text-center"><i class="fa-plus-square addRow"
                                                                        style="font-size: 26px;"></i>
                                                                    &nbsp; &nbsp;<i class="fa-minus-square removeRow"
                                                                        style="font-size: 26px; @if (count($pendingBankAccounts) < 2) display:none; @endif "></i>
                                                                </td>

                                                            </tr>
                                                        @endforeach
                                                        {{-- <tr>
                                                            <td colspan="6"><b  class="pull-right required"> Effective Date &nbsp;</b></td>
                                                            <td colspan="2">{!! Form::text('effectiveDate', (isset($bankAccount->effectiveDate) && $bankAccount->effectiveDate) ? date('d-m-Y', strtotime(@$bankAccount->effectiveDate)) : null, ['class' => 'text-center form-control datepicker', 'readonly' => 'readonly', 'id' => 'effectiveDate']) !!}</td>
                                                        </tr> --}}
                                                    </tbody>
                                                    <tfoot>
                                                        <tr>
                                                            <td colspan="18">
                                                                <input id="submit"
                                                                    class="btn btn-primary text-uppercase pull-right"
                                                                    type="submit" value="Submit">
                                                                {{-- <a href="" class="btn btn-red text-uppercase  pull-right">Close</a> --}}
                                                            </td>
                                                        </tr>
                                                    </tfoot>
                                                </table>
                                                {!! Form::close() !!}
                                            @endif


                                            @if (count($approvedBankAccounts) > 0)
                                                <hr>
                                                <table class="table" width="100%">
                                                    <thead>
                                                        <tr>
                                                            <th style="width:5%;">Bank Type</th>
                                                            <th style="width:10%;">Bank Name</th>
                                                            {{-- <th style="width:15%;">Holder Name</th> --}}
                                                            <th style="width:12%;">Account Number</th>
                                                            <th style="width:7%;">Routing Number</th>
                                                            <th style="width:6%;">Branch</th>
                                                            <th style="width:6%;">Effective Date</th>
                                                            <th style="width:8%;">Create At</th>
                                                            <th style="width:10%;">Approved By</th>
                                                            <th style="width:10%;">Approved At</th>
                                                            <th style="width:6%;">Cheque Details</th>
                                                            <th style="width:5%;">Status</th>
                                                            @if ($showActionColumn == true)
                                                                <th>Action</th>
                                                            @endif

                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($approvedBankAccounts as $bankAccount)
                                                            <tr>
                                                            <td> {{ $BANK_TYPES[$bankAccount->bankType]}}</td>
                                                            <td>{{$bankAccount->bankName }}</td>
                                                            {{-- <td>{{$member->name}}</td> --}}
                                                            <td>{{$bankAccount->accountNumber}}</td>
                                                            <td>{{$bankAccount->routingNumber}}</td>
                                                            <td>{{$bankAccount->branchName}}</td>
                                                            <td>{{date('d-m-Y', strtotime(@$bankAccount->effectiveDate))}}</td>
                                                            <td>{{date('d-m-Y H:i', strtotime(@$bankAccount->createdAt))}}</td>
                                                            <td>{{date('d-m-Y H:i', strtotime(@$bankAccount->approvedAt))}}</td>
                                                            <td>{{isset($users[$bankAccount->approvedBy]) ? $users[$bankAccount->approvedBy]->approve_by : null}}</td>
                                                            <td>
                                                                @if ($bankAccount->bankFile)
                                                                   <a target="_blank"  href="{{ url('uploads/images/member/bankFile/' . $bankAccount->bankFile) }}"><i class="fa fa-eye" aria-hidden="true"></i></a>
                                                                @else
                                                                   N/A
                                                               @endif
                                                           </td>
                                                            <td>
                                                                @if(auth::user()->branchId == 1)
                                                                    <input data-id="{{$bankAccount->id}}" class="bankAccStatus" type="checkbox"  @if ($bankAccount->status == 1) checked @endif data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" data-size="mini">
                                                                @else
                                                                    @if ($bankAccount->status == 1)
                                                                        <input data-id="{{$bankAccount->id}}" class="bankAccStatus" type="checkbox"   checked data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" data-size="mini">
                                                                     @else
                                                                        Inactive
                                                                     @endif
                                                                @endif

                                                            </td>
                                                           @if ($showActionColumn == true)
                                                               <td>
                                                                    <a href="javascript:;" class="update-bank-info" data-id="{{ $bankAccount->id }}" title="Edit">
                                                                        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                                                    </a> &nbsp
                                                                </td>
                                                           @endif
                                                        </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                                <br />
                                            @endif
                                        </div>
                                    </div>
                                </div>


                            </div>

                        </div>
                    </div>
                    {{-- form end  --}}

                </div>
                {{-- Panel end  --}}

            </div>
        </div>
    </div>

    <div class="modal fade" id="show-bank-update-modal">
        <div class="modal-dialog modal-lg" id="update-bank" style="margin-top: 150px;">

        </div>
    </div>

    <script>
        $(function() {
            $('.bankAccStatus').change(function() {
                var status = $(this).prop('checked') == true ? 1 : 0;
                var bankAccid = $(this).data('id');
                if (hasAccess('mfn/memberBank/status/update')) {
                    $.ajax({
                        type: "GET",
                        dataType: "json",
                        url: "{{ route('memberBank.status.update') }}",
                        data: {
                            'status': status,
                            'bankAccId': bankAccid
                        },
                        success: function(data) {
                            if (data.responseTitle == "Success!") {
                                toastr.success(data.responseText, data.responseTitle, opts);
                                setTimeout(function(){
                                    // window.location.href = "{{ route('statement.config.view') }}";
                                    location.reload();
                                }, 2000);
                            }else{
                                toastr.warning(data.responseText, data.responseTitle, opts);
                            }
                        }
                    });
                }
            });
        });
    </script>
    <script>
        /*bank update Modal*/
        $(document).on('click', '.update-bank-info', function(event) {
            if (hasAccess('mfn/member/bank/edit')) {
                var url = "{{ url('mfn/member/bank/edit') }}/" + $(this).data('id')
                $.ajax({
                        // url: 'mfn/member/bank/edit',
                        url: url,
                        type: 'get',
                        dataType: 'html',
                        data: {
                            // '_token': "{{ csrf_token() }}",
                            'id': $(this).data('id')
                        },
                    })
                    .done(function(data) {
                        jQuery('#show-bank-update-modal').modal('show', {
                            backdrop: 'static'
                        });
                        $('#update-bank').html(data);
                    })
                    .fail(function() {
                        console.log("error");
                    })
            }
        });
        /*End bank update MOdal*/



        $(".datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'dd-mm-yy',
        });

        $('body').on('focus', ".effectiveDate", function() {
            $(this).datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'dd-mm-yy',
            });
        });

        $(document).ready(function() {

            $("form").on('keyup', '.routingNo', function() {
                var numberLength = $(this).val().length;
                var closestRow = $(this).closest('tr');
                if (numberLength == 9) {

                    var routingNumber = $(this).val();
                    var bankId = closestRow.find('[name="bankId[]"]').val()
                    // var closestRowId = closestRow.find('.routingNo').attr('name').match(/\[(.*?)\]/)[1];
                    $.ajax({
                        url: "{{ route('bank.routing.info') }}",
                        type: "get",
                        data: {
                            routingNumber: routingNumber,
                            bankId: bankId
                        },
                        success: function(response) {
                            if (response.responseTitle == 'Warning!') {
                                toastr.warning(response.responseText, response.responseTitle,
                                    opts);
                            } else {
                                var branchNameInput = closestRow.find('.branchName');
                                branchNameInput.val(response.branch_name);
                                var bankbranchNameInput = closestRow.find('.bankBranchName');
                                bankbranchNameInput.html(response.branch_name);
                            }

                        },
                        error: function(error) {
                            console.error(error);
                            // Handle any errors during the AJAX request (optional)
                        }
                    });
                } else {
                    var branchNameInput = closestRow.find('.branchName');
                    branchNameInput.val("");
                    var bankbranchNameInput = closestRow.find('.bankBranchName');
                    bankbranchNameInput.html("");
                }
            });

            // $(document).on('click', '.addRow', function(event) {
            //     row = $('#bankAccountTable tbody tr:first-child').clone().find('input').val(null).end().find(
            //         'select').val(null).end();
            //     $(row).find('.effectiveDateTd').html('<input class="text-center form-control datepicker effectiveDate" readonly="readonly" name="effectiveDate[]" type="text">');

            //     $(row).insertAfter($(this).closest('tr'));
            //     setAction("#bankAccountTable tbody tr");
            //     $(row).find('.routingNo').select2();
            // });

            $(document).on('click', '.addRow', function(event) {
                var originalRow = $('#bankAccountTable tbody tr:first-child');
                // originalRow.find('.routingNo').select2('destroy');

                // Clone the row now that Select2 has been removed
                var newRow = originalRow.clone();

                // Reset input and select values in the cloned row
                newRow.find('input').val('');
                newRow.find('.bankBranchName').html('');
                newRow.find('select').val(null);
                newRow.find('.bankFile').remove();
                // newRow.find('.routingNo').html('<option value="">select</option>');

                newRow.find('.effectiveDateTd').html(
                    '<input class="text-center form-control datepicker effectiveDate" readonly="readonly" name="effectiveDate[]" type="text">'
                    );

                newRow.insertAfter($(this).closest('tr'));

                // Reinitialize Select2 on the original row
                // originalRow.find('.routingNo').select2();

                // Initialize Select2 on the .routingNo element in the newly added row
                // newRow.find('.routingNo').select2();

                setAction("#bankAccountTable tbody tr");
            });

            function setAction(selector) {
                var rowCount = $(selector).length;
                if (rowCount < 2) {
                    $('.removeRow').hide('slow');
                } else {
                    $('.removeRow').show('slow');
                };
            }

            $('body').on('click', '.removeRow', function(event) {
                $(this).closest('tr').remove();
                setAction("#bankAccountTable tbody tr");
            });

            $('body').on('change', '[name="bankType[]"]', function(e) {
                // $('[name="bankType[]"]').on('change', function(e) {
                var bankType = $(this).val();
                var row = $(this).closest('tr');
                row.find('[name="routingNumber[]"]').prop('readonly', true);
                row.find('[name="branchName[]"]').prop('readonly', true);
                row.find('[name="bankFile[]"]').prop('disabled', true);
                row.find('[name="bankId[]"]').find("option:gt(0)").remove();

                if (bankType == 'bank') {
                    row.find('[name="routingNumber[]"]').prop('readonly', false);
                    // row.find('[name="branchName[]"]').prop('readonly', false);
                    row.find('[name="bankFile[]"]').prop('disabled', false);

                    var banks = JSON.parse(JSON.stringify(<br />
<b>Warning</b>:  Undefined variable $banks in <b>/home/shikkhaplus/public_html/demo_bk/resources/views/microfin/member/bank/form.blade.php</b> on line <b>420</b><br />
null));
                    $.each(banks, function(index, value) {
                        row.find('[name="bankId[]"]').append('<option value="' + index + '">' +
                            value + '</option>');
                    });
                } else {
                    var mobileBankings = JSON.parse(JSON.stringify(<br />
<b>Warning</b>:  Undefined variable $mobileBankings in <b>/home/shikkhaplus/public_html/demo_bk/resources/views/microfin/member/bank/form.blade.php</b> on line <b>426</b><br />
null));
                    $.each(mobileBankings, function(index, value) {
                        row.find('[name="bankId[]"]').append('<option value="' + index + '">' +
                            value + '</option>');
                    });
                    row.find('[name="routingNumber[]"]').val("");
                    row.find('[name="branchName[]"]').val("");
                    row.find('.bankBranchName').html("");
                }
            });



            /** //  get bank routing number
                $(document).on('change','.bankList',function(e){
                    var row = $(this).closest('tr');
                    var bankType = $(row).find('.bankType').val();
                    if (bankType == "bank") {
                        var bankId = $(row).find('.bankList').val();
                        $(row).find('.routingNumber').html('<option value="">select</option>');
                        $.ajax({
                            url: "{{ route('bank.routing.info') }}",
                            type: 'get',
                            dataType: 'json',
                            data: {
                                'bankId': bankId
                            },
                        })
                        .done(function(data) {
                            $.each(data, function(key) {
                                $(row).find('.routingNumber').append(`<option branch=${data[key].branch_name} value=${data[key].routing_number}>${data[key].routing_number}</option>`);
                            });
                        })
                        .fail(function() {
                            console.log("error");
                        })
                    }
                });
            //  get bank routing number | end

            // set branch name
            $(document).on('change', '.routingNumber', function(e) {
                var row = $(this).closest('tr');
                var selectedOption = $(this).find('option:selected');
                var branchName = selectedOption.attr('branch');
                if (typeof branchName == 'undefined') {
                    var branchName = selectedOption.attr('value');
                }
                $(row).find('.branchName').val(branchName);
            });
            // set branch name | end */
        });
        /*Form*/
        $('form').off().submit(function(event) {
            event.preventDefault();
            $("input[type=submit]").prop('disabled', true);
            $("button").prop('disabled', true);
            $("#loadingModal").show();
            var formData = new FormData(this);
            $.ajax({
                type: 'post',
                url: "{{ url('mfn/member/bank/store') }}",
                data: formData,
                contentType: false,
                cache: false,
                dataType: 'json',
                processData: false,
                success: function(_response) {
                    $("#loadingModal").hide();
                    $("input[type=submit]").prop('disabled', false);
                    $("button").prop('disabled', false);
                    $(".error").remove();
                    if (_response.errors) {
                        $.each(_response.errors, function(name, error) {
                            $("#" + name).after("<p class='error'>* " + _response
                                .errors[name] + "</p>");
                        });
                    } else {
                        if (_response.responseTitle == 'Warning!') {
                            toastr.warning(_response.responseText, _response.responseTitle,
                                opts);
                        } else {
                            toastr.success(_response.responseText, _response.responseTitle,
                                opts);
                            setTimeout(function() {
                                window.location.href =
                                    "{{ url('viewMember') }}";
                            }, 2000);
                        }
                    }
                },
                error: function(_response) {
                    $("#loadingModal").hide();
                    $("input[type=submit]").prop('disabled', false);
                    $("button").prop('disabled', false);
                    alert('Response Error');
                }
            });

        });
        /* End Form*/
    </script>

@endsection

<script></script>