@extends('website::modern.layout.master')

@section('title', ($data['values']['doctor_name'] ?? 'Doctor') . ' - Home')

@section('content')
    <!-- start header -->
    <header class="header">
        <div class="container-fluid px-5">
            <div class="row">
                <div class="col-12 col-lg-5 text ">
                    <div>
                        <div class="head">
                            HI I AM
                        </div>
                        <h2 class="primary-text">
                            {{ $data['values']['home_title'] != '' ? $data['values']['home_title'] : 'Meet Dr. ' . ($data['values']['doctor_name'] ?? 'Tushar Raja') . ' — Your Trusted Healthcare Partner' }}
                        </h2>
                        <p class="desc">
                            {{ $data['values']['home_slogan'] != '' ? $data['values']['home_slogan'] : 'A highly experienced and compassionate healthcare professional dedicated to providing personalized care tailored to your needs.' }}
                        </p>
                        <div>
                            <button class="btn primary-btn">BOOK APPOINTMENT <img src="icons/swirly-scribbled-arrow.png" alt=""></button>
                            <button class="btn scondry-btn">VIEW SCHEDULE <img src="icons/swirly-scribbled-arrow.png" alt=""></button>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-7 ">
                    <div class=" banner-shape-box">
                        <img src="{{ asset('websites/modern') }}/image/banner-img.png" class="banner" alt="">
                        <div class="banner-shape"></div>
                        <div class="banner-shape shape-1 "></div>
                        <div class="banner-shape shape-2"></div>
                    </div>
                    <div class="vector-1">
                        <img src="{{ asset('websites/modern') }}/image/banner-vector-1.svg" alt="">
                    </div>
                    <div class="vector-2 d-none d-lg-block">
                        <img src="{{ asset('websites/modern') }}/image/banner-vector-2.svg" alt="">
                    </div>
                    <div class="vector-3">
                        <img src="{{ asset('websites/modern') }}/image/banner-vector-3.svg" alt="">
                    </div>
                    <div class="vector-4">
                        <img src="{{ asset('websites/modern') }}/image/banner-vector-4.svg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- start about -->
    <div class="about" id="about">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-5 time">
                    <div class="outline-box">
                        <div class="box">
                            <h4 class="head">
                                Time For Meet
                            </h4>
                            <div class="time-table slashes">
                                <h5>
                                    Monday - Friday
                                </h5>
                                <p>
                                    9:00 AM - 06:00 PM
                                </p>
                            </div>
                            <div class="time-table mb-0">
                                <h5>
                                    Saturday - Sunday
                                </h5>
                                <p>
                                    9:00 AM - 06:00 PM
                                </p>
                            </div>
                        </div>
                        <div class="bottom">
                            <h4>
                                For Emergency Care
                            </h4>
                            <p>
                                {{ $data['values']['phone'] ?? '+208-6666-0112' }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-7 text">
                    <div class="head">
                        About Me
                    </div>
                    <h2 class="main-head">
                        {{ $data['values']['about_title'] ?? 'My Journey in Medicine' }}
                    </h2>
                    <p>
                        {{ $data['values']['about_description'] ?? "I'm a specialist with a passion for providing holistic, evidence-based medical care. With years of experience, I've had the privilege of treating thousands of patients with empathy, accuracy, and dedication." }}
                    </p>
{{--                    <div class="info mb-3">--}}
{{--                        <span>Doctor's Motto or Belief</span>: Healing begins with listening.--}}
{{--                    </div>--}}
{{--                    <div>--}}
{{--                        <button class="btn primary-btn">SEND MESSAGE <img src="icons/swirly-scribbled-arrow.png" alt=""></button>--}}
{{--                        <button class="btn scondry-btn">VIDEO CALL <img src="icons/swirly-scribbled-arrow.png" alt=""></button>--}}
{{--                    </div>--}}
                </div>
            </div>
        </div>
        <div class="about-vector">
            <img src="{{ asset('websites/modern') }}/image/about-vector.svg" alt="">
        </div>
    </div>
    <!-- start service -->
    <div class="service" id="services">
        <div class="container">
            <div>
                <div class="head">
                    Services I Provide
                </div>
                <h2 class="main-head-text">
                    Medical Services I Provide
                </h2>
            </div>
            <div class="row">
                @if(isset($data['internal_collections']['services_collection']) && count($data['internal_collections']['services_collection']) > 0)
                    @foreach($data['internal_collections']['services_collection'] as $service)
                        <div class="col-12 col-lg-4 mb-4">
                            <div class="box">
                                <div class="icon">
                                    <i class="fa-solid fa-heartbeat"></i>
                                </div>
                                <div class="text">
                                    <h4>
                                        {{ $service['title'] ?? 'Service' }}
                                    </h4>
                                    <p>
                                        {{ $service['description'] ?? 'Service description' }}
                                    </p>
                                </div>
                                <a class="">read more <img src="icons/swirly-scribbled-arrow.png" alt=""></a>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
        <div class="service-vector">
            <img src="{{ asset('websites/modern') }}/image/service-vector-1.svg" alt="">
        </div>
    </div>
    <!-- start blog -->
    <div class="blog">
        <div class="container">
            <div class="text-center mb-5">
                <div class="head">
                    Doctor's Blog
                </div>
                <h2 class="main-head-text">
                    Your Health, My Words
                </h2>
            </div>
            <div class="row">
                @if(isset($latestPosts) && $latestPosts->count() > 0)
                    @foreach($latestPosts as $post)
                        <div class="col-12 col-lg-4">
                            <div class="box">
                                @if($post->image)
                                    <img src="{{ asset($post->image) }}" alt="{{ $post->title }}">
                                @else
                                    <img src="{{ asset('websites/modern') }}/image/blog-1.jpg" alt="{{ $post->title }}">
                                @endif
                                <div class="text">
                                    <h4>{{ $post->title }}</h4>
                                    <div class="info">
                                        @if($post->published_at)
                                            <span class="clander">{{ $post->published_at->format('d F Y') }}</span>
                                        @endif
                                        <span class="event">Blog</span>
                                    </div>
                                </div>
                                <a href="{{ url("website/preview/$template->slug/post/$post->id?token=$token") }}" class="btn">
                                    Read more
                                </a>
                            </div>
                        </div>
                    @endforeach
                @else
                    @for($i = 0; $i < 3; $i++)
                        <div class="col-12 col-lg-4">
                            <div class="box">
                                <img src="{{ asset('websites/modern') }}/image/blog-1.jpg" alt="">
                                <div class="text">
                                    <h4>The Medical Minute Quick Tips for Better Living</h4>
                                    <div class="info">
                                        <span class="clander">11 March 2025</span> <span class="event">Blog</span>
                                    </div>
                                </div>
                                <button class="btn">
                                    Read more
                                </button>
                            </div>
                        </div>
                    @endfor
                @endif
            </div>
        </div>
    </div>
@endsection