@extends('layouts.master')
@section('title') @lang('translation.users') @endsection

@section('css')
    <!--Datatable CSS-->
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet" type="text/css" />
    <!--Datatable Responsive CSS -->
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')

    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.users')
        @endslot
        @slot('title')
            @lang('translation.list')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- Datatable Start -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0" style="width:50%;float:left">User List</h1>
                    <!-- Add Button -->
                    @can('Add User')
                        <a href="{{ route('user.add', 'all') }}" class="btn btn-primary btn-sm" style="float:right;">Add User</a>

                    @endcan
                </div>
                <div class="row p-3 filter-container align-items-center">
                    <div class="col-md-6">
                        <form id="filter" method="get" action="{{ route('user.list') }}" class="row align-items-end">
                            <div class="col-md-6">
                                <label for="filterState" class="form-label">Filter by State:</label>
                                <select class="form-select state-select-2" id="filterState" name="state_id">
                                    <option value="" selected>Select State</option>
                                    @foreach($states as $s)
                                        <option value="{{ $s->id }}" {{ $s->id == $state ? 'selected' : '' }}>{{$s->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </form>
                    </div>
                    @if(auth()->user()->hasRole(App\Models\User::SuperAdmin))
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check form-switch form-switch-md">
                                        <input type="hidden" value="0" name="enable_max_rtp">
                                        <input class="form-check-input" name="enable_max_rtp" value="1" type="checkbox"
                                               id="enable_max_rtp" {{ get_settings('enable_max_rtp') ? 'checked' : '' }}
                                               onchange="updateSetting('max_rtp', this.checked)">
                                        <label class="form-check-label" for="enable_max_rtp">Enable or Disable Max RTP</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-switch form-switch-md">
                                        <input type="hidden" value="0" name="enable_send_balance">
                                        <input class="form-check-input" name="enable_send_balance" value="1" type="checkbox"
                                               id="enable_send_balance" {{ get_settings('enable_send_balance') ? 'checked' : '' }}
                                               onchange="updateSetting('send_balance', this.checked)">
                                        <label class="form-check-label" for="enable_send_balance">Enable or Disable Send Balance</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
                <div class="card-body">
                    <table id="user-table" class="table table-bordered dt-responsive nowrap table-striped align-middle" style="width:100%">
                        <thead>
                        <tr>
                            <th class="text-center">Id</th>
                            <th class="text-center">Name</th>
                            @if (Auth::user()->hasRole('Super Admin'))
                                <th class="text-center">Email</th>
                            @endif
                            <th class="text-center">Username</th>
                            <th class="text-center">Account</th>
                            <th class="text-center">Role</th>
                            <th class="text-center">Cash</th>
                            <th class="text-center">Approved By</th>
                            <th class="text-center">Max RTP</th>
                            <th class="text-center">Online Activity</th>
                            <th class="text-center">Last Online</th>
                            <th class="text-center">Login Count</th>
                            <th class="text-center">Actions</th>
                        </tr>
                        </thead>
                    </table>

                    <div id="BalanceModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-body">
                                    <form method="POST" action="{{ route('change.balance') }}">
                                        @csrf
                                        <input type="hidden" name="user_id" id="user_id">

                                        <div class="row">
                                            <div class="col-4">
                                                <h4 class="mb-3">Name</h4>
                                            </div>
                                            <div class="col-4">
                                                <h4 class="mb-3">Quantity</h4>
                                            </div>
                                            <div class="col-4">
                                                <h4 class="mb-3">Add/Sub</h4>
                                            </div>
                                        </div>

                                        @foreach($digitalAssets as $digitalAsset)
                                            <div class="row">
                                                <div class="col-3 p-1">{{ $digitalAsset->name }}</div>
                                                <div class="col-4 p-1">
                                                    <h4 style="color: orangered; text-align: center;" class="asset_balance" data-asset-id="{{ $digitalAsset->id }}">0</h4>
                                                </div>
                                                <div class="col-4">
                                                    <input type="number" class="form-control" name="{{ $digitalAsset->id }}">
                                                </div>
                                            </div>
                                        @endforeach
                                        <div class="hstack pt-4 gap-2 justify-content-end">
                                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-danger">Confirm</button>
                                        </div>
                                    </form>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>

                    <!-- Delete Modal -->
                    <div id="DeleteModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-body text-center p-5">
                                    <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
                                    </lord-icon>
                                    <div class="mt-4">
                                        <h4 class="mb-3">Confirm your action!</h4>
                                        <p class="text-muted mb-4"><strong>Are you sure you want to delete this user?</strong></p>
                                        <div class="hstack gap-2 justify-content-center">
                                            <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                            <a id="DeleteModalHref" href="{{ url('https://google.com') }}" class="btn btn-danger">Confirm</a>
                                        </div>
                                    </div>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Data Table JS -->
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
    <script src="{{ URL::asset('assets/js/pages/datatables.init.js') }}"></script>
    <!-- Modal JS -->
    <script src="{{ URL::asset('assets/js/pages/modal.init.js') }}"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>

    <!-- Select 2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- Custom JS -->
    <script>
        function ShowBalanceModal(user) {
            $('#BalanceModal #user_id').val(user.id)
            $(`#BalanceModal h4.asset_balance`).text(0)
            for (let wallet of user.wallet) {
                $(`#BalanceModal h4.asset_balance[data-asset-id="${wallet.digital_asset_id}"]`).text(wallet.quantity)
            }
            $('#BalanceModal').modal('show')
        }

        function ShowDeleteModal(id) {
            $('#DeleteModalHref').attr('href', '/user/delete/' + id + '/' + 'user');
            $('#DeleteModal').modal('show');
        }

        $(document).ready(function () {
            $('.state-select-2').select2({
                placeholder: 'Select an option',
                allowClear: true
            });

            let columns = [
                { data: 'id', name: 'id' },
                { data: 'full_name', name: 'full_name', searchable: true, orderable: true },
                { data: 'username', name: 'username', searchable: true, orderable: true  },
                { data: 'account_verification', name: 'account_verification' },
                { data: 'role', name: 'role', searchable: true, orderable: true  },
                { data: 'balance', name: 'balance', searchable: false },
                { data: 'approved_by', name: 'approved_by', searchable: false },
                { data: 'max_rtp', name: 'max_rtp', searchable: false },
                { data: 'is_online', name: 'is_online', searchable: false },
                { data: 'last_login', name: 'last_login', searchable: false },
                { data: 'login_count', name: 'login_count', searchable: false },
                { data: 'actions', name: 'actions', searchable: false }
            ]

            if ({{ Auth::user()->hasRole('Super Admin') ? 1 : 0 }}) {
                columns.splice(2, 0, { data: 'email', name: 'email', searchable: true, orderable: true });
            }

            let table = $('#user-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('get.user.data') }}",
                    data: function (d) {
                        d.state_id = $('#filterState').val();
                    }
                },
                columns,
                order: [[0, 'desc']]
            });

            $('#filterState').on('change', function () {
                table.ajax.reload();
            });
        });

        function updateSetting(type, isEnabled) {
            const toggleSelector = type === 'max_rtp' ? '#enable_max_rtp' : '#enable_send_balance';
            $(toggleSelector).prop('disabled', true);

            $.ajax({
                url: '{{ route("update.user.setting") }}',
                type: 'POST',
                data: {
                    enable: isEnabled ? 1 : 0,
                    type: type,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: `${type.replace('_', ' ')} setting updated for all users`,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: `Failed to update ${type.replace('_', ' ')} setting`,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                        $(toggleSelector).prop('checked', !isEnabled);
                        $(toggleSelector).prop('disabled', false);
                    }
                },
                error: function() {
                    Swal.fire({
                        title: 'Error!',
                        text: `An error occurred while updating ${type.replace('_', ' ')} setting`,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                    $(toggleSelector).prop('checked', !isEnabled);
                    $(toggleSelector).prop('disabled', false);
                }
            });
        }
    </script>
@endsection