@extends('frontend.layout.main')
@section('main-section')
    {{-- Preloader --}}
    <x-frontend.preloader></x-frontend.preloader>

    <!-- Theme Switcher Start -->
    <div class="switch-theme-mode">
        <label id="switch" class="switch">
            <input type="checkbox" onchange="toggleTheme()" id="slider">
            <span class="slider round"></span>
        </label>
    </div>
    <!-- Theme Switcher End -->

    <!-- Custom Cursor -->
    <div class="cursor style-one"></div>
    <div class="cursor-inner style-one"></div>

    <!-- Navbaar Top Start -->
    <x-frontend.navbar></x-frontend.navbar>
    <!-- Navbar Area End-->

    <!-- Breadcrumb Section Start -->
    <x-frontend.bread-crumb>
        <x-slot name="image">images/br-bg-4.jpg</x-slot>
        <x-slot name="title">Events</x-slot>
        <li class="position-relative fs-xx-14 d-inline-block"><a href="javascript:void(0)">Events</a></li>
        <li class="position-relative fs-xx-14 d-inline-block">Event Details</li>
    </x-frontend.bread-crumb>
    <!-- Breadcrumb Section End -->

    <!-- Hospital Details Section Start -->
    <div class="container style-one ptb-120">
        <div class="row">
            <div class="col-xl-12 pe-xxl-4">
                <div class="hospital-desc">
                    <div class="hospital-info-card d-md-flex flex-wrap align-items-center round-20 mb-30">
                        <div class="hospital-img position-relative round-10">
                            <img src="{{ asset('storage/products/' . $event->image) }}" alt="Image" class="round-10">
                            <div class="share-action d-flex flex-wrap position-absolute">
                                <div class="share-btn position-relative">
                                    <span
                                        class="d-flex flex-column align-items-center justify-content-center round-5 bg-white text-title fs-22"><i
                                            class="ri-share-line"></i></span>
                                    <ul class="social-profile list-unstyled mb-0 transition">
                                        <li><a href="https://www.facebook.com/" target="_blank"
                                                class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                    class="ri-facebook-fill"></i></a></li>
                                        <li><a href="https://x.com/?lang=en" target="_blank"
                                                class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                    class="ri-twitter-x-line"></i></a></li>
                                        <li><a href="https://www.instagram.com/" target="_blank"
                                                class="d-flex flex-column align-items-center justify-content-center round-5 transition"><i
                                                    class="ri-instagram-fill"></i></a></li>
                                    </ul>
                                </div>
                                <button
                                    class="add-to-wishlist border-0 d-flex flex-column align-items-center justify-content-center round-5 bg-white text-title fs-22 transition"><i
                                        class="ri-heart-3-line"></i></button>
                            </div>
                        </div>
                        <div class="hospital-info">
                            <div class="ratings d-flex align-items-center">
                                <ul class="rating style-two list-unstyled mb-0">
                                    <li><i class="ri-star-fill"></i></li>
                                    <li><i class="ri-star-fill"></i></li>
                                    <li><i class="ri-star-fill"></i></li>
                                    <li><i class="ri-star-fill"></i></li>
                                    <li><i class="ri-star-fill"></i></li>
                                </ul>
                                <span class="d-inline-block position-relative ms-2 lh-1">1K+ Rating</span>
                            </div>
                            <h3 class="fs-24 fw-extrabold text-title">Trust Care Medical Group</h3>
                            <p class="text-title fs-xxl-18 fw-medium mb-18">Obstetrics & Genecology</p>
                            <ul class="contact-info list-unstyled mb-0">
                                <li class="position-relative"><i class="ri-phone-line"></i><a
                                        href="tel:{{ $infoSection->phone }}"
                                        class="text-para hover-text-primary">{{ $infoSection->phone }}</a></li>
                                <li class="position-relative"><i class="ri-mail-line"></i><a
                                        href="mail:{{ $infoSection->email }}" target="_blank"
                                        class="text-para hover-text-primary"><span>{{ $infoSection->email }}</span></a>
                                </li>
                                <li class="position-relative"><i class="ri-map-pin-line"></i>{{ $infoSection->address }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-para">
                        <h1>{{ $event->title }}</h1>
                        <p>{!! $event->short_description !!}</p>
                    </div>
                    
                    <div class="single-para">
                       <p>{!! $event->long_description !!}</p>
                    </div>
                    
                </div>
            </div>
            
        </div>
    </div>
    
    <!-- Footer Start -->
    <x-frontend.footer></x-frontend.footer>
    <!-- Footer End -->

    <!-- Back to Top -->
    <div id="progress-wrap" class="progress-wrap style-one">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path id="progress-path" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
@endsection