@extends('jobs.layout')
@section('title', 'My profile')
@section('content')
<main class="wrap" style="max-width:820px">
    <span class="eyebrow">Job seeker workspace</span>
    <h1 class="title">My profile</h1>
    <p class="muted">Add details employers can use to understand your experience and preferences.</p>
    @if (session('status'))<div class="note" role="status">{{ session('status') }}</div>@endif
    @if ($errors->any())<div class="note" role="alert" style="background:#fff0ed;color:#a13e30">{{ $errors->first() }}</div>@endif
    <section class="panel">
        <h2 class="section-title">Contact and career details</h2>
        @if ($profile?->cover_image)
            <img src="{{ route('seeker.profile.images.show', 'cover_image') }}" alt="Your profile cover image" style="display:block;width:100%;height:180px;object-fit:cover;border-radius:14px;margin:0 0 16px">
        @endif
        @if ($profile?->profile_photo)
            <img src="{{ route('seeker.profile.images.show', 'profile_photo') }}" alt="Your profile photo" style="display:block;width:112px;height:112px;object-fit:cover;border-radius:50%;margin:0 0 18px;border:3px solid #e3eae6">
        @endif
        <form method="POST" action="{{ route('seeker.profile.update') }}" enctype="multipart/form-data">
            @csrf @method('PUT')
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                <p><label for="headline">Professional headline</label><input class="input" id="headline" name="headline" maxlength="255" value="{{ old('headline', $profile?->headline) }}" placeholder="e.g. Customer service professional"></p>
                <p><label for="account_email">Email address</label><input class="input" id="account_email" type="email" value="{{ auth()->user()->email }}" readonly><span class="muted" style="font-size:13px">This is your account email and sign-in address.</span></p>
                <p><label for="phone">Phone</label><input class="input" id="phone" name="phone" maxlength="50" value="{{ old('phone', $profile?->phone) }}" autocomplete="tel"></p>
                <p><label for="county_id">County</label><select class="input" id="county_id" name="county_id"><option value="">Choose a county</option>@foreach ($counties as $county)<option value="{{ $county->id }}" @selected(old('county_id', $profile?->county_id) == $county->id)>{{ $county->name }}</option>@endforeach</select></p>
                <p><label for="town">Town</label><input class="input" id="town" name="town" maxlength="255" value="{{ old('town', $profile?->town) }}"></p>
                <p><label for="career_level">Career level</label><input class="input" id="career_level" name="career_level" maxlength="100" value="{{ old('career_level', $profile?->career_level) }}" placeholder="e.g. Entry level"></p>
                <p><label for="employment_status">Current employment status</label><input class="input" id="employment_status" name="employment_status" maxlength="100" value="{{ old('employment_status', $profile?->employment_status) }}" placeholder="e.g. Seeking opportunities"></p>
                <p><label for="expected_salary_min">Expected minimum salary (KES)</label><input class="input" id="expected_salary_min" name="expected_salary_min" type="number" min="0" step="0.01" value="{{ old('expected_salary_min', $profile?->expected_salary_min) }}"></p>
                <p><label for="expected_salary_max">Expected maximum salary (KES)</label><input class="input" id="expected_salary_max" name="expected_salary_max" type="number" min="0" step="0.01" value="{{ old('expected_salary_max', $profile?->expected_salary_max) }}"></p>
                <p style="grid-column:1/-1"><label for="professional_summary">Professional summary</label><textarea class="input" id="professional_summary" name="professional_summary" rows="6" style="height:auto;padding:11px">{{ old('professional_summary', $profile?->professional_summary) }}</textarea></p>
