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

@push('styles')
<style>
.page-hero{padding:60px 5% 50px;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(108,63,232,.15) 0%,transparent 70%);border-bottom:1px solid var(--border)}
.filter-bar{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.career-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.career-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:all .3s}
.career-card:hover{transform:translateY(-6px);border-color:rgba(108,63,232,.4);box-shadow:0 20px 50px rgba(108,63,232,.15)}
.tag{font-size:.75rem;padding:4px 10px;border-radius:6px;font-weight:600;display:inline-block}

/* PAGINATION FIX */
.pagination-wrap{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:40px;flex-wrap:wrap}
.pagination-wrap .page-item .page-link{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--card);border:1px solid var(--border);color:var(--text-muted);text-decoration:none;font-size:.85rem;font-weight:600;transition:all .2s}
.pagination-wrap .page-item.active .page-link{background:var(--gradient);border-color:transparent;color:white}
.pagination-wrap .page-item .page-link:hover{background:rgba(108,63,232,.15);border-color:var(--primary);color:var(--text)}
.pagination-wrap .page-item.disabled .page-link{opacity:.4;cursor:not-allowed}

@media(max-width:1024px){.career-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.career-grid{grid-template-columns:1fr}.filter-bar{flex-direction:column}.filter-bar select,.filter-bar input{width:100%}}
</style>
@endpush

@section('content')
<div class="page-hero">
    <div class="container" style="text-align:center;max-width:600px;margin:0 auto">
        <p style="color:var(--primary);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">Explore</p>
        <h1 style="font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;margin-bottom:14px">Browse Career Fields</h1>
        <p style="color:var(--text-muted);line-height:1.7">Explore {{ $careers->total() }}+ career paths. Filter by interest, difficulty, or salary range.</p>
    </div>
</div>

<section class="section">
    <div class="container">
        {{-- FILTERS --}}
        <form action="{{ route('careers.index') }}" method="GET">
            <div class="filter-bar">
                <div style="position:relative;flex:1;min-width:220px">
                    <i class="fas fa-search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted)"></i>
                    <input type="text" name="search" class="form-control" style="padding-left:36px" placeholder="Search careers, skills..." value="{{ request('search') }}">
                </div>
                <select name="category" class="form-control" style="width:180px">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                    <option value="{{ $cat }}" {{ request('category')==$cat?'selected':'' }}>{{ $cat }}</option>
                    @endforeach
                </select>
                <select name="difficulty" class="form-control" style="width:150px">
                    <option value="">All Levels</option>
                    <option value="easy" {{ request('difficulty')=='easy'?'selected':'' }}>Easy</option>
                    <option value="moderate" {{ request('difficulty')=='moderate'?'selected':'' }}>Moderate</option>
                    <option value="hard" {{ request('difficulty')=='hard'?'selected':'' }}>Hard</option>
                </select>
                <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filter</button>
                @if(request()->hasAny(['search','category','difficulty']))
                <a href="{{ route('careers.index') }}" class="btn btn-ghost"><i class="fas fa-xmark"></i> Clear</a>
                @endif
            </div>
        </form>

        <div style="margin-bottom:20px;color:var(--text-muted);font-size:.875rem">
            Showing <strong style="color:var(--text)">{{ $careers->count() }}</strong> of <strong style="color:var(--text)">{{ $careers->total() }}</strong> careers
        </div>

        @if($careers->count())
        <div class="career-grid">
            @foreach($careers as $career)
            <a href="{{ route('careers.show', $career->slug) }}" class="career-card">
                <div style="font-size:2.2rem">{{ $career->icon ?? '💼' }}</div>
                <div>
                    <div style="font-weight:700;font-size:1rem;color:var(--text)">{{ $career->name }}</div>
                    <div style="font-size:.78rem;color:var(--text-muted);margin-top:2px">{{ $career->category }}</div>
                </div>
                <p style="font-size:.82rem;color:var(--text-muted);line-height:1.6;flex:1">{{ Str::limit($career->description, 100) }}</p>
                <div style="display:flex;gap:8px;flex-wrap:wrap">
                    <span class="tag" style="background:rgba(0,212,161,.1);color:#00D4A1">💰 {{ $career->min_salary_pkr ?? '50k' }}–{{ $career->max_salary_pkr ?? '150k' }}/mo</span>
                    <span class="tag" style="background:{{ $career->difficulty=='easy'?'rgba(0,212,161,.1)':($career->difficulty=='hard'?'rgba(229,62,62,.1)':'rgba(255,107,53,.1)') }};color:{{ $career->difficulty=='easy'?'#00D4A1':($career->difficulty=='hard'?'#FC8181':'#FF6B35') }}">{{ ucfirst($career->difficulty ?? 'Moderate') }}</span>
                    <span class="tag" style="background:rgba(108,63,232,.1);color:#A78BFA">📅 {{ $career->years_to_complete ?? 4 }} yrs</span>
                </div>
            </a>
            @endforeach
        </div>

        {{-- CLEAN PAGINATION --}}
        @if($careers->hasPages())
        <div class="pagination-wrap">
            {{-- Previous --}}
            @if($careers->onFirstPage())
                <span class="page-item disabled"><span class="page-link">‹</span></span>
            @else
                <a class="page-item" href="{{ $careers->previousPageUrl() }}"><span class="page-link">‹</span></a>
            @endif

            {{-- Pages --}}
            @foreach($careers->getUrlRange(1, $careers->lastPage()) as $page => $url)
                @if($page == $careers->currentPage())
                    <span class="page-item active"><span class="page-link">{{ $page }}</span></span>
                @else
                    <a class="page-item" href="{{ $url }}"><span class="page-link">{{ $page }}</span></a>
                @endif
            @endforeach

            {{-- Next --}}
            @if($careers->hasMorePages())
                <a class="page-item" href="{{ $careers->nextPageUrl() }}"><span class="page-link">›</span></a>
            @else
                <span class="page-item disabled"><span class="page-link">›</span></span>
            @endif
        </div>
        @endif

        @else
        <div style="text-align:center;padding:80px 20px;color:var(--text-muted)">
            <div style="font-size:4rem;margin-bottom:16px">🔍</div>
            <h3 style="font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:10px">No careers found</h3>
            <p>Try different search terms or clear the filters</p>
            <a href="{{ route('careers.index') }}" class="btn btn-primary" style="margin-top:20px">Clear Filters</a>
        </div>
        @endif
    </div>
</section>
@endsection