@extends(activeTemplate() .'layouts.app')

@push('css')
    <link href="{{asset(activeTemplate(true) .'front/css/tree.css')}}" rel="stylesheet">

@endpush

@section('content')
    <div class="container-fluid">
                <div class="card">
        <div class="row text-center justify-content-center llll">
            <!-- <div class="col"> -->
            <div class="w-1">
                @php echo showSingleUserinTree($tree['a']); @endphp
            </div>
        </div>
        <div class="row text-center justify-content-center llll">
            <!-- <div class="col"> -->
            <div class="w-2">
            @php echo showSingleUserinTree($tree['b']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-2 ">
            @php echo showSingleUserinTree($tree['c']); @endphp
            </div>
        </div>
        <div class="row text-center justify-content-center llll">
            <!-- <div class="col"> -->
            <div class="w-4 ">
                @php echo showSingleUserinTree($tree['d']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-4 ">
                @php echo showSingleUserinTree($tree['e']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-4 ">
                @php echo showSingleUserinTree($tree['f']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-4 ">
                @php echo showSingleUserinTree($tree['g']); @endphp
            </div>
            <!-- <div class="col"> -->

        </div>
        <div class="row text-center justify-content-center llll">
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['h']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['i']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['j']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['k']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['l']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['m']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['n']); @endphp
            </div>
            <!-- <div class="col"> -->
            <div class="w-8">
                @php echo showSingleUserinTree($tree['o']); @endphp
            </div>


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

    <div class="modal fade user-details-modal-area" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">@lang('User Details')</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="user-details-modal">
                        <div class="user-details-header ">
                            <div class="thumb"><img src="#" alt="*" class="tree_image" style="width: 100%; height: 100%;"></div>
                            <div class="content">
                                <a class="user-name tree_url tree_name" href=""></a>
                                <span class="user-status tree_status"></span>
                                <span class="user-status tree_plan"></span>
                            </div>
                        </div>
                        <div class="user-details-body text-center">

                            <h6 class="my-3">@lang('Referred By'): <span class="tree_ref"></span></h6>




<table class="table table-bordered">
    <tr>
        <th>&nbsp;</th>
        <th>@lang('LEFT')</th>
        <th>@lang('RIGHT')</th>
    </tr>

     <tr>
        <td>@lang('Current BV')</td>
        <td><span class="lbv"></span></td>
        <td><span class="rbv"></span></td>
    </tr>
     <tr>
        <td>@lang('Free Member')</td>
        <td><span class="lfree"></span></td>
        <td><span class="rfree"></span></td>
    </tr>

    <tr>
        <td>@lang('Paid Member')</td>
        <td><span class="lpaid"></span></td>
        <td><span class="rpaid"></span></td>
    </tr>
</table>

<!--


                            <p>Laboriosam modi quam placeat dolor.</p>
                            <p>Laboriosam modi quam placeat dolor.</p>
                            <p>Laboriosam modi quam placeat dolor.</p>
                            <p>Laboriosam modi quam placeat dolor.</p>
                            <p>Laboriosam modi quam placeat dolor.</p> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>



@endsection


@push('js')


<script>

        $('.showDetails').on('click', function () {

            var modal = $('#exampleModalCenter');
            $('.tree_name').text($(this).data('name'));
            $('.tree_url').attr({ "href": $(this).data('treeurl') });
            $('.tree_status').text($(this).data('status'));
            $('.tree_plan').text($(this).data('plan'));
            $('.tree_image').attr({ "src": $(this).data('image') });
            $('.user-details-header').removeClass('Paid');
            $('.user-details-header').removeClass('Free');
            $('.user-details-header').addClass($(this).data('status'));
            $('.tree_ref').text($(this).data('refby'));
            $('.lbv').text($(this).data('lbv'));
            $('.rbv').text($(this).data('rbv'));
            $('.lpaid').text($(this).data('lpaid'));
            $('.rpaid').text($(this).data('rpaid'));
            $('.lfree').text($(this).data('lfree'));
            $('.rfree').text($(this).data('rfree'));

            $('#exampleModalCenter').modal('show');
        });
</script>

@endpush
