@php
    $user = Auth::user();
    $layout = match($user?->role) {
        'head_nurse' => 'layouts.head-nurse',
        'clinic_admin' => 'layouts.clinic-admin',
        'nurse' => 'layouts.nurse',
        default => 'layouts.app',
    };
@endphp

@extends($layout)

@section('title', $title ?? 'Coming Soon')

@section('content')
<div class="min-h-[70vh] flex items-center justify-center">
    <div class="max-w-md w-full">
        <div class="bg-white rounded-lg shadow-xl p-8 text-center">
            <!-- Icon -->
            <div class="mb-6">
                <div class="mx-auto w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-tools text-4xl text-blue-600"></i>
                </div>
            </div>

            <!-- Title -->
            <h1 class="text-3xl font-bold text-gray-900 mb-4">
                {{ $title ?? 'Feature Coming Soon' }}
            </h1>

            <!-- Message -->
            <p class="text-gray-600 mb-8">
                {{ $message ?? 'This feature is currently under development and will be available soon.' }}
            </p>

            <!-- Progress Indicator -->
            <div class="mb-8">
                <div class="flex items-center justify-center space-x-2 text-sm text-gray-500">
                    <i class="fas fa-clock"></i>
                    <span>Under Development</span>
                </div>
            </div>

            <!-- Back Button -->
            <a href="{{ route($backRoute ?? 'dashboard') }}"
               class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors">
                <i class="fas fa-arrow-left mr-2"></i>
                Back to Dashboard
            </a>

            <!-- Additional Info -->
            <div class="mt-8 pt-6 border-t border-gray-200">
                <p class="text-sm text-gray-500">
                    Need this feature urgently? Contact the system administrator.
                </p>
            </div>
        </div>

        <!-- Feature List (only for clinic admin) -->
        @if($user?->role === 'clinic_admin')
        <div class="mt-8 bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">
                <i class="fas fa-list-check text-blue-600 mr-2"></i>
                Planned Features
            </h3>
            <ul class="space-y-3">
                <li class="flex items-start">
                    <i class="fas fa-user-nurse text-green-500 mt-1 mr-3"></i>
                    <div>
                        <p class="font-medium text-gray-900">Nurse Management</p>
                        <p class="text-sm text-gray-600">Create and manage nurses for your clinic</p>
                    </div>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-map-marked-alt text-green-500 mt-1 mr-3"></i>
                    <div>
                        <p class="font-medium text-gray-900">Zone Management</p>
                        <p class="text-sm text-gray-600">Configure geographical zones for your clinic</p>
                    </div>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-calendar-check text-green-500 mt-1 mr-3"></i>
                    <div>
                        <p class="font-medium text-gray-900">Appointments</p>
                        <p class="text-sm text-gray-600">View and manage clinic appointments</p>
                    </div>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-exchange-alt text-green-500 mt-1 mr-3"></i>
                    <div>
                        <p class="font-medium text-gray-900">Clinic Change Requests</p>
                        <p class="text-sm text-gray-600">Review and approve transfer requests</p>
                    </div>
                </li>
            </ul>
        </div>
        @endif
    </div>
</div>
@endsection