@extends('dashboard.layouts.app')

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

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

                {{-- Page Title --}}
                <x-page-title
                    title="Profile"
                    description="Review your personal details, job information, payroll data, schedule, items, and related records.">
                    <a href="{{ route('editProfile') }}" class="asset-btn asset-btn--primary" title="Edit Profile">
                        <iconify-icon icon="lucide:edit"></iconify-icon>
                        Edit Profile
                    </a>
                </x-page-title>

                {{-- Profile Shell --}}
                <div class="ui-card profile-shell-card">
                    <div class="profile-layout">

                        {{-- Sidebar Tabs --}}
                        <aside class="profile-sidebar">
                            <div class="profile-sidebar__head">
                                @php
                                    $profilePhoto = $staff->staff_photo ?? null;
                                    $profilePhotoUrl = $profilePhoto
                                        ? (\Illuminate\Support\Str::startsWith($profilePhoto, ['http://', 'https://'])
                                            ? $profilePhoto
                                            : asset($profilePhoto))
                                        : null;
                                @endphp
                                <div class="profile-avatar">
                                    @if ($profilePhotoUrl)
                                        <img src="{{ $profilePhotoUrl }}" alt="Profile Picture">
                                    @else
                                        {{ strtoupper(substr($staff->first_name ?? 'P', 0, 1) . substr($staff->last_name ?? '', 0, 1)) }}
                                    @endif
                                </div>
                                <div class="profile-sidebar__info">
                                    <div class="profile-sidebar__name">
                                        {{ trim(($staff->first_name ?? '') . ' ' . ($staff->last_name ?? '')) ?: 'Profile' }}
                                    </div>
                                    <div class="profile-sidebar__role">
                                        {{ $staff->jobTitle->name ?? 'Staff Member' }}
                                    </div>
                                </div>
                            </div>

                            <div class="profile-tabs nav flex-column nav-pills" id="staffTabs" role="tablist" aria-orientation="vertical">
                                <button class="nav-link active profile-tab-link" id="basic-info-tab" data-bs-toggle="pill"
                                    data-bs-target="#basic-info" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-user-3-line"></i></span>
                                    <span>Personal Details</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="job-tab" data-bs-toggle="pill" data-bs-target="#job"
                                    type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-briefcase-line"></i></span>
                                    <span>Job</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="educations-tab" data-bs-toggle="pill"
                                    data-bs-target="#educations" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-graduation-cap-line"></i></span>
                                    <span>Education</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="work-experience-tab" data-bs-toggle="pill"
                                    data-bs-target="#work-experience" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-building-4-line"></i></span>
                                    <span>Work Experience</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="summary-tab" data-bs-toggle="pill"
                                    data-bs-target="#summary" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-file-list-3-line"></i></span>
                                    <span>Summary</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="tickets-tab" data-bs-toggle="pill"
                                    data-bs-target="#tickets" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-ticket-2-line"></i></span>
                                    <span>Tickets</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="payslip-tab" data-bs-toggle="pill"
                                    data-bs-target="#payslip" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-money-dollar-circle-line"></i></span>
                                    <span>Payslip</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="referrals-tab" data-bs-toggle="pill"
                                    data-bs-target="#referrals" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-team-line"></i></span>
                                    <span>Referrals</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="payroll-details-tab" data-bs-toggle="pill"
                                    data-bs-target="#payroll-details" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-wallet-3-line"></i></span>
                                    <span>Payroll Details</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="bank-info-tab" data-bs-toggle="pill"
                                    data-bs-target="#bank-info" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-bank-line"></i></span>
                                    <span>Other Info</span>
                                </button>

                                <button class="nav-link profile-tab-link" id="items-tab" data-bs-toggle="pill"
                                    data-bs-target="#items" type="button" role="tab">
                                    <span class="profile-tab-link__icon"><i class="ri-archive-2-line"></i></span>
                                    <span>My Items</span>
                                </button>

                                @if ($staff->staffSessionSlot()->exists())
                                    <button class="nav-link profile-tab-link" id="session_staff_slot_tab" data-bs-toggle="pill"
                                        data-bs-target="#session_staff_slot" type="button" role="tab">
                                        <span class="profile-tab-link__icon"><i class="ri-calendar-schedule-line"></i></span>
                                        <span>Schedule</span>
                                    </button>
                                @endif

                                @if ($staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher')
                                    <button class="nav-link profile-tab-link" id="performance-report-tab" data-bs-toggle="pill"
                                        data-bs-target="#performance-report" type="button" role="tab">
                                        <span class="profile-tab-link__icon"><i class="ri-line-chart-line"></i></span>
                                        <span>Performance Report</span>
                                    </button>

                                    <button class="nav-link profile-tab-link" id="teacher_slots-tab" data-bs-toggle="pill"
                                        data-bs-target="#teacher_slots" type="button" role="tab">
                                        <span class="profile-tab-link__icon"><i class="ri-time-line"></i></span>
                                        <span>Teacher Shift</span>
                                    </button>

                                    <button class="nav-link profile-tab-link" id="specilization-tab" data-bs-toggle="pill"
                                        data-bs-target="#specilization" type="button" role="tab">
                                        <span class="profile-tab-link__icon"><i class="ri-focus-3-line"></i></span>
                                        <span>Specialization</span>
                                    </button>

                                    <button class="nav-link profile-tab-link" id="intro-video-tab" data-bs-toggle="pill"
                                        data-bs-target="#intro-video" type="button" role="tab">
                                        <span class="profile-tab-link__icon"><i class="ri-video-line"></i></span>
                                        <span>Intro Video</span>
                                    </button>

                                    <button class="nav-link profile-tab-link" id="retention-feedback-tab" data-bs-toggle="pill"
                                        data-bs-target="#retention-feedback" type="button" role="tab">
                                        <span class="profile-tab-link__icon"><i class="ri-chat-check-line"></i></span>
                                        <span>Feedback</span>
                                    </button>
                                @endif

                                @if ($staff->jobTitle && strtolower($staff->jobTitle->slug) === 'tester')
                                    <button class="nav-link profile-tab-link" id="tester_slots-tab" data-bs-toggle="pill"
                                        data-bs-target="#tester_slots" type="button" role="tab">
                                        <span class="profile-tab-link__icon"><i class="ri-time-line"></i></span>
                                        <span>Tester Shift</span>
                                    </button>
                                @endif
                            </div>
                        </aside>

                        {{-- Content --}}
                        <main class="profile-content">
                            <div class="tab-content profile-tab-content" id="staffTabsContent">
                                @include('dashboard.staff.show_tabs.basic_info')
                                @include('dashboard.staff.show_tabs.job')
                                @include('dashboard.staff.show_tabs.educations')
                                @include('dashboard.staff.show_tabs.work_experience')
                                @include('dashboard.staff.show_tabs.summary')
                                @include('dashboard.staff.show_tabs.tickets')
                                @include('dashboard.profile.profile_tabs.payslip')
                                @include('dashboard.staff.show_tabs.referrals')
                                @include('dashboard.staff.show_tabs.payroll')
                                @include('dashboard.profile.profile_tabs.bank_info')
                                @include('dashboard.staff.show_tabs.project_access')
                                @include('dashboard.profile.profile_tabs.staff_session_slots')
                                @include('dashboard.profile.profile_tabs.items')

                                @if ($staff->jobTitle && strtolower($staff->jobTitle->slug) === 'teacher')
                                    @include('dashboard.staff.show_tabs.performance_report')
                                    @include('dashboard.staff.show_tabs.teacher_slots')
                                    @include('dashboard.staff.show_tabs.specialization')
                                    @include('dashboard.staff.show_tabs.intro_video')
                                    @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>
                        </main>
                    </div>
                </div>

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

@push('styles')
    <style>
        .profile-page span {
            display: inline-flex !important;
        }

        .profile-shell-card {
            border-radius: 0 !important;
            padding: 0;
            overflow: hidden;
        }

        .profile-layout {
            display: grid;
            grid-template-columns: 280px minmax(0, 1fr);
            min-height: 680px;
        }

        .profile-sidebar {
            border-right: 1px solid #eef2f7;
            background: #fbfcfe;
            padding: 1.25rem;
        }

        .profile-sidebar__head {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            margin-bottom: 1rem;
        }

        .profile-avatar {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4f46e5;
            font-weight: 900;
            flex-shrink: 0;
            overflow: hidden;
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .profile-sidebar__info {
            min-width: 0;
        }

        .profile-sidebar__name {
            color: #111827;
            font-size: 0.96rem;
            font-weight: 800;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .profile-sidebar__role {
            color: #64748b;
            font-size: 0.84rem;
            font-weight: 700;
            margin-top: 0.15rem;
        }

        .profile-tabs {
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }

        .profile-tab-link {
            width: 100%;
            display: flex !important;
            align-items: center;
            gap: 0.7rem;
            min-height: 44px;
            padding: 0.7rem 0.85rem !important;
            border-radius: 14px !important;
            border: 1px solid transparent !important;
            background: transparent !important;
            color: #475569 !important;
            font-size: 0.9rem;
            font-weight: 750 !important;
            text-align: left;
            transition: 0.2s ease;
        }

        .profile-tab-link:hover {
            background: #fff !important;
            border-color: #e5e7eb !important;
            color: #111827 !important;
            transform: translateX(2px);
        }

        .profile-tab-link.active {
            background: #4f46e5 !important;
            color: #fff !important;
            border-color: #4f46e5 !important;
            box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
        }

        .profile-tab-link__icon {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            background: #f1f5f9;
            color: #475569;
            flex-shrink: 0;
            transition: 0.2s ease;
        }

        .profile-tab-link.active .profile-tab-link__icon {
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
        }

        .profile-content {
            min-width: 0;
            padding: 1.25rem;
            background: #fff;
        }

        .profile-tab-content > .tab-pane {
            min-height: 620px;
        }

        .profile-tab-content .modern-section,
        .profile-tab-content .card {
            border: 1px solid #e5e7eb !important;
            border-radius: 18px !important;
            background: #fbfcfe !important;
            box-shadow: none !important;
            padding: 1.25rem !important;
            margin-bottom: 1.25rem !important;
        }

        .profile-tab-content .modern-section-title,
        .profile-tab-content .fw-bold.mb-2,
        .profile-tab-content .fw-bold.mt-3.mb-2 {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #111827 !important;
            font-size: 1rem !important;
            font-weight: 800 !important;
            margin-bottom: 1rem !important;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #eef2f7;
        }

        .profile-tab-content .info-card,
        .profile-tab-content .document-card,
        .profile-tab-content .social-link-card {
            border: 1px solid #e5e7eb !important;
            border-radius: 16px !important;
            background: #fff !important;
            padding: 1rem !important;
            min-height: 110px;
            box-shadow: none !important;
            transition: 0.2s ease;
        }

        .profile-tab-content .info-card:hover,
        .profile-tab-content .document-card:hover,
        .profile-tab-content .social-link-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07) !important;
        }

        .profile-tab-content .info-label,
        .profile-tab-content .social-label {
            display: block !important;
            color: #64748b !important;
            font-size: 0.8rem !important;
            font-weight: 800 !important;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.35rem;
        }

        .profile-tab-content .info-value {
            color: #111827 !important;
            font-size: 0.95rem !important;
            font-weight: 800 !important;
            word-break: break-word;
        }

        .profile-tab-content .table-responsive {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            overflow: auto;
            background: #fff;
        }

        .profile-tab-content table {
            margin-bottom: 0 !important;
            border-collapse: separate;
            border-spacing: 0;
        }

        .profile-tab-content table thead th {
            background: #f8fafc !important;
            color: #475569 !important;
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb !important;
            padding: 0.85rem !important;
            white-space: nowrap;
        }

        .profile-tab-content table tbody td {
            color: #111827;
            padding: 0.85rem !important;
            vertical-align: middle;
            border-bottom: 1px solid #eef2f7 !important;
        }

        .profile-tab-content table tbody tr:last-child td {
            border-bottom: 0 !important;
        }

        .profile-tab-content table tbody tr:hover td {
            background: #fbfcfe;
        }

        #delivery-stats {
            border: 1px solid #bae6fd !important;
            border-radius: 16px !important;
            background: #ecfeff !important;
            color: #0e7490 !important;
            font-weight: 750;
            padding: 1rem !important;
        }

        #delivery-stats .progress {
            height: 10px !important;
            border-radius: 999px;
            background: #cffafe;
            overflow: hidden;
        }

        #delivery-stats .progress-bar {
            border-radius: 999px;
            font-size: 0;
        }

        #session_staff_slot .card {
            background: #fff !important;
        }

        #session_staff_slot .d-flex.gap-3.mb-3 {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 220px)) auto;
            gap: 1rem !important;
            align-items: end;
            margin-bottom: 1.25rem !important;
        }

        #session_staff_slot .w-25 {
            width: 100% !important;
        }

        .profile-tab-content .form-control,
        .profile-tab-content .form-select {
            min-height: 42px;
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            background: #fff;
            color: #111827;
        }

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

        .profile-tab-content .btn,
        .profile-tab-content .asset-btn {
            border-radius: 12px !important;
            font-weight: 750;
        }

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

        .spinner-overlay {
            display: flex;
        }

        .spinner-container {
            padding: 3rem 2rem;
            border-radius: 16px;
            text-align: center;
            min-width: 200px;
        }

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

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

        @media (max-width: 1199.98px) {
            .profile-layout {
                grid-template-columns: 240px minmax(0, 1fr);
            }
        }

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

            .profile-sidebar {
                border-right: 0;
                border-bottom: 1px solid #eef2f7;
            }

            .profile-tabs {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            #session_staff_slot .d-flex.gap-3.mb-3 {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {
            .profile-tabs {
                grid-template-columns: 1fr;
            }

            .profile-content,
            .profile-sidebar {
                padding: 1rem;
            }

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

            .spinner-container {
                padding: 2rem 1rem;
                min-width: 150px;
            }

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

            .spinner-container p {
                font-size: 0.875rem;
            }
        }
    </style>
