<?php 
include 'db_connect.php'; 
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Specialists | Aastha Padghan Hospital</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>body { font-family: 'Poppins', sans-serif; }</style>
</head>
<body class="bg-gray-50 text-gray-800">

    <?php include 'includes/header.php'; ?>

    <div class="bg-gray-100 py-12 text-center border-b">
        <h1 class="text-4xl font-bold text-gray-800">Meet Our Medical Team</h1>
        <p class="text-gray-500 mt-3 text-lg">Experienced Specialists dedicated to your care</p>
    </div>

    <?php
    // 1. Fetch ALL Doctors
    $sql = "SELECT * FROM doctors ORDER BY id ASC";
    $result = $conn->query($sql);

    if($result->num_rows > 0) {
        while($doctor = $result->fetch_assoc()) {
            
            // 2. Determine Theme & Layout Direction
            $category = "";
            $theme_color = "teal"; 
            $flex_direction = "flex-col md:flex-row"; // Default: Image Left
            $text_align = "text-left";
            $margin_auto = "mr-auto"; // Button position

            // Special Layout for Dr. Anita (Cosmetology)
            if (strpos($doctor['name'], 'Anita') !== false) {
                $category = 'Cosmetology';
                $theme_color = 'pink'; 
                $flex_direction = "flex-col md:flex-row-reverse"; // Flip: Image Right
                $text_align = "md:text-right"; // Align text to right on desktop
                $margin_auto = "ml-auto"; // Move button to right
            } else {
                $category = 'Surgical';
                $theme_color = 'teal';
            }
            ?>

            <div class="border-b-8 border-gray-100 last:border-0">
                
                <div class="bg-<?php echo $theme_color; ?>-800 text-white py-16 relative overflow-hidden">
                    <div class="absolute inset-0 opacity-10 bg-[url('assets/logo.png')] bg-repeat space-x-4"></div>

                    <div class="container mx-auto px-4 flex <?php echo $flex_direction; ?> items-center gap-12 relative z-10">
                        
                        <img src="assets/<?php echo $doctor['image_url']; ?>" class="w-56 h-56 rounded-full border-4 border-white shadow-2xl object-cover transform hover:scale-105 transition duration-500">
                        
                        <div class="text-center <?php echo $text_align; ?> flex-1">
                            <h2 class="text-4xl md:text-5xl font-bold mb-2 leading-tight"><?php echo $doctor['name']; ?></h2>
                            <p class="text-<?php echo $theme_color; ?>-200 text-xl font-medium mb-4"><?php echo $doctor['qualification']; ?></p>
                            
                            <span class="inline-block bg-<?php echo $theme_color; ?>-600 text-white text-sm px-4 py-1 rounded-full border border-<?php echo $theme_color; ?>-400 shadow-sm mb-6">
                                <?php echo $doctor['speciality']; ?>
                            </span>

                            <div class="<?php echo $margin_auto; ?> w-fit">
                                <a href="index.php#appointment" class="bg-yellow-500 text-teal-900 font-bold py-3 px-8 rounded-full hover:bg-yellow-400 transition shadow-lg flex items-center gap-2">
                                    <span>Book Appointment</span>
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="container mx-auto px-4 py-16">
                    <div class="grid md:grid-cols-3 gap-10">
                        
                        <div class="md:col-span-1 space-y-8">
                            <div class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-<?php echo $theme_color; ?>-500">
                                <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center gap-2">
                                    <span class="text-2xl">👨‍⚕️</span> About Doctor
                                </h3>
                                <p class="text-gray-600 leading-relaxed text-justify text-sm">
                                    <?php echo nl2br($doctor['bio']); ?>
                                </p>
                            </div>

                            <div class="bg-<?php echo $theme_color; ?>-50 p-6 rounded-xl shadow-inner border border-<?php echo $theme_color; ?>-100">
                                <h3 class="text-xl font-bold text-<?php echo $theme_color; ?>-800 mb-4 flex items-center gap-2">
                                    <span class="text-2xl">🕒</span> OPD Timings
                                </h3>
                                <div class="space-y-3 bg-white p-4 rounded shadow-sm">
                                    <div class="flex justify-between items-center border-b border-gray-100 pb-2">
                                        <span class="text-gray-500 font-medium">Morning</span>
                                        <span class="font-bold text-gray-800">10:00 AM – 2:00 PM</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span class="text-gray-500 font-medium">Evening</span>
                                        <span class="font-bold text-gray-800">5:00 PM – 8:00 PM</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="md:col-span-2">
                            <h3 class="text-3xl font-bold text-gray-800 mb-8 border-l-4 border-<?php echo $theme_color; ?>-500 pl-4">
                                Treatments & Expertise
                            </h3>
                            
                            <div class="grid md:grid-cols-2 gap-6">
                                <?php
                                // Fetch services specific to THIS doctor's category
                                $serv_sql = "SELECT * FROM services WHERE category = '$category'";
                                $serv_res = $conn->query($serv_sql);

                                if ($serv_res->num_rows > 0) {
                                    while($row = $serv_res->fetch_assoc()) {
                                        echo '<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition transform hover:-translate-y-1 border border-gray-100 group">';
                                        echo '<h4 class="font-bold text-lg text-' . $theme_color . '-700 mb-3 group-hover:text-' . $theme_color . '-900">' . $row['title'] . '</h4>';
                                        
                                        // Convert comma separated items to nice tags
                                        $items = explode(',', $row['items']);
                                        echo '<div class="flex flex-wrap gap-2">';
                                        foreach($items as $item) {
                                            echo '<span class="bg-' . $theme_color . '-50 text-' . $theme_color . '-700 text-xs px-3 py-1 rounded-full font-medium">' . trim($item) . '</span>';
                                        }
                                        echo '</div>';
                                        echo '</div>';
                                    }
                                } else {
                                    echo '<div class="col-span-2 bg-gray-50 p-4 rounded text-gray-500 italic">Specific treatments listed on Services page.</div>';
                                }
                                ?>
                            </div>

                            <div class="mt-10 flex flex-wrap gap-4">
                                <a href="tel:+919922346009" class="flex-1 text-center bg-white text-<?php echo $theme_color; ?>-700 font-bold border-2 border-<?php echo $theme_color; ?>-600 px-6 py-3 rounded-lg hover:bg-<?php echo $theme_color; ?>-50 transition shadow-md">
                                    📞 Call Clinic
                                </a>
                                <a href="https://wa.me/919922346009" class="flex-1 text-center bg-green-100 text-green-800 font-bold border-2 border-green-500 px-6 py-3 rounded-lg hover:bg-green-200 transition shadow-md flex justify-center items-center gap-2">
                                    <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" class="w-5 h-5"> Chat on WhatsApp
                                </a>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <?php
        }
    } else {
        echo "<div class='text-center py-20'>No doctor profiles found.</div>";
    }
    ?>

    <?php include 'includes/footer.php'; ?>

</body>
</html>