@extends('layouts.app')

@section('title', $user->name . ' - Freelancer Profile | Infra24')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Freelancer Profile</h4>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xxl-3">
        <div class="card">
            <div class="card-body p-4 text-center">
                <div class="profile-user position-relative d-inline-block mx-auto mb-4">
                    @if($user->profile_photo)
                        <img src="{{ Storage::url($user->profile_photo) }}" class="rounded-circle avatar-xl img-thumbnail" alt="user-profile-image">
                    @else
                        <img src="{{ asset('assets/velzon/images/users/user-dummy-img.jpg') }}" class="rounded-circle avatar-xl img-thumbnail" alt="user-profile-image">
                    @endif
                </div>
                <h5 class="fs-16 mb-1">{{ $user->name }}</h5>
                <p class="text-muted mb-0">{{ $profile->title ?? 'Freelancer' }}</p>
                <div class="text-muted mt-2"><i class="ri-map-pin-line align-middle text-primary"></i> {{ $profile->location ?? 'Anywhere' }}</div>

                <div class="mt-4">
                    @if(($profile->availability ?? 'available') == 'available')
                        <span class="badge bg-success">Available for work</span>
                    @else
                        <span class="badge bg-danger">Not available</span>
                    @endif
                </div>

                <div class="mt-4 pt-2 border-top">
                    <h6 class="mb-3">Hourly Rate</h6>
                    <h5 class="text-primary">${{ $profile->hourly_rate ?? '0.00' }} / hr</h5>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body bg-light">
                <h5 class="card-title mb-3">Skills</h5>
                <div class="d-flex flex-wrap gap-2">
                    @forelse($user->skills as $skill)
                        <span class="badge badge-soft-primary">{{ $skill->name }}</span>
                    @empty
                        <span class="text-muted">No skills listed.</span>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-9">
        <div class="card">
            <div class="card-header border-0">
                <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#about" role="tab">
                            About Me
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#portfolio" role="tab">
                            Portfolio
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#experience" role="tab">
                            Background
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body p-4">
                <div class="tab-content">
                    <div class="tab-pane active" id="about" role="tabpanel">
                        <h5 class="card-title mb-3">Bio</h5>
                        <p class="text-muted">{{ $profile->bio ?? 'This freelancer has not written a bio yet.' }}</p>
                    </div>

                    <div class="tab-pane" id="portfolio" role="tabpanel">
                        <h5 class="card-title mb-3">Portfolio</h5>
                        <div class="row g-3">
                            @forelse($user->portfolioItems as $item)
                                <div class="col-md-6 col-lg-4">
                                    <div class="card border rounded shadow-none h-100">
                                        @if($item->url && !str_starts_with($item->url, 'http'))
                                            <img src="{{ Storage::url($item->url) }}" class="card-img-top object-fit-cover" height="150" alt="...">
                                        @elseif($item->url && str_starts_with($item->url, 'http'))
                                            <div class="bg-light p-4 text-center">
                                                <i class="ri-link-m fs-24 text-primary"></i> <br> External Link
                                            </div>
                                        @else
                                            <div class="bg-light p-4 text-center text-muted border-bottom">No Image</div>
                                        @endif
                                        <div class="card-body">
                                            <h6 class="card-title mb-2">{{ $item->title }}</h6>
                                            <p class="card-text text-muted small text-truncate">{{ $item->description }}</p>
                                            @if($item->url && str_starts_with($item->url, 'http'))
                                                <a href="{{ $item->url }}" target="_blank" class="btn btn-sm btn-soft-primary">View Project</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12 text-muted">No portfolio items available.</div>
                            @endforelse
                        </div>
                    </div>

                    <div class="tab-pane" id="experience" role="tabpanel">
                        <div class="mb-4">
                            <h5 class="card-title mb-3">Work Experience</h5>
                            <p class="text-muted">{{ $profile->experience ?? 'No experience details provided.' }}</p>
                        </div>
                        <div>
                            <h5 class="card-title mb-3">Education</h5>
                            <p class="text-muted">{{ $profile->education ?? 'No education details provided.' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection