@extends('dashboard.layouts.app')

@section('content')
    <style>
        .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            overflow: hidden;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #dbe2ea;
        }

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

        .form-section__sub {
            color: #6b7280;
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .staff-layout {
            display: grid;
            grid-template-columns: 270px minmax(0, 1fr);
            gap: 1.25rem;
            align-items: start;
        }

        .staff-sidebar {
            position: sticky;
            top: 1rem;
            min-width: 0;
        }

        .staff-sidebar__inner {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .staff-tab-btn {
            width: 100%;
            text-align: left;
            border: 1px solid #dbe2ea;
            background: #f8fafc;
            color: #334155;
            border-radius: 14px;
            padding: 0.82rem 0.95rem;
            font-size: 0.9rem;
            font-weight: 600;
            transition: 0.2s ease;
            box-shadow: none !important;
            white-space: normal;
            line-height: 1.35;
        }

        .staff-tab-btn:hover {
            background: #f1f5f9;
            border-color: #cfd8e3;
            color: #111827;
        }

        .staff-tab-btn.active {
            background: #111827 !important;
            color: #fff !important;
            border-color: #111827 !important;
        }

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

        .profile-hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            min-width: 0;
        }

        .profile-hero__main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
        }

        .profile-hero__icon {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            flex-shrink: 0;
        }

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

        .profile-hero__sub {
            margin: 0.25rem 0 0;
            color: #6b7280;
            font-size: 0.88rem;
            line-height: 1.45;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .profile-hero__actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .staff-content-card {
            min-height: 100%;
        }

        .select2-container {
            display: block !important;
            width: 100% !important;
        }

        .select2-container .selection {
            display: block !important;
        }

        #loadingSpinner {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.35);
            display: none;
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .spinner-overlay {
            display: flex;
        }

        .spinner-container {
            padding: 2.5rem 2rem;
            border-radius: 18px;
            backdrop-filter: blur(6px);
            text-align: center;
            min-width: 220px;
        }

        .spinner-border {
            width: 3rem !important;
            height: 3rem !important;
            margin: 0 auto;
        }

        .spinner-container p {
            margin: 0 !important;
        }

        .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;
            max-width: 100%;
            overflow: hidden;
        }

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

        .modern-label {
            font-weight: 600;
            color: #374151;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            overflow-wrap: anywhere;
        }

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

        .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;
            word-break: break-word;
        }

        .modern-badge-card .badge {
            font-size: 0.9em;
            padding: 0.65em 1em;
            white-space: normal;
        }

        .staff-content-area .card {
            border: 1px solid #dbe2ea !important;
            border-radius: 14px;
            overflow: hidden;
        }

        .staff-content-area .card-body {
            max-width: 100%;
            overflow: hidden;
        }

        .staff-content-area .row {
            max-width: 100%;
        }

        .staff-content-area [class*="col-"] {
            min-width: 0;
        }

        .staff-content-area p,
        .staff-content-area span,
        .staff-content-area div,
        .staff-content-area label {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        @media (max-width: 991.98px) {
            .staff-layout {
                grid-template-columns: 1fr;
            }

            .staff-sidebar {
                position: static;
            }

            .profile-hero {
                align-items: flex-start;
            }
        }

        @media (max-width: 576px) {
            .spinner-container {
                padding: 2rem 1rem;
                min-width: 160px;
            }

            .spinner-border {
                width: 2rem !important;
                height: 2rem !important;
            }

            .spinner-container p {
                font-size: 0.875rem;
            }

            .profile-hero__actions {
                width: 100%;
            }

            .profile-hero__actions .asset-btn,
            .profile-hero__actions form,
            .profile-hero__actions form button {
                width: 100%;
                justify-content: center;
            }
        }
    </style>

    @include('components.loader')
    @include('components.alert')

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

                <div class="ui-card">
                    <div class="profile-hero">
                        <div class="profile-hero__main">
                            <div class="profile-hero__icon">
                                <iconify-icon icon="hugeicons:user-id-details" width="24" height="24"></iconify-icon>
                            </div>

                            <div>
                                <div class="profile-hero__title">Employee Profile</div>
                                <p class="profile-hero__sub">
                                    Viewing details for {{ $staff->user->full_name ?? 'Staff Member' }}
                                </p>
                            </div>
                        </div>

                        <div class="profile-hero__actions">
                            @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" class="asset-btn asset-btn--primary">
                                            <iconify-icon icon="lucide:check-check"></iconify-icon>
                                            Mark as Reviewed
                                        </button>
                                    </form>
                                @endif
                            @endcan

                            <a href="{{ route('staffs.edit', $staff->id) }}" class="asset-btn asset-btn--primary">
                                <iconify-icon icon="lucide:edit"></iconify-icon>
                                Edit
                            </a>

                            @if (\App\Models\Staff::where('old_manager_id', $staff->id)->exists())
                                <form action="{{ route('staffs.returnManager') }}" method="POST" class="d-inline">
                                    @csrf
                                    <input type="hidden" name="staff_id" value="{{ $staff->id }}">
                                    <button type="submit" class="asset-btn asset-btn--secondary">
                                        <iconify-icon icon="lucide:undo-2"></iconify-icon>
                                        Return Staff
                                    </button>
                                </form>
                            @endif

                            <a href="{{ route('staffs.index') }}" class="asset-btn asset-btn--secondary">
                                <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                                Back to List
                            </a>
                        </div>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="staff-layout">
                        <div class="staff-sidebar">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <div class="form-section__title mb-1">Profile Sections</div>
                                    <p class="form-section__sub mb-0">
                                        Browse employee information, reports, payroll data, and related records.
                                    </p>
                                </div>

                                <div class="nav staff-sidebar__inner" id="staffTabs" role="tablist" aria-orientation="vertical">
                                    @php
                                        $canViewStaffPersonalDetails = auth()->user()?->can('hr_staffs_view_personal_details') ?? false;
                                        $canViewStaffContactDetails = auth()->user()?->can('hr_staffs_view_contact_details') ?? false;
                                        $canViewStaffJob = auth()->user()?->can('hr_staffs_view_job') ?? false;
                                        $canViewStaffSpecialization = auth()->user()?->can('hr_staffs_view_specialization') ?? false;
                                        $canViewStaffTeacherShift = auth()->user()?->can('hr_staffs_view_teacher_shift') ?? false;
                                        $canAddManagerCompensation = auth()->user()?->staff?->id && $staff->manager_id == auth()->user()->staff->id;
                                        $canViewPayrollDetails = (auth()->user()?->can('hr_staffs_view_payroll') ?? false) || $canAddManagerCompensation;
                                        $activeStaffTab = collect([
                                            'basic-info' => $canViewStaffPersonalDetails,
                                            'contact_details' => $canViewStaffContactDetails,
                                            'job' => $canViewStaffJob,
                                            'educations' => true,
                                            'work-experience' => true,
                                            'summary' => true,
                                            'tickets' => true,
                                            'linked-assets' => true,
                                            'payslip' => auth()->user()?->can('hr_staffs_view_payroll') ?? false,
                                            'referrals' => true,
                                            'payroll-details' => $canViewPayrollDetails,
                                            'bank-info' => auth()->user()?->can('hr_staffs_view_info') ?? false,
                                            'performance-report' => $staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher',
                                            'teacher-evaluation' => $staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher',
                                            'teacher_slots' => $staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher' && $canViewStaffTeacherShift,
                                            'specilization' => $staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher' && $canViewStaffSpecialization,
                                            'retention-feedback' => $staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher',
                                            'tester_slots' => $staff->jobTitle && strtolower($staff->jobTitle->slug) === 'tester',
                                            'session_staff_slot' => $staff->jobTitle && $staff->jobTitle->slug === 'supervisor',
                                        ])->filter()->keys()->first();
                                    @endphp

                                    @if ($canViewStaffPersonalDetails)
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'basic-info' ? 'active' : '' }}"
                                                id="basic-info-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#basic-info"
                                                type="button"
                                                role="tab">
                                            Personal Details
                                        </button>
                                    @endif

                                    @if ($canViewStaffContactDetails)
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'contact_details' ? 'active' : '' }}"
                                                id="contact_details-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#contact_details"
                                                type="button"
                                                role="tab">
                                            Contact Details
                                        </button>
                                    @endif

                                    @if ($canViewStaffJob)
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'job' ? 'active' : '' }}"
                                                id="job-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#job"
                                                type="button"
                                                role="tab">
                                            Job
                                        </button>
                                    @endif

                                    <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'educations' ? 'active' : '' }}"
                                            id="educations-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#educations"
                                            type="button"
                                            role="tab">
                                        Education
                                    </button>

                                    <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'work-experience' ? 'active' : '' }}"
                                            id="work-experience-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#work-experience"
                                            type="button"
                                            role="tab">
                                        Work Experience
                                    </button>

                                    <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'summary' ? 'active' : '' }}"
                                            id="summary-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#summary"
                                            type="button"
                                            role="tab">
                                        Summary
                                    </button>

                                    <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'tickets' ? 'active' : '' }}"
                                            id="tickets-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#tickets"
                                            type="button"
                                            role="tab">
                                        Tickets
                                    </button>

                                    <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'linked-assets' ? 'active' : '' }}"
                                            id="linked-assets-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#linked-assets"
                                            type="button"
                                            role="tab">
                                        Linked Assets
                                    </button>

                                    @can('hr_staffs_view_payroll')
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'payslip' ? 'active' : '' }}"
                                                id="payslip-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#payslip"
                                                type="button"
                                                role="tab">
                                            Payslip
                                        </button>
                                    @endcan

                                    <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'referrals' ? 'active' : '' }}"
                                            id="referrals-tab"
                                            data-bs-toggle="pill"
                                            data-bs-target="#referrals"
                                            type="button"
                                            role="tab">
                                        Referrals
                                    </button>

                                    @if ($canViewPayrollDetails)
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'payroll-details' ? 'active' : '' }}"
                                                id="payroll-details-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#payroll-details"
                                                type="button"
                                                role="tab">
                                            Payroll Details
                                        </button>
                                    @endif

                                    @can('hr_staffs_view_info')
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'bank-info' ? 'active' : '' }}"
                                                id="bank-info-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#bank-info"
                                                type="button"
                                                role="tab">
                                            Other Info
                                        </button>
                                    @endcan

                                    @if ($staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher')
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'performance-report' ? 'active' : '' }}"
                                                id="performance-report-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#performance-report"
                                                type="button"
                                                role="tab">
                                            Performance Report
                                        </button>

                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'teacher-evaluation' ? 'active' : '' }}"
                                                id="teacher-evaluation-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#teacher-evaluation"
                                                type="button"
                                                role="tab">
                                            Live Session Evaluations
                                        </button>

                                        @if ($canViewStaffTeacherShift)
                                            <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'teacher_slots' ? 'active' : '' }}"
                                                    id="teacher_slots-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#teacher_slots"
                                                    type="button"
                                                    role="tab">
                                                Teacher Shift
                                            </button>
                                        @endif

                                        @if ($canViewStaffSpecialization)
                                            <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'specilization' ? 'active' : '' }}"
                                                    id="specilization-tab"
                                                    data-bs-toggle="pill"
                                                    data-bs-target="#specilization"
                                                    type="button"
                                                    role="tab">
                                                Specialization
                                            </button>
                                        @endif

                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'retention-feedback' ? 'active' : '' }}"
                                                id="retention-feedback-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#retention-feedback"
                                                type="button"
                                                role="tab">
                                            Feedback
                                        </button>
                                    @endif

                                    @if ($staff->jobTitle && strtolower($staff->jobTitle->slug) === 'tester')
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'tester_slots' ? 'active' : '' }}"
                                                id="tester_slots-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#tester_slots"
                                                type="button"
                                                role="tab">
                                            Tester Shift
                                        </button>
                                    @endif

                                    @if ($staff->jobTitle && $staff->jobTitle->slug === 'supervisor')
                                        <button class="nav-link staff-tab-btn {{ $activeStaffTab === 'session_staff_slot' ? 'active' : '' }}"
                                                id="session_staff_slot-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#session_staff_slot"
                                                type="button"
                                                role="tab">
                                            Slots
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="staff-content-area">
                            <div class="form-section staff-content-card">
                                <div class="form-section__head">
                                    <div class="form-section__title mb-1">Employee Details</div>
                                    <p class="form-section__sub mb-0">
                                        Review the employee profile details and navigate between related records from the side menu.
                                    </p>
                                </div>

                                <div class="tab-content" id="staffTabsContent">
                                    @if ($canViewStaffPersonalDetails)
                                        @include('dashboard.staff.show_tabs.basic_info')
                                    @endif
                                    @if ($canViewStaffContactDetails)
                                        @include('dashboard.staff.show_tabs.contact_details')
                                    @endif
                                    @if ($canViewStaffJob)
                                        @include('dashboard.staff.show_tabs.job')
                                    @endif
                                    @include('dashboard.staff.show_tabs.summary')
                                    @include('dashboard.staff.show_tabs.tickets')
                                    @include('dashboard.staff.show_tabs.linked_assets')
                                    @can('hr_staffs_view_payroll')
                                        @include('dashboard.staff.show_tabs.payslip')
                                    @endcan
                                    @include('dashboard.staff.show_tabs.referrals')
                                    @if ($canViewPayrollDetails)
                                        @include('dashboard.staff.show_tabs.payroll')
                                    @endif
                                    @can('hr_staffs_view_info')
                                        @include('dashboard.staff.show_tabs.bank_info')
                                    @endcan
                                    @include('dashboard.staff.show_tabs.project_access')
                                    @include('dashboard.staff.show_tabs.performance_report')
                                    @include('dashboard.staff.show_tabs.educations')
                                    @include('dashboard.staff.show_tabs.work_experience')
                                    @include('dashboard.staff.show_tabs.staff_session_slots')

                                    @if ($staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher')
                                        @if ($canViewStaffTeacherShift)
                                            @include('dashboard.staff.show_tabs.teacher_slots')
                                        @endif
                                        @include('dashboard.staff.show_tabs.teacher_evaluation')
                                        @if ($canViewStaffSpecialization)
                                            @include('dashboard.staff.show_tabs.specialization')
                                        @endif
                                        @include('dashboard.staff.show_tabs.retention_feedback')
                                    @endif

                                    @if ($staff->jobTitle && strtolower($staff->jobTitle->slug) === 'tester')
                                        @include('dashboard.staff.show_tabs.tester_slots')
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(window).on('load', function () {
            $('#loadingSpinner').fadeOut(400);
        });

        document.addEventListener('DOMContentLoaded', function () {
            if (typeof bootstrap === 'undefined' || !bootstrap.Tab) {
                return;
            }

            const params = new URLSearchParams(window.location.search);
            const activeTab = params.get('active_tab') || (window.location.hash ? window.location.hash.substring(1) : null);

            if (!activeTab) {
                return;
            }

            const safeTabId = activeTab.replace(/[^A-Za-z0-9_-]/g, '');
            const tabTrigger = document.querySelector(`#${safeTabId}-tab`);

            if (!tabTrigger) {
                return;
            }

            bootstrap.Tab.getOrCreateInstance(tabTrigger).show();
        });
    </script>
@endpush