@extends('layouts.seeker')
@section('title', 'My Profile — JOBES')

@section('seeker_content')
<div class="row g-4 animate__animated animate__fadeIn">
    <!-- Profile Card (Left inside right column) -->
    <div class="col-lg-4 col-12">
        <div class="card-seeker-panel text-center p-4">
            <div class="position-relative d-inline-block mb-3">
                <img src="{{ $user->avatar_url }}" alt="" class="rounded-circle shadow-sm border border-2" style="width:100px; height:100px; border-color:#0d9488 !important; object-fit:cover;">
            </div>
            <h5 class="text-dark fw-800 mb-1 fs-5">{{ $user->name }}</h5>
            <p class="text-muted small fw-600 mb-2">{{ $user->headline ?? 'Add your headline' }}</p>
            <p class="text-muted mb-3" style="font-size:0.8rem;"><i class="fas fa-map-marker-alt me-1 text-teal-accent"></i>{{ $user->city ?? 'Location' }}, {{ $user->country ?? 'India' }}</p>
            
            <div class="d-flex justify-content-center gap-3 border-top pt-3" style="border-top-color:#e2e8f0 !important;">
                @if($user->linkedin)
                    <a href="{{ $user->linkedin }}" target="_blank" class="text-muted hover-teal fs-5" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
                @endif
                @if($user->github)
                    <a href="{{ $user->github }}" target="_blank" class="text-muted hover-teal fs-5" title="GitHub"><i class="fab fa-github"></i></a>
                @endif
                @if($user->portfolio)
                    <a href="{{ $user->portfolio }}" target="_blank" class="text-muted hover-teal fs-5" title="Portfolio"><i class="fas fa-globe"></i></a>
                @endif
            </div>
        </div>
    </div>
    
    <!-- Profile Edit Form -->
    <div class="col-lg-8 col-12">
        <div class="card-seeker-panel">
            <h5 class="fw-800 text-dark mb-4" style="font-size:1.1rem; border-left:3px solid #0d9488; padding-left:10px;">Edit Profile</h5>
            <form method="POST" action="{{ route('seeker.profile.update') }}">
                @csrf
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-700">Full Name</label>
                        <input type="text" name="name" value="{{ $user->name }}" class="form-control form-ctrl-light" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-700">Email Address</label>
                        <input type="email" name="email" value="{{ $user->email }}" class="form-control form-ctrl-light" required readonly style="background:#f1f5f9; cursor:not-allowed;">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-700">Phone</label>
                        <input type="text" name="phone" value="{{ $user->phone }}" class="form-control form-ctrl-light" placeholder="+91 9876543210">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-700">Headline</label>
                        <input type="text" name="headline" value="{{ $user->headline }}" class="form-control form-ctrl-light" placeholder="e.g. Full Stack Developer">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-700">City</label>
                        <input type="text" name="city" value="{{ $user->city }}" class="form-control form-ctrl-light">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label text-muted small fw-700">State</label>
                        <input type="text" name="state" value="{{ $user->state }}" class="form-control form-ctrl-light">
                    </div>
                    <div class="col-12">
                        <label class="form-label text-muted small fw-700">About Me</label>
                        <textarea name="about" class="form-control form-ctrl-light" rows="4" placeholder="Write a short professional bio...">{{ $user->about }}</textarea>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label text-muted small fw-700">LinkedIn URL</label>
                        <input type="url" name="linkedin" value="{{ $user->linkedin }}" class="form-control form-ctrl-light" placeholder="https://linkedin.com/in/...">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label text-muted small fw-700">GitHub URL</label>
                        <input type="url" name="github" value="{{ $user->github }}" class="form-control form-ctrl-light" placeholder="https://github.com/...">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label text-muted small fw-700">Portfolio URL</label>
                        <input type="url" name="portfolio" value="{{ $user->portfolio }}" class="form-control form-ctrl-light" placeholder="https://...">
                    </div>
                </div>
                <div class="text-start mt-4">
                    <button type="submit" class="btn btn-teal-gradient px-4 py-2.5">
                        <i class="fas fa-save me-2"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection