@extends('layouts.brand')

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

@section('styles')
<style>
    .appointment-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    .appointment-table th, .appointment-table td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #edf2f7;
    }
    .appointment-table th {
        background: var(--bg-light);
        color: var(--primary);
        font-weight: 600;
    }
    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }
    .status-pending { background: #FEF3C7; color: #92400E; }
    .status-confirmed { background: #D1FAE5; color: #065F46; }
    .status-completed { background: #DBEAFE; color: #1E40AF; }
    .status-cancelled { background: #FEE2E2; color: #991B1B; }
</style>
@endsection

@section('content')
<div class="container animate-fade-in" style="padding: 40px 0;">
    <div class="welcome-card" style="background: var(--primary); color: white; padding: 40px; border-radius: 20px; margin-bottom: 40px;">
        <h2>Welcome, Dr. {{ $user->name }}</h2>
        <p>Manage your appointments and patient schedule.</p>
    </div>

    <div class="section-header">
        <h3>Recent Appointments</h3>
    </div>

    <div class="card" style="padding: 0; overflow: hidden;">
        <table class="appointment-table">
            <thead>
                <tr>
                    <th>Patient Name</th>
                    <th>Date</th>
                    <th>Time Slot</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($appointments as $appointment)
                    <tr>
                        <td>{{ $appointment->patient->name }}</td>
                        <td>{{ \Carbon\Carbon::parse($appointment->date)->format('d M Y') }}</td>
                        <td>{{ $appointment->time_slot }}</td>
                        <td><span class="badge" style="background: {{ $appointment->type == 'ayurveda' ? 'var(--ayurveda)' : 'var(--allopathy)' }}; color: white; padding: 2px 8px; border-radius: 10px; font-size: 11px;">{{ ucfirst($appointment->type) }}</span></td>
                        <td><span class="status-badge status-{{ $appointment->status }}">{{ ucfirst($appointment->status) }}</span></td>
                        <td>
                            <form action="{{ url('/doctor/appointment/' . $appointment->id . '/status') }}" method="POST" style="display: flex; gap: 5px;">
                                @csrf
                                @method('PATCH')
                                <select name="status" onchange="this.form.submit()" style="padding: 5px; border-radius: 5px; border: 1px solid #ccc; font-size: 12px;">
                                    <option value="pending" {{ $appointment->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="confirmed" {{ $appointment->status == 'confirmed' ? 'selected' : '' }}>Confirm</option>
                                    <option value="completed" {{ $appointment->status == 'completed' ? 'selected' : '' }}>Complete</option>
                                    <option value="cancelled" {{ $appointment->status == 'cancelled' ? 'selected' : '' }}>Cancel</option>
                                </select>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 40px; color: var(--text-muted);">No appointments found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection