@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>

    #users-table thead th {

        background-color: #239ad7;

        color: white;

        text-transform: uppercase;

        font-size: 0.75rem;

        font-weight: 600;

        padding: 12px;

        border: none;

        white-space: nowrap;

    }
    #users-table tbody td {

        vertical-align: middle;

        padding: 12px;

        color: #444;

        font-size: 0.85rem;

        border-bottom: 1px solid #f1f1f1;

        white-space: nowrap;

    }
    /* 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;

    }
    /* Force the container to scroll horizontally on small screens */

    .table-responsive-custom {

        width: 100%;

        /* overflow-x: auto; */

        -webkit-overflow-scrolling: touch;

        /* Smooth scrolling on iOS */

        /* border: 1px solid #eee; */

    }
    /* Remove DataTables default border-collapse which can mess with scrolling */

    #users-table {

        border-collapse: collapse !important;

        margin-bottom: 0 !important;

    }

</style>
@section('content')

    <div class="container-fluid py-4">
        <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>

            <a href="{{ route('admin.registration') }}" class="btn btn-primary"

                style="background-color: #239ad7; border: none;">

                New Registration

            </a>

        </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">

                    <!-- <div class="col col-md-6"><select class="form-select">

                                        <option>Select Package</option>

                                    </select></div> -->

                    <div class="col col-md-6">

                        <select class="form-select" id="statusFilter">

                            <option value="">Select Status</option>

                            <option value="1">Active</option>

                            <option value="0">Inactive</option>

                        </select>

                    </div>
                    <div class="col-lg-4 col-md-6">

                        <select class="form-select" id="userFilter">

                            <option value="">Select</option>

                            @foreach ($users as $id => $user)

                                <option value="{{ $id }}">{{ $user }}</option>

                            @endforeach

                        </select>

                    </div>
                    <div class="col col-md-6">
                        <input type="text" class="form-control" placeholder="Search...">
                    </div>
                    <div class="col col-md-6">
                        <input type="text" class="form-control" placeholder="Search...">
                    </div>
                    <div class="col-lg-1 col-md-6">

                        <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="users-table">

                            <thead>

                                <tr>

                                    <th>SNo</th>

                                    <th>DOJ & Time</th>

                                    <th>Name</th>

                                    <th>Email</th>

                                    <th>Action</th>

                                </tr>

                            </thead>

                        </table>

                    </div>
                </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">
                <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" class="btn btn-danger px-5 py-2 w-50 rounded-3" id="deleteConfirmBtn">

                        Yes, Sure

                    </button>

                </div>
            </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">
                <h4 class="fw-bold mb-2">Are you Sure !!</h4>

                <p class="text-muted mb-4">

                    Are you Confirm to Block ?

                </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" class="btn btn-secondary text-white px-5 py-2 w-50 rounded-3"

                        id="blockConfirmBtn">

                        Yes, Sure

                    </button>

                </div>
            </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 table = $('#users-table').DataTable({

                processing: true,

                serverSide: true,

                ajax: {

                    url: "{{ route('admin.users.index') }}",

                    data: function (d) {

                        d.status = $('#statusFilter').val();

                        d.user_id = $('#userFilter').val();

                    }

                },

                columns: [

                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },

                    { data: 'created_at', name: 'created_at' },

                    { data: 'name', name: 'name' },

                    { data: 'email', name: 'email' },

                    { data: 'action', name: 'action', orderable: false, searchable: false },

                ]

            });
            $('#filterBtn').click(function () {

                table.draw();

            });
        });
    </script>
    <script>

        // Open Delete Modal

        $(document).on('click', '.icon-delete', function () {

            $('#deleteModal').modal('show');

        });
        // Open Block Modal

        $(document).on('click', '.icon-block', function () {

            $('#blockModal').modal('show');

        });
        // Demo Only Actions

        $('#deleteConfirmBtn').click(function () {

            alert('User Deleted (Demo Only)');

            $('#deleteModal').modal('hide');

        });
        $('#blockConfirmBtn').click(function () {

            alert('User Blocked (Demo Only)');

            $('#blockModal').modal('hide');

        });
    </script>
@endsection