@extends('backend.layouts.app')
@section('content')
<div class="row">
    <div class="col-lg-10"></div>
    <div class="col-lg-2">
        <h4 class="card-title mb-2"><a href="{{ route('leaderboard') }}" class="btn btn-outline-warning">{{ translate('Leaderborad') }} </a></h4>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <form class="" id="sort_customers" action="" method="GET">
                    <div class="row">
                        <div class="col-lg-3">
                            <h4 class="card-title mb-0">{{ translate('User Details') }}</h4>
                        </div>

                        <!-- Sort By Life -->
                        <div class="col-lg-2 mb-auto">
                            <div class="form-group mb-0">
                                <select class="form-control rns-selectpicker" name="life" onchange="sort_customers()">
                                    <option value="" disabled {{ is_null(request('life')) ? 'selected' : '' }}>{{translate('Sort By Life...')}}</option>
                                    <option value="hint" {{ request('life') == 'hint' ? 'selected' : '' }}>{{translate('Hint')}}</option>
                                    <option value="hint_special" {{ request('life') == 'hint_special' ? 'selected' : '' }}>{{translate('Hint Special')}}</option>
                                    <option value="life" {{ request('life') == 'life' ? 'selected' : '' }}>Life</option>
                                    <option value="life_special" {{ request('life') == 'life_special' ? 'selected' : '' }}>{{translate('Life Special')}}</option>
                                </select>
                            </div>
                        </div> 

                        <!-- Sort By Points/ Wallet -->
                        <div class="col-lg-2 mb-auto">
                            <div class="form-group mb-0">
                                <select class="form-control rns-selectpicker" name="sort" onchange="sort_customers()">
                                    <option value="" disabled {{ is_null(request('points')) ? 'selected' : '' }}>{{translate('Sort By Points/Wallet...')}}</option>
                                    <option value="points" {{ request('sort') == 'points' ? 'selected' : '' }}>{{translate('Points')}}</option>
                                    <option value="wallet" {{ request('sort') == 'wallet' ? 'selected' : '' }}>{{translate('Wallet')}}</option>
                                </select>
                            </div>
                        </div>

                        <!-- Sort By Win/Lose -->
                        <div class="col-lg-2 mb-auto">
                            <div class="form-group mb-0">
                                <select class="form-control rns-selectpicker" name="win" onchange="sort_customers()">
                                    <option value="" {{ request('win') == '' ? 'selected' : '' }}>{{translate('All')}}</option>
                                    <option value="1" {{ request('win') == '1' ? 'selected' : '' }}>{{translate('Win')}}</option>
                                    <option value="0" {{ request('win') == '0' ? 'selected' : '' }}>{{translate('Lose')}}</option>
                                </select>
                            </div>
                        </div> 

                        <!-- Search -->
                        <div class="col-lg-3 mb-auto">
                            <div class="form-group mb-0">
                                <input type="text" class="form-control" id="search" name="search" value="{{ $sort_search }}" placeholder="{{ translate('Type Email or Name & Enter') }}">
                            </div>
                        </div> 
                    </div>
                </form>
            </div><!-- end card header -->
            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table align-middle table-hover table-nowrap" id="myTable">
                        <thead class="table-light">
                            <tr>
                                <th>{{ translate('#') }}</th>
                                <th>{{ translate('Profile') }}</th>
                                <th>{{ translate('Name') }}</th>
                                <th>{{ translate('Email') }}</th>
                                <th>{{ translate('Mobile') }}</th>
                                <th>{{ translate('Points') }}</th>
                                <th>{{ translate('Wallet') }}</th>
                                <th>{{ translate('Life') }}</th>
                                <th>{{ translate('Life Special') }}</th>
                                <th>{{ translate('Hint') }}</th>
                                <th>{{ translate('Hint Special') }}</th>
                                <th>{{ translate('Play Quiz') }}</th>
                                <th>{{ translate('Action') }}</th>
                            </tr>
                        </thead>
                        <tbody class="list form-check-all">
                            @if ($users->count() > 0)
                                @foreach ($users as $user)
                                    <tr id="tr_{{ $user->id }}">
                                        <td class="count">{{ str_pad($user->id, 5, '0', STR_PAD_LEFT) }}</td>
                                        <td>
                                            @if (empty($user->image))
                                                <i class="las la-user-circle avatar-icon me-3 rounded-circle" style="font-size: 34px; width: 34px; height: 34px;"></i>
                                            @else
                                                <img class="rounded-circle header-profile-user" src="{{ asset($user->image) }}" alt="Profile">
                                            @endif
                                        </td>
                                        <td>{{ $user->first_name . ' ' . $user->last_name }}</td>
                                        <td>{{ $user->email }}</td>
                                        <td>{{ $user->phone }}</td>
                                        <td>{{ $user->points }}</td>
                                        <td>{{ $user->wallet_amount }}</td>
                                        <td>{{ $user->life }}</td>
                                        <td>{{ $user->life_special }}</td>
                                        <td>{{ $user->hint }}</td>
                                        <td>{{ $user->hint_special }}</td>
                                        
                                        <td>
                                            <div class="d-flex gap-2 mt-2">
                                                <div class="dropdown">
                                                    <button type="button" class="btn btn-soft-warning btn-icon btn-circle btn-md dropdown-toggle" data-bs-toggle="dropdown" style="margin-top: -10px;">
                                                        {{totalPlayQuiz($user->id)}}
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li><a class="dropdown-item text-success" href="#"><strong>{{ 'Win : ' . totalWonQuiz($user->id) }}</strong></a></li>
                                                        <li><a class="dropdown-item text-danger" href="#"><strong>{{ 'Lose : ' . totalLoseQuiz($user->id) }}</strong></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                        {{ $user->isBanned() }}
                                        <td>
                                            <div class="d-flex gap-2">
                                                <div class="edit" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit User">
                                                    <a class="btn btn-soft-primary btn-icon btn-circle btn-sm edit-button" href="javascript:void(0)" onclick="editModal({{ $user->id }})">
                                                        <i class="las la-edit"></i>
                                                    </a>
                                                </div>
                                                <div class="bank" data-bs-toggle="tooltip" data-bs-placement="top" title="Bank Info">
                                                    <a class="btn btn-soft-info btn-icon btn-circle btn-sm edit-button" href="javascript:void(0)" onclick="bankModal({{ $user->id }})">
                                                        <i class="las la-landmark"></i>
                                                    </a>
                                                </div>

                                                <div class="edit" data-bs-toggle="tooltip" data-bs-placement="top" title="Ban/Unban">
                                                    @if (!$user->isBanned())
                                                        <form method="POST" id="ban-form" action="{{ route('user.ban.days', ['id' => $user->id]) }}">
                                                            @csrf
                                                            <input type="hidden" name="ban_days" id="ban_days" value="">
                                                        
                                                            <div class="dropdown">
                                                                <button type="button" class="btn btn-soft-success btn-icon btn-circle btn-md edit-button dropdown-toggle" data-bs-toggle="dropdown" style="margin-top: -30px;">
                                                                    <i class="las la-user-check"></i>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li><a class="dropdown-item" href="#" data-value="permanent">{{translate('Permanently')}}</a></li>
                                                                    <li><a class="dropdown-item" href="#" data-value="7">{{translate('7 Days')}}</a></li>
                                                                    <li><a class="dropdown-item" href="#" data-value="10">{{translate('10 Days')}}</a></li>
                                                                    <li><a class="dropdown-item" href="#" data-value="15">{{translate('15 Days')}}</a></li>
                                                                    <li><a class="dropdown-item" href="#" data-value="20">{{translate('20 Days')}}</a></li>
                                                                    <li><a class="dropdown-item" href="#" data-value="30">{{translate('30 Days')}}</a></li>
                                                                </ul>
                                                            </div>
                                                        </form>
                                                    @else
                                                        <form action="{{ route('user.unban', ['id' => $user->id]) }}" method="POST" style="display:inline;">
                                                            @csrf
                                                            <button type="submit" class="btn btn-soft-danger btn-icon btn-circle btn-sm edit-button" 
                                                                    @if($user->ban_expires_at)
                                                                        title="Ban user until {{ $user->ban_expires_at->toDateString() }}"
                                                                    @else
                                                                        title="Ban user permanently"
                                                                    @endif>
                                                                <i class="las la-user-slash"></i>
                                                            </button>
                                                        </form>
                                                    @endif
                                                </div>

                                                <div class="remove" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">
                                                    <button class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete" data-bs-toggle="modal" data-bs-target="#deleteRecordModal" data-href="{{ route('questions.destroy', $user->id) }}"><i class="las la-trash"></i></button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="8">{{translate('No users available.')}}</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>                    
                    <div class="row">
                        <div class="pagination pagination-sm">
                            {{ $users->appends(request()->input())->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--Edit Modal Form-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal content will be loaded here dynamically -->
        </div>
    </div>
</div>

<!--Bank Modal-->
<div class="modal fade" id="bankModal" tabindex="-1" role="dialog" aria-labelledby="bankModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            
            <!-- Modal content will be loaded here dynamically -->
        </div>
    </div>
</div>

@include('backend.modals.delete')
@endsection
@section('script')
<script>
    function sort_customers(el){
        $('#sort_customers').submit();
    }

    function editModal(id) {
        $.post('{{ route("user.edit") }}', { 
            _token: '{{ csrf_token() }}', 
            id: id 
        }, function(data) {
            $('#editModal .modal-content').html(data);
            $('#editModal').modal('show', { backdrop: 'static' });
        });
    }

    function bankModal(id) {
        $.post('{{ route("user.bank.update") }}', { 
            _token: '{{ csrf_token() }}', 
            id: id 
        }, function(data) {
            $('#bankModal .modal-content').html(data);
            $('#bankModal').modal('show', { backdrop: 'static' });
        });
    }

    $(document).ready(function () {
        $('.dropdown-item').on('click', function (e) {
            e.preventDefault();

            const value = $(this).data('value');
            $('#ban_days').val(value);

            $('#ban-form').submit();
        });
    });


    function updateRtl(el, userId, status) {
        $.post("{{ route('user.update_rtl_status') }}", {
            _token: "{{ csrf_token() }}",
            id: userId,
            status: status
        }, function (data) {
            if (data == 1) {
                RNS.plugins.notify('success', 'User Status updated successfully');
                location.reload();
            } else {
                RNS.plugins.notify('danger', 'Something went wrong');
            }
        });
    }

    //Search Filter
    $(document).ready(function (){
        $("#filter").on("keyup", function() {
            var value =$(this).val().toLowerCase();
            $("table tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });
    });

    function bankVerify(el) {
        var status = el.checked ? 1 : 0;
        $.post("{{ route('user.bank.verify') }}", {
            _token: "{{ csrf_token() }}",
            id: el.value,
            status: status
        }, function (data) {
            if (data == 1) {
                RNS.plugins.notify('success', '{{ __('Bank Verify Status updated successfully') }}');
            } else {
                RNS.plugins.notify('danger', '{{ __('Something went wrong') }}');
            }
        });
    }

    function updatebankstatus(el) {
        var status = el.value;
        var id = $(el).data('id');

        $.post("{{ route('user.bank.status') }}", {
            _token: "{{ csrf_token() }}",
            id: id,
            status: status
        }, function (data) {
            if (data == 1) {
                RNS.plugins.notify('success', '{{ __('Bank Status updated successfully') }}');
            } else {
                RNS.plugins.notify('danger', '{{ __('Something went wrong') }}');
            }
        });
    }



</script>
@endsection