@extends('layouts.admin')
@section('title', 'Counselors')
@section('page-title', 'Counselors')

@section('content')
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:24px">
    <div>
        <h2 style="font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800">Counselors</h2>
        <p style="color:var(--text-muted);font-size:.85rem;margin-top:4px">{{ $counselors->count() }} counselors registered</p>
    </div>
    <button class="btn btn-primary" onclick="openModal('addModal')">
        <i class="fas fa-plus"></i> Add Counselor
    </button>
</div>

<div class="grid-3" style="margin-bottom:28px">
    @forelse($counselors as $c)
    <div class="card" style="position:relative">
        <div style="position:absolute;top:14px;right:14px;display:flex;gap:6px">
            <button onclick="openModal('editModal{{ $c->id }}')" class="btn btn-ghost btn-sm"><i class="fas fa-edit"></i></button>
            <form action="{{ route('admin.counselors.destroy', $c->id) }}" method="POST" onsubmit="return confirm('Remove counselor?')">
                @csrf @method('DELETE')
                <button type="submit" class="btn btn-sm" style="background:rgba(229,62,62,.15);color:#FC8181"><i class="fas fa-trash"></i></button>
            </form>
        </div>
        <div style="text-align:center;padding-bottom:16px;border-bottom:1px solid var(--border)">
            <div style="width:64px;height:64px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:white;margin:0 auto 12px;border:3px solid rgba(108,63,232,.3)">
                {{ substr($c->user->name??'C',0,1) }}
            </div>
            <div style="font-weight:700;font-size:1rem">{{ $c->user->name ?? '—' }}</div>
            <div style="font-size:.78rem;color:var(--text-muted);margin-top:3px">{{ $c->user->email ?? '' }}</div>
        </div>
        <div style="margin-top:14px;display:flex;flex-direction:column;gap:8px">
            <div style="display:flex;justify-content:space-between;font-size:.83rem">
                <span style="color:var(--text-muted)">Specialization</span>
                <span style="font-weight:500;text-align:right;max-width:55%">{{ Str::limit($c->specialization,30) }}</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:.83rem">
                <span style="color:var(--text-muted)">Experience</span>
                <span style="font-weight:500">{{ $c->experience_years }} yrs</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:.83rem">
                <span style="color:var(--text-muted)">Fee/Session</span>
                <span style="font-weight:600;color:var(--accent)">PKR {{ number_format($c->session_fee) }}</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:.83rem;align-items:center">
                <span style="color:var(--text-muted)">Rating</span>
                <span style="color:#FBBF24">★ {{ number_format($c->rating,1) }}</span>
            </div>
            <div style="display:flex;justify-content:space-between;font-size:.83rem;align-items:center">
                <span style="color:var(--text-muted)">Status</span>
                <span class="badge {{ $c->is_active ? 'badge-success' : 'badge-danger' }}">{{ $c->is_active ? 'Active' : 'Inactive' }}</span>
            </div>
        </div>
    </div>

    <!-- EDIT MODAL -->
    <div class="modal-overlay" id="editModal{{ $c->id }}">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">Edit Counselor</h3>
                <button class="modal-close" onclick="closeModal('editModal{{ $c->id }}')">✕</button>
            </div>
            <form action="{{ route('admin.counselors.update', $c->id) }}" method="POST">
                @csrf @method('PUT')
                <div class="form-group">
                    <label class="form-label">Specialization</label>
                    <input type="text" name="specialization" class="form-control" value="{{ $c->specialization }}" required>
                </div>
                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label">Experience (Years)</label>
                        <input type="number" name="experience_years" class="form-control" value="{{ $c->experience_years }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Session Fee (PKR)</label>
                        <input type="number" name="session_fee" class="form-control" value="{{ $c->session_fee }}">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Bio</label>
                    <textarea name="bio" class="form-control">{{ $c->bio }}</textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Rating</label>
                    <input type="number" name="rating" class="form-control" value="{{ $c->rating }}" min="1" max="5" step="0.1">
                </div>
                <div style="display:flex;gap:10px;margin-top:8px">
                    <button type="button" onclick="closeModal('editModal{{ $c->id }}')" class="btn btn-ghost" style="flex:1">Cancel</button>
                    <button type="submit" class="btn btn-primary" style="flex:2"><i class="fas fa-save"></i> Update</button>
                </div>
            </form>
        </div>
    </div>
    @empty
    <div class="card" style="grid-column:span 3;text-align:center;padding:60px;color:var(--text-muted)">
        <i class="fas fa-user-tie" style="font-size:3rem;margin-bottom:16px;display:block;opacity:.4"></i>
        <div style="font-size:1rem;font-weight:600;margin-bottom:8px">No counselors yet</div>
        <p>Add your first counselor to get started</p>
    </div>
    @endforelse
</div>

<!-- ADD MODAL -->
<div class="modal-overlay" id="addModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add New Counselor</h3>
            <button class="modal-close" onclick="closeModal('addModal')">✕</button>
        </div>
        <form action="{{ route('admin.counselors.store') }}" method="POST">
            @csrf
            <div class="form-group">
                <label class="form-label">Select User</label>
                <select name="user_id" class="form-control" required>
                    <option value="">Choose a user...</option>
                    @foreach($users as $u)
                    <option value="{{ $u->id }}">{{ $u->name }} ({{ $u->email }})</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Specialization</label>
                <input type="text" name="specialization" class="form-control" placeholder="e.g. Engineering & Technology" required>
            </div>
            <div class="grid-2">
                <div class="form-group">
                    <label class="form-label">Experience (Years)</label>
                    <input type="number" name="experience_years" class="form-control" placeholder="5" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Session Fee (PKR)</label>
                    <input type="number" name="session_fee" class="form-control" placeholder="2000" required>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">Expertise Areas (comma-separated)</label>
                <input type="text" name="expertise_areas" class="form-control" placeholder="Software Development, AI, Data Science">
            </div>
            <div class="form-group">
                <label class="form-label">Bio</label>
                <textarea name="bio" class="form-control" rows="3" placeholder="Brief introduction..."></textarea>
            </div>
            <div style="display:flex;gap:10px;margin-top:8px">
                <button type="button" onclick="closeModal('addModal')" class="btn btn-ghost" style="flex:1">Cancel</button>
                <button type="submit" class="btn btn-primary" style="flex:2"><i class="fas fa-plus"></i> Add Counselor</button>
            </div>
        </form>
    </div>
</div>
@endsection