@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title :title="$pageTitle"
                    description="Browse, filter, export, and manage employee records across departments, roles, and academic teams.">

                    @if ($isAcademicTesterView)
                        <span class="ui-pill ui-pill--info">
                            Academic → Testers
                        </span>
                    @endif

                    @if ($canBulkUpdateManager)
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-toggle="modal"
                            data-bs-target="#updateManagerModal">
                            Update Manager
                        </button>
                    @endif

                    @can('hr_staffs_create')
                        <a href="{{ route('staffs.create') }}" class="asset-btn asset-btn--primary">
                            + Add New Employee
                        </a>
                    @endcan

                </x-page-title>

                @can('hr_staffs_review_new')
                    @if (($newStaffCount ?? 0) > 0)
                        <div class="new-staff-flag">
                            <div class="new-staff-flag__content">
                                <span class="ui-pill ui-pill--info">New Staff</span>
                                <span class="new-staff-flag__text">
                                    {{ $newStaffCount }} new staff member(s) have been added and need review.
                                </span>
                            </div>

                            <form action="{{ route('staffs.markNewReviewed') }}" method="POST">
                                @csrf
                                <button type="submit" class="asset-btn asset-btn--primary">
                                    Mark as Reviewed
                                </button>
                            </form>
                        </div>
                    @endif
                @endcan

                @if ($canBulkUpdateManager)
                    <div class="bulk-bar">
                        <div class="bulk-bar__left">
                            <span class="ui-pill ui-pill--info">Bulk Action</span>
                            <span class="bulk-bar__text">
                                Select one or more teachers, then update their manager in one step.
                            </span>
                        </div>

                        <div class="bulk-bar__right">
                            <button type="button" class="asset-btn asset-btn--secondary" id="bulkSelectVisibleBtn">
                                Select Visible
                            </button>

                            <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                                data-bs-target="#updateManagerModal">
                                Update Selected Managers
                            </button>
                        </div>
                    </div>
                @endif

                <div class="ui-card ui-card--table">

                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            {{-- @if ($isAcademicTeacherView || $isAcademicTesterView || $isAcademicSupervisorView || $isTeamsRoute) --}}
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right:auto">
                                Filters
                            </h6>
                            {{-- @endif --}}

                            @php
                                $tableFilters = [
                                    'job_title_id' => $job_titles->pluck('name', 'id')->toArray(),
                                    'delay_status' => [
                                        'feedback_only' => 'Feedback Delay',
                                        'whiteboard_only' => 'Whiteboard Delay',
                                        'both' => 'Feedback + Whiteboard',
                                        'on_time' => 'On Time',
                                        'no_sessions' => 'No Sessions',
                                    ],
                                ];

                                if (
                                    !$isAcademicTeacherView &&
                                    !$isAcademicTesterView &&
                                    !$isAcademicSupervisorView &&
                                    !$isTeamsRoute
                                ) {
                                    $tableFilters['department_id'] = $departments->pluck('name', 'id')->toArray();

                                    $tableFilters['manager_id'] = $managers
                                        ->mapWithKeys(function ($manager) {
                                            return [
                                                $manager->id => trim($manager->first_name . ' ' . $manager->last_name),
                                            ];
                                        })
                                        ->toArray();
                                }

                                $filterLabels = [
                                    'department_id' => 'Department',
                                    'job_title_id' => 'Job Title',
                                    'manager_id' => 'Manager',
                                    'delay_status' => 'Feedback & Whiteboard Status',
                                ];
                            @endphp

                            <x-table-controls :action="route('staffs.index')" :export="true" :exportRoute="route('staffs.export')" :saveRoute="route('staffs.saveFilteredTable')"
                                :filters="$tableFilters" :filterLabels="$filterLabels" />
                        </div>
                    </div>

                    <x-table :headers="array_values(
                        array_filter(
                            [
                                $canBulkUpdateManager ? 'select' : null,
                                'ID',
                                'Photo',
                                'Leave Requests',
                                'Full Name',
                                $authDepartmentSlug != 'academy' ? 'Department' : null,
                                'Delay Status',
                                'Job Title',
                                'Manager',
                                'Team Name',
                                'Team Type',
                                $pageTitle === 'Supervisors' ? 'Number of Teachers' : null,
                                $pageTitle === 'Supervisors' ? 'Number of Slots' : null,
                                $pageTitle === 'Supervisors' ? 'Number of Schedules' : null,
                                $isTeamsRoute ? 'Metrics (Renewal Rate per Team)' : null,
                                'Employee Type',
                                'Date Of Joining',
                                'Years of Experience',
                                $authDepartmentSlug == 'academy' && $isAcademicTeacherView ? 'Students' : null,
                                $authDepartmentSlug == 'academy' && $isAcademicTesterView ? 'Schedule' : null,
                                'Actions',
                            ],
                            fn($header) => !is_null($header),
                        ),
                    )" :paginator="$staffs"
                        emptyMessage="No staff found matching the current filters.">

                        @foreach ($staffs as $staff)
                            @php
                                $isLate = false;
                                $isWhiteboardLate = false;
                                $isFeedbackLate = false;
                                $isTeacherStaff = in_array(strtolower((string) optional($staff->jobTitle)->slug), ['teacher', 'tester'], true);
                                $availabilityLabel = $staff->current_availability_label;
                                $staffSessions = collect($staff->scheduleSesssions ?? []);
                                $scheduledById = collect($staff->scheduled ?? [])->keyBy('id');
                                $hasAnySessions = $isTeacherStaff && $staffSessions->isNotEmpty();

                                if ($isTeacherStaff) {
                                    foreach ($staffSessions as $session) {
                                        if (empty($session->session_date) || empty($session->end_time)) {
                                            continue;
                                        }

                                        $now = \Carbon\Carbon::now();
                                        $sessionEnd = \Carbon\Carbon::parse(
                                            $session->session_date . ' ' . $session->end_time,
                                        );

                                        if ($now->gte($sessionEnd->copy()->addHours(12))) {
                                            if (empty($session->extra_file)) {
                                                $isWhiteboardLate = true;
                                                $isLate = true;
                                            }

                                            $course = $scheduledById->get($session->staff_scheduled_id);
                                            $feedbacks = collect($course?->teacherFeedback);
                                            $neededType = null;

                                            if (
                                                $session->session_number == 1 &&
                                                str_contains(strtolower((string) ($course?->course_name_en ?? '')), 'demo')
                                            ) {
                                                $neededType = 'demo';
                                            } elseif ($session->session_number == 2) {
                                                $neededType = 'initial';
                                            } elseif ($session->session_number == 4) {
                                                $neededType = 'mid';
                                            } elseif ($session->session_number == 8) {
                                                $neededType = 'final';
                                            }

                                            if ($neededType && $feedbacks->where('type', $neededType)->isEmpty()) {
                                                $isFeedbackLate = true;
                                                $isLate = true;
                                            }

                                            if ($isWhiteboardLate && $isFeedbackLate) {
                                                break;
                                            }
                                        }
                                    }
                                }

                                $leave = $staff->requestLeaves->first();
                                $managerName = trim(
                                    optional($staff->manager)->first_name . ' ' . optional($staff->manager)->last_name,
                                );
                            @endphp

                            <tr id="staff-row-{{ $staff->id }}">
                                @if ($canBulkUpdateManager)
                                    <td class="text-center" onclick="event.stopPropagation()">
                                        <input type="checkbox" class="staff-checkbox form-check-input"
                                            value="{{ $staff->id }}" onclick="event.stopPropagation()">
                                    </td>
                                @endif

                                <td class="ui-muted text-center">{{ $staff->id }}</td>

                                <td class="text-center">
                                    <img src="{{ $staff->staff_photo ?: asset('assets/images/logo-icon.png') }}"
                                        alt="{{ $staff->first_name }}" class="staff-avatar">
                                </td>

                                <td class="text-center">
                                    @if ($leave)
                                        @if ($leave->status == 'accepted')
                                            <span class="ui-pill ui-pill--success d-inline-block">Approved</span>
                                            <small class="d-block text-muted mt-1">{{ $leave->leave_from }} →
                                                {{ $leave->leave_to }}</small>
                                        @elseif ($leave->status == 'rejected')
                                            <span class="ui-pill ui-pill--danger d-inline-block">Unapproved</span>
                                            <small class="d-block text-muted mt-1">{{ $leave->leave_from }} →
                                                {{ $leave->leave_to }}</small>
                                        @elseif ($leave->status == 'pending')
                                            <span class="ui-pill ui-pill--warn d-inline-block">Pending</span>
                                            <small class="d-block text-muted mt-1">{{ $leave->leave_from }} →
                                                {{ $leave->leave_to }}</small>
                                        @else
                                            <span class="ui-pill ui-pill--neutral">No Requests</span>
                                        @endif
                                    @else
                                        <span class="ui-pill ui-pill--neutral">No Requests</span>
                                    @endif
                                </td>

                                <td class="text-center">
                                    <a href="{{ route('staffs.show', $staff->id) }}" class="ui-title text-decoration-none">
                                        {{ $staff->first_name }} {{ $staff->last_name }}
                                    </a>
                                    @can('hr_staffs_review_new')
                                        @if (is_null($staff->reviewed_at))
                                            <span class="new-staff-name-flag" title="New staff needs review">
                                                <iconify-icon icon="lucide:flag"></iconify-icon>
                                            </span>
                                        @endif
                                    @endcan
                                    @if ($availabilityLabel)
                                        <small class="d-block text-muted mt-1">{{ $availabilityLabel }}</small>
                                    @endif
                                </td>

                                @if ($authDepartmentSlug != 'academy')
                                    <td class="ui-muted text-center">{{ $staff->department->name ?? '-' }}</td>
                                @endif

                                <td class="text-center">
                                    @if (!$isTeacherStaff)
                                        <span class="ui-muted">--</span>
                                    @elseif (!$hasAnySessions)
                                        <span class="ui-pill ui-pill--neutral">No Sessions</span>
                                    @else
                                        <div class="d-flex flex-column align-items-center gap-1">
                                            @if ($isFeedbackLate)
                                                <span class="ui-pill ui-pill--danger">Feedback: Delayed</span>
                                            @else
                                                <span class="ui-pill ui-pill--success">Feedback: On Time</span>
                                            @endif

                                            @if ($isWhiteboardLate)
                                                <a href="{{ route('staffs.show', $staff->id) }}#summary"
                                                   class="ui-pill ui-pill--danger text-decoration-none">
                                                    Whiteboard: Delayed
                                                </a>
                                            @else
                                                <span class="ui-pill ui-pill--success">Whiteboard: On Time</span>
                                            @endif
                                        </div>
                                    @endif
                                </td>

                                <td class="ui-muted text-center">{{ $staff->jobTitle->name ?? '-' }}</td>

                                <td class="text-center">
                                    @if (optional($staff->manager)->id)
                                        <a href="{{ route('staffs.show', optional($staff->manager)->id) }}"
                                            class="ui-title text-decoration-none">
                                            {{ $managerName ?: '__' }}
                                        </a>
                                    @else
                                        <span class="ui-muted">__</span>
                                    @endif
                                </td>

                                <td class="ui-muted text-center">{{ $staff->manager->team_name ?? '-' }}</td>
                                <td class="ui-muted text-center">{{ $staff->team_type ?? '-' }}</td>
                                @if ($pageTitle === 'Supervisors')
                                    <td class="ui-muted text-center">{{ $staff->teachers_count ?? 0 }}</td>
                                    <td class="ui-muted text-center">{{ $staff->slots_count ?? 0 }}</td>
                                    <td class="ui-muted text-center">{{ $staff->schedules_count ?? 0 }}</td>
                                @endif
                                @if ($isTeamsRoute)
                                    <td class="ui-muted text-center">
                                        {{ $staff->team_renewed_students ?? 0 }}/{{ $staff->team_total_students ?? 0 }}
                                        ({{ $staff->team_renewal_rate ?? 0 }}%)
                                    </td>
                                @endif
                                <td class="ui-muted text-center">{{ $staff->roleType->title ?? '-' }}</td>
                                <td class="ui-muted text-center">{{ $staff->date_of_joining ?? '-' }}</td>
                                <td class="ui-muted text-center">{{ $staff->years_of_experience ?? '-' }}</td>

                                @if ($authDepartmentSlug == 'academy' && request('job_title_id'))
                                    <td class="text-center">
                                        <a href="{{ Illuminate\Support\Facades\Config::get('app.Retention_URL') }}students?staff_id={{ $staff->id }}"
                                            class="asset-btn asset-btn--secondary staff-mini-btn">
                                            @if ($isAcademicTeacherView)
                                                View Students
                                            @elseif ($isAcademicTesterView)
                                                View Schedule
                                            @endif
                                        </a>
                                    </td>
                                @endif

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        @can('hr_staffs_show')
                                            <x-table-action type="view" :url="route('staffs.show', $staff->id)" />
                                        @endcan

                                        @can('hr_staffs_edit')
                                            <x-table-action type="edit" :url="route('staffs.edit', $staff->id)" />
                                        @endcan

                                        @can('hr_staffs_review_new')
                                            @if (is_null($staff->reviewed_at))
                                                <form action="{{ route('staffs.markReviewed', $staff->id) }}" method="POST"
                                                    class="d-inline">
                                                    @csrf
                                                    <button type="submit" title="Mark as Reviewed"
                                                        style="border:none; background:transparent; padding:0;">
                                                        <span class="table-action table-action--review">
                                                            <iconify-icon icon="lucide:check-check"></iconify-icon>
                                                        </span>
                                                    </button>
                                                </form>
                                            @endif
                                        @endcan

                                        @can('hr_staffs_destroy')
                                            @if (isSuperAdminOrCeo($staff->user))
                                                <button type="button" disabled title="Cannot delete Super Admin or CEO"
                                                    style="border:none; background:transparent; padding:0; cursor:not-allowed;">
                                                    <span class="table-action table-action--disabled">
                                                        <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                                    </span>
                                                </button>
                                            @else
                                                <button type="button" data-bs-toggle="modal" data-bs-target="#deleteModal"
                                                    data-id="{{ $staff->id }}" data-name="{{ $staff->full_name }}"
                                                    title="Delete Staff"
                                                    style="border:none; background:transparent; padding:0;">
                                                    <span class="table-action table-action--danger">
                                                        <iconify-icon icon="fluent:delete-24-regular"></iconify-icon>
                                                    </span>
                                                </button>
                                            @endif
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form id="deleteForm" method="POST">
                @csrf
                @method('DELETE')

                <div class="modal-content border-0 shadow-lg rounded-4">
                    <div class="modal-header border-bottom-0 pb-0">
                        <h5 class="modal-title">Delete Staff</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body pt-3">
                        <p class="mb-0">
                            Are you sure you want to delete
                            <strong id="staffName"></strong>?
                        </p>
                    </div>

                    <div class="modal-footer border-top-0 pt-0">
                        <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-outline-danger">
                            Yes, Delete
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if ($canBulkUpdateManager)
        <div class="modal fade" id="updateManagerModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <form id="updateManagerForm" method="POST" action="{{ route('staffs.updateManager') }}">
                    @csrf

                    <div class="modal-content border-0 shadow-lg rounded-4">
                        <div class="modal-header border-bottom-0 pb-0">
                            <h5 class="modal-title">Update Manager</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body pt-3">
                            <p class="mb-3">
                                Select a supervisor to assign as the manager for the selected staff members.
                            </p>

                            <select name="manager_id" class="asset-select" required>
                                <option value="">-- Select Supervisor --</option>
                                @foreach ($supervisors as $supervisor)
                                    <option value="{{ $supervisor->id }}">
                                        {{ $supervisor->first_name }} {{ $supervisor->last_name }}
                                    </option>
                                @endforeach
                            </select>

                            <input type="hidden" name="staff_ids" id="selectedStaffInput">
                        </div>

                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">
                                Cancel
                            </button>
                            <button type="submit" class="asset-btn asset-btn--primary">
                                Update Manager
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif
@endsection

