@extends('layouts.app')
@section('title', 'Users')

@push('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
    <style>
        .user-kpi {
            border: 1px solid #edf1f7;
            border-radius: 16px;
            background: #fff;
            padding: 18px 20px;
            height: 100%;
        }

        .user-kpi strong {
            display: block;
            color: #0f172a;
            font-size: 24px;
            line-height: 1.1;
        }

        .user-kpi span {
            color: #64748b;
            font-size: 13px;
        }

        #users-table_wrapper .dataTables_length,
        #users-table_wrapper .dataTables_filter {
            display: none;
        }

        #users-table_wrapper .dataTables_info {
            font-size: 12px;
            font-weight: 500;
            color: #718096;
        }

        #users-table_wrapper .pagination {
            gap: 6px;
        }

        #users-table_wrapper .page-link {
            border-radius: 8px;
        }

        #users-table_wrapper .page-item.active .page-link {
            background-color: var(--bs-primary);
            color: #fff;
            border-color: var(--bs-primary);
        }

        #users-table td,
        #users-table th {
            vertical-align: middle;
            white-space: nowrap;
        }

        #users-table td:nth-child(2) {
            white-space: normal;
            min-width: 220px;
        }
    </style>
@endpush

@section('content')
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0">User Management</h3>
            <span class="text-secondary fs-13">Create, search, and control admin and company-level users from one module.</span>
        </div>
        <a href="{{ route('admin.users.create') }}" class="btn btn-outline-primary py-1 px-2 px-sm-4 fs-14 fw-medium rounded-3 hover-bg">
            <span class="py-sm-1 d-block">
                <i class="ri-add-line d-none d-sm-inline-block"></i>
                <span>Add User</span>
            </span>
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->has('user'))
        <div class="alert alert-danger alert-dismissible fade show">
            {{ $errors->first('user') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- KPI Stats -->
    <div class="row g-3 mb-4">
        <div class="col-md-3">
            <div class="user-kpi">
                <strong>{{ $stats['total'] }}</strong>
                <span>Total Users</span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="user-kpi">
                <strong>{{ $stats['active'] }}</strong>
                <span>Active Accounts</span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="user-kpi">
                <strong>{{ $stats['inactive'] }}</strong>
                <span>Inactive Accounts</span>
            </div>
        </div>
        <div class="col-md-3">
            <div class="user-kpi">
                <strong>{{ $stats['on_leave'] }}</strong>
                <span>Users on Leave</span>
            </div>
        </div>
    </div>

    <!-- Filter Card -->
    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-4">
            <div class="row g-3 align-items-center">
                <div class="col-lg-4 col-md-6">
                    <label class="form-label">Search</label>
                    <input type="text" id="global-search" class="form-control" placeholder="Search name, email, territory">
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label">Role</label>
                    <select id="role-filter" class="form-control form-select">
                        <option value="">All Roles</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->id }}">{{ ucfirst($role->name) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label">Company</label>
                    <select id="company-filter" class="form-control form-select">
                        <option value="">All Companies</option>
                        @foreach($companies as $company)
                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-6">
                    <label class="form-label" style="visibility: hidden">Reset</label>
                    <button type="button" id="reset-filters" class="btn btn-outline-secondary w-100">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <!-- DataTable Card -->
    <div class="card bg-white border-0 rounded-3 mb-4">
        <div class="card-body p-0">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 p-4">
                <div>
                    <h5 class="mb-1">All Users</h5>
                </div>
            </div>

            <div class="default-table-area style-two default-table-width">
                <div class="table-responsive">
                    <table id="users-table" class="table align-middle mb-0">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">User</th>
                                <th scope="col">Role</th>
                                <th scope="col">Company</th>
                                <th scope="col">Status</th>
                                <th scope="col">Assignment</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(function () {
            const table = $('#users-table').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                lengthChange: true,
                pageLength: 25,
                order: [[1, 'asc']],
                ajax: {
                    url: @json(route('admin.users.data')),
                    data: function (d) {
                        d.global_search = $('#global-search').val();
                        d.role_id = $('#role-filter').val();
                        d.company_id = $('#company-filter').val();
                        d.status = $('#status-filter').val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'name', name: 'name'},
                    {data: 'role_name', name: 'role_name', orderable: true, searchable: false},
                    {data: 'company_name', name: 'company_name', orderable: false, searchable: false},
                    {data: 'status', name: 'status', orderable: false, searchable: false},
                    {data: 'assignment', name: 'assignment', orderable: false, searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                language: {
                    paginate: {
                        previous: '<i class="ri-arrow-left-s-line"></i>',
                        next: '<i class="ri-arrow-right-s-line"></i>'
                    },
                    info: 'Showing _START_ to _END_ of _TOTAL_ records',
                    infoEmpty: 'Showing 0 to 0 of 0 records',
                    emptyTable: 'No users found.'
                },
                drawCallback: function () {
                    feather.replace();
                }
            });

            let searchTimer;

            $('#global-search').on('input', function () {
                clearTimeout(searchTimer);
                searchTimer = setTimeout(function () {
                    table.ajax.reload();
                }, 300);
            });

            $('#role-filter, #company-filter, #status-filter').on('change', function () {
                table.ajax.reload();
            });

            $('#reset-filters').on('click', function () {
                $('#global-search').val('');
                $('#role-filter').val('');
                $('#company-filter').val('');
                $('#status-filter').val('');
                table.ajax.reload();
            });
        });
    </script>
@endpush