@extends('layouts.app')
@section('title', 'Find Counselors — 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);text-align:center}
.counselors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.c-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px;transition:all .3s;display:flex;flex-direction:column;gap:16px}
.c-card:hover{transform:translateY(-6px);border-color:rgba(108,63,232,.35);box-shadow:0 20px 50px rgba(108,63,232,.15)}
.c-avatar{width:72px;height:72px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;color:white;border:3px solid rgba(108,63,232,.3);margin:0 auto;flex-shrink:0}
.c-name{font-weight:800;font-size:1rem;text-align:center}
.c-spec{font-size:.8rem;color:var(--text-muted);text-align:center;margin-top:2px}
.stars{color:#FBBF24;font-size:.9rem;text-align:center}
.c-meta{display:flex;flex-direction:column;gap:8px}
.c-row{display:flex;justify-content:space-between;font-size:.83rem;padding:8px 0;border-bottom:1px solid var(--border)}
.c-row:last-child{border-bottom:none}
.c-row .lbl{color:var(--text-muted)}
.c-row .val{font-weight:600}
.expertise-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.etag{font-size:.72rem;padding:3px 10px;background:rgba(108,63,232,.12);border:1px solid rgba(108,63,232,.2);border-radius:50px;color:#A78BFA;font-weight:600}
@media(max-width:1024px){.counselors-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.counselors-grid{grid-template-columns:1fr}}
</style>
@endpush

@section('content')
<div class="page-hero">
    <p style="color:var(--primary);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px">Expert Guidance</p>
    <h1 style="font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;margin-bottom:14px">Find Your Career Counselor</h1>
    <p style="color:var(--text-muted);max-width:500px;margin:0 auto;line-height:1.7">Connect with experienced professionals who will guide you to make the right career decisions.</p>
</div>

<section class="section">
    <div class="container">

        @if(isset($counselors) && $counselors->count())
        <div style="margin-bottom:20px;color:var(--text-muted);font-size:.875rem">
            <strong style="color:var(--text)">{{ $counselors->total() }}</strong> counselors available
        </div>
        <div class="counselors-grid">
            @foreach($counselors as $c)
            <div class="c-card">
                <div class="c-avatar">{{ substr($c->user->name ?? 'C', 0, 1) }}</div>
                <div>
                    <div class="c-name">{{ $c->user->name ?? 'Counselor' }}</div>
                    <div class="c-spec">{{ $c->title ?? $c->specialization }}</div>
                    <div class="stars" style="margin-top:6px">
                        @for($s=0;$s<5;$s++){{ $s < round($c->rating ?? 4) ? '★' : '☆' }}@endfor
                        <span style="color:var(--text-muted);font-size:.78rem">({{ number_format($c->rating ?? 4.5, 1) }})</span>
                    </div>
                </div>

                @if($c->expertise_areas)
                <div class="expertise-tags">
                    @php $areas = is_array($c->expertise_areas) ? $c->expertise_areas : json_decode($c->expertise_areas, true) ?? []; @endphp
                    @foreach(array_slice($areas, 0, 3) as $area)
                    <span class="etag">{{ $area }}</span>
                    @endforeach
                </div>
                @endif

                <div class="c-meta">
                    <div class="c-row">
                        <span class="lbl">Specialization</span>
                        <span class="val" style="text-align:right;max-width:55%">{{ Str::limit($c->specialization, 28) }}</span>
                    </div>
                    <div class="c-row">
                        <span class="lbl">Experience</span>
                        <span class="val">{{ $c->experience_years }} years</span>
                    </div>
                    <div class="c-row">
                        <span class="lbl">Session Fee</span>
                        <span class="val" style="color:var(--accent)">PKR {{ number_format($c->session_fee) }}</span>
                    </div>
                    <div class="c-row">
                        <span class="lbl">Status</span>
                        <span class="badge {{ $c->is_active ? 'badge-success' : 'badge-danger' }}">{{ $c->is_active ? '● Available' : '○ Unavailable' }}</span>
                    </div>
                </div>

                @if($c->bio)
                <p style="font-size:.82rem;color:var(--text-muted);line-height:1.6">{{ Str::limit($c->bio, 100) }}</p>
                @endif

                <div style="display:flex;gap:8px;margin-top:auto">
                    <a href="{{ route('counselors.show', $c->id) }}" class="btn btn-outline btn-sm" style="flex:1">View Profile</a>
                    @if($c->is_active)
                    <a href="{{ route('dashboard.book.create', $c->id) }}" class="btn btn-primary btn-sm" style="flex:1">Book Session</a>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        @if($counselors->hasPages())
        <div style="display:flex;justify-content:center;gap:6px;margin-top:40px;flex-wrap:wrap">
            @if(!$counselors->onFirstPage())
            <a href="{{ $counselors->previousPageUrl() }}" style="padding:8px 14px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);text-decoration:none;font-size:.85rem">‹ Prev</a>
            @endif
            @foreach($counselors->getUrlRange(1, $counselors->lastPage()) as $page => $url)
            <a href="{{ $url }}" style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;text-decoration:none;font-size:.85rem;font-weight:600;{{ $page==$counselors->currentPage() ? 'background:var(--gradient);color:white' : 'background:var(--card);border:1px solid var(--border);color:var(--text-muted)' }}">{{ $page }}</a>
            @endforeach
            @if($counselors->hasMorePages())
            <a href="{{ $counselors->nextPageUrl() }}" style="padding:8px 14px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);text-decoration:none;font-size:.85rem">Next ›</a>
            @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 counselors available</h3>
            <p>Check back soon — we're adding new counselors regularly.</p>
        </div>
        @endif

    </div>
</section>
@endsection