@extends('dashboard.layouts.app')

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

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

                <x-page-title
                    title="Edit Profile"
                    description="Update your personal details, contact information, password, education, work experience, and other profile data.">
                    <a href="{{ route('profile') ?? '#' }}" class="asset-btn asset-btn--secondary">
                        <i class="ri-arrow-left-line"></i>
                        Back to Profile
                    </a>
                </x-page-title>

                <form class="profile-ajax-form" action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="ui-card profile-edit-shell-card">
                        <div class="profile-edit-layout">

                            {{-- Sidebar Tabs --}}
                            <aside class="profile-edit-sidebar">
                                <div class="profile-edit-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-edit-avatar">
                                        @if ($profilePhotoUrl)
                                            <img src="{{ $profilePhotoUrl }}" alt="Profile Picture">
                                        @else
                                            <i class="ri-user-settings-line"></i>
                                        @endif
                                    </div>
                                    <div>
                                        <div class="profile-edit-sidebar__title">Profile Settings</div>
                                        <div class="profile-edit-sidebar__sub">Manage your account data</div>
                                    </div>
                                </div>

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

                                    <button class="nav-link profile-edit-tab-link" id="contact_details-tab" data-bs-toggle="pill"
                                        data-bs-target="#contact_details" type="button" role="tab">
                                        <span class="profile-edit-tab-link__icon"><i class="ri-contacts-line"></i></span>
                                        <span>Contact Details</span>
                                    </button>

                                    <button class="nav-link profile-edit-tab-link" id="password-tab" data-bs-toggle="pill"
                                        data-bs-target="#passwordPage" type="button" role="tab">
                                        <span class="profile-edit-tab-link__icon"><i class="ri-lock-password-line"></i></span>
                                        <span>Password</span>
                                    </button>

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

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

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

                            {{-- Content --}}
                            <main class="profile-edit-content">
                                <div class="profile-edit-content__head">
                                    <div>
                                        <h5 class="profile-edit-content__title mb-1">Edit Information</h5>
                                        <p class="profile-edit-content__sub mb-0">
                                            Switch between sections and save your changes when finished.
                                        </p>
                                    </div>
                                </div>

                                <div class="tab-content profile-edit-tab-content" id="staffTabsContent">
                                    @include('dashboard.staff.tabs.basic_info')
                                    @include('dashboard.profile.edit_tabs.contact_details')
                                    @include('dashboard.profile.edit_tabs.other_info')
                                    @include('dashboard.staff.tabs.password')
                                    @include('dashboard.staff.tabs.educations')
                                    @include('dashboard.staff.tabs.work_experience')
                                </div>
                            </main>
                        </div>
                    </div>

                    <div class="profile-edit-actions">
                        <a href="{{ route('profile') ?? '#' }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>
                        <button type="submit" class="asset-btn asset-btn--primary">
                            <i class="ri-save-line"></i>
                            Save Changes
                        </button>
                    </div>
                </form>

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

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

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

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

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

        .profile-edit-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-edit-avatar {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4f46e5;
            font-size: 1.35rem;
            flex-shrink: 0;
            overflow: hidden;
        }

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

        .profile-edit-sidebar__title {
            color: #111827;
            font-size: 0.96rem;
            font-weight: 800;
            line-height: 1.35;
        }

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

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

        .profile-edit-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-edit-tab-link:hover {
            background: #fff !important;
            border-color: #e5e7eb !important;
            color: #111827 !important;
            transform: translateX(2px);
        }

        .profile-edit-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-edit-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-edit-tab-link.active .profile-edit-tab-link__icon {
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
        }

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

        .profile-edit-content__head {
            margin-bottom: 1.25rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .profile-edit-content__title {
            color: #111827;
            font-size: 1rem;
            font-weight: 800;
        }

        .profile-edit-content__sub {
            color: #64748b;
            font-size: 0.92rem;
        }

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

        .profile-edit-tab-content .modern-section,
        .profile-edit-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-edit-tab-content .modern-section-title,
        .profile-edit-tab-content h5,
        .profile-edit-tab-content h6 {
            color: #111827 !important;
            font-weight: 800 !important;
        }

        .profile-edit-tab-content label,
        .profile-edit-tab-content .form-label,
        .profile-edit-tab-content .modern-label {
            color: #374151 !important;
            font-size: 0.92rem !important;
            font-weight: 700 !important;
            margin-bottom: 0.45rem !important;
        }

        .profile-edit-tab-content .form-control,
        .profile-edit-tab-content .form-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .profile-edit-tab-content textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

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

        .profile-edit-tab-content .select2-container {
            width: 100% !important;
            display: block !important;
        }

        .profile-edit-tab-content .select2-container--default .select2-selection--single,
        .profile-edit-tab-content .select2-container--default .select2-selection--multiple {
            min-height: 44px !important;
            border: 1px solid #dbe2ea !important;
            border-radius: 12px !important;
            background: #fff !important;
            padding: 0.35rem 0.55rem !important;
        }

        .profile-edit-tab-content .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 30px !important;
            color: #111827 !important;
        }

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

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

        .profile-edit-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-edit-tab-content table tbody td {
            color: #111827;
            padding: 0.85rem !important;
            vertical-align: middle;
            border-bottom: 1px solid #eef2f7 !important;
        }

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

        .profile-edit-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-top: 1.25rem;
            flex-wrap: wrap;
        }

        .asset-btn {
            min-height: 44px;
            padding: 0.72rem 1.05rem;
            border-radius: 12px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            text-decoration: none;
            font-weight: 700;
            transition: 0.2s ease;
            white-space: nowrap;
        }

        .asset-btn:hover {
            transform: translateY(-1px);
        }

        .asset-btn--primary {
            background: #4f46e5;
            color: #fff;
            border-color: #4f46e5;
        }

        .asset-btn--primary:hover {
            background: #4338ca;
            color: #fff;
            border-color: #4338ca;
        }

        .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

        #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-edit-layout {
                grid-template-columns: 240px minmax(0, 1fr);
            }
        }

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

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

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

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

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

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

            .profile-edit-actions,
            .asset-btn {
                width: 100%;
            }

            .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

@push('scripts')
    <script>
        $(document).ready(function () {
            $(document).on('submit', '.profile-ajax-form', function (e) {
                e.preventDefault();

                const $form = $(this);
                const submitBtn = $form.find('[type="submit"]');
                submitBtn.prop('disabled', true).addClass('disabled');

                $.ajax({
                    url: $form.attr('action'),
                    method: $form.attr('method') || 'POST',
                    data: new FormData(this),
                    contentType: false,
                    processData: false,
                    success: function (resp) {
                        toastr.success(resp.message || 'Profile updated successfully');
                    },
                    error: function (xhr) {
                        let msg = 'Update failed';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                        toastr.error(msg);
                    },
                    complete: function () {
                        submitBtn.prop('disabled', false).removeClass('disabled');
                    }
                });
            });

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