@extends('frontend.layouts.app')
@section('main')
    <section id="master" class="pt-24 font-poppins">
        <section id="doctor-details" class=" lg:pt-10 px-5 sm:px-10 md:px-20 lg:px-14 py-5 bg-[#F9FAFB]">
            <div class="doctor-card bg-white p-5 sm:p-7 rounded-lg">
                <div class="md:grid md:grid-cols-12">
                    <div class="md:col-span-9 lg:col-span-8">
                        <div class="sm:flex justify-between gap-x-10 items-start">
                            <div class="image">
                                <img src="{{asset('frontend/image/doctor-list-1.jpg')}}" alt="" class="w-[150px] sm:w-[200px] rounded-lg">
                            </div>
                            <div class="name py-3 sm:py-0 flex flex-col gap-y-2">
                                <div >
                                    <h2 class="font-bold text-[20px]">Dr.Shafwanur Rahman</h2>
                                </div>
                                <p class="text-[16px] text-gray-600">MBBS</p>
                                <p class="text-[16px]">Dermatologly, General Physician</p>
                                <h2 class="text-[16px] text-gray-500">Working at <span class="text-[16px] font-bold py-1 text-black">TMSS MEDICAL COLLEGE & RAFATULLAH COMMUNITY HOSPITAL, BOGURA</span></h2>
                            </div>
                        </div>
                        <div class="text flex flex-col sm:flex-row sm:py-5 sm:gap-x-5 lg:gap-x-10 gap-y-2">
                            <div data-aos="fade-right"  data-aos-duration="1000">
                                <p class="text-[16px] text-gray-500">Total Experience</p>
                                <h2 class="text-[16px] font-bold">7+ years</h2>
                            </div>
                            <div data-aos="fade-right"  data-aos-duration="1000">
                                <p class="text-[16px] text-gray-500">BMDC Number</p>
                                <h2 class="text-[16px] font-bold">125478</h2>
                            </div>
                            <div data-aos="fade-right"  data-aos-duration="1000">
                                <p class="text-[16px] text-gray-500">Joined EverEast</p>
                                <h2 class="text-[16px] font-bold">26 Jan 2020</h2>
                            </div>
                            <div data-aos="fade-right"  data-aos-duration="1000">
                                <p class="text-[16px] text-gray-500">Total Rating(234)</p>
                                <div class="flex gap-x-2 items-center">
                                    <div>
                                        <ion-icon name="star" class="text-[#FFB83A] text-[24px]"></ion-icon>
                                    </div>
                                    <div>
                                        <p class="text-[16px] font-bold pl-1">4.9</p>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="consultation-fee py-5 md:py-10 md:col-span-3 lg:col-span-4" data-aos="fade-left"  data-aos-duration="1000">
                        <div class="bg-gray-100 md:bg-transparent px-5 md:px-0  md:pt-0 h-full py-5  rounded-lg">
                            <div class="text-center">

                            <div>
                                <h2 class="text-[18px] lg:text-[24px]  font-bold">Consultation Fee</h2>
                                <h2 class="text-[20px] lg:text-[24px]  font-bold text-blue-500"><span class="text-[20px] lg:text-[24px]  font-bold ">&#2547;</span> 288 <span class="text-[15px] text-gray-500">(incl. VAT)</span></h2>
                            </div>
                            <p class="text-[14px] text-gray-400 lg:hidden"><del>Before &#2547; 599</del></p>
                            </div>
                            <div class="hidden lg:block w-[200px] mx-auto py-5">
                                <div class="bg-gradient-to-r from-[#05B4E3]  to-[#6734FF]  text-transparent px-3 py-2 text-white font-bold  rounded-full flex items-center gap-x-2 text-center">
                                    <ion-icon name="videocam" class="text-[20px] text-center"></ion-icon>
                                    <button class="text-[16px] tex-center">See Doctor Now</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info-section flex justify-around sm:justify-start sm:gap-x-10 items-center ">
                    <div class="flex items-center gap-x-1" >
                        <ion-icon name="information-circle" class="text-[24px] text-gray-500"></ion-icon>
                        <h2>Info</h2>
                    </div>
                    <div class="flex items-center gap-x-1">
                        <ion-icon name="bag-add" class="text-[24px] text-gray-500"></ion-icon>
                        <h2>Experience</h2>
                    </div>
                    <div class="flex items-center gap-x-1">
                        <ion-icon name="pricetags" class="text-[24px] text-gray-500"></ion-icon>
                        <h2>Reviews</h2>
                    </div>
                </div>

            </div>
            <div class="description py-10">
                <div class="card bg-white p-5 sm:p-7 rounded-lg">
                    <h2 class="py-2 text-[20px] font-bold">About Dr.Shafwanur Rahman - MBBS</h2>
                    <div>
                        <p class="text-gray-700">প্রত্যেক রোগীর জন্য নূন্যতম সময় ২৫-৩০ মিনিট দেয়া হয়। অনুগ্রহ করে ডাক্তার দেখানোর সময় তাড়াহুড়ো করবেন না।

                            আপনার সব সমস্যা শুনে তারপর চিকিৎসা দেয়া হবে ইনশাআল্লাহ।

                            আপনার সুস্থতাই আমার চিকিৎসার মূল লক্ষ্য

                            যে সকল চিকিৎসা দেয়া হয়ঃ
                            🏁১।  চর্মরোগঃ
                            ✔️ খাবারে এলার্জি
                            ✔️ ঘন ঘন হাঁচি পড়া
                            ✔️ ব্রণ
                            ✔️ব্রণের দাগ
                            ✔️ চোখের চারপাশের কালো দাগ/ ডার্ক সার্কেল
                            ✔️ ত্বকের যেকোনো দাগ দূর করা
                            ✔️ মেছতা
                            ✔️ সোরিয়াসিস
                            ✔️ চুল পড়া বন্ধ
                            ✔️ ফাংগাল ইনফেকশন/ দাদ
                            ✔️ হাত পায়ের চামড়া ফেটে যাওয়া
                            ✔️ এক্সিমা
                            ✔️ মাথায় দাড়িতে খুশকি
                            ✔️ মুখের ভিতরে ঘা

                            🏁 ২। যৌনরোগঃ
                            ✔️ যৌন দূর্বলতা
                            ✔️ দ্রুত বীর্যপাত
                            ✔️ স্ত্রী মিলনে সমস্যা
                             ✔️শারীরিক দূর্বলতা
                            ✔️সেক্সুয়াল যেকোনো সমস্যার সর্বাধুনিক চিকিৎসা করা হয়।
                            ✔️প্রস্রাবের রাস্তায় জ্বালাপোড়া


                            🏁 এছাড়া চুলপড়া বন্ধের জন্য সর্বাধুনিক PRP (Platelet Rich Plasma) থেরাপি দেয়া হয়</p>
                    </div>
                </div>
            </div>

            <div class="fixed lg:hidden bottom-4 left-1/2 transform -translate-x-1/2 z-[200]">
                <div class="bg-gradient-to-r from-[#05B4E3]  to-[#6734FF]  text-transparent  text-white font-bold  rounded-full flex items-center gap-x-2 text-center justify-center w-[200px] h-[50px]">
                    <ion-icon name="videocam" class="text-[20px]"></ion-icon>
                    <button class="text-[14px] sm:text-[16px]">See Doctor Now</button>
                </div>
              </div>
        </section>
    </section>
@endsection