@extends('Admin.layout')
<style>
    .data-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        font-size: 14px;
    }

    .data-row .label {
        font-weight: 500;
        color: #555;
    }

    .data-row .value {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 500;
    }

    .data-row i {
        font-size: 16px;
        color: #7b1fa2;
        cursor: pointer;
    }

    #usersTable tbody td {
        vertical-align: top;
        padding: 14px 16px;
    }

    #usersTable tbody tr:hover {
        background: #fafafa;
    }

    /* Investment column layout */
    #usersTable td:nth-child(6) {
        text-align: left !important;
        vertical-align: top;
    }
    .dt-length
    {
        display: none !important;
    }
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5>User Management</h5>
    </div>
    <div class="col-auto mb-4">
        {{-- <a href="{{ route('import_user') }}"><button class="btn btn-primary">Upload User </button> </a> --}}
        <a href="{{ route('user.login') }}" target="_blank"><button class="btn btn-primary">User Login</button> </a>
        <!-- <a href="{{ route('new_registration') }}"><button class="btn btn-primary">New Registration</button> </a> -->
    </div>
</div>
<div class="card p-0 m-2">

    <h6 class="p-4 pb-0 mb-0">Filters</h6>

    <div class="row mb-3 p-3 g-3 d-flex justify-content-start mt-0 pt-0">
        <div class="col-lg-5 col-md-12">
            <input type="text" id="filter_name" placeholder="Enter Name" class="form-control">
        </div>

        <div class="col-lg-5 col-md-12">
            <input type="text" id="filter_userid" placeholder="Enter UserID" class="form-control">

        </div>

        <div class="col-lg-2 col-md-12 gap-3 d-flex justify-content-start ">
            <button id="filterBtn" class="btn btn-primary w-100 g-3">Search</button>
            <button id="resetBtn" class="btn btn-primary w-100">Reset</button>

        </div>

    </div>
    <hr>
   <div class="row m-3 g-3 align-items-center justify-content-between">

                        <!-- LEFT -->
                        <div class="col-12 col-lg-auto">

                            <select id="pageLength" class="form-select">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="All">All</option>
                            </select>

                        </div>

                        <div class="col-12 col-lg-auto">

                            <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">


                                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">

                                <button class="btn btn-label-secondary" id="excelExport">
                                    Export
                                </button>
                            </div>

                        </div>

                    </div>

    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table id="usersTable" class="table table-bordered align-middle users-table w-100">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th class="text-nowrap">Joining Date</th>
                                <!-- <th class="text-nowrap">User Details</th> -->
                                <th class="text-nowrap">User ID</th>
                                <th class="text-nowrap">User Name</th>
                                <th class="text-nowrap">User Type</th>
                                <th class="text-nowrap">Ref Details</th>
                                <th class="text-nowrap">Credentials</th>
                                <!-- <th class="text-nowrap">Wallet Balance</th> -->
                                <th class="text-nowrap">Investment</th>
                                <th class="text-nowrap">Team</th>
                                <th class="text-nowrap">Income</th>
                                <!-- <th class="text-nowrap">Status</th> -->
                                <th class="text-nowrap">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="block" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted" id="toggle_status_text">>Are you confirm to block?</p>
            <form action="{{route('toggle_user_status')}}" method="POST" id="ToggleForm">
                @csrf
                <input type="hidden" name="id" id="toggle_user_id">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_toggle" class="btn btn-secondary p-3 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- delete -->
