@php
    $resume = isset($resume) && is_array($resume) ? $resume : array();
    $checks = isset($checks) && is_array($checks) ? $checks : array();
    $score = (int) issetVal($resume, 'ats_score');
    $resumeText = issetVal($resume, 'resume_text') ?: \App\Helpers\AtsResumeBuilder::plainText($resume);
    $value = function ($key, $default = '') use ($resume) {
        return old($key, issetVal($resume, $key, $default));
    };
@endphp

<style>
    .ats-builder { color: #172033; }
    .ats-builder .ats-hero { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; align-items: center; padding: 26px; border: 1px solid #dbe5ee; border-radius: 8px; background: linear-gradient(135deg, #f7fbff 0%, #eef8f4 100%); margin-bottom: 20px; }
    .ats-builder .ats-hero span { display: inline-flex; align-items: center; gap: 8px; color: #0b8f7a; font-weight: 700; font-size: 13px; text-transform: uppercase; }
    .ats-builder .ats-hero h2 { margin: 8px 0; font-size: 28px; line-height: 1.2; color: #14213d; }
    .ats-builder .ats-hero p { margin: 0; color: #59677a; font-size: 15px; line-height: 1.6; }
    .ats-score { width: 126px; height: 126px; border-radius: 50%; border: 12px solid #0b8f7a; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; box-shadow: 0 12px 24px rgba(20, 33, 61, 0.12); }
    .ats-score strong { font-size: 30px; color: #14213d; }
    .ats-score small { color: #64748b; }
    .ats-card { border: 1px solid #dbe5ee; border-radius: 8px; background: #fff; padding: 20px; margin-bottom: 18px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04); }
    .ats-card h3 { margin: 0 0 16px; font-size: 18px; color: #14213d; }
    .ats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .ats-field label { display: block; font-size: 13px; font-weight: 700; color: #31445c; margin-bottom: 6px; }
    .ats-field input, .ats-field textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 12px; color: #172033; background: #fff; }
    .ats-field textarea { min-height: 120px; resize: vertical; }
    .ats-field-full { grid-column: 1 / -1; }
    .ats-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
    .ats-tips span { border: 1px solid #cfe0ec; border-radius: 999px; padding: 8px 12px; font-size: 13px; background: #f8fbfd; color: #39516b; text-align: center; }
    .ats-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
    .ats-checks li { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; background: #fbfdff; }
    .ats-checks strong { display: block; color: #14213d; margin-bottom: 4px; }
    .ats-checks .pass { color: #0b8f7a; }
    .ats-checks .fail { color: #b45309; }
    .ats-preview { white-space: pre-wrap; background: #0f172a; color: #e5edf5; border-radius: 8px; padding: 18px; min-height: 320px; font-family: Consolas, Monaco, monospace; font-size: 13px; line-height: 1.55; overflow: auto; }
    .ats-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
    .ats-actions .btn { border-radius: 6px; }
    @media (max-width: 767px) {
        .ats-builder .ats-hero { grid-template-columns: 1fr; }
        .ats-score { width: 110px; height: 110px; }
        .ats-grid, .ats-tips, .ats-checks { grid-template-columns: 1fr; }
    }
</style>

<div class="ats-builder">
    @if(session('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">
            {{ $errors->first() }}
        </div>
    @endif

    <div class="ats-hero">
        <div>
            <span><i class="fa-solid fa-file-lines"></i> ATS resume builder</span>
            <h2>Build a clean resume that recruiters and parsing systems can read.</h2>
            <p>Use standard headings, searchable keywords, reverse-chronological experience, and measurable outcomes. The exported version stays intentionally plain so it can move through ATS filters without layout noise.</p>
        </div>
        <div class="ats-score">
            <strong>{{ $score }}%</strong>
            <small>ATS score</small>
        </div>
    </div>

    <div class="ats-tips">
        <span>No tables or text boxes</span>
        <span>No photos or icons in the resume body</span>
        <span>PDF or Word after final review</span>
    </div>

    <form method="post" action="{{ $postUrl }}">
        @csrf
        <input type="hidden" name="ats_resume_id" value="{{ issetVal($resume, 'ats_resume_id') }}">

        <div class="ats-card">
            <h3>Contact And Target</h3>
            <div class="ats-grid">
                <div class="ats-field">
                    <label>Resume title</label>
                    <input type="text" name="title" value="{{ $value('title', 'ATS Resume') }}" maxlength="160">
                </div>
                <div class="ats-field">
                    <label>Target role</label>
                    <input type="text" name="target_role" value="{{ $value('target_role') }}" placeholder="People Operations Specialist" maxlength="160">
                </div>
                <div class="ats-field">
                    <label>Full name</label>
                    <input type="text" name="full_name" value="{{ $value('full_name') }}" maxlength="160">
                </div>
                <div class="ats-field">
                    <label>Email</label>
                    <input type="email" name="email" value="{{ $value('email') }}" maxlength="190">
                </div>
                <div class="ats-field">
                    <label>Phone</label>
                    <input type="text" name="phone" value="{{ $value('phone') }}" maxlength="80">
                </div>
                <div class="ats-field">
                    <label>Location</label>
                    <input type="text" name="location" value="{{ $value('location') }}" placeholder="Nairobi, Kenya" maxlength="160">
                </div>
                <div class="ats-field">
                    <label>LinkedIn URL</label>
                    <input type="text" name="linkedin" value="{{ $value('linkedin') }}" maxlength="255">
                </div>
                <div class="ats-field">
                    <label>Portfolio URL</label>
                    <input type="text" name="portfolio" value="{{ $value('portfolio') }}" maxlength="255">
                </div>
            </div>
        </div>

        <div class="ats-card">
            <h3>Resume Content</h3>
            <div class="ats-grid">
                <div class="ats-field ats-field-full">
                    <label>Professional summary</label>
                    <textarea name="professional_summary" placeholder="2-4 lines with role focus, years of experience, industries, strengths, and measurable value.">{{ $value('professional_summary') }}</textarea>
                </div>
                <div class="ats-field ats-field-full">
                    <label>Core skills</label>
                    <textarea name="skills" placeholder="Recruitment, onboarding, HRIS, employee relations, payroll coordination, remote work operations">{{ $value('skills') }}</textarea>
                </div>
                <div class="ats-field ats-field-full">
                    <label>Professional experience</label>
                    <textarea name="experience" placeholder="Job Title - Company, Location | Month YYYY - Month YYYY&#10;- Start with action verbs and include scope, tools, volume, or measurable outcomes.&#10;- Keep each bullet readable and specific.">{{ $value('experience') }}</textarea>
                </div>
                <div class="ats-field ats-field-full">
                    <label>Education</label>
                    <textarea name="education" placeholder="Degree or Certification - Institution | Year">{{ $value('education') }}</textarea>
                </div>
                <div class="ats-field">
                    <label>Certifications</label>
                    <textarea name="certifications" placeholder="CIPD, SHRM, CHRP, HR analytics">{{ $value('certifications') }}</textarea>
                </div>
                <div class="ats-field">
                    <label>Tools</label>
                    <textarea name="tools" placeholder="ATS, HRIS, payroll, reporting, collaboration tools">{{ $value('tools') }}</textarea>
                </div>
                <div class="ats-field">
                    <label>Projects</label>
                    <textarea name="projects" placeholder="Hiring campaign, onboarding redesign, policy refresh">{{ $value('projects') }}</textarea>
                </div>
                <div class="ats-field">
                    <label>Languages</label>
                    <textarea name="languages" placeholder="English, Swahili">{{ $value('languages') }}</textarea>
                </div>
            </div>
        </div>

        <div class="ats-card">
            <div class="ats-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fa-regular fa-save"></i> Save ATS resume
                </button>
                @if(issetVal($resume, 'ats_resume_id'))
                    <a class="btn btn-outline-secondary" href="{{ $downloadUrl }}">
                        <i class="fa-solid fa-download"></i> Download TXT
                    </a>
                @endif
                <button type="button" class="btn btn-outline-secondary" onclick="window.print()">
                    <i class="fa-solid fa-print"></i> Print preview
                </button>
            </div>
        </div>
    </form>

    <div class="ats-card">
        <h3>Quality Checks</h3>
        <ul class="ats-checks">
            @foreach($checks as $check)
                <li>
                    <strong class="{{ issetVal($check, 'passed') ? 'pass' : 'fail' }}">
                        <i class="fa-solid {{ issetVal($check, 'passed') ? 'fa-circle-check' : 'fa-circle-exclamation' }}"></i>
                        {{ issetVal($check, 'label') }} ({{ issetVal($check, 'points') }} pts)
                    </strong>
                    <span>{{ issetVal($check, 'advice') }}</span>
                </li>
            @endforeach
        </ul>
    </div>

    <div class="ats-card">
        <h3>Plain ATS Preview</h3>
        <pre class="ats-preview">{{ $resumeText }}</pre>
    </div>
</div>