@extends('layouts.master')

@section('title', __('My Team'))

@section('content')
<section>
    <!-- TAB CONTENT AREA -->
    <div class="tab-content p-0" id="renderable">
        <div class="tab-pane fade show active" id="teme_list">
            <div class="card">
                <div class="card-body">
                    <div class="text-center user_tables">
                        <div id="custom_toolbar_user">
                            <div class="dropdown" title="Export data">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-download"></i> {{__('Export')}}</button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="javascript:void(0)" onclick="exportTasks('referral_user_member',['user_id','username','email','rank','tsv','created_at','last_login_date','status'],'csv')">{{ __('CSV') }}</a>
                                    <a class="dropdown-item" href="javascript:void(0)" onclick="exportTasks('referral_user_member',['user_id','username','email','rank','tsv','created_at','last_login_date','status'],'zip')">{{ __('ZIP') }}</a>
                                </div>
                            </div>
                        </div>
                        <table class="table-striped" id="bstable" data-ajax="ajaxRequestAllReferralUser" data-show-button-text="true" data-icons="icons" data-icons-prefix="bi" data-filter-control="true" data-show-search-clear-button="true" data-side-pagination="server" data-pagination="true" data-sortable="true" data-toggle="table" data-show-columns="true" data-show-toggle="false" data-show-export="false" table-for="my_team" data-show-columns-toggle-all="false" data-total-field="count" data-data-field="items" data-toolbar="#custom_toolbar_user" style="text-align: left;" data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                            <thead class="sticky-header">
                            <tr>
                                <th data-field="user_id" data-align="left" data-filter-control="input" data-filter-control-placeholder="Id">{{ __('Id') }}</th>
                                <th data-field="username" data-align="left" data-filter-control="input" data-filter-control-placeholder="Username">{{ __('Username') }}</th>
                                <th data-field="email" data-align="left" data-filter-control="input" data-filter-control-placeholder="Email">{{ __('Email') }}</th>
                                <th data-field="rank" data-align="left" data-sortable="true" data-filter-control="input" data-filter-control-placeholder="Rank">{{ __('Rank') }}</th>
                                <th data-field="tsv" data-align="left" data-sortable="true" data-filter-control="input" data-filter-control-placeholder="TSV">{{ __('TSV') }}</th>
                                <th data-field="created_at" data-align="left" data-sortable="true" data-filter-control="input" data-filter-control-placeholder="Registration Time">{{ __('Registration Time') }}</th>
                                <th data-field="last_login_date" data-align="left" data-filter-control="input" data-filter-control-placeholder="Last Login Time">{{ __('Last Login Time') }}</th>
                                <th data-field="status" data-align="left" data-filter-data="var:userStatus" data-filter-control="select" data-filter-control-placeholder="Status" data-formatter="userStatusFormat">{{ __('Status') }}</th>
                                <th data-field="action" data-align="left" data-width-unit="px">{{ __('Action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END -->
</section>
<div class="modal fade" id="memberAssignModal" data-bs-backdrop="static" data-bs-keyboard="false"  aria-labelledby="memberAssignModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered checkout-popup">
        <div class="modal-content">
            <form action="{{route('member.my-team.store')}}" method="post" id="memberForm">
                <input type="hidden" name="member_id" id="member_id">
                <div class="modal-header">
                    <h5 class="modal-title" id="memberAssignModalLabel">{{ __('Assign Placement Sponsor') }}</h5>
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group col-12 col-md-12">
                        <div class="relative z-0 w-full group mb-1">
                            <select class="rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="personal_sponsor_id" id="personal_sponsor_id" aria-label="Default select example">
                                <option selected value="">{{ __('Select User') }}</option>
                            </select>
                            <label for="personal_sponsor_id" class="col-form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Select User') }}</label>
                            <span class="custom-error error personal_sponsor_id_error"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-flex justify-content-start">
                    <button type="submit" class="btn btn-primary submitBtn">{!! renderIconHtml('save') !!}{{ __('Save') }}</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">{!! renderIconHtml('cancel') !!}{{ __('Close') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    let readOnlyMode = "{{ readOnlyMode() ?? '' }}";
    var userStatus =  JSON.parse('{!! json_encode($userStatus ?? []) !!}');
</script>
<script src="{{asset('frontend/js/page-js/referral-users.js')}}"></script>
@endpush