@extends('frontend.layout.dashboard-master')
@section('site_title', __('My Profile'))

@section('style')
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<style>
/* Tagify in profile skill editor */
.edit_skill_wrapper .tagify { border: 1px solid #d6dde6; border-radius: 9px; background: #fff; padding: 6px 10px; min-height: 44px; }
.edit_skill_wrapper .tagify:focus-within { border-color: var(--main-color-one); box-shadow: 0 0 0 3px rgba(0,116,86,.12); }
.edit_skill_wrapper .tagify__tag { background: color-mix(in srgb, var(--main-color-one) 10%, white); border-radius: 6px; }
.edit_skill_wrapper .tagify__tag > div::before { background: color-mix(in srgb, var(--main-color-one) 10%, white); }
.edit_skill_wrapper .tagify__tag__removeBtn { color: var(--main-color-one); }
.edit_skill_wrapper .tagify__input { font-size: 14px; color: #334155; }

/* inline toggle switch */
.availability-toggle { position:relative; display:inline-flex; cursor:pointer; }
.availability-toggle input { position:absolute; opacity:0; width:0; height:0; }
.availability-toggle .track { width:40px; height:20px; border-radius:999px; background:#d6d6d6; transition:background .2s; flex-shrink:0; }
.availability-toggle input:checked ~ .track { background:var(--main-color-one); }
.availability-toggle .thumb { position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; }
.availability-toggle input:checked ~ .thumb { transform:translateX(20px); }

/* skill action popup */
.skill-action-popup { position:absolute; right:16px; top:50%; transform:translateY(-50%); z-index:10; min-width:95px;
    background:#fff; border:1px solid #D7DEE7; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.08); display:none; }
.skill-action-popup.open { display:block; }

/* popup-fixed system (for education/experience/portfolio add-edit forms) */
.popup-fixed { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5);
    justify-content:center; align-items:center; padding:16px; overflow-y:auto; }
.popup-fixed.popup-active { display:flex; }
.popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9998; }
.popup-overlay.popup-active { display:block; }
.popup-contents { background:#fff; border-radius:12px; width:100%; max-width:560px; padding:20px 16px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.15); max-height:calc(100vh - 32px); overflow-y:auto; overflow-x:hidden; }
.popup-contents-close { position:absolute; top:14px; right:16px; cursor:pointer; font-size:18px; color:#637381; line-height:1; }
.popup-contents-close:hover { color:#344054; }
.popup-contents-title { font-size:16px; font-weight:600; color:#242B36; margin-bottom:6px; }
.popup-contents-para { font-size:13px; color:#637381; margin-bottom:20px; }
.popup-contents-btn { display:flex; justify-content:flex-end; gap:10px; padding-top:16px; margin-top:16px; border-top:1px solid #E9EBF0; }
/* reuse existing form classes from dashboard-master for popup form inputs */
.popup-contents .custom-form .single-input,
.popup-contents .custom-form .form-group { margin-bottom:14px; }
.popup-contents .custom-form .label { font-size:13px; font-weight:500; color:#344054; margin-bottom:6px; display:block; }
.popup-contents .custom-form input.form-control,
.popup-contents .custom-form textarea.form-control,
.popup-contents .custom-form input.form--control,
.popup-contents .custom-form textarea.form-message { width:100%; padding:9px 14px; border:1px solid #D0D5DD; border-radius:8px; font-size:13px; color:#344054; background:#fff; outline:none; box-sizing:border-box; }
.popup-contents .custom-form input:focus,
.popup-contents .custom-form textarea:focus { border-color:var(--main-color-one); box-shadow:0 0 0 3px rgba(var(--main-color-one-rgb),.1); }
.popup-contents .custom-form .single-flex-input { display:flex; gap:12px; }
.popup-contents .custom-form .single-flex-input > * { flex:1; }
.popup-contents .right-info-text { font-size:11px; color:#637381; margin-top:4px; }
/* popup buttons */
.popup-contents .btn-profile { display:inline-flex; align-items:center; gap:6px; padding:8px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.popup-contents .btn-bg-1 { background:var(--main-color-one); color:#fff; border:none; }
.popup-contents .btn-bg-1:hover { background:var(--main-color-one); color:#fff; }
.popup-contents .btn-outline-gray { background:#fff; color:#637381; border:1px solid #D0D5DD; }
.popup-contents .btn-outline-gray:hover { background:#F1F5F9; }
/* photo upload area in popup */
.popup-contents .photo-uploaded { display:block; border:2px dashed #D0D5DD; border-radius:8px; padding:16px 24px; cursor:pointer; text-align:center; }
.popup-contents .photo-uploaded:hover { border-color:var(--main-color-one); }
.popup-contents .photo-uploaded-file { display:none; }
</style>
@endsection

@section('content')
@php
    $isOwnProfile = Auth::guard('web')->check() &&
                   Auth::guard('web')->user()->user_type == 2 &&
                   Auth::guard('web')->user()->username == $username;

    $avgRating   = freelancer_rating_for_profile_details_page($user->id, true);
    $levelLabel  = moduleExists('FreelancerLevel') ? freelancer_level($user->id) : null;

    $shouldShowEarnings = get_static_option('user_earning_toggle') != 'enable'
        || $isOwnProfile
        || optional($user->user_earning)->show_earning == 1;

    $array_skill = array_filter(array_map('trim', explode(',', $skills ?? '')));
@endphp

{{-- ─────────────── PROFILE HERO ─────────────── --}}
<div class="rounded-[12px] border border-[#D7DEE7] bg-white p-5">
    <div class="flex flex-wrap items-start justify-between gap-4">
        {{-- Avatar + Info --}}
        <div class="flex items-start gap-4">
            <div class="relative flex-shrink-0">
                @if($user->image)
                    @if(cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3', 'cloudFlareR2', 'wasabi']))
                        <img src="{{ render_frontend_cloud_image_if_module_exists('profile/'.$user->image, load_from: $user->load_from) }}"
                             alt="{{ $user->first_name }}"
                             class="h-[72px] w-[72px] rounded-full object-cover">
                    @else
                        <img src="{{ asset('assets/uploads/profile/'.$user->image) }}"
                             alt="{{ $user->first_name }}"
                             class="h-[72px] w-[72px] rounded-full object-cover">
                    @endif
                @else
                    <img src="{{ asset('assets/static/img/author/author.jpg') }}"
                         alt="{{ __('Author') }}"
                         class="h-[72px] w-[72px] rounded-full object-cover">
                @endif
                @if(Cache::has('user_is_online_' . $user->id))
                    <span class="absolute bottom-0.5 right-0.5 h-3 w-3 rounded-full border-2 border-white bg-[#1E9B74]"></span>
                @endif
            </div>

            <div>
                <p class="text-[12px] font-medium text-[#6B778C]">
                    {{ optional($user->user_introduction)->title ?? '' }}
                    @if(Cache::has('user_is_online_' . $user->id))
                        <span class="ml-1 inline-block h-2 w-2 rounded-full bg-[#1E9B74]"></span>
                    @endif
                </p>

                <div class="mt-1 flex items-center gap-2">
                    <h1 class="text-[18px] font-semibold text-[#242B36]">{{ $user->first_name }} {{ $user->last_name }}</h1>
                    @if($user->user_verified_status == 1)
                        <span class="inline-flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] text-white">✓</span>
                    @endif
                </div>

                <div class="mt-2 flex flex-wrap items-center gap-3 text-[12px] font-medium text-[#3B4759]">
                    <span class="flex items-center gap-1">
                        <span class="text-[#FA8C00]">★</span>
                        {{ $avgRating }}
                        <span class="text-[#6B778C]">({{ $complete_orders_in_total ?? 0 }} {{ __('Reviews') }})</span>
                    </span>
                    @if($levelLabel)
                        <span class="h-3 w-px bg-[#D7DEE7]"></span>
                        <span>{{ __('Level') }} — {{ $levelLabel }}</span>
                    @endif
                </div>
            </div>
        </div>

        {{-- Work Availability Toggle --}}
        @if($isOwnProfile)
        <div class="flex items-center gap-3 flex-shrink-0">
            <span class="text-[12px] font-medium text-[#242B36]">{{ __('Available for Work') }}</span>
            <label class="availability-toggle">
                <input type="checkbox" id="workAvailabilityToggle"
                       {{ $user->check_work_availability ? 'checked' : '' }}>
                <span class="track"></span>
                <span class="thumb"></span>
            </label>
        </div>
        @endif
    </div>

    {{-- Hourly Rate / Location --}}
    <div class="mt-5 flex flex-wrap items-center gap-4 text-[12px] font-medium">
        @if($user->hourly_rate)
            <span class="text-[#242B36]">{{ float_amount_with_currency_symbol($user->hourly_rate) }}</span>
            <span class="rounded-full bg-[#FFF0DA] px-2 py-1 text-[#FA8C00]">{{ __('Per hour') }}</span>
        @endif
        @if($user->user_country?->country)
            <span class="flex items-center gap-1 text-[#6B778C]">
                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0L6.343 16.657a8 8 0 1111.314 0z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
                {{ $user->user_country->country }}
                @if($user->user_state?->state), {{ $user->user_state->state }}@endif
            </span>
        @endif
    </div>

    <div class="my-4 h-px bg-[#D7DEE7]"></div>

    {{-- About Me --}}
    <div>
        <h2 class="text-[13px] font-semibold text-[#242B36]">{{ __('About Me') }}</h2>
        <p class="mt-2 text-[12px] leading-5 text-[#3B4759]">
            {{ optional($user->user_introduction)->description ?? __('No description provided.') }}
        </p>
    </div>

    {{-- Action Buttons --}}
    @if($isOwnProfile)
    <div class="mt-5 flex flex-wrap items-center justify-between gap-3">
        <div class="flex gap-3">
            <button type="button" onclick="toggleClientView()"
                    id="clientViewToggleBtn"
                    class="h-9 rounded-[6px] border border-primary px-4 text-[12px] font-medium text-primary hover:bg-primary hover:text-white transition-colors">
                <span id="clientViewText">{{ __('View as Client') }}</span>
            </button>
            <a href="{{ route('freelancer.profile') }}"
               class="inline-flex h-9 items-center rounded-[6px] bg-primary px-5 text-[12px] font-medium text-white hover:bg-[#005F46]">
                {{ __('Edit Info') }}
            </a>
        </div>

        @if(moduleExists('PromoteFreelancer'))
            @php
                $current_date = \Carbon\Carbon::now()->toDateTimeString();
                $is_promoted = \Modules\PromoteFreelancer\Entities\PromotionProjectList::where('identity', auth()->user()->id)
                    ->where('type', 'profile')
                    ->where('expire_date', '>', $current_date)
                    ->where('payment_status', 'complete')
                    ->first();
            @endphp
            @if(!empty($is_promoted))
                <button type="button" disabled
                        class="h-9 rounded-[6px] border border-primary px-5 text-[12px] font-medium text-primary cursor-not-allowed opacity-60">
                    {{ __('Profile Promoted') }}
                </button>
            @else
                <a href="{{ route('promotion.checkout') }}?project_id=0"
                   class="inline-flex h-9 items-center rounded-[6px] bg-primary px-5 text-[12px] font-medium text-white hover:bg-[#005F46]">
                    {{ __('Promote Profile') }}
                </a>
            @endif
        @endif
    </div>
    @endif
</div>

{{-- ─────────────── STATS ─────────────── --}}
<div class="mt-5 grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
    <div class="flex items-center gap-[14px] rounded-[12px] border border-[#D7DEE7] bg-white px-4 py-3">
        <span class="flex h-[34px] w-[34px] flex-shrink-0 items-center justify-center rounded-full bg-[#EAF7F1] text-primary">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
            </svg>
        </span>
        <div>
            <p class="text-[11px] font-medium text-[#6B778C]">{{ __('Total Earned') }}</p>
            <h3 class="mt-0.5 text-[15px] font-semibold text-[#242B36]">
                @if($shouldShowEarnings)
                    {{ float_amount_with_currency_symbol($total_earning->total_earning ?? 0) }}
                @else
                    {{ __('Hidden') }}
                @endif
            </h3>
        </div>
    </div>

    <div class="flex items-center gap-[14px] rounded-[12px] border border-[#D7DEE7] bg-white px-4 py-3">
        <span class="flex h-[34px] w-[34px] flex-shrink-0 items-center justify-center rounded-full bg-[#EAF7F1] text-primary">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
        </span>
        <div>
            <p class="text-[11px] font-medium text-[#6B778C]">{{ __('Complete Orders') }}</p>
            <h3 class="mt-0.5 text-[15px] font-semibold text-[#242B36]">{{ $complete_orders_in_total ?? 0 }}</h3>
        </div>
    </div>

    <div class="flex items-center gap-[14px] rounded-[12px] border border-[#D7DEE7] bg-white px-4 py-3">
        <span class="flex h-[34px] w-[34px] flex-shrink-0 items-center justify-center rounded-full bg-[#EAF7F1] text-primary">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
        </span>
        <div>
            <p class="text-[11px] font-medium text-[#6B778C]">{{ __('Active Orders') }}</p>
            <h3 class="mt-0.5 text-[15px] font-semibold text-[#242B36]">{{ $active_orders_count ?? 0 }}</h3>
        </div>
    </div>
</div>

{{-- ─────────────── PROJECT CATALOGS ─────────────── --}}
@if(get_static_option('project_enable_disable') != 'disable')
<div class="mt-8">
    <h2 class="text-[15px] font-semibold text-[#242B36]">{{ __('Project Catalogs') }}</h2>

    {{-- Add row --}}
    @if($isOwnProfile)
    <div class="mt-3 flex h-[42px] items-center justify-between border-b border-[#D7DEE7] text-[12px] text-[#6B778C]">
        <span>{{ __('Add new projects') }}</span>
        <a href="{{ route('freelancer.project.create') }}"
           class="flex h-6 w-6 items-center justify-center rounded-full bg-primary text-[18px] leading-none text-white hover:bg-[#005F46]">+</a>
    </div>
    @endif

    <div class="mt-5 space-y-0 divide-y divide-[#D7DEE7]">
        @forelse($projects as $project)
        @php
            $projectMedia = $project->media ?? [];
            $firstMedia   = $projectMedia[0] ?? null;
            $isImage      = $firstMedia && in_array(strtolower(pathinfo($firstMedia, PATHINFO_EXTENSION)), ['jpg','jpeg','png','webp','gif','svg','bmp','avif']);
            $mediaUrl     = null;
            if ($firstMedia) {
                $mediaUrl = (cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi']))
                    ? render_frontend_cloud_image_if_module_exists('project/'.$firstMedia, load_from: $project->load_from)
                    : asset('assets/uploads/project/'.$firstMedia);
            }
            $price = $project->basic_discount_charge > 0 ? $project->basic_discount_charge : $project->basic_regular_charge;

            $statusLabel = null; $statusClass = null;
            if ($project->project_approve_request == 0) {
                $statusLabel = __('Pending'); $statusClass = 'bg-[#EEF0F3] text-[#3B4759]';
            } elseif ($project->status == 2) {
                $statusLabel = __('Inactive'); $statusClass = 'bg-red-50 text-red-600';
            }

            $isPromoted = false;
            if(moduleExists('PromoteFreelancer')) {
                $current_date_p = \Carbon\Carbon::now()->toDateTimeString();
                $isPromoted = \Modules\PromoteFreelancer\Entities\PromotionProjectList::where('identity', $project->id)
                    ->where('type','project')->where('expire_date','>',$current_date_p)
                    ->where('payment_status','complete')->exists();
            }
        @endphp
        <article class="py-4">
            <div class="flex gap-5">
                {{-- Thumbnail --}}
                <a href="{{ route('project.details', ['username' => $project->project_creator?->username, 'slug' => $project->slug]) }}"
                   class="h-[90px] w-[130px] sm:h-[112px] sm:w-[180px] flex-shrink-0 overflow-hidden rounded-[8px] bg-[#EEF0F3]">
                    @if($mediaUrl && $isImage)
                        <img src="{{ $mediaUrl }}" alt="{{ $project->title }}" class="h-full w-full object-cover">
                    @else
                        <div class="flex h-full w-full items-center justify-center text-[#6B778C]">
                            <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        </div>
                    @endif
                </a>

                {{-- Info --}}
                <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between gap-2">
                        <p class="text-[11px] font-medium text-[#6B778C]">{{ $project->project_category->category ?? __('Uncategorized') }}</p>
                        @if($isPromoted)
                            <span class="rounded-full bg-[#FFF0DA] px-2 py-1 text-[10px] font-medium text-[#FA8C00]">{{ __('Promoted') }}</span>
                        @endif
                    </div>

                    <h3 class="mt-2 line-clamp-2 text-[15px] font-semibold leading-5 text-[#242B36]">
                        <a href="{{ route('project.details', ['username' => $project->project_creator?->username, 'slug' => $project->slug]) }}">
                            {{ $project->title }}
                        </a>
                    </h3>

                    <p class="mt-2 text-[12px] font-medium text-[#3B4759]">
                        <span class="text-[#FA8C00]">★</span>
                        {{ $avgRating }}
                        <span class="text-[#6B778C]">({{ $project->ratings_count ?? 0 }} {{ __('Reviews') }})</span>
                    </p>

                    <div class="my-3 h-px bg-[#D7DEE7]"></div>

                    <p class="text-[12px] font-medium text-[#242B36]">
                        {{ __('Starting at:') }} <span class="font-semibold">{{ float_amount_with_currency_symbol($price) }}</span>
                    </p>
                </div>
            </div>

            {{-- Project Footer --}}
            @if($isOwnProfile)
            <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
                {{-- Status / Toggle --}}
                @if($statusLabel)
                    <span class="rounded-full {{ $statusClass }} px-3 py-1 text-[11px] font-medium">● {{ $statusLabel }}</span>
                @else
                    <div class="flex items-center gap-3">
                        <span class="text-[12px] font-medium text-[#242B36]">{{ __('Available for Work') }}</span>
                        <label class="availability-toggle">
                            <input type="checkbox" class="available_for_order_or_not"
                                   id="available_for_order_or_not"
                                   data-id="{{ $project->id }}"
                                   data-project_on_off="{{ $project->project_on_off }}"
                                   {{ $project->project_on_off ? 'checked' : '' }}>
                            <span class="track"></span>
                            <span class="thumb"></span>
                        </label>
                    </div>
                @endif

                {{-- Action Buttons --}}
                <div class="flex gap-2">
                    @if($project->orders_count == 0 && $project->project_approve_request == 0)
                        <button type="button"
                                class="delete-project-btn h-[26px] rounded-[5px] bg-[#F04467] px-3 text-[10px] font-medium text-white hover:bg-red-600"
                                data-project-id="{{ $project->id }}">
                            {{ __('Delete Project') }}
                        </button>
                    @endif
                    <a href="{{ route('freelancer.project.edit', $project->id) }}"
                       class="inline-flex h-[26px] items-center rounded-[5px] border border-primary px-3 text-[10px] font-medium text-primary hover:bg-primary hover:text-white">
                        {{ __('Edit Project') }}
                    </a>
                    @if(moduleExists('PromoteFreelancer') && !$isPromoted)
                        <a href="{{ route('promotion.checkout') }}?project_id={{ $project->id }}"
                           class="inline-flex h-[26px] items-center rounded-[5px] bg-primary px-3 text-[10px] font-medium text-white hover:bg-[#005F46]">
                            {{ __('Promote Project') }}
                        </a>
                    @endif
                </div>
            </div>
            @endif
        </article>
        @empty
        <p class="py-8 text-center text-[13px] text-[#6B778C]">{{ __('No projects yet.') }}</p>
        @endforelse
    </div>
</div>
@endif

{{-- ─────────────── PORTFOLIO ─────────────── --}}
<div class="mt-8">
    <h2 class="text-[15px] font-semibold text-[#242B36]">{{ __('Portfolio') }}</h2>

    @if($isOwnProfile)
    <div class="mt-3 flex h-[42px] items-center justify-between border-b border-[#D7DEE7] text-[12px] text-[#6B778C]">
        <span>{{ __('Add new portfolio') }}</span>
        <button type="button"
                class="add_portfolio_show_hide add-portfolio-click flex h-6 w-6 items-center justify-center rounded-full bg-primary text-[18px] leading-none text-white hover:bg-[#005F46]">+</button>
    </div>
    @endif

    <div class="mt-4 space-y-4" id="display_portfolio_data">
        @forelse($portfolios as $portfolio)
        @php
            $portfolioImages = is_array($portfolio->image) ? $portfolio->image : (json_decode($portfolio->image, true) ?? [$portfolio->image]);
            $portfolioImages = array_filter((array)$portfolioImages);
            $firstPortfolioImg = $portfolioImages[0] ?? null;
            $portfolioImgUrl = null;
            if ($firstPortfolioImg) {
                $portfolioImgUrl = (cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi']))
                    ? render_frontend_cloud_image_if_module_exists('portfolio/'.$firstPortfolioImg, load_from: $portfolio->load_from)
                    : asset('assets/uploads/portfolio/'.$firstPortfolioImg);
            }
        @endphp
        <article class="flex gap-5 rounded-[12px] border border-[#D7DEE7] bg-white p-4">
            {{-- Image --}}
            <div class="w-[140px] sm:w-[200px] flex-shrink-0">
                <div class="relative overflow-hidden rounded-[8px] bg-[#66758A]">
                    @if($portfolioImgUrl)
                        <img src="{{ $portfolioImgUrl }}" alt="{{ $portfolio->title }}"
                             class="h-[130px] w-full object-cover opacity-80">
                    @else
                        <div class="flex h-[130px] w-full items-center justify-center">
                            <svg class="h-8 w-8 text-white/60" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14"/></svg>
                        </div>
                    @endif
                    @if($isOwnProfile)
                    <div class="absolute right-2 top-2 flex gap-1">
                        <button type="button"
                                class="edit_portfolio_show_hide edit_portfolio_details flex h-6 w-6 items-center justify-center rounded bg-white text-[11px] text-[#242B36] hover:bg-gray-100"
                                data-id="{{ $portfolio->id }}"
                                data-title="{{ $portfolio->title }}"
                                data-description="{{ $portfolio->description }}"
                                data-image="{{ is_array($portfolio->image) ? ($portfolio->image[0] ?? '') : (json_decode($portfolio->image, true)[0] ?? $portfolio->image ?? '') }}">
                            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </button>
                        <button type="button"
                                class="delete_portfolio flex h-6 w-6 items-center justify-center rounded bg-white text-[11px] text-[#F04467] hover:bg-gray-100"
                                data-id="{{ $portfolio->id }}">
                            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </div>
                    @endif
                </div>
                @if(count($portfolioImages) > 1)
                <div class="mt-2 grid grid-cols-3 gap-1">
                    @foreach(array_slice($portfolioImages, 1, 2) as $extraImg)
                    @php
                        $extraUrl = (cloudStorageExist() && in_array(Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi']))
                            ? render_frontend_cloud_image_if_module_exists('portfolio/'.$extraImg, load_from: $portfolio->load_from)
                            : asset('assets/uploads/portfolio/'.$extraImg);
                    @endphp
                    <img src="{{ $extraUrl }}" class="h-[48px] w-full rounded border border-[#D7DEE7] object-cover">
                    @endforeach
                    @if(count($portfolioImages) > 3)
                    <div class="flex h-[48px] items-center justify-center rounded border border-[#D7DEE7] text-center text-[11px] font-semibold text-[#3B4759]">
                        {{ count($portfolioImages) - 3 }}+<br>{{ __('More') }}
                    </div>
                    @endif
                </div>
                @endif
            </div>

            {{-- Info --}}
            <div class="min-w-0 flex-1">
                @if($portfolio->published_date)
                    <p class="text-[12px] text-[#3B4759]">{{ __('From:') }}
                        <span class="text-[#242B36]">{{ \Carbon\Carbon::parse($portfolio->published_date)->format('F Y') }}</span>
                    </p>
                @endif
                <h3 class="mt-3 text-[16px] font-semibold text-[#242B36]">{{ $portfolio->title }}</h3>
                @if($portfolio->description)
                    <p class="mt-2 text-[12px] leading-5 text-[#3B4759] line-clamp-3">{{ $portfolio->description }}</p>
                @endif
            </div>
        </article>
        @empty
        <p class="py-8 text-center text-[13px] text-[#6B778C]">{{ __('No portfolio items yet.') }}</p>
        @endforelse
    </div>
</div>

{{-- ─────────────── WORK EXPERIENCE ─────────────── --}}
<div class="mt-8">
    <h2 class="text-[15px] font-semibold text-[#242B36]">{{ __('Work Experience') }}</h2>

    @if($isOwnProfile)
    <div class="mt-3 flex h-[42px] items-center justify-between border-b border-[#D7DEE7] text-[12px] text-[#6B778C]">
        <span>{{ __('Add new work experience') }}</span>
        <button type="button"
                onclick="$('.add-experience-popup').addClass('popup-active')"
                class="add_experience_show_hide flex h-6 w-6 items-center justify-center rounded-full bg-primary text-[18px] leading-none text-white hover:bg-[#005F46]">+</button>
    </div>
    @endif

    <div class="mt-4 space-y-4" id="display_user_experience_data">
        @forelse($experiences as $experience)
        <article class="rounded-[12px] border border-[#D7DEE7] bg-white p-[18px]">
            <div class="flex items-start justify-between">
                <div>
                    <h4 class="text-[13px] font-semibold text-[#242B36]">{{ $experience->title }}</h4>
                    <p class="mt-1 text-[11px] text-[#3B4759]">{{ $experience->organization }}</p>
                </div>
                @if($isOwnProfile)
                <div class="flex gap-2">
                    <button type="button"
                            class="delete_experience text-[#6B778C] hover:text-[#F04467]"
                            data-id="{{ $experience->id }}">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                    <button type="button"
                            class="edit_single_experience text-[#6B778C] hover:text-primary"
                            data-id="{{ $experience->id }}"
                            data-title="{{ $experience->title }}"
                            data-organization="{{ $experience->organization }}"
                            data-address="{{ $experience->address }}"
                            data-short_description="{{ $experience->short_description }}"
                            data-start_date="{{ $experience->start_date ? \Carbon\Carbon::parse($experience->start_date)->format('Y-m-d') : '' }}"
                            data-end_date="{{ $experience->end_date ? \Carbon\Carbon::parse($experience->end_date)->format('Y-m-d') : '' }}">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </button>
                </div>
                @endif
            </div>

            <div class="mt-6 grid grid-cols-2 gap-3 text-[12px]">
                <div class="space-y-4 text-[#3B4759]">
                    <p>{{ __('Duration') }}</p>
                    @if($experience->address)<p>{{ __('Location') }}</p>@endif
                </div>
                <div class="space-y-4 text-right break-words">
                    <p class="font-medium text-primary">
                        {{ \Carbon\Carbon::parse($experience->start_date)->format('M j, Y') }} —
                        @if($experience->end_date)
                            {{ \Carbon\Carbon::parse($experience->end_date)->format('M j, Y') }}
                        @else
                            <span class="text-[#3B4759]">{{ __('Present') }}</span>
                        @endif
                    </p>
                    @if($experience->address)
                        <p class="text-[#3B4759]">{{ $experience->address }}</p>
                    @endif
                </div>
            </div>
        </article>
        @empty
        <p class="py-4 text-center text-[13px] text-[#6B778C]">{{ __('No work experience added yet.') }}</p>
        @endforelse
    </div>
</div>

{{-- ─────────────── EDUCATION ─────────────── --}}
<div class="mt-8">
    <h2 class="text-[15px] font-semibold text-[#242B36]">{{ __('Educational Background') }}</h2>

    @if($isOwnProfile)
    <div class="mt-3 flex h-[42px] items-center justify-between border-b border-[#D7DEE7] text-[12px] text-[#6B778C]">
        <span>{{ __('Add new Educational Background') }}</span>
        <button type="button"
                onclick="$('.add-education-popup').addClass('popup-active')"
                class="add_education_show_hide flex h-6 w-6 items-center justify-center rounded-full bg-primary text-[18px] leading-none text-white hover:bg-[#005F46]">+</button>
    </div>
    @endif

    <div class="mt-4 space-y-4" id="display_user_education_data">
        @forelse($educations as $education)
        <article class="rounded-[12px] border border-[#D7DEE7] bg-white p-[18px]">
            <div class="flex items-start justify-between">
                <div>
                    <h4 class="text-[13px] font-semibold text-[#242B36]">{{ $education->subject }}</h4>
                    <p class="mt-1 text-[11px] text-[#3B4759]">{{ $education->institution }}</p>
                </div>
                @if($isOwnProfile)
                <div class="flex gap-2">
                    <button type="button"
                            class="delete_education text-[#6B778C] hover:text-[#F04467]"
                            data-id="{{ $education->id }}">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                    <button type="button"
                            class="edit_single_education text-[#6B778C] hover:text-primary"
                            data-id="{{ $education->id }}"
                            data-institution="{{ $education->institution }}"
                            data-subject="{{ $education->subject }}"
                            data-degree="{{ $education->degree }}"
                            data-start_date="{{ $education->start_date ? \Carbon\Carbon::parse($education->start_date)->format('Y-m-d') : '' }}"
                            data-end_date="{{ $education->end_date ? \Carbon\Carbon::parse($education->end_date)->format('Y-m-d') : '' }}">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    </button>
                </div>
                @endif
            </div>

            <div class="mt-6 grid grid-cols-2 gap-3 text-[12px]">
                <div class="space-y-4 text-[#3B4759]">
                    <p>{{ __('Degree') }}</p>
                    <p>{{ __('From - To') }}</p>
                </div>
                <div class="space-y-4 text-right break-words">
                    <p class="text-[#3B4759]">{{ $education->degree }}</p>
                    <p class="font-medium text-primary">
                        {{ \Carbon\Carbon::parse($education->start_date)->format('M j, Y') }} —
                        @if($education->end_date)
                            {{ \Carbon\Carbon::parse($education->end_date)->format('M j, Y') }}
                        @else
                            <span class="text-[#3B4759]">{{ __('Expected') }}</span>
                        @endif
                    </p>
                </div>
            </div>
        </article>
        @empty
        <p class="py-4 text-center text-[13px] text-[#6B778C]">{{ __('No education added yet.') }}</p>
        @endforelse
    </div>
</div>

{{-- ─────────────── SKILLS & EXPERTISE ─────────────── --}}
<div class="mt-8 pb-8">
    <h2 class="text-[15px] font-semibold text-[#242B36]">{{ __('Skill & Expertise') }}</h2>

    {{-- Add form --}}
    @if($isOwnProfile)
    <div class="mt-4 space-y-4 edit_skill_wrapper">
        <div>
            <label class="mb-2 block text-[12px] font-medium text-[#242B36]">{{ __('Skills') }}</label>
            <div class="setup-wrapper-skill">
                <input type="text" id="skill_input"
                       placeholder="{{ __('Type and hit Enter to add a skill') }}"
                       class="h-[42px] w-full border-b border-[#D7DEE7] bg-transparent text-[12px] text-[#3B4759] outline-none placeholder:text-[#6B778C]">
            </div>
        </div>

        @if($skills_according_to_category && count($skills_according_to_category) > 0)
        <div>
            <p class="mb-2 text-[12px] text-[#6B778C]">{{ __('Suggested skills:') }}</p>
            <div class="flex flex-wrap gap-2">
                @foreach($skills_according_to_category as $skill)
                    @if(!in_array($skill->skill, $array_skill))
                        <span class="choose_skill cursor-pointer rounded-full bg-[#F4F6F8] px-3 py-1 text-[10px] font-medium text-[#3B4759] hover:bg-[#EAF7F1] hover:text-primary">
                            {{ $skill->skill }}
                        </span>
                    @endif
                @endforeach
            </div>
        </div>
        @endif

        <div class="flex justify-end gap-3">
            <button type="button" class="cancel_edit_skill h-9 rounded-[6px] border border-[#D0D5DD] px-4 text-[12px] font-medium text-[#637381]">
                {{ __('Cancel') }}
            </button>
            <button type="button" class="update_freelancer_skill h-9 rounded-[6px] bg-primary px-8 text-[12px] font-medium text-white hover:bg-[#005F46]">
                {{ __('Save Skills') }}
            </button>
        </div>
    </div>
    @endif

    {{-- Current Skills List --}}
    @if(count($array_skill) > 0)
    <div class="mt-5 divide-y divide-[#D7DEE7] rounded-[10px] border border-[#D7DEE7] bg-white freelancer_skill_list">
        @foreach($array_skill as $sk)
        <div class="relative flex min-h-[62px] items-center justify-between px-4 py-3">
            <div>
                <h4 class="text-[13px] font-medium text-[#242B36]">{{ trim($sk) }}</h4>
            </div>
            @if($isOwnProfile)
            <button type="button"
                    class="skill-menu-btn text-[#6B778C] hover:text-[#242B36]"
                    data-skill="{{ trim($sk) }}"
                    onclick="this.nextElementSibling.classList.toggle('open')">
                •••
            </button>
            <div class="skill-action-popup">
                <button type="button"
                        class="edit_single_skill_show_hide block w-full px-3 py-2 text-left text-[11px] text-[#242B36] hover:bg-[#F4F6F8]"
                        data-skill="{{ trim($sk) }}">
                    {{ __('Edit') }}
                </button>
                <button type="button"
                        class="delete_freelancer_skill block w-full px-3 py-2 text-left text-[11px] text-[#242B36] hover:bg-[#F4F6F8]"
                        data-skill="{{ trim($sk) }}">
                    {{ __('Delete') }}
                </button>
            </div>
            @endif
        </div>
        @endforeach
    </div>
    @else
    <p class="mt-4 text-[13px] text-[#6B778C]">{{ __('No skills added yet.') }}</p>
    @endif

    @if($isOwnProfile)
    <div class="mt-6 flex justify-end">
        <button type="button" class="display_edit_skill_wrapper edit_skill_show_hide h-9 rounded-[6px] bg-primary px-8 text-[12px] font-medium text-white hover:bg-[#005F46]">
            {{ __('Edit Skills') }}
        </button>
    </div>
    @endif
</div>

{{-- ─────────────── POPUP FORMS (hidden fixed overlays) ─────────────── --}}
@if($isOwnProfile)
    {{-- Education & Experience popup forms only (no list content) --}}
    <div class="popup-fixed add-education-popup">
        <div class="popup-contents">
            <span class="popup-contents-close popup-close"><i class="fas fa-times"></i></span>
            <h2 class="popup-contents-title">{{ __(get_static_option('education_modal_title')) ?? __('Educational Background') }}</h2>
            <p class="popup-contents-para">{{ __('Fill the form below to add your educational background') }}</p>
            <div class="popup-contents-form custom-form">
                <form action="#" name="addEducationForm">
                    <x-form.text :title="__('Institution')" :type="'text'" :name="'institution'" :id="'institution'" :divClass="'mb-0'" :placeholder="__('University of Oxford')" :value="''"/>
                    <x-form.text :title="__('Degree')" :type="'text'" :name="'degree'" :id="'degree'" :divClass="'mb-0'" :placeholder="__('B.Sc. in Computer Science')" :value="''"/>
                    <x-form.text :title="__('Major (Field of study)')" :type="'text'" :name="'subject'" :id="'subject'" :divClass="'mb-0'" :placeholder="__('Computer Science Engineering')" :value="''"/>
                    <div class="single-flex-input">
                        <x-form.text :title="__('Start date')" :type="'date'" :name="'start_date'" :id="'start_date_edu'" :divClass="'mb-0'" :value="''"/>
                        <x-form.text :title="__('End date')" :type="'date'" :name="'end_date'" :id="'end_date_edu'" :divClass="'mb-0'" :value="''"/>
                    </div>
                    <x-form.right-info :infoTitle="__('info:')" :info="__('If you are studying currently please choose an expected date')"/>
                </form>
            </div>
            <div class="popup-contents-btn">
                <a href="javascript:void(0)" class="btn-profile btn-outline-gray popup-close">{{ __('Cancel') }}</a>
                <a href="javascript:void(0)" class="btn-profile btn-bg-1 add_education">{{ __('Save') }}</a>
            </div>
        </div>
    </div>

    <div class="popup-fixed education-popup">
        <div class="popup-contents">
            <span class="popup-contents-close popup-close"><i class="fas fa-times"></i></span>
            <h2 class="popup-contents-title">{{ __(get_static_option('education_edit_modal_title')) ?? __('Edit Educational Background') }}</h2>
            <p class="popup-contents-para">{{ __('Fill the form below to edit your educational background') }}</p>
            <div class="popup-contents-form custom-form">
                <form action="#">
                    <input type="hidden" name="edit_id" id="edit_id">
                    <x-form.text :title="__('Institution')" :type="'text'" :name="'edit_institution'" :id="'edit_institution'" :placeholder="__('University of Oxford')" :value="''"/>
                    <x-form.text :title="__('Degree')" :type="'text'" :name="'edit_degree'" :id="'edit_degree'" :placeholder="__('B.Sc. in Computer Science')" :value="''"/>
                    <x-form.text :title="__('Major (Field of study)')" :type="'text'" :name="'edit_subject'" :id="'edit_subject'" :placeholder="__('Computer Science Engineering')" :value="''"/>
                    <div class="single-flex-input">
                        <x-form.text :title="__('Start date')" :type="'date'" :name="'edit_start_date'" :id="'edit_start_date_edu'" :value="''"/>
                        <x-form.text :title="__('End date')" :type="'date'" :name="'edit_end_date'" :id="'edit_end_date_edu'" :value="''"/>
                    </div>
                    <x-form.right-info :info="__('If you are studying currently please choose an expected date')"/>
                </form>
            </div>
            <div class="popup-contents-btn">
                <a href="javascript:void(0)" class="btn-profile btn-outline-gray popup-close">{{ __('Cancel') }}</a>
                <a href="javascript:void(0)" class="btn-profile btn-bg-1 update_single_education">{{ __('Update') }}</a>
            </div>
        </div>
    </div>

    <div class="popup-fixed add-experience-popup">
        <div class="popup-contents">
            <span class="popup-contents-close popup-close"><i class="fas fa-times"></i></span>
            <h2 class="popup-contents-title">{{ __(get_static_option('experience_modal_title')) ?? __('Add Work Experience') }}</h2>
            <p class="popup-contents-para">{{ __('Fill the form below to add your work experience') }}</p>
            <div class="popup-contents-form custom-form">
                <form action="#" name="addExperienceForm">
                    <x-form.text :title="__('Title')" :type="'text'" :name="'experience_title'" :id="'experience_title'" :divClass="'mb-0'" :placeholder="__('Front-End Developer')" :value="''"/>
                    <x-form.text :title="__('Organization')" :type="'text'" :name="'organization'" :id="'organization'" :divClass="'mb-0'" :placeholder="__('Xgenious')" :value="''"/>
                    <x-form.text :title="__('Address')" :type="'text'" :name="'address'" :id="'address'" :divClass="'mb-0'" :placeholder="__('8502 Preston Rd. Ingle')" :value="''"/>
                    <x-form.textarea :title="__('Short Description')" :name="'short_description'" :id="'short_description'" :divClass="'mb-0'" :cols="'30'" :rows="'3'" :placeholder="__('I am a professional develop...')"/>
                    <div class="single-flex-input mt-0">
                        <x-form.text :title="__('Start date')" :type="'date'" :name="'start_date'" :id="'start_date'" :divClass="'mb-0'" :value="''"/>
                        <x-form.text :title="__('End date')" :type="'date'" :name="'end_date'" :id="'end_date'" :divClass="'mb-0'" :value="''"/>
                    </div>
                    <x-form.right-info :infoTitle="__('info:')" :info="__('If you currently working here please leave this field empty')"/>
                </form>
            </div>
            <div class="popup-contents-btn">
                <a href="javascript:void(0)" class="btn-profile btn-outline-gray popup-close">{{ __('Cancel') }}</a>
                <a href="javascript:void(0)" class="btn-profile btn-bg-1 add_experience">{{ __('Save') }}</a>
            </div>
        </div>
    </div>

    <div class="popup-fixed experience-popup">
        <div class="popup-contents">
            <span class="popup-contents-close popup-close"><i class="fas fa-times"></i></span>
            <h2 class="popup-contents-title">{{ __(get_static_option('experience_edit_modal_title')) ?? __('Edit Work Experience') }}</h2>
            <p class="popup-contents-para">{{ __('Fill the form below to edit your work experience') }}</p>
            <div class="popup-contents-form custom-form">
                <form action="#">
                    <input type="hidden" name="edit_id" id="edit_id">
                    <x-form.text :title="__('Title')" :type="'text'" :name="'edit_experience_title'" :id="'edit_experience_title'" :placeholder="__('Front-End Developer')" :value="''"/>
                    <x-form.text :title="__('Organization')" :type="'text'" :name="'edit_organization'" :id="'edit_organization'" :placeholder="__('Xgenious')" :value="''"/>
                    <x-form.text :title="__('Address')" :type="'text'" :name="'edit_address'" :id="'edit_address'" :placeholder="__('8502 Preston Rd. Ingle')" :value="''"/>
                    <x-form.textarea :title="__('Short Description')" :name="'edit_short_description'" :id="'edit_short_description'" :cols="'30'" :rows="'3'" :placeholder="__('I am a professional develop...')"/>
                    <div class="single-flex-input">
                        <x-form.text :title="__('Start date')" :type="'date'" :name="'edit_start_date'" :id="'edit_start_date'" :value="''"/>
                        <x-form.text :title="__('End date')" :type="'date'" :name="'edit_end_date'" :id="'edit_end_date'" :value="''"/>
                    </div>
                    <x-form.right-info :info="__('If you currently working here please leave this field empty')"/>
                </form>
            </div>
            <div class="popup-contents-btn">
                <a href="javascript:void(0)" class="btn-profile btn-outline-gray popup-close">{{ __('Cancel') }}</a>
                <a href="javascript:void(0)" class="btn-profile btn-bg-1 update_single_experience">{{ __('Update') }}</a>
            </div>
        </div>
    </div>

    {{-- Portfolio popup forms --}}
    @include('frontend.profile-details.add-portfolio')
    @include('frontend.profile-details.edit-portfolio')
@endif

{{-- popup overlay backdrop --}}
<div class="popup-overlay"></div>
@endsection

@section('script')
    <x-sweet-alert.sweet-alert2-js />
    <x-select2.select2-js />
    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
    <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
    @include('frontend.profile-details.profile-details-js')
    <script>
        // Close skill action popups when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.skill-menu-btn') && !e.target.closest('.skill-action-popup')) {
                document.querySelectorAll('.skill-action-popup.open').forEach(function(p) {
                    p.classList.remove('open');
                });
            }
        });

        // Work availability toggle
        document.getElementById('workAvailabilityToggle')?.addEventListener('change', function() {
            var newStatus = this.checked ? 1 : 0;
            $.ajax({
                url: "{{ route('freelancer.work.availability.status') }}",
                method: 'POST',
                data: { _token: '{{ csrf_token() }}', user_id: '{{ $user->id }}', check_work_availability: newStatus },
                success: function(res) {
                    if (res.status === 'success') {
                        toastr_success_js(res.message ?? '{{ __('Status updated') }}');
                    }
                }
            });
        });
    </script>
@endsection