@extends('layouts.brand')

@section('title', 'Find a Doctor - Bharat Ayur Setu')

@section('styles')
<style>
    .doctor-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 30px;
        padding-top: 30px;
    }
    .doctor-card {
        padding: 0;
        overflow: hidden;
    }
    .doctor-header {
        background: var(--bg-light);
        padding: 30px;
        text-align: center;
    }
    .doctor-info {
        padding: 24px;
    }
    .doctor-tag {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 10px;
    }
</style>
@endsection

@section('content')
<div class="container animate-fade-in" style="padding: 60px 0;">
    <div class="section-title">
        <h2>{{ $type ? ucfirst($type) : 'All' }} Specialists</h2>
        <div class="underline"></div>
        <p>Expert healthcare professionals dedicated to your wellness.</p>
    </div>

    <div class="doctor-grid">
        @forelse($doctors as $doctor)
            <div class="card doctor-card">
                <div class="doctor-header">
                    <span style="font-size: 60px;">⚕️</span>
                </div>
                <div class="doctor-info">
                    <span class="doctor-tag" style="background: {{ $doctor->consultation_type == 'ayurveda' ? 'var(--ayurveda)' : 'var(--allopathy)' }}; color: white;">
                        {{ ucfirst($doctor->consultation_type) }}
                    </span>
                    <h3>Dr. {{ $doctor->user->name }}</h3>
                    <p style="color: var(--text-muted); font-size: 14px; margin-bottom: 15px;">{{ $doctor->specialization }}</p>
                    <p style="font-size: 14px; margin-bottom: 20px;">{{ Str::limit($doctor->bio, 80) }}</p>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <span style="font-weight: 700; color: var(--primary);">₹{{ $doctor->consultation_fee }}</span>
                        <a href="{{ url('/patient/book/' . $doctor->id) }}" class="btn btn-primary" style="font-size: 14px;">Book Now</a>
                    </div>
                </div>
            </div>
        @empty
            <div style="grid-column: 1/-1; text-align: center; padding: 60px;">
                <p style="color: var(--text-muted);">No doctors found for this category.</p>
            </div>
        @endforelse
    </div>
</div>
@endsection