@extends('admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<style>
    /* Specific handling for cells with multiple lines */
    .info-container {
        display: inline-block;
        min-width: 150px;
        /* Ensures data is readable on mobile */
    }

    /* .info-label {
        color: #333;
        font-weight: 600;
    }

    .info-value {
        color: #666;
    } */

    .icon-blue {
        color: #239ad7;
        font-size: 14px;
        margin-left: 6px;
        cursor: pointer;
    }

    /* Action Icons */
    .action-icons i {
        font-size: 1.2rem;
        margin: 0 5px;
        cursor: pointer;
    }

    .icon-view {
        color: #239ad7;
        text-decoration: none;
        font-weight: 600;
    }

    /* Status */
    .status-active {
        color: #28c76f;
        font-weight: 600;
    }

    .status-inactive {
        color: #ea5455;
        font-weight: 600;
    }

    /* Custom Search Wrapper */
    .search-wrapper {
        position: relative;
    }

    .search-wrapper i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
    }

    .search-wrapper input {
        padding-left: 35px;
    }

    .form-control:focus {
        padding-inline: 35px !important;
    }

    .table-responsive-custom {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Remove DataTables default border-collapse which can mess with scrolling */
    #users-table {
        border-collapse: collapse !important;
        margin-bottom: 0 !important;
    }

    .dt-search,
    .dt-length {
        display: none !important;
    }
</style>
@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
    <h3 class="fw-bold m-0">User Management</h3>
    <div>
        <a href="https://omigavip.com/user/login" class="btn btn-primary me-2" target="_blank" style=" border: none;">
            User Login
        </a>
        <!-- <a href="{{ route('admin.registration') }}" class="btn btn-primary" style=" border: none;">
            New Registration
        </a> -->
    </div>
</div>
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <h6 class="mb-3 text-muted">Filters</h6>
        <div class="row g-3 align-items-end">

            <!-- Status Filter -->
            <!-- <div class="col-12 col-md-6 col-lg-2">
                    <select class="form-select" id="statusFilter">
                        <option value="">Select Status</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div> -->

            <!-- User Dropdown -->
            <!-- <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label">User Name</label>
                    <select class="form-select" id="userFilter">
                        <option value="">Select</option>
                        @foreach ($users as $id => $user)
                            <option value="{{ $id }}">{{ $user }}</option>
                        @endforeach
                    </select>
                </div> -->

            <!-- User ID -->
            <div class="col-12 col-md-6 col-lg-2">
                <label class="form-label">User ID</label>
                <input type="text" id="user_id" class="form-control" placeholder="Search...">

            </div>

            <!-- User Name -->
            <div class="col-12 col-md-6 col-lg-2">
                <label class="form-label">User Name</label>
                <input type="text" id="name" class="form-control" placeholder="Search...">
            </div>

            <!-- <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label">Status</label>
                    <select class="form-select">
                        <option>Select</option>
                    </select>
                </div> -->

            <!-- Button -->
            <div class="col-12 col-md-6 col-lg-2">
                <button class="btn btn-primary w-100" id="filterBtn" style="background-color: #239ad7; border: none;">
                    Search
                </button>
            </div>

        </div>
    </div>
</div>
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <div class="d-flex flex-wrap justify-content-between align-items-center p-3 gap-3">
            <select id="customLength" class="form-select form-select-sm" style="width: 80px;">
                <option value="10">10</option>
                <option value="25">25</option>
            </select>
            <div class="d-flex flex-wrap gap-2">
                <div class="search-wrapper">
                    <i class="ti tabler-search"></i>
                    <input type="text" id="customSearch" class="form-control" placeholder="Search User"
                        style="width: 220px;">
                </div>
                <button class="btn btn-light btn-sm border d-flex align-items-center gap-1">
                    <i class="ti tabler-upload"></i> Excel
                </button>
            </div>
            <div class="table-responsive-custom">
                <table class="table w-100" id="usersTable">
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>DOJ & TIME</th>
                            <th>USER NAME</th>
                            <th>USER ID</th>
                            <th>REF DETAILS</th>
                            <th>ADVANCE</th>
                            <th>TEAM</th>
                            <th>STATUS</th>

                            <th>ACTION</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-md modal-dialog-centered" style="max-width: 500px;">
        <div class="modal-content text-center p-4 rounded-4">
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')
                <h4 class="fw-bold mb-2">Are you Sure !!</h4>
                <p class="text-muted mb-4">
                    Are you Confirm to Delete ?
                </p>
                <div class="d-flex justify-content-center gap-3 p-3 mt-4">
                    <button type="button" class="btn btn-outline-primary px-5 py-2 w-50 rounded-3"
                        data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" id="deleteSubmitBtn" class="btn btn-danger px-5 py-2 w-50 rounded-3">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Block Modal -->
<div class="modal fade" id="blockModal" tabindex="-1">
    <div class="modal-dialog modal-md modal-dialog-centered" style="max-width: 500px;">
        <div class="modal-content text-center p-4 rounded-4">
            <form id="blockForm" method="POST">
                @csrf
                <h4 class="fw-bold mb-2">Are you Sure !!</h4>
                <p class="text-muted mb-4">
                    Are you Confirm to Update Status ?
                </p>
                <div class="d-flex justify-content-center gap-3 p-3 mt-4">
                    <button type="button" class="btn btn-outline-primary px-5 py-2 w-50 rounded-3"
                        data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" id="blockSubmitBtn"
                        class="btn btn-secondary text-white px-5 py-2 w-50 rounded-3">
                        Yes, Sure
                    </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>
    $(document).ready(function() {
        let deleteId = null;
        let blockId = null;
        let table = $('#usersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('admin.users.index') }}",
                data: function(d) {
                    d.user_id = $('#user_id').val();
                    d.name = $('#name').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'doj_time',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'name',
                    name: 'users.name'
                },

                {
                    data: 'user_id',
                    name: 'users.user_id'
                },

                {
                    data: 'ref_details',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'investment',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'team',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'status',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        $('#filterBtn').on('click', function() {
            table.search('').draw();
            table.ajax.reload();
        });
        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });

        /*
        STATUS TOGGLE
        */
        $(document).on('change', '.toggle-status', function() {
            let id = $(this).data('id');
            $.ajax({
                url: '/admin/users/status/' + id,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(res) {
                    if (res.status === 'success') {
                        table.ajax.reload(null, false);
                    }
                }
            });
        });
        /*
        DELETE MODAL
        */
        $(document).on('click', '.icon-delete', function() {
            let id = $(this).data('id');
            let url = "{{ route('admin.users.delete', ':id') }}";
            url = url.replace(':id', id);
            $('#deleteForm').attr('action', url);
            $('#deleteModal').modal('show');
        });
        /*
        BLOCK USER
        */
        $(document).on('click', '.icon-block', function() {
            let id = $(this).data('id');
            let url = "{{ route('admin.users.status', ':id') }}";
            url = url.replace(':id', id);
            $('#blockForm').attr('action', url);
            $('#blockModal').modal('show');
        });
    });
</script>
<script>
    document.getElementById('deleteSubmitBtn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('deleteForm').submit();
    });
</script>
<script>
    document.getElementById('blockSubmitBtn').addEventListener('click', function(e) {
        e.preventDefault();
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('blockForm').submit();
    });
</script>
@endsection