@extends('layouts/microfin_layout')
@section('title', '| Loan Application Information Form')
@section('content')
    @include('microfin.loan.stack')
    @stack('formStyleScript')

    <script type="text/javascript">
        $("#loadingModal").show();
    </script>

    <div class="row add-data-form">
        <div class="col-md-12">
            <div class="col-md-10 col-md-offset-1 fullbody">
                <div class="viewTitle" style="border-bottom:1px solid white;">
                    <a href="{{ url('mfn/application') }}" class="btn btn-info pull-right addViewBtn">
                        <i class="glyphicon glyphicon-th-list viewIcon"></i>
                        Loan Application Information
                    </a>
                </div>
                <div class="panel panel-default panel-border">
                    <div class="panel-heading">
                        <div class="panel-title">
                            @if ($loanApplication->id > 0)
                                Edit
                            @else
                                Add
                            @endif Loan Application
                        </div>
                    </div>


                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                {!! Form::open(['url' => '', 'role' => 'form', 'class' => 'form-horizontal form-groups', 'id' => 'rootwizard']) !!}
                                {!! Form::hidden('memberId', $loanApplication->memberIdFk, ['id' => 'memberId']) !!}
                                {!! Form::hidden('edit_id', $loanApplication->id) !!}
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="panel-heading partTitle">
                                            Member Information
                                        </div>
                                    </div>
                                    {{-- @if (!in_array($userRoleId, Config('services.branch_level_user_roles'))) --}}
                                    @if (count($branchList) > 1)
                                        <div class="col-md-3">
                                            {!! Form::label('branch', 'Branch:', ['class' => 'control-label required']) !!}
                                            {!! Form::select('branchId', ['' => 'Select'] + $branchList, @$loanApplication->branchIdFk, [
                                                'class' => 'form-control',
                                                'id' => 'branch',
                                                $loanApplication->id > 0 ? 'disabled' : null,
                                            ]) !!}
                                        </div>
                                    @endif

                                    <div class="col-md-3">
                                        {!! Form::label('member', 'Member:', ['class' => 'control-label required']) !!}
                                        {!! Form::text('memberIdFk', $loanApplication->memberName, [
                                            'class' => 'form-control',
                                            'id' => 'member',
                                            'type' => 'text',
                                            'data-validate' => 'required',
                                            'autocomplete' => 'off',
                                            $loanApplication->id > 0 ? 'disabled' : null,
                                        ]) !!}
                                    </div>
                                    <div id="memberData">
                                        Loading..
                                    </div>
                                </div>

                                <ul class="pager wizard pull-right">
                                    {!! Form::submit('Submit', ['id' => 'submit', 'class' => 'btn btn-info']) !!}
                                    <a href="{{ url('mfn/application') }}" class="btn btn-danger closeBtn">Close</a>
                                </ul>

                                {!! Form::close() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (isset($members))
        <div id="memberList" class="container" style="display: none;position: absolute;">
            <table id="memberListTable" class="table table-fixed" style="font-size: 10px;">
                <tbody id="memberListTableBody"
                    style=" display:block;height: 120px;overflow-y: auto !important;overflow-x: hidden;float:left;">
                    @foreach ($members as $member)
                        <tr>
                            <td memberId="{{ $member->id }}" style="text-align: left;">
                                <span class="memberName" style="font-size: 11;font-weight: bold;">{{ $member->name }}</span>
                                -
                                <span class="memberCode"
                                    style="font-size: 11;font-weight: bold;">{{ $member->code }}</span><br>
                                {{ 'Branch: ' . $member->branchName }}<br>
                                {{ 'Samity: ' . $member->samityName }}<br>
                                {{ 'Working Area: ' . $member->workingArea }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif



    <script type="text/javascript">
        $(document).ready(function() {
            member_id = "{{ $loanApplication->memberIdFk }}";
            edit_id = "{{ $loanApplication->id }}";
            memberData(member_id);
            $("#loadingModal").hide();

            //Branch Wise Member(Start)
            $("#branch").change(function(event) {
                var branchId = $(this).val();
                $("#memberListTableBody").empty();
                $.ajax({
                        url: "{{ url('getBranchWiseMemeberDropDownList') }}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            branchId: branchId
                        },
                    })
                    .done(function(concatString) {
                        $("#memberListTableBody").append(concatString);
                        setMemberListTableSize();
                    })
                    .fail(function() {
                        console.log("error");
                    });

            });
            //Branch Wise Member(Start)


            /*set the memberList position*/
            function setMemberListTableSize() {
                var top = $('#member').offset().top - 85;
                var left = $('#member').offset().left - 15;
                var width = $('#member').width() + 42;
                $("#memberList").css({
                    top: top
                });
                $("#memberList").css({
                    left: left
                });
                $("#memberList, #memberListTable tbody tr td").width(width);
            }
            setMemberListTableSize();
            //Show Member List(Start)
            $("#member").click(function(event) {
                $("#memberList").show('slow/400/fast');
            });
            //Show Member List(End)

            $(document).mouseup(function(e) {
                var container = $("#memberList");
                // if the target of the click isn't the container nor a descendant of the container
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    container.hide('slow/400/fast', function() {

                    });
                }
            });

            /*on select td set the valus of hidden field for the member*/
            $(document).on("click", "#memberListTable tbody tr td", function(e) {
                $("#memberId").val($(this).attr('memberId'));
                $("#member").val($(this).find('.memberName').text() + ' - ' + $(this).find('.memberCode')
                    .text());
                $("#memberList").hide('slow/400/fast');
                $("#product").trigger('change');
                $("#memberId").trigger('change');
            });
            /*end on select td set the valus of hidden field for the member*/

            /*make search throgh table of member*/
            $("#member").on('input', function(event) {
                // Reset the values
                $("#memberId").val('');
                var inputValue = $(this).val().toLowerCase();
                $("#memberList").show('slow/400/fast');
                matchedIndex = [];

                $("#memberListTable tbody tr td").each(function(index, el) {
                    var memberName = $(el).find('.memberName').text().toLowerCase();
                    var memberCode = $(el).find('.memberCode').text().toLowerCase();
                    var fullText = memberName + ' - ' + memberCode;

                    if (memberName.indexOf(inputValue) !== -1 || memberCode.indexOf(inputValue) !==
                        -1 || fullText.indexOf(inputValue) !== -1) {
                        $(el).show();
                        matchedIndex.push($(el).closest('tr').index());
                    } else {
                        $(el).hide();
                    }
                });
                /* Act on the event */
            });
            /*end make search throgh table of member*/

            $("#memberId").change(function(event) {
                var memberId = $(this).val();
                if ($(this).val() == "") return false;

                $("#productIdFk").empty().append('<option value="">Select</option>');
                $("#newLoanCode").val("");
                $("#loanCode").val("");
                $("#loanCycle").val("");
                $("#numberOfInstallments option:gt(0)").remove();

                $.ajax({
                        url: "{{ url('mfn/getRegularLoanProductOptionsOnDisbursement') }}",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            memberId: memberId
                        },
                    })
                    .done(function(products) {
                        if (products.responseTitle == 'Warning!') {
                            toastr.error(products.responseText, products.responseTitle);
                            if(products.isAllowUpdateForm){
                                $("#memberMandatoryFieldsModal").find('.modal-content').html(products.html);
                                $("#memberMandatoryFieldsModal").modal();
                            }

                            setTimeout(() => {
                                $("#member").val('');
                            }, 100);
                        } else {
                            memberData(memberId);
                        }
                    })
                    .fail(function() {
                        alert("response error");
                    });
            });


        }); /*Ready*/
    </script>

    <script type="text/javascript">
        function memberData(memberId) {
            $.ajax({
                    url: "{{ url('mfn/application/memberData') }}",
                    type: 'POST',
                    dataType: 'html',
                    data: {
                        memberId: memberId,
                        edit_id: edit_id
                    },
                })
                .done(function(data) {
                    $('#memberData').html(data);
                })
                .fail(function() {
                    alert("response error");
                });
        }

    </script>



@endsection
<!-- Update Member Mandatory Fields -->
<div class="modal fade" id="memberMandatoryFieldsModal" tabindex="-1" role="dialog"
    aria-labelledby="memberMandatoryFieldsModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document"
        style="position: relative; top: 50%; transform: translateY(-50%);">
        <div class="modal-content">
            
        </div>
    </div>
</div>