<p><label for="profile_photo">Profile image (JPG, PNG, or WebP; max 5 MB)</label><input class="input" id="profile_photo" name="profile_photo" type="file" accept="image/jpeg,image/png,image/webp"></p>
                <p><label for="cover_image">Cover image (JPG, PNG, or WebP; max 5 MB)</label><input class="input" id="cover_image" name="cover_image" type="file" accept="image/jpeg,image/png,image/webp"></p>
            </div>
            <p><label style="display:flex;gap:8px;align-items:center"><input type="checkbox" name="open_to_remote" value="1" @checked(old('open_to_remote', $profile?->open_to_remote ?? false))> Open to remote work</label></p>
            <p><label style="display:flex;gap:8px;align-items:center"><input type="checkbox" name="open_to_relocation" value="1" @checked(old('open_to_relocation', $profile?->open_to_relocation ?? false))> Open to relocation</label></p>
            <button class="button" type="submit">Save profile</button>
        </form>
    </section>

    <section class="panel">
        <h2 class="section-title">Skills</h2>
        @forelse ($skills as $skill)
            <article style="border-top:1px solid #edf1ee;padding:14px 0">
                <strong>{{ $skill->name }}</strong>{{ $skill->category ? ' · '.$skill->category : '' }}
                <form method="POST" action="{{ route('seeker.skills.update', $skill) }}" style="display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:10px">
                    @csrf @method('PATCH')
                    <div><label for="proficiency_{{ $skill->id }}">Proficiency</label><select class="input" id="proficiency_{{ $skill->id }}" name="proficiency"><option value="">Choose</option>@foreach (['beginner' => 'Beginner', 'intermediate' => 'Intermediate', 'advanced' => 'Advanced', 'expert' => 'Expert'] as $value => $label)<option value="{{ $value }}" @selected($skill->pivot->proficiency === $value)>{{ $label }}</option>@endforeach</select></div>
                    <div><label for="years_{{ $skill->id }}">Years of experience</label><input class="input" id="years_{{ $skill->id }}" type="number" min="0" max="80" step="0.5" name="years_experience" value="{{ $skill->pivot->years_experience }}"></div>
                    <button class="button" type="submit">Save</button>
                </form>
                <form method="POST" action="{{ route('seeker.skills.delete', $skill) }}" style="margin-top:8px">@csrf @method('DELETE')<button class="button" type="submit" style="background:#edf4f0;color:#245d4d">Remove skill</button></form>
            </article>
        @empty
            <p class="muted">Add skills to help employers understand what you can do.</p>
        @endforelse
        <form method="POST" action="{{ route('seeker.skills.store') }}" style="border-top:1px solid #edf1ee;padding-top:16px;margin-top:14px">
            @csrf
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                <p><label for="skill_name">Skill *</label><input class="input" id="skill_name" name="name" required maxlength="255" placeholder="e.g. Customer service"></p>
                <p><label for="skill_category">Category</label><input class="input" id="skill_category" name="category" maxlength="100" placeholder="e.g. Communication"></p>
                <p><label for="skill_proficiency">Proficiency</label><select class="input" id="skill_proficiency" name="proficiency"><option value="">Choose</option><option value="beginner">Beginner</option><option value="intermediate">Intermediate</option><option value="advanced">Advanced</option><option value="expert">Expert</option></select></p>
                <p><label for="skill_years">Years of experience</label><input class="input" id="skill_years" name="years_experience" type="number" min="0" max="80" step="0.5"></p>
            </div>
            <button class="button" type="submit">Add skill</button>
        </form>
    </section>

    <section class="panel">
        <h2 class="section-title">Education</h2>
        @forelse ($educations as $education)
            <article style="border-top:1px solid #edf1ee;padding:14px 0">
                <strong>{{ $education->qualification }}{{ $education->field_of_study ? ' · '.$education->field_of_study : '' }}</strong>
                <div class="muted">{{ $education->institution }} · {{ $education->start_date->format('M Y') }} – {{ $education->is_current ? 'Current' : ($education->end_date?->format('M Y') ?? 'Not specified') }}</div>
                <details style="margin:10px 0"><summary style="color:#0c6b53;font-weight:700;cursor:pointer">Edit education</summary>
                    <form method="POST" action="{{ route('seeker.education.update', $education) }}" style="margin-top:12px">
                        @csrf @method('PATCH')
                        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                            <p><label for="institution_{{ $education->id }}">Institution *</label><input class="input" id="institution_{{ $education->id }}" name="institution" required maxlength="255" value="{{ $education->institution }}"></p>
                            <p><label for="qualification_{{ $education->id }}">Qualification *</label><input class="input" id="qualification_{{ $education->id }}" name="qualification" required maxlength="255" value="{{ $education->qualification }}"></p>
                            <p><label for="field_{{ $education->id }}">Field of study</label><input class="input" id="field_{{ $education->id }}" name="field_of_study" maxlength="255" value="{{ $education->field_of_study }}"></p>
                            <p><label for="grade_{{ $education->id }}">Grade</label><input class="input" id="grade_{{ $education->id }}" name="grade" maxlength="100" value="{{ $education->grade }}"></p>
                            <p><label for="education_start_{{ $education->id }}">Start date *</label><input class="input" id="education_start_{{ $education->id }}" name="start_date" type="date" required value="{{ $education->start_date->format('Y-m-d') }}"></p>
                            <p><label for="education_end_{{ $education->id }}">End date</label><input class="input" id="education_end_{{ $education->id }}" name="end_date" type="date" value="{{ $education->end_date?->format('Y-m-d') }}"></p>
                            <p style="grid-column:1/-1"><label for="education_details_{{ $education->id }}">Details</label><textarea class="input" id="education_details_{{ $education->id }}" name="description" rows="3" style="height:auto;padding:11px">{{ $education->description }}</textarea></p>
                        </div>
                        <p><label style="display:flex;gap:8px;align-items:center"><input type="checkbox" name="is_current" value="1" @checked($education->is_current)> I am currently studying here</label></p>
                        <button class="button" type="submit">Save education</button>
                    </form>
                </details>                @if ($education->description)<p class="muted">{{ $education->description }}</p>@endif
                <form method="POST" action="{{ route('seeker.education.delete', $education) }}">@csrf @method('DELETE')<button class="button" type="submit" style="background:#edf4f0;color:#245d4d">Remove</button></form>
            </article>
        @empty
            <p class="muted">Add your education history to your profile.</p>
        @endforelse
        <form method="POST" action="{{ route('seeker.education.store') }}" style="border-top:1px solid #edf1ee;padding-top:16px;margin-top:14px">
            @csrf
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                <p><label for="institution">Institution *</label><input class="input" id="institution" name="institution" required maxlength="255"></p>
                <p><label for="qualification">Qualification *</label><input class="input" id="qualification" name="qualification" required maxlength="255" placeholder="e.g. Diploma"></p>
                <p><label for="field_of_study">Field of study</label><input class="input" id="field_of_study" name="field_of_study" maxlength="255"></p>
                <p><label for="grade">Grade</label><input class="input" id="grade" name="grade" maxlength="100"></p>
                <p><label for="education_start_date">Start date *</label><input class="input" id="education_start_date" name="start_date" type="date" required></p>
                <p><label for="education_end_date">End date</label><input class="input" id="education_end_date" name="end_date" type="date"></p>
                <p style="grid-column:1/-1"><label for="education_description">Details</label><textarea class="input" id="education_description" name="description" rows="3" style="height:auto;padding:11px"></textarea></p>
            </div>
            <p><label style="display:flex;gap:8px;align-items:center"><input type="checkbox" name="is_current" value="1"> I am currently studying here</label></p>
            <button class="button" type="submit">Add education</button>
        </form>
    </section>

    <section class="panel">
        <h2 class="section-title">Work experience</h2>
        @forelse ($experiences as $experience)
            <article style="border-top:1px solid #edf1ee;padding:14px 0">
                <strong>{{ $experience->job_title }}</strong>
                <div class="muted">{{ $experience->company_name }}{{ $experience->location ? ' · '.$experience->location : '' }} · {{ $experience->start_date->format('M Y') }} – {{ $experience->is_current ? 'Current' : ($experience->end_date?->format('M Y') ?? 'Not specified') }}</div>
                <details style="margin:10px 0"><summary style="color:#0c6b53;font-weight:700;cursor:pointer">Edit experience</summary>
                    <form method="POST" action="{{ route('seeker.experience.update', $experience) }}" style="margin-top:12px">
                        @csrf @method('PATCH')
                        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                            <p><label for="company_{{ $experience->id }}">Company *</label><input class="input" id="company_{{ $experience->id }}" name="company_name" required maxlength="255" value="{{ $experience->company_name }}"></p>
                            <p><label for="job_{{ $experience->id }}">Job title *</label><input class="input" id="job_{{ $experience->id }}" name="job_title" required maxlength="255" value="{{ $experience->job_title }}"></p>
                            <p><label for="employment_{{ $experience->id }}">Employment type</label><input class="input" id="employment_{{ $experience->id }}" name="employment_type" maxlength="100" value="{{ $experience->employment_type }}"></p>
                            <p><label for="location_{{ $experience->id }}">Location</label><input class="input" id="location_{{ $experience->id }}" name="location" maxlength="255" value="{{ $experience->location }}"></p>
                            <p><label for="experience_start_{{ $experience->id }}">Start date *</label><input class="input" id="experience_start_{{ $experience->id }}" name="start_date" type="date" required value="{{ $experience->start_date->format('Y-m-d') }}"></p>
                            <p><label for="experience_end_{{ $experience->id }}">End date</label><input class="input" id="experience_end_{{ $experience->id }}" name="end_date" type="date" value="{{ $experience->end_date?->format('Y-m-d') }}"></p>
                            <p style="grid-column:1/-1"><label for="experience_details_{{ $experience->id }}">Responsibilities and achievements</label><textarea class="input" id="experience_details_{{ $experience->id }}" name="description" rows="3" style="height:auto;padding:11px">{{ $experience->description }}</textarea></p>
                        </div>
                        <p><label style="display:flex;gap:8px;align-items:center"><input type="checkbox" name="is_current" value="1" @checked($experience->is_current)> I work here currently</label></p>
                        <button class="button" type="submit">Save experience</button>
                    </form>
                </details>                @if ($experience->description)<p class="muted">{{ $experience->description }}</p>@endif
                <form method="POST" action="{{ route('seeker.experience.delete', $experience) }}">@csrf @method('DELETE')<button class="button" type="submit" style="background:#edf4f0;color:#245d4d">Remove</button></form>
            </article>
        @empty
            <p class="muted">Add your previous or current work experience.</p>
        @endforelse
        <form method="POST" action="{{ route('seeker.experience.store') }}" style="border-top:1px solid #edf1ee;padding-top:16px;margin-top:14px">
            @csrf
            <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px">
                <p><label for="company_name">Company *</label><input class="input" id="company_name" name="company_name" required maxlength="255"></p>
                <p><label for="job_title">Job title *</label><input class="input" id="job_title" name="job_title" required maxlength="255"></p>
                <p><label for="employment_type">Employment type</label><input class="input" id="employment_type" name="employment_type" maxlength="100" placeholder="e.g. Full-time"></p>
                <p><label for="experience_location">Location</label><input class="input" id="experience_location" name="location" maxlength="255"></p>
                <p><label for="experience_start_date">Start date *</label><input class="input" id="experience_start_date" name="start_date" type="date" required></p>
                <p><label for="experience_end_date">End date</label><input class="input" id="experience_end_date" name="end_date" type="date"></p>
                <p style="grid-column:1/-1"><label for="experience_description">Responsibilities and achievements</label><textarea class="input" id="experience_description" name="description" rows="4" style="height:auto;padding:11px"></textarea></p>
            </div>
            <p><label style="display:flex;gap:8px;align-items:center"><input type="checkbox" name="is_current" value="1"> I work here currently</label></p>
            <button class="button" type="submit">Add experience</button>
        </form>
    </section>
    <p><a class="button" href="{{ route('seeker.applications') }}">My applications and CVs</a></p>
</main>
@endsection