<div class="modal fade" id="deleteUser" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to delete?</p>
            <form action="{{route('delete_user')}}" id="DeleteForm" method="post">
                @csrf
                <input type="hidden" name="id" id="user_id">
                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="editPasswordModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 shadow border-0">

            <!-- Header -->
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">
                    <i class="ti tabler-lock me-2"></i> Update Password
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Form -->
            <form method="POST" action="{{route('update_user_password')}}" id="pwdForm">
                @csrf

                <div class="modal-body pt-2">
                    <input type="hidden" name="user_name" id="password_user_name" value="{{ old('user_name') }}">
                    <input type="hidden" name="user_id" id="password_user_id" value="{{ old('user_id') }}">

                    <div class=" mb-3">
                        <label class="form-label text-muted">User Details</label>
                        <div class="border rounded p-2 bg-light">
                            <strong>ID:</strong> <span id="show_user_id">-</span><br>
                            <strong>Name:</strong> <span id="show_user_name">-</span>
                        </div>
                    </div>
                    <!-- New Password -->
                    <div class="mb-3">
                        <label class="form-label text-muted">New Password</label>
                        <div class="input-group">
                            <input type="password" name="newpassword" class="form-control"
                                value="{{ old('newpassword') }}">
                            <span class="input-group-text bg-white">
                                <i class="ti tabler-eye-off" onclick="toggleField(this)"></i>
                            </span>
                        </div>
                        @error('newpassword', 'passwordError')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <!-- Confirm Password -->
                    <div class="mb-2">
                        <label class="form-label text-muted">Confirm Password</label>
                        <div class="input-group">
                            <input type="password" name="confirmpassword" class="form-control"
                                value="{{ old('confirmpassword') }}">
                            <span class="input-group-text bg-white">
                                <i class="ti tabler-eye-off" onclick="toggleField(this)"></i>
                            </span>
                        </div>
                        @error('confirmpassword', 'passwordError')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                </div>

                <!-- Footer -->
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" id="submit_btn" class="btn btn-primary px-4">
                        <i class="ti tabler-check me-1"></i> Update
                    </button>
                </div>

            </form>

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

<div class="modal fade" id="editPinModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 shadow border-0">

            <!-- Header -->
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-semibold">
                    <i class="ti tabler-lock me-2"></i> Update Pin
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Form -->
            <form method="POST" action="{{route('update_user_pin')}}" id="pinForm">
                @csrf

                <div class="modal-body pt-2">

                    <input type="hidden" name="user_name" id="pin_user_name" value="{{ old('user_name') }}">
                    <input type="hidden" name="user_id" id="pin_user_id" value="{{ old('user_id') }}">

                    <div class=" mb-3">
                        <label class="form-label text-muted">User Details</label>
                        <div class="border rounded p-2 bg-light">
                            <strong>ID:</strong> <span id="pin_show_user_id">-</span><br>
                            <strong>Name:</strong> <span id="pin_show_user_name">-</span>
                        </div>
                    </div>
                    <!-- New Password -->
                    <div class="mb-3">
                        <label class="form-label text-muted">New Pin</label>
                        <div class="input-group">
                            <input type="password" name="newpin" class="form-control"
                                value="{{ old('newpin') }}">
                            <span class="input-group-text bg-white">
                                <i class="ti tabler-eye-off" onclick="toggleField(this)"></i>
                            </span>
                        </div>
                        @error('newpin', 'pinError')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <!-- Confirm Password -->
                    <div class="mb-2">
                        <label class="form-label text-muted">Confirm Pin</label>
                        <div class="input-group">
                            <input type="password" name="confirmpin" class="form-control"
                                value="{{ old('confirmpin') }}">
                            <span class="input-group-text bg-white">
                                <i class="ti tabler-eye-off" onclick="toggleField(this)"></i>
                            </span>
                        </div>
                        @error('confirmpin', 'pinError')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                </div>

                <!-- Footer -->
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" id="submit_pin" class="btn btn-primary px-4">
                        <i class="ti tabler-check me-1"></i> Update
                    </button>
                </div>

            </form>

        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
    function toggleField(icon) {
        const input = icon.closest('.input-group').querySelector('input');

        if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('tabler-eye-off');
            icon.classList.add('tabler-eye');
        } else {
            input.type = 'password';
            icon.classList.remove('tabler-eye');
            icon.classList.add('tabler-eye-off');
        }
    }
</script>

