@extends('admin.layouts.home.main')

@section('styles')
    <style>
        .d-none.flex-sm-fill.d-sm-flex.align-items-sm-center.justify-content-sm-between {
            background: #fff;
        }

        .badge-status {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-weight: 600;
            font-size: 0.85rem;
            padding: 4px 12px;
            border-radius: 12px;
            border: 1px solid;
        }

        .badge-status.pending {
            color: #F2994A;
            background-color: #FFF8E5;
            border-color: #F2994A;
        }

        .badge-status.active {
            color: #219653;
            background-color: #E8F9F1;
            border-color: #219653;
        }

        .badge-status img {
            width: 16px;
            height: 16px;
        }

        th.sortable {
            cursor: pointer;
            user-select: none;
        }

        th .sort-arrow {
            font-size: 1em;
            margin-left: 3px;
            color: #888;
        }

        th.sorted-asc .sort-arrow,
        th.sorted-desc .sort-arrow {
            color: #111;
        }

        th.sorted-asc .sort-arrow {
            transform: rotate(180deg);
        }

        th.sorted-desc .sort-arrow {
            transform: rotate(0deg);
        }

        /* Modal Styles */
        #filterModal .modal-content {
            background: #fff;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        #filterModal .form-check-input {
            accent-color: #FFBE36;
            width: 1.25rem;
            height: 1.25rem;
        }

        #filterModal .btn-filter {
            background-color: #FFBE36;
            color: #fff;
            border: none;
            border-radius: 5px;
            margin: 15px;
            padding: 0.75rem 0;
            font-weight: 600;
        }

        #filterModal .btn-filter:hover {
            background-color: #e6ad2c;
        }
    </style>
@endsection