@endpush


{{-- ================= TAB IMPROVEMENTS ================= --}}

{{-- Bank Info Improvements --}}
@push('styles')
<style>
    #bank-info .badge {
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 800;
        padding: 0.5rem 0.8rem;
    }

    #bank-info .btn-outline-danger {
        border-radius: 12px;
        font-weight: 700;
    }

    #bank-info .alert {
        border-radius: 14px;
        font-weight: 700;
    }
</style>
@endpush


{{-- Items Tab Improvements --}}
@push('styles')
<style>
    #items table tbody td {
        font-weight: 700;
        color: #374151;
    }

    #items table tbody tr:hover td {
        background: #f8fafc;
    }
</style>
@endpush


{{-- Payslip Tab Improvements --}}
@push('styles')
<style>
    #payslip table tbody td {
        font-weight: 700;
    }

    #payslip .btn {
        border-radius: 10px;
        font-size: 0.8rem;
        font-weight: 700;
    }
</style>
@endpush


{{-- Schedule Tab Improvements --}}
@push('styles')
<style>
    #session_staff_slot table tbody td {
        font-size: 0.85rem;
    }

    #session_staff_slot .badge {
        font-weight: 700;
        border-radius: 999px;
        padding: 0.35rem 0.6rem;
    }

    #session_staff_slot .status-wrapper select {
        border-radius: 10px;
    }
</style>
@endpush

@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