@extends('website.layouts.app')

@section('title', 'Layanan')

{{-- ================= HERO / SUBHEADER ================= --}}
@section('hero')
<div id="Subheader" style="padding:200px 0 120px;">
    <div class="container">
        <div class="column one">
            <!-- <h1 class="title">Tentang Kami</h1> -->
        </div>
    </div>
</div>
@endsection


@section('content')

{{-- INTRO --}}
<div class="section mcb-section" style="padding-top:100px; padding-bottom:30px">
    <div class="section_wrapper mcb-section-inner">

        <div class="wrap mcb-wrap one-second valign-top clearfix">
            <div class="mcb-wrap-inner">

                <div class="column mcb-column one column_column">
                    <div class="column_attr clearfix">
                        <h3>Layanan Klinik Bidan Dewi Nuraeni</h3>
                        <p style="font-size:18px; text-align:justify">
                            Kami menyediakan layanan kebidanan yang komprehensif dan berdedikasi,
                            dari pemeriksaan kehamilan hingga persiapan persalinan.
                        </p>
                    </div>
                </div>

                {{-- SERVICES FROM DATABASE --}}
                @forelse($services as $service)
                    <div class="column mcb-column one-fourth column_image">
                        <div class="image_frame image_item no_link scale-with-grid no_border">
                            <div class="image_wrapper">
                                <img
                                    class="scale-with-grid"
                                    src="{{ $service->image
                                            ? asset('storage/'.$service->image)
                                            : asset('asset/themes/images/service-placeholder.jpg') }}"
                                    alt="{{ $service->name }}">
                            </div>
                        </div>
                    </div>

                    <div class="column mcb-column three-fourth column_column">
                        <div class="column_attr clearfix">
                            <h4>{{ $service->name }}</h4>
                            {!! $service->description !!}
                        </div>
                    </div>
                @empty
                    <div class="column one">
                        <p>Tidak ada layanan tersedia.</p>
                    </div>
                @endforelse

            </div>
        </div>

        {{-- SIDE CTA --}}
        <div class="wrap mcb-wrap one-second column-margin-0px valign-top clearfix" style="padding-left:8%">
            <div class="mcb-wrap-inner">

                <div class="column mcb-column one column_image">
                    <div class="image_frame image_item no_link scale-with-grid no_border">
                        <div class="image_wrapper">
                            <img
                                class="scale-with-grid"
                                src="{{ asset('asset/themes/content/clinic3/images/check-room.jpg') }}"
                                alt="Ruang Pemeriksaan">
                        </div>
                    </div>
                </div>

                <div class="column mcb-column three-fifth column_column">
                    <div class="column_attr clearfix" style="background:#00f1c7; padding:50px">
                        <h3>Reservasi</h3>
                        <p>Buat janji jadwal kunjungan Anda dengan mudah.</p>

                        <a class="button button_size_2 button_js"
                           href="{{ route('reservation') }}">
                            <span class="button_label">Buat Janji</span>
                        </a>

                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

{{-- CTA CONTACT --}}
<div class="section mcb-section section-cta-center">
    <div class="section_wrapper">
        <div class="cta-center-inner">

            <h2 class="cta-title">
                Bidan Dewi Nuraeni
            </h2>

            <p class="cta-desc">
                Ingin mendapatkan informasi lebih lanjut atau membuat janji temu?
                Kami senang mendengar dari Anda. Silakan hubungi kami melalui halaman
                kontak untuk menghubungi tim kami.
            </p>

            <a href="{{ route('contact') }}" class="button button_size_2">
                <span class="button_label">Kontak Kami</span>
            </a>

        </div>
    </div>
</div>

@endsection