@push('styles')
    <style>
        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .filter-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .filter-head__meta {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .staff-filter-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .staff-filter-col {
            grid-column: span 3 / span 3;
        }

        .staff-filter-col--search {
            grid-column: span 6 / span 6;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .filter-search-wrap {
            position: relative;
        }

        .filter-search-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 18px;
            pointer-events: none;
        }

        .filter-search-input {
            padding-left: 2.5rem;
        }

        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .bulk-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            border: 1px solid #e8eef5;
            background: #ffffff;
            border-radius: 18px;
            padding: 1rem 1.15rem;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
        }

        .bulk-bar__left {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .bulk-bar__right {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .bulk-bar__text {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .new-staff-flag {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            border: 1px solid #dbeafe;
            background: #eff6ff;
            border-radius: 18px;
            padding: 1rem 1.15rem;
            box-shadow: 0 10px 25px rgba(37, 99, 235, 0.08);
        }

        .new-staff-flag__content {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .new-staff-flag__text {
            color: #1f2937;
            font-size: 0.94rem;
            font-weight: 600;
        }

        .new-staff-name-flag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            margin-left: 0.35rem;
            border-radius: 50%;
            background: #fef3c7;
            color: #d97706;
            vertical-align: middle;
            font-size: 14px;
        }

        .staff-avatar {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            object-fit: cover;
            border: 1px solid #e5e7eb;
            background: #fff;
        }

        .staff-mini-btn {
            padding: 0.38rem 0.65rem;
            font-size: 0.78rem;
            font-weight: 600;
            white-space: nowrap;
            border: 1px solid #cfd8e3 !important;
            border-radius: 10px;
            line-height: 1.2;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }

        .table-action--danger {
            border-color: #f3d1d1;
            color: #dc3545;
        }

        .table-action--danger:hover {
            background: #fff5f5;
        }

        .table-action--review {
            border-color: #bbf7d0;
            color: #16a34a;
        }

        .table-action--review:hover {
            background: #f0fdf4;
        }

        .table-action--disabled {
            border-color: #e5e7eb;
            color: #9ca3af;
            background: #f9fafb;
        }

        .staff-checkbox.form-check-input {
            width: 18px !important;
            height: 18px !important;
            cursor: pointer !important;
            position: relative;
            z-index: 20;
            pointer-events: auto;
            opacity: 1 !important;
            appearance: auto !important;
            -webkit-appearance: checkbox !important;
        }

        @media (max-width: 1199.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 767.98px) {

            .staff-filter-col,
            .staff-filter-col--search {
                grid-column: span 12 / span 12;
            }

            .filter-head,
            .bulk-bar,
            .bulk-bar__left,
            .bulk-bar__right {
                align-items: stretch;
            }
        }

        .profile-hero__title {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .form-section__title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
        }

        .modern-section {
            background: #f8fafc;
            border: 1px solid #dbe2ea;
            border-radius: 18px;
            box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
            padding: 1.5rem;
            margin-bottom: 1.25rem;
            overflow: hidden;
        }

        .modern-section-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .modern-badge-card {
            background: #fff;
            border: 1px solid #dbe2ea;
            border-radius: 14px;
            box-shadow: 0 1px 6px rgba(15, 23, 42, 0.05);
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-top: 1rem;
            flex-wrap: wrap;
            max-width: 100%;
            overflow-wrap: anywhere;
        }

        .staff-content-area,
        .staff-content-card,
        .tab-content,
        .tab-pane {
            min-width: 0;
            max-width: 100%;
            overflow-x: hidden;
        }

        .modern-section .row {
            max-width: 100%;
        }

        .modern-section .col,
        .modern-section [class*="col-"] {
            min-width: 0;
        }

        .modern-label,
        .modern-section p,
        .modern-section span,
        .modern-section div {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .staff-mini-btn {
            padding: 0.38rem 0.65rem;
            font-size: 0.78rem;
            font-weight: 600;
            white-space: nowrap;
            border: 1px solid #cfd8e3 !important;
            border-radius: 10px;
            line-height: 1.2;
        }

        .table-action {
            border: 1px solid #dbe2ea !important;
        }

        .ui-card--table table {
            border-collapse: separate;
            border-spacing: 0;
        }

        .ui-card--table table th,
        .ui-card--table table td {
            border-bottom: 1px solid #e5e7eb !important;
        }

        .ui-card--table table th:not(:last-child),
        .ui-card--table table td:not(:last-child) {
            border-right: 1px solid #eef2f7 !important;
        }

        .ui-card--table table thead th:first-child {
            color: transparent !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const deleteModal = document.getElementById('deleteModal');
            const exportSelect = document.getElementById('exportSelect');
            const updateManagerModal = document.getElementById('updateManagerModal');
            const bulkSelectVisibleBtn = document.getElementById('bulkSelectVisibleBtn');

            if (deleteModal) {
                deleteModal.addEventListener('show.bs.modal', function(event) {
                    const button = event.relatedTarget;
                    const staffId = button.getAttribute('data-id');
                    const staffName = button.getAttribute('data-name');
                    const form = document.getElementById('deleteForm');

                    form.action = `/staffs/${staffId}`;
                    document.getElementById('staffName').textContent = staffName;
                });
            }

            if (exportSelect) {
                exportSelect.addEventListener('change', function() {
                    const type = this.value;
                    if (!type) return;

                    const form = this.closest('form');
                    const formData = new FormData(form);
                    formData.set('export', type);

                    const params = new URLSearchParams();
                    for (const [key, value] of formData.entries()) {
                        if (value !== '') {
                            params.append(key, value);
                        }
                    }

                    window.open(`{{ route('staffs.index') }}?${params.toString()}`, '_blank');
                    this.value = '';
                });
            }

            if (bulkSelectVisibleBtn) {
                bulkSelectVisibleBtn.addEventListener('click', function() {
                    document.querySelectorAll('.staff-checkbox').forEach(cb => {
                        cb.checked = true;
                    });
                });
            }

            if (updateManagerModal) {
                updateManagerModal.addEventListener('show.bs.modal', function(event) {
                    const selected = Array.from(document.querySelectorAll('.staff-checkbox:checked')).map(
                        cb => cb.value);

                    if (selected.length === 0) {
                        event.preventDefault();
                        alert('Please select at least one staff member.');
                        return false;
                    }

                    document.getElementById('selectedStaffInput').value = selected.join(',');
                });
            }
        });
    </script>
@endpush