@extends('layouts.dashboard')

@section('title', 'Freelancer Profile')

@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">My 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="mt-4">
                    <p class="text-muted mb-1">Availability</p>
                    @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>
        </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="#bio" role="tab">
                            <i class="fas fa-user"></i> About Me
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#skills" role="tab">
                            <i class="fas fa-tools"></i> Skills
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#portfolio" role="tab">
                            <i class="fas fa-briefcase"></i> Portfolio
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#experience" role="tab">
                            <i class="fas fa-graduation-cap"></i> Education & Exp
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body p-4">
                <div class="tab-content">
                    <!-- BIO TAB -->
                    <div class="tab-pane active" id="bio" role="tabpanel">
                        <form action="{{ route('freelancer.profile.bio') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Professional Title</label>
                                    <input type="text" class="form-control" name="title" value="{{ old('title', $profile->title) }}" placeholder="e.g. Senior Laravel Developer">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Location</label>
                                    <input type="text" class="form-control" name="location" value="{{ old('location', $profile->location) }}" placeholder="e.g. New York, USA">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Hourly Rate ($)</label>
                                    <input type="number" step="0.01" class="form-control" name="hourly_rate" value="{{ old('hourly_rate', $profile->hourly_rate) }}">
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Availability</label>
                                    <select class="form-select" name="availability">
                                        <option value="available" {{ ($profile->availability ?? '') == 'available' ? 'selected' : '' }}>Available for work</option>
                                        <option value="unavailable" {{ ($profile->availability ?? '') == 'unavailable' ? 'selected' : '' }}>Not available</option>
                                    </select>
                                </div>
                                <div class="col-lg-12 mb-3">
                                    <label class="form-label">Bio (About Me)</label>
                                    <textarea class="form-control" name="bio" rows="4" placeholder="Tell us about your background and what you are looking for...">{{ old('bio', $profile->bio) }}</textarea>
                                </div>
                                <div class="col-lg-12 text-end">
                                    <button type="submit" class="btn btn-primary updates-btn">Save About Me</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- SKILLS TAB -->
                    <div class="tab-pane" id="skills" role="tabpanel">
                        <form action="{{ route('freelancer.profile.skills') }}" method="POST">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">Select Your Skills</label>
                                <select class="form-select" name="skills[]" multiple size="8">
                                    @foreach($skills as $skill)
                                        <option value="{{ $skill->id }}" {{ in_array($skill->id, $userSkills) ? 'selected' : '' }}>
                                            {{ $skill->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="form-text mt-2">Hold down Ctrl (Windows) or Command (Mac) to select multiple skills.</div>
                            </div>
                            <div class="text-end mt-4">
                                <button type="submit" class="btn btn-primary updates-btn">Update Skills</button>
                            </div>
                        </form>
                    </div>

                    <!-- PORTFOLIO TAB -->
                    <div class="tab-pane" id="portfolio" role="tabpanel">
                        <div class="mb-4">
                            <h5 class="card-title mb-3">Add New Portfolio Item</h5>
                            <form action="{{ route('freelancer.profile.portfolio') }}" method="POST" enctype="multipart/form-data" class="bg-light p-3 rounded">
                                @csrf
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">Title *</label>
                                        <input type="text" class="form-control" name="title" required>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">Image or Link</label>
                                        <input type="file" class="form-control mb-2" name="image" accept="image/*">
                                        <input type="url" class="form-control" name="url" placeholder="Or external URL">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Description</label>
                                        <textarea class="form-control" name="description" rows="2"></textarea>
                                    </div>
                                    <div class="col-12 text-end">
                                        <button type="submit" class="btn btn-success updates-btn">Add Item</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <h5 class="card-title mb-3">Your Portfolio</h5>
                        <div class="row g-3">
                            @forelse($portfolios as $item)
                                <div class="col-md-6 col-lg-4">
                                    <div class="card border rounded h-100 shadow-none">
                                        @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">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</a>
                                            @endif
                                            
                                            <form action="{{ route('freelancer.profile.portfolio.delete', $item->id) }}" method="POST" class="d-inline float-end">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger px-2" onclick="return confirm('Delete this portfolio item?')" title="Delete"><i class="ri-delete-bin-line"></i></button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12 text-center text-muted py-4">
                                    <p>No portfolio items added yet.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- EDUCATION & EXP TAB -->
                    <div class="tab-pane" id="experience" role="tabpanel">
                        <form action="{{ route('freelancer.profile.experience') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12 mb-4">
                                    <label class="form-label">Education Journey</label>
                                    <textarea class="form-control" name="education" rows="5" placeholder="Summarize your educational background, degrees, certifications...">{{ old('education', $profile->education) }}</textarea>
                                </div>
                                <div class="col-lg-12 mb-4">
                                    <label class="form-label">Work Experience</label>
                                    <textarea class="form-control" name="experience" rows="5" placeholder="List your professional experience, past roles, major projects...">{{ old('experience', $profile->experience) }}</textarea>
                                </div>
                                <div class="col-lg-12 text-end">
                                    <button type="submit" class="btn btn-primary updates-btn">Save Details</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            var btn = this.querySelector('.updates-btn');
            if(btn) {
                var icon = btn.innerHTML;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...';
                btn.disabled = true;
            }
        });
    });
</script>
@endsection