@section('main')
    <main class="UsersPage container-fluid mt-3">
        <div class="latest-shipping rounded-4">
            {{-- Header --}}
            <header class="d-flex justify-content-between align-items-center p-3">
                <h3 class="m-0">All Users</h3>
                <div class="buttons d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary d-flex align-items-center" data-bs-toggle="modal"
                        data-bs-target="#filterModal">
                        <img src="{{ asset('images/fi_filter.svg') }}" alt="Filter" class="me-1" /> Filter
                    </button>
                    <a href="" class="btn btn-outline-secondary d-flex align-items-center">
                        Download
                        <img src="{{ asset('images/download-2.svg') }}" alt="Download" class="ms-1" />
                    </a>
                    <a href="{{ route('admin.users.create') }}"
                        class="add_users btn btn-outline-secondary d-flex justify-content-center align-items-center border-0">
                        Add User
                        <img src="{{ asset('images/add.svg') }}" alt="Add" class="ms-1" />
                    </a>
                </div>
            </header>

            {{-- Filter Modal --}}
            <div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <form action="{{ route('admin.users.index') }}" method="GET" class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="filterModalLabel">Filter Users</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            {{-- By Role --}}
                            <div class="mb-4">
                                <label class="form-label">By Role</label>
                                @foreach ([
            'admin' => 'Admin',
            'customer' => 'Customer',
            'driver' => 'Driver',
            'employee_center' => 'Center Employee',
        ] as $key => $label)
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="role"
                                            id="role_{{ $key }}" value="{{ $key }}"
                                            {{ request('role') === $key ? 'checked' : '' }}>
                                        <label class="form-check-label" for="role_{{ $key }}">
                                            {{ $label }}
                                        </label>
                                    </div>
                                @endforeach
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="radio" name="role" id="role_all"
                                        value="" {{ empty(request('role')) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="role_all">All Roles</label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="search" class="form-label">Search</label>
                                <input type="text" name="search" id="search" class="form-control"
                                    placeholder="Name or email" value="{{ request('search') }}">
                            </div>
                        </div>
                        <div class="modal-footer p-0">
                            <button type="submit" class="btn btn-filter w-100">Filter</button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Table --}}
            <div class="latest-shipping-body mb-2">
                <div class="table-responsive">
                    <table class="table mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th scope="col"><input type="checkbox"></th>
                                @php
                                    $orderBy = request('sort', 'name');
                                    $direction = request('direction', 'asc');
                                @endphp
                                <th class="sortable {{ $orderBy == 'name' ? 'sorted-' . $direction : '' }}">
                                    <a href="{{ route('admin.users.index', array_merge(request()->query(), ['sort' => 'name', 'direction' => $orderBy === 'name' && $direction === 'asc' ? 'desc' : 'asc'])) }}"
                                        class="text-decoration-none text-dark">
                                        User Name
                                        <span class="sort-arrow">&#9650;</span>
                                    </a>
                                </th>
                                <th class="sortable {{ $orderBy == 'email' ? 'sorted-' . $direction : '' }}">
                                    <a href="{{ route('admin.users.index', array_merge(request()->query(), ['sort' => 'email', 'direction' => $orderBy === 'email' && $direction === 'asc' ? 'desc' : 'asc'])) }}"
                                        class="text-decoration-none text-dark">
                                        Email
                                        <span class="sort-arrow">&#9650;</span>
                                    </a>
                                </th>
                                <th>Role</th>
                                <th>Account Status</th>
                                <th class="sortable {{ $orderBy == 'created_at' ? 'sorted-' . $direction : '' }}">
                                    <a href="{{ route('admin.users.index', array_merge(request()->query(), ['sort' => 'created_at', 'direction' => $orderBy === 'created_at' && $direction === 'asc' ? 'desc' : 'asc'])) }}"
                                        class="text-decoration-none text-dark">
                                        Registered
                                        <span class="sort-arrow">&#9650;</span>
                                    </a>
                                </th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $user)
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td class="d-flex align-items-center">
                                        <img id="avatarImg"
                                            src="{{ $user->image ? Storage::url($user->image) : asset('images/user.png') }}"
                                            alt="Avatar" class="rounded-circle me-2" width="40" height="40" />
                                        <div>
                                            <div class="small text-muted">ID {{ $user->id }}</div>
                                            <div>{{ $user->name }}</div>
                                        </div>
                                    </td>
                                    <td>{{ $user->email }}</td>
                                    <td>{{ ucwords(str_replace('_', ' ', $user->role)) }}</td>
                                    <td>
                                        @if ($user->status)
                                            <span class="badge-status active">Active</span>
                                        @else
                                            <span class="badge-status pending">
                                                <img src="{{ asset('images/Check.svg') }}" alt="Check" />
                                                Pending
                                            </span>
                                        @endif
                                    </td>
                                    <td>{{ \Carbon\Carbon::parse($user->created_at)->format('Y-m-d') }}</td>
                                    <td class="text-end">
                                        <a href="{{ route('admin.users.show', [$user->role, $user->id]) }}"
                                            class="btn btn-sm btn-light" title="View">
                                            <img src="{{ asset('images/eye-open.svg') }}" alt="View">
                                        </a>
                                        <a href="{{ route('admin.users.edit', [$user->role, $user->id]) }}"
                                            class="btn btn-sm btn-light" title="Edit">
                                            <img src="{{ asset('images/edit-03.svg') }}" alt="Edit">
                                        </a>
                                        <form action="{{ route('admin.users.destroy', [$user->role, $user->id]) }}"
                                            method="POST" class="d-inline-block"
                                            onsubmit="return confirm('Are you sure you want to delete this user?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-light" title="Delete">
                                                <img src="{{ asset('images/delete-1.svg') }}" alt="Delete">
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4">No users found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Pagination & entries per page --}}
            <footer class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between p-3">
                <div class="d-flex align-items-center mb-2 mb-sm-0">
                    <span class="me-2">Show</span>
                    <select class="form-select form-select-sm w-auto" onchange="window.location = this.value;">
                        @foreach ([10, 25, 50, 100] as $size)
                            <option
                                value="{{ route('admin.users.index', array_merge(request()->query(), ['per_page' => $size])) }}"
                                {{ request('per_page', 10) == $size ? 'selected' : '' }}>
                                {{ $size }}
                            </option>
                        @endforeach
                    </select>
                    <span class="ms-2">entries</span>
                </div>
                <div>
                    {{ $users->links() }}
                </div>
            </footer>
        </div>
    </main>
    
@endsection