{% extends 'base_pharmacy.html' %}

{% block title %}Dorixonalar - KlinikaTop{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="container mx-auto px-4 pt-6">
    <a href="index.html" class="inline-flex items-center text-gray-700 hover:text-primary-600 transition-colors">
        <i class="fas fa-arrow-left mr-2"></i>
        <span>Bosh sahifaga qaytish</span>
    </a>
</div>

<!-- Hero Section -->
<section class="relative bg-gradient-to-r from-emerald-600 to-teal-700 text-white py-12 md:py-20">
    <div class="absolute inset-0 bg-[url('data:image/svg;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj48cGF0aCBkPSJNMzAgMTVjLTguMjggMC0xNSA2LjcyLTE1IDE1czYuNzIgMTUgMTUgMTUgMTUtNi43MiAxNS0xNS02LjcyLTE1LTE1LTE1eiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjA1Ii8+PC9zdmc+')] opacity-10"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">💊 Dorixonalar</h1>
            <p class="text-lg md:text-xl text-white/90 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                O'zbekistondagi eng yirik dorixonalar va ularning dori vositalari to'g'risida to'liq ma'lumot
            </p>
            
            <!-- Qidiruv qutisi -->
            <div class="mt-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="200">
                <div class="relative">
                    <input type="text" 
                           class="w-full px-6 py-4 pr-12 rounded-full text-gray-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 shadow-lg" 
                           placeholder="💊 Dori nomi yoki dorixona nomi bo'yicha qidirish...">
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-emerald-600 text-white p-3 rounded-full hover:bg-emerald-700 transition-colors shadow-md">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Kategoriyalar -->
<section class="py-12 bg-gradient-to-b from-white to-gray-50">
    <div class="container mx-auto px-4">
        <h2 class="text-2xl font-bold text-center mb-8 text-gray-800">Dori turlari bo'yicha filtrlash</h2>
        <div class="flex flex-wrap justify-center gap-3" data-aos="fade-up">
            <button class="px-5 py-2.5 bg-emerald-600 text-white rounded-full text-sm font-medium transition-all border border-emerald-600 hover:bg-emerald-700 shadow-md flex items-center">
                <i class="fas fa-th-large mr-2"></i> Barcha dorilar
            </button>
            <button class="px-5 py-2.5 bg-white rounded-full text-sm font-medium text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-all border border-gray-200 hover:border-emerald-200 shadow-sm flex items-center">
                <i class="fas fa-heartbeat mr-2 text-red-500"></i> Yurak-damar
            </button>
            <button class="px-5 py-2.5 bg-white rounded-full text-sm font-medium text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-all border border-gray-200 hover:border-emerald-200 shadow-sm flex items-center">
                <i class="fas fa-brain mr-2 text-blue-500"></i> Asab tizimi
            </button>
            <button class="px-5 py-2.5 bg-white rounded-full text-sm font-medium text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-all border border-gray-200 hover:border-emerald-200 shadow-sm flex items-center">
                <i class="fas fa-lungs mr-2 text-green-500"></i> Nafas olish
            </button>
            <button class="px-5 py-2.5 bg-white rounded-full text-sm font-medium text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-all border border-gray-200 hover:border-emerald-200 shadow-sm flex items-center">
                <i class="fas fa-bone mr-2 text-amber-500"></i> Suyak mushak
            </button>
            <button class="px-5 py-2.5 bg-white rounded-full text-sm font-medium text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-all border border-gray-200 hover:border-emerald-200 shadow-sm flex items-center">
                <i class="fas fa-pills mr-2 text-purple-500"></i> Vitaminlar
            </button>
            <button class="px-5 py-2.5 bg-white rounded-full text-sm font-medium text-gray-700 hover:bg-emerald-50 hover:text-emerald-600 transition-all border border-gray-200 hover:border-emerald-200 shadow-sm flex items-center">
                <i class="fas fa-baby mr-2 text-pink-500"></i> Bolalar uchun
            </button>
        </div>
    </div>
</section>

<!-- Dorixonalar ro'yxati -->
<section class="py-12 bg-white">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div class="mb-4 md:mb-0">
                <h2 class="text-2xl font-bold text-gray-800">🏥 Top dorixonalar</h2>
                <p class="text-gray-600 mt-1">Eng yaqin dorixonalar va ularning xizmatlari</p>
            </div>
            <div class="flex items-center space-x-2 bg-gray-50 p-1.5 rounded-full">
                <button class="p-2 rounded-full hover:bg-white text-gray-600 hover:text-emerald-600 transition-colors">
                    <i class="fas fa-th-large"></i>
                </button>
                <button class="p-2 rounded-full hover:bg-white text-gray-600 hover:text-emerald-600 transition-colors">
                    <i class="fas fa-bars"></i>
                </button>
                <button class="p-2 rounded-full hover:bg-white text-gray-600 hover:text-emerald-600 transition-colors">
                    <i class="fas fa-map-marker-alt"></i>
                </button>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <!-- Dorixona karti 1 -->
            <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 overflow-hidden group">
                <div class="relative h-48 bg-gray-100 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1587854692152-cbe660dbde88" 
                         alt="Osiyo Farm dorixonasi" 
                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                    <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 text-xs font-medium text-gray-800 shadow-sm flex items-center">
                        <i class="fas fa-star text-yellow-400 mr-1"></i> 4.8
                        <span class="text-gray-500 ml-1">(124)</span>
                    </div>
                    <div class="absolute bottom-3 left-3 bg-emerald-600 text-white text-xs font-medium px-3 py-1.5 rounded-full flex items-center">
                        <i class="fas fa-truck mr-1.5"></i> Yetkazib berish
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 mb-1">Osiyo Farm</h3>
                            <div class="flex items-center text-sm text-gray-500 mb-2">
                                <i class="fas fa-map-marker-alt text-emerald-500 mr-2"></i>
                                <span>Yunusobod tumani, Toshkent</span>
                            </div>
                        </div>
                        <div class="bg-green-100 text-green-800 text-xs font-medium px-3 py-1 rounded-full flex items-center whitespace-nowrap">
                            <span class="w-2 h-2 bg-green-500 rounded-full mr-1.5"></span>
                            Ochilgan
                        </div>
                    </div>
                    
                    <div class="flex items-center text-sm text-gray-500 mb-4">
                        <i class="far fa-clock text-emerald-500 mr-2"></i>
                        <span>09:00 - 21:00</span>
                        <span class="mx-2 text-gray-300">•</span>
                        <span>1.2 km uzoqlikda</span>
                    </div>
                    
                    <div class="pt-4 border-t border-gray-100">
                        <div class="flex items-center justify-between">
                            <a href="tel:+998901234567" class="text-emerald-600 hover:text-emerald-700 font-medium text-sm flex items-center">
                                <i class="fas fa-phone-alt mr-2"></i> Qo'ng'iroq qilish
                            </a>
                            <a href="#" class="text-gray-700 hover:text-emerald-600 text-sm font-medium flex items-center">
                                Batafsil 
                                <i class="fas fa-chevron-right ml-1 text-xs mt-0.5"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dorixona karti 2 -->
            <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 border border-gray-100 overflow-hidden group">
                <div class="relative h-48 bg-gray-100 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1584308666744-3d07368e9967" 
                         alt="Medline dorixonasi" 
                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                    <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 text-xs font-medium text-gray-800 shadow-sm flex items-center">
                        <i class="fas fa-star text-yellow-400 mr-1"></i> 4.5
                        <span class="text-gray-500 ml-1">(89)</span>
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="text-lg font-bold text-gray-900 mb-1">Medline Plus</h3>
                            <div class="flex items-center text-sm text-gray-500 mb-2">
                                <i class="fas fa-map-marker-alt text-emerald-500 mr-2"></i>
                                <span>Chilonzor tumani, Toshkent</span>
                            </div>
                        </div>
                        <div class="bg-red-100 text-red-800 text-xs font-medium px-3 py-1 rounded-full flex items-center whitespace-nowrap">
                            <span class="w-2 h-2 bg-red-500 rounded-full mr-1.5"></span>
                            Yopilgan
                        </div>
                    </div>
                    
                    <div class="flex items-center text-sm text-gray-500 mb-4">
                        <i class="far fa-clock text-emerald-500 mr-2"></i>
                        <span>08:00 - 22:00</span>
                        <span class="mx-2 text-gray-300">•</span>
                        <span>2.4 km uzoqlikda</span>
                    </div>
                    
                    <div class="pt-4 border-t border-gray-100">
                        <div class="flex items-center justify-between">
                            <a href="tel:+998901234567" class="text-emerald-600 hover:text-emerald-700 font-medium text-sm flex items-center">
                                <i class="fas fa-phone-alt mr-2"></i> Qo'ng'iroq qilish
                            </a>
                            <a href="#" class="text-gray-700 hover:text-emerald-600 text-sm font-medium flex items-center">
                                Batafsil 
                                <i class="fas fa-chevron-right ml-1 text-xs mt-0.5"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
                </div>
            </div>

            <!-- Dori karti 2 -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100" data-aos="fade-up" data-aos-delay="50">
                <div class="relative h-48 bg-gray-100 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1584308666744-3d07368e9967?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" 
                         alt="Nurofen" 
                         class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                    <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 text-sm font-medium text-gray-800 shadow-sm">
                        <i class="fas fa-bone text-yellow-500 mr-1"></i> Og'riq qoldiruvchi
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 mb-1">Nurofen Express</h3>
                            <p class="text-gray-500 text-sm">400 mg, 20 ta kapsula</p>
                        </div>
                        <div class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full h-6 flex items-center">
                            Mavjud
                        </div>
                    </div>
                    
                    <div class="mt-4 flex items-center justify-between">
                        <div>
                            <span class="text-2xl font-bold text-gray-900">85 000 so'm</span>
                            <span class="text-sm text-gray-500 line-through ml-2">92 000 so'm</span>
                        </div>
                        <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-4 py-2 text-center transition-colors">
                            <i class="fas fa-cart-plus mr-2"></i>Sotib olish
                        </button>
                    </div>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex items-center justify-between text-sm text-gray-500">
                            <span><i class="fas fa-capsules mr-1"></i> 5 ta qadoq</span>
                            <span><i class="fas fa-calendar-alt mr-1"></i> 2025.10.15</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dori karti 3 -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100" data-aos="fade-up" data-aos-delay="100">
                <div class="relative h-48 bg-gray-100 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1584308666744-3d07368e9967?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" 
                         alt="Zodac" 
                         class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                    <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 text-sm font-medium text-gray-800 shadow-sm">
                        <i class="fas fa-allergies text-blue-500 mr-1"></i> Allergiyaga qarshi
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 mb-1">Zodac 10 mg</h3>
                            <p class="text-gray-500 text-sm">10 mg, 30 ta tabletka</p>
                        </div>
                        <div class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full h-6 flex items-center">
                            Mavjud
                        </div>
                    </div>
                    
                    <div class="mt-4 flex items-center justify-between">
                        <div>
                            <span class="text-2xl font-bold text-gray-900">65 000 so'm</span>
                            <span class="text-sm text-gray-500 line-through ml-2">72 000 so'm</span>
                        </div>
                        <button class="text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-4 py-2 text-center transition-colors">
                            <i class="fas fa-cart-plus mr-2"></i>Sotib olish
                        </button>
                    </div>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <div class="flex items-center justify-between text-sm text-gray-500">
                            <span><i class="fas fa-capsules mr-1"></i> 15 ta qadoq</span>
                            <span><i class="fas fa-calendar-alt mr-1"></i> 2025.11.20</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Dori karti 4 -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100" data-aos="fade-up" data-aos-delay="150">
                <div class="relative h-48 bg-gray-100 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1584308666744-3d07368e9967?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" 
                         alt="Omeprazol" 
                         class="w-full h-full object-cover transition-transform duration-500 hover:scale-105">
                    <div class="absolute top-3 right-3 bg-white/90 backdrop-blur-sm rounded-full px-3 py-1 text-sm font-medium text-gray-800 shadow-sm">
                        <i class="fas fa-stomach text-purple-500 mr-1"></i> Oshqozon-ichak
                    </div>
                </div>
                <div class="p-5">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 mb-1">Omeprazol</h3>
                            <p class="text-gray-500 text-sm">20 mg, 30 ta kapsula</p>
                        </div>
                        <div class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded-full h-6 flex items-center">