@extends('layouts.app')
@section('title', 'Compare Careers — CareerPath')

@push('styles')
<style>
    .compare-hero{padding:60px 5% 50px;text-align:center;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(108,63,232,.15) 0%,transparent 70%);border-bottom:1px solid var(--border)}
    .compare-section{padding:60px 5%}
    .compare-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden;border:1px solid var(--border)}
    .compare-table th{padding:20px;background:var(--dark-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:700}
    .compare-table td{padding:18px 20px;border-top:1px solid var(--border);vertical-align:middle}
    .compare-table tr:hover td{background:rgba(255,255,255,.015)}
    .compare-table td:first-child{color:var(--text-muted);font-size:.85rem;font-weight:600;width:160px;background:rgba(255,255,255,.01)}
    .compare-table td:not(:first-child){text-align:center}
    .career-header{padding:24px;background:rgba(108,63,232,.08);border-bottom:1px solid var(--border);text-align:center}
    .career-header .icon{font-size:2.5rem;margin-bottom:10px;display:block}
    .career-header .name{font-weight:800;font-size:1.05rem}
    .career-header .cat{font-size:.78rem;color:var(--text-muted);margin-top:4px}
    .winner{color:#00D4A1;font-weight:700}
    .selector-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:40px}
</style>
@endpush

@section('content')
<div class="compare-hero">
    <h1 style="font-family:'Outfit',sans-serif;font-size:2rem;font-weight:800;margin-bottom:12px">⚖️ Compare Careers</h1>
    <p style="color:var(--text-muted);max-width:480px;margin:0 auto;line-height:1.7">Compare two career fields side by side — salary, difficulty, duration, and more.</p>
</div>

<section class="compare-section">
    <div class="container">
        <!-- SELECTOR -->
        <div class="selector-form">
            <h3 style="font-weight:700;margin-bottom:18px">Choose Careers to Compare</h3>
            <form action="{{ route('careers.compare') }}" method="GET" style="display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap">
                <div style="flex:1;min-width:200px">
                    <label style="font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:7px">Career 1</label>
                    <select name="career1" class="form-control" required>
                        <option value="">Select career...</option>
                        @foreach($allCareers as $c)
                        <option value="{{ $c->id }}" {{ request('career1')==$c->id?'selected':'' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div style="font-size:1.5rem;color:var(--text-muted);padding-bottom:10px">VS</div>
                <div style="flex:1;min-width:200px">
                    <label style="font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:7px">Career 2</label>
                    <select name="career2" class="form-control" required>
                        <option value="">Select career...</option>
                        @foreach($allCareers as $c)
                        <option value="{{ $c->id }}" {{ request('career2')==$c->id?'selected':'' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" style="flex-shrink:0;margin-bottom:0">
                    <i class="fas fa-code-compare"></i> Compare
                </button>
            </form>
        </div>

        <!-- COMPARISON TABLE -->
        @if(count($careers) === 2)
        @php [$c1, $c2] = $careers->values()->all(); @endphp
        <div style="overflow-x:auto">
            <table class="compare-table">
                <thead>
                    <tr>
                        <th>Criteria</th>
                        <th>
                            <div class="career-header">
                                <span class="icon">{{ $c1->icon ?? '💼' }}</span>
                                <div class="name">{{ $c1->name }}</div>
                                <div class="cat">{{ $c1->category }}</div>
                            </div>
                        </th>
                        <th>
                            <div class="career-header">
                                <span class="icon">{{ $c2->icon ?? '💼' }}</span>
                                <div class="name">{{ $c2->name }}</div>
                                <div class="cat">{{ $c2->category }}</div>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Min Salary</td>
                        <td style="color:var(--accent);font-weight:600">PKR {{ $c1->min_salary_pkr ?? 'N/A' }}/mo</td>
                        <td style="color:var(--accent);font-weight:600">PKR {{ $c2->min_salary_pkr ?? 'N/A' }}/mo</td>
                    </tr>
                    <tr>
                        <td>Max Salary</td>
                        <td style="color:var(--accent);font-weight:700;font-size:1rem">PKR {{ $c1->max_salary_pkr ?? 'N/A' }}/mo</td>
                        <td style="color:var(--accent);font-weight:700;font-size:1rem">PKR {{ $c2->max_salary_pkr ?? 'N/A' }}/mo</td>
                    </tr>
                    <tr>
                        <td>Difficulty</td>
                        <td><span class="badge {{ $c1->difficulty=='easy'?'badge-success':($c1->difficulty=='hard'?'badge-danger':'badge-warning') }}">{{ ucfirst($c1->difficulty ?? 'Moderate') }}</span></td>
                        <td><span class="badge {{ $c2->difficulty=='easy'?'badge-success':($c2->difficulty=='hard'?'badge-danger':'badge-warning') }}">{{ ucfirst($c2->difficulty ?? 'Moderate') }}</span></td>
                    </tr>
                    <tr>
                        <td>Duration</td>
                        <td>{{ $c1->years_to_complete ?? 4 }} years</td>
                        <td>{{ $c2->years_to_complete ?? 4 }} years</td>
                    </tr>
                    <tr>
                        <td>Category</td>
                        <td><span class="badge badge-primary">{{ $c1->category }}</span></td>
                        <td><span class="badge badge-primary">{{ $c2->category }}</span></td>
                    </tr>
                    <tr>
                        <td>Popularity</td>
                        <td style="{{ $c1->popularity_score >= $c2->popularity_score ? 'color:#00D4A1;font-weight:700' : '' }}">
                            {{ $c1->popularity_score ?? 0 }} views {{ $c1->popularity_score >= $c2->popularity_score ? '🏆' : '' }}
                        </td>
                        <td style="{{ $c2->popularity_score > $c1->popularity_score ? 'color:#00D4A1;font-weight:700' : '' }}">
                            {{ $c2->popularity_score ?? 0 }} views {{ $c2->popularity_score > $c1->popularity_score ? '🏆' : '' }}
                        </td>
                    </tr>
                    <tr>
                        <td>Overview</td>
                        <td style="text-align:left;font-size:.83rem;color:var(--text-muted)">{{ Str::limit($c1->description, 130) }}</td>
                        <td style="text-align:left;font-size:.83rem;color:var(--text-muted)">{{ Str::limit($c2->description, 130) }}</td>
                    </tr>
                    <tr>
                        <td>Action</td>
                        <td><a href="{{ route('careers.show',$c1->slug) }}" class="btn btn-outline btn-sm">View Details</a></td>
                        <td><a href="{{ route('careers.show',$c2->slug) }}" class="btn btn-outline btn-sm">View Details</a></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div style="margin-top:40px;text-align:center">
            <p style="color:var(--text-muted);font-size:.875rem;margin-bottom:16px">Still unsure? Let our experts help you decide.</p>
            <a href="{{ route('counselors.index') }}" class="btn btn-primary btn-lg"><i class="fas fa-user-tie"></i> Book a Counselor</a>
        </div>
        @else
        <div style="text-align:center;padding:60px;color:var(--text-muted)">
            <div style="font-size:4rem;margin-bottom:16px">⚖️</div>
            <h3 style="color:var(--text);font-size:1.1rem;font-weight:700;margin-bottom:8px">Select two careers to compare</h3>
            <p>Use the dropdowns above to pick two career fields</p>
        </div>
        @endif
    </div>
</section>
@endsection