@extends('user.layouts.app', ['title' => 'Manage Staffs'])

@push('head')
    <style>
        .staff-search-shell {
            border-radius: 999px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 12px 28px rgba(12, 37, 86, 0.14);
            transform: translateY(0) scale(1);
            transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
        }

        .staff-search-shell .input-group-text,
        .staff-search-shell .form-control {
            background: transparent;
        }

        .staff-search-shell .input-group-text {
            transition: color 0.25s ease, transform 0.25s ease;
        }

        .staff-search-shell .form-control {
            box-shadow: none;
            transition: letter-spacing 0.2s ease;
        }

        .staff-search-shell .form-control::placeholder {
            color: rgba(33, 37, 41, 0.58);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .staff-search-shell:focus-within,
        .staff-search-shell.is-active {
            background: #fff;
            box-shadow: 0 18px 38px rgba(13, 110, 253, 0.22);
            transform: translateY(-2px) scale(1.01);
        }

        .staff-search-shell:focus-within .input-group-text,
        .staff-search-shell.is-active .input-group-text {
            color: var(--bs-primary) !important;
            transform: translateX(2px) scale(1.08);
        }

        .staff-search-shell:focus-within .form-control::placeholder {
            opacity: 0.72;
            transform: translateX(4px);
        }

        .staff-page-tag {
            max-width: 100%;
            white-space: normal;
            word-break: break-word;
        }

        .staff-page-tag span {
            min-width: 0;
        }

        .staff-mobile-card {
            border: 1px solid rgba(33, 37, 41, 0.08);
            border-radius: 1.25rem;
            background: var(--bs-body-bg);
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
        }

        .staff-mobile-card + .staff-mobile-card {
            margin-top: 1rem;
        }

        .staff-mobile-list {
            padding: 1rem;
        }

        .staff-mobile-card-header {
            border-bottom: 1px solid rgba(33, 37, 41, 0.08);
        }

        .staff-mobile-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .staff-mobile-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .staff-mobile-details {
            display: none;
        }

        .staff-mobile-card.is-expanded .staff-mobile-details {
            display: block;
        }

        .staff-mobile-toggle i {
            transition: transform 0.2s ease;
        }

        .staff-mobile-card.is-expanded .staff-mobile-toggle i {
            transform: rotate(180deg);
        }

        @media (max-width: 575.98px) {
            .staff-page-tag {
                display: flex;
                align-items: flex-start;
                width: 100%;
                border-radius: 1rem;
            }

            .staff-mobile-meta,
            .staff-mobile-actions {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@section('content')
    <div class="d-grid gap-3">
        <section class="card admin-card border-0">
            <div class="card-body p-4 p-lg-4">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-primary-subtle text-primary small fw-bold text-uppercase staff-page-tag">
                    <i class="bi bi-people"></i>
                    <span>Roles And Permission / Manage Staffs</span>
                </div>

                <div class="mt-3 d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                    <div>
                        <h1 class="h3 fw-bold mb-2">Manage Staffs</h1>
                        <p class="text-muted mb-0">Track assigned team members, review their role coverage, and add a new staff profile from the same page.</p>
                    </div>
                    <button type="button" class="btn btn-primary btn-lg text-nowrap align-self-start align-self-lg-auto" data-bs-toggle="modal" data-bs-target="#addStaffModal">
                        <i class="bi bi-person-plus me-2"></i>Add Staff
                    </button>
                </div>

                <div class="row g-3 mt-1">
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 bg-body-tertiary h-100">
                            <div class="small text-muted mb-1 text-nowrap">Total Staff</div>
                            <div class="fs-4 fw-bold">{{ $staffs->count() }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 bg-body-tertiary h-100">
                            <div class="small text-muted mb-1 text-nowrap">Active Staff</div>
                            <div class="fs-4 fw-bold">{{ $activeStaffs }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 bg-body-tertiary h-100">
                            <div class="small text-muted mb-1 text-nowrap">Inactive Staff</div>
                            <div class="fs-4 fw-bold">{{ $inactiveStaffs }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header bg-primary text-white border-0 py-3">
                <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                    <div>
                        <div class="fw-bold text-nowrap">Staff Table</div>
                        <div class="small text-white-50">{{ $roles->count() }} role options available for assignment</div>
                    </div>
                    <div class="w-100 ms-lg-auto" style="max-width: 420px;">
                        <label for="staff-search" class="visually-hidden">Search staff</label>
                        <div class="input-group staff-search-shell">
                            <span class="input-group-text border-0 bg-white text-muted">
                                <i class="bi bi-search"></i>
                            </span>
                            <input
                                type="search"
                                class="form-control border-0"
                                id="staff-search"
                                placeholder="Search by name, username, email or role"
                                autocomplete="off"
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive d-none d-md-block">
                    <table class="table align-middle mb-0 text-nowrap">
                        <thead class="table-light">
                            <tr>
                                <th class="px-4 py-3 small text-muted text-uppercase">SL.</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">User</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Role</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Status</th>
                                <th class="px-4 py-3 small text-muted text-uppercase text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody id="staff-table-body">
                            @foreach ($staffs as $index => $staff)
                                <tr data-staff-entry data-search="{{ strtolower($staff['user'].' '.$staff['username'].' '.$staff['email'].' '.$staff['role']) }}">
                                    <td class="px-4 py-3" data-staff-index>{{ $index + 1 }}</td>
                                    <td class="px-4 py-3">
                                        <div class="fw-bold">{{ $staff['user'] }}</div>
                                        <div class="small text-muted">{{ $staff['email'] }}</div>
                                        <div class="small text-muted">Username: {{ $staff['username'] }}</div>
                                    </td>
                                    <td class="px-4 py-3 fw-semibold">{{ $staff['role'] }}</td>
                                    <td class="px-4 py-3">
                                        <span class="badge text-bg-{{ $staff['status'] ? 'success' : 'secondary' }}">{{ $staff['status'] ? 'ON' : 'OFF' }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-end">
                                        <div class="d-inline-flex flex-column flex-sm-row gap-2">
                                            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill px-3 text-nowrap">View</button>
                                            <button type="button" class="btn btn-dark btn-sm rounded-pill px-3 text-nowrap">Edit Staff</button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            <tr id="staff-search-empty" class="d-none">
                                <td colspan="5" class="px-4 py-5 text-center text-muted">
                                    No staff member matched your search.
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="d-grid d-md-none staff-mobile-list">
                    @foreach ($staffs as $index => $staff)
                        <article class="staff-mobile-card p-4" data-staff-entry data-search="{{ strtolower($staff['user'].' '.$staff['username'].' '.$staff['email'].' '.$staff['role']) }}">
                            <div class="staff-mobile-card-header d-flex align-items-start justify-content-between gap-3 mb-3 pb-3">
                                <div>
                                    <div class="small text-muted text-uppercase">Staff <span data-staff-index>{{ $index + 1 }}</span></div>
                                    <div class="fw-bold fs-6 mt-1">{{ $staff['user'] }}</div>
                                    <div class="small text-muted">{{ $staff['email'] }}</div>
                                </div>
                                <span class="badge text-bg-{{ $staff['status'] ? 'success' : 'secondary' }}">{{ $staff['status'] ? 'ON' : 'OFF' }}</span>
                            </div>

                            <div class="rounded-4 bg-body-tertiary p-3 mb-3">
                                <div class="small text-muted text-uppercase mb-1">Role</div>
                                <div class="fw-semibold">{{ $staff['role'] }}</div>
                            </div>

                            <button type="button" class="btn btn-outline-primary btn-sm rounded-pill w-100 staff-mobile-toggle" data-staff-toggle aria-expanded="false">
                                <span>More Details</span>
                                <i class="bi bi-chevron-down ms-2"></i>
                            </button>

                            <div class="staff-mobile-details mt-3" data-staff-details>
                                <div class="staff-mobile-meta mb-3">
                                    <div class="rounded-4 bg-body-tertiary p-3">
                                        <div class="small text-muted text-uppercase mb-1">Username</div>
                                        <div class="fw-semibold">{{ $staff['username'] }}</div>
                                    </div>
                                    <div class="rounded-4 bg-body-tertiary p-3">
                                        <div class="small text-muted text-uppercase mb-1">Status</div>
                                        <div class="fw-semibold">{{ $staff['status'] ? 'Active' : 'Inactive' }}</div>
                                    </div>
                                </div>

                                <div class="staff-mobile-actions">
                                    <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill px-3">View</button>
                                    <button type="button" class="btn btn-dark btn-sm rounded-pill px-3">Edit Staff</button>
                                </div>
                            </div>
                        </article>
                    @endforeach

                    <div id="staff-search-empty-mobile" class="d-none px-4 py-5 text-center text-muted">
                        No staff member matched your search.
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="addStaffModal" tabindex="-1" aria-labelledby="addStaffModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable modal-fullscreen-sm-down">
            <div class="modal-content border-0 rounded-4 overflow-hidden">
                <div class="modal-header bg-primary text-white border-0">
                    <h2 class="modal-title fs-4 fw-bold" id="addStaffModalLabel">Add Staffs</h2>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <form>
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label small text-muted">Role</label>
                                <select class="form-select form-select-lg rounded-pill">
                                    <option selected>Select Role</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role }}">{{ $role }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label small text-muted">Name</label>
                                <input type="text" class="form-control form-control-lg rounded-pill" placeholder="Name">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label small text-muted">Email</label>
                                <input type="email" class="form-control form-control-lg rounded-pill" placeholder="Email">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label small text-muted">Username</label>
                                <input type="text" class="form-control form-control-lg rounded-pill" placeholder="Username">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="form-label small text-muted">Password</label>
                                <input type="password" class="form-control form-control-lg rounded-pill" placeholder="Password">
                            </div>

                            <div class="col-12 col-md-6">
                                <label class="form-label small text-muted">Status</label>
                                <div class="btn-group w-100 shadow-sm d-none d-sm-flex" role="group" aria-label="Status">
                                    <input type="radio" class="btn-check" name="staff_status" id="staff-status-off" autocomplete="off">
                                    <label class="btn btn-outline-secondary rounded-start-pill fw-semibold" for="staff-status-off">OFF</label>

                                    <input type="radio" class="btn-check" name="staff_status" id="staff-status-on" autocomplete="off" checked>
                                    <label class="btn btn-primary rounded-end-pill fw-semibold" for="staff-status-on">ON</label>
                                </div>
                                <div class="d-grid gap-2 d-sm-none">
                                    <input type="radio" class="btn-check" name="staff_status_mobile" id="staff-status-off-mobile" autocomplete="off">
                                    <label class="btn btn-outline-secondary fw-semibold" for="staff-status-off-mobile">OFF</label>

                                    <input type="radio" class="btn-check" name="staff_status_mobile" id="staff-status-on-mobile" autocomplete="off" checked>
                                    <label class="btn btn-primary fw-semibold" for="staff-status-on-mobile">ON</label>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-4 flex-column flex-sm-row">
                            <button type="button" class="btn btn-dark rounded-pill px-4 text-nowrap" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-secondary rounded-pill px-4 text-nowrap">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const searchInput = document.getElementById('staff-search');
            const entries = Array.from(document.querySelectorAll('[data-staff-entry]'));
            const tableEmptyState = document.getElementById('staff-search-empty');
            const mobileEmptyState = document.getElementById('staff-search-empty-mobile');
            const searchShell = document.querySelector('.staff-search-shell');
            const toggleButtons = Array.from(document.querySelectorAll('[data-staff-toggle]'));

            if (!searchInput || !entries.length || !tableEmptyState || !mobileEmptyState) {
                return;
            }

            const updateTable = () => {
                const query = searchInput.value.trim().toLowerCase();
                let visibleTableIndex = 0;
                let visibleMobileIndex = 0;

                if (searchShell) {
                    searchShell.classList.toggle('is-active', query.length > 0);
                }

                entries.forEach((entry) => {
                    const matches = !query || entry.dataset.search.includes(query);
                    entry.classList.toggle('d-none', !matches);

                    if (matches) {
                        const indexCell = entry.querySelector('[data-staff-index]');
                        const nextIndex = entry.tagName === 'TR' ? ++visibleTableIndex : ++visibleMobileIndex;

                        if (indexCell) {
                            indexCell.textContent = nextIndex;
                        }
                    }
                });

                tableEmptyState.classList.toggle('d-none', visibleTableIndex !== 0);
                mobileEmptyState.classList.toggle('d-none', visibleMobileIndex !== 0);
            };

            searchInput.addEventListener('input', updateTable);

            toggleButtons.forEach((button) => {
                button.addEventListener('click', () => {
                    const card = button.closest('.staff-mobile-card');
                    if (!card) {
                        return;
                    }

                    const isExpanded = card.classList.toggle('is-expanded');
                    button.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
                    button.querySelector('span').textContent = isExpanded ? 'Less Details' : 'More Details';
                });
            });
        });
    </script>
@endpush