<script>
    $(document).ready(function() {

        const table = $('#usersTable').DataTable({

            processing: true,
            serverSide: true,

            ajax: {
                url: "{{ route('users_data') }}",
                data: function(d) {
                    d.name = $('#filter_name').val();
                    d.user_id = $('#filter_userid').val();
                }
            },

            // pageLength: 10,
            searching: true,
            ordering: false,
            scrollX: true,


            columnDefs: [{
                targets: "_all",
                className: "text-nowrap"
            }],

            buttons: [{
                extend: 'excelHtml5',
                title: 'Users List',
                 filename: function() {
                    var now = new Date();
                    var date =
                        String(now.getDate()).padStart(2, '0') + '-' +
                        String(now.getMonth() + 1).padStart(2, '0') + '-' +
                        String(now.getFullYear()).slice(-2);

                    return 'Users List - ' + date;
                },

                exportOptions: {
                     columns: ':not(:nth-last-child(-n+2))'
                },
                className: 'd-none'
            }],

            columns: [{
                    data: "DT_RowIndex",
                    searchable: false
                },
                {
                    data: "date"
                },
                {
                    data: "user_id"
                },
                {
                    data: "name"
                },
                {
                    data: "user_type"
                },
                {
                    data: "RefDetails",
                    searchable: false
                },
                {
                    data: "credentials",
                    searchable: false
                },
                {
                    data: "investment",
                    searchable: false
                },
                {
                    data: "direct_team",
                    searchable: false
                },
                {
                    data: "income",
                    searchable: false
                },
                {
                    data: "action",
                    searchable: false
                }
            ]
        });

        // ✅ GLOBAL SEARCH INPUT
        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });

        // ✅ FILTER BUTTON
        $('#filterBtn').click(function() {
            table.draw();
        });

        // ✅ RESET
        $('#resetBtn').click(function() {
            $('#filter_name').val('');
            $('#filter_userid').val('');
            $('#customSearch').val('');
            table.search('').draw();
        });

    //    $('#excelExport').click(function() {

    //         var oldLength = table.page.len();

    //         table.page.len(-1).draw();

    //         table.one('draw', function() {
    //             table.button('.buttons-excel').trigger();

    //             table.page.len(oldLength).draw(false);
    //         });
    //     });

    });
</script>


<!-- //toggle block status -->
<script>
    function setToggleId(button) {
        const userId = button.getAttribute('data-id');
        const isActive = button.getAttribute('data-active') === '1';

        document.getElementById('toggle_user_id').value = userId;

        const statusText = document.getElementById('toggle_status_text');
        const submitBtn = document.getElementById('submit_toggle');

        if (isActive) {
            statusText.textContent = "Are you confirm to Block this user?";

        } else {
            statusText.textContent = "Are you confirm to Unblock this user?";

        }
        const icon = document.querySelector(`#toggle_icon_${userId}`);
        if (icon) {
            icon.setAttribute('fill', isActive ? '#FF0000' : '#28a745');
            icon.setAttribute('fill-opacity', '1');
        }
    }

    document.getElementById('ToggleForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_toggle');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });


    function setDeleteId(button) {
        document.getElementById('user_id').value = button.getAttribute('data-id');
    }

    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });
</script>



<!-- //pwd update -->
<script>
    document.addEventListener("DOMContentLoaded", function() {

        @if($errors -> passwordError -> any())
        var modal = new bootstrap.Modal(document.getElementById('editPasswordModal'));
        modal.show();

        document.getElementById('show_user_id').innerText = "{{ old('user_id') }}";
        document.getElementById('show_user_name').innerText = "{{ old('user_name') }}";

        @endif

    });
</script>
<script>
    function setPassword(button) {
        let userId = button.getAttribute('data-id');
        let userName = button.getAttribute('data-name');

        document.getElementById('password_user_id').value = userId;
        document.getElementById('password_user_name').value = userName;

        document.getElementById('show_user_id').innerText = userId;
        document.getElementById('show_user_name').innerText = userName;
    }

    document.getElementById('pwdForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_btn');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>

<!-- //pin update -->
<script>
    document.addEventListener("DOMContentLoaded", function() {

        @if($errors -> pinError -> any())
        var modal = new bootstrap.Modal(document.getElementById('editPinModal'));
        modal.show();

        document.getElementById('pin_show_user_id').innerText = "{{ old('user_id') }}";
        document.getElementById('pin_show_user_name').innerText = "{{ old('user_name') }}";
        @endif

    });
</script>
<script>
    function setPin(button) {
        let userId = button.getAttribute('data-id');
        let userName = button.getAttribute('data-name');

        document.getElementById('pin_user_id').value = userId;
        document.getElementById('pin_user_name').value = userName;

        document.getElementById('pin_show_user_id').innerText = userId;
        document.getElementById('pin_show_user_name').innerText = userName;
    }


    document.getElementById('pinForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_pin');
        btn.disabled = true;
        btn.innerText = 'Processing...';
    });
</script>
@endsection