@extends('FrontEnd.layouts.master')
@section('title','Ankara Çocuk ve Ergen Psikiyatristi | Doç. Dr. Dilşad Yıldız MİNİKSAR')


@section('content')
<!-- Slider Section Begin -->
<section id="slider">
    <div class="header-carousel-one owl-carousel owl-loaded">
        @foreach ($medias as $media)
            <div class="intro-area">
                <div class="intro-image">
                    @if ($media->headerFile && $media->headerFile->address)
                        <img src="{{ asset('FrontEnd/files/' . $media->headerFile->address) }}"
                             alt="{{ $media->title }}">
                    @else
                        <img src="{{ asset('FrontEnd/files/default-placeholder.jpg') }}" alt="Resim Yok">
                    @endif
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="intro-content">
                                <h5>{{ $media->subtitle }}</h5>
                                <h2>{{ $media->title }}</h2>
                                <p>{{ $media->summary }}</p>
                                <a href="{{ route('frontend.media.show', ['slug' => $media->slug."-".$media->id]) }}" class="cp-btn cp-btn-primary">
                                    Detaylı İncele <i class="far fa-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="shape-bottom" data-negative="false">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
            <path class="shape-fill" d="M500,98.9L0,6.1V0h1000v6.1L500,98.9z"></path>
        </svg>
    </div>
</section>
<!-- Slider Section End -->
<!-- About Us Begin -->
<section id="aboutus">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4">
                <div class="about-group-effect">
                    <div class="row g-3">
                        @if($aboutImages->count() > 0)
                            <div class="row">
                                <div class="col-sm-7 col-12">
                                    <div class="about-thumbnail one">
                                        <a data-fslightbox="gallery-one"
                                           href="{{ asset('FrontEnd/files/' . $aboutImages[0]->address) }}">
                                            <img src="{{ asset('FrontEnd/files/' . $aboutImages[0]->address) }}" alt="{{ $about->title }}">
                                        </a>
                                    </div>
                                </div>
                                <div class="col-sm-5 col-12 column-modifier">
                                    @foreach($aboutImages->skip(1)->take(2) as $file)
                                        <div class="about-thumbnail mb-3">
                                            <a data-fslightbox="gallery-one"
                                               href="{{ asset('FrontEnd/files/' . $file->address) }}">
                                                <img src="{{ asset('FrontEnd/files/' . $file->address) }}" alt="{{ $about->title }}">
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                        {{--@if(!empty($about->video_url))
                            <div class="about-play-button play-top" style="z-index: 99; position: absolute; top: 20px; right: 20px;">
                                <a data-fslightbox="gallery"
                                   href="{{ $about->video_url }}"
                                   class="popup-youtube"
                                   aria-label="Videoyu Oynat">
                                    <i class="fas fa-play"></i>
                                </a>
                            </div>
                        @endif--}}
                        <div class="about-play-button play-top">
                            <a data-fslightbox="gallery" href="https://youtu.be/nYLsLqkjhaQ?si=MhaKV6hyHmFimGX1" class="popup-youtube" aria-label="Videoyu Oynat">
                                <i class="fas fa-play"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-12 mb-4 column-modifier-two">
                <div class="section-title left-modifier">
                    @if($about)
                        <div class="section-title left-modifier">
                            <h2>{{ $aboutEnglishTitle }}</h2>
                            <span>{{ $about->title }}</span>
                            <p>{!! $about->description !!}</p>
                        </div>
                    @endif
                </div>
                <a href="{{ route('frontend.about.show') }}" class="cp-btn cp-btn-primary mt-4">
                    Detaylı Bilgi <i class="far fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>
<!-- About Us Section End -->
<!-- Online Therapy -->
<section id="online-therapy-wrapper">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 text-center">
                <h3 class="online-therapy-head">{{ $featuredService->homepage_title }}</h3>
                <p class="online-therapy-desc">{{ Str::limit(strip_tags($featuredService->homepage_desc), 120) }}</p>
                <a href="{{ route('frontend.services.show', ['slug' => $featuredService->slug."-".$featuredService->id]) }}"
                   class="cp-online-btn cp-online-btn-primary mt-4">
                    Detaylı Bilgi <i class="far fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>
<!-- Online Therapy -->
<!-- Services Section Begin -->
<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-4">
                @php
                    $page = $pages['services'] ?? null;
                @endphp

                @if($page)
                    <div class="section-title">
                        <h2>{{ $page->english_title }}</h2> {{-- İngilizce başlık --}}
                        <span>{{ $page->title }}</span>     {{-- Türkçe başlık --}}
                    </div>
                @endif

            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="layout4 layout4-modifier owl-carousel owl-loaded">
                    @foreach($services as $service)
                        @php
                            // Dosyaları al
                            $files = $service->getFiles();
                            $imagePath = $files->isNotEmpty()
                                ? asset('FrontEnd/files/' . $files->first()->address)
                                : asset('FrontEnd/images/default.png');
                            // Link ve metinler
                            $id = $service->id ?? null;
                            $slug = $service->slug ?? null;
                            $link = ($id && $slug) ? route('frontend.services.show', ['slug' => $slug."-".$id]) : '#';
                            $title = $service->title ?? 'Hizmet Başlığı';
                            $desc = Str::limit(strip_tags($service->description ?? ''), 120, '...');
                        @endphp
                        <div class="service-item">
                            <div class="service-item__image">
                                <img src="{{ $imagePath }}" alt="{{ $title }}">
                            </div>
                            <div class="service-item__content">
                                <a href="{{ $link }}">{{ $title }}</a>
                                <p>{{ $desc }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Services Section End -->
<!-- Gallery Section Begin -->
<section id="gallery">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-4">
                @php
                    $page = $pages['gallery'] ?? null;
                @endphp
                @if($page)
                    <div class="section-title">
                        <h2>{{ $page->english_title }}</h2> {{-- İngilizce başlık --}}
                        <span>{{ $page->title }}</span>     {{-- Türkçe başlık --}}
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="photo-gallery-area2 owl-carousel owl-rtl mt-4">
                    @foreach($albums as $album)
                        @foreach($album->files as $file)
                            <div class="gallery-popular-area">
                                <div class="popular-thumbnail">
                                    <img src="{{ asset('frontend/files/' . $file->address) }}"
                                         alt="{{ $album->title }}" loading="lazy">
                                </div>
                                <h3>
                                    <a href="{{ asset('frontend/files/' . $file->address) }}"
                                       data-fslightbox="gallery-{{ $album->id }}"
                                       data-caption="{{ '<h5>' . e($album->title) . '</h5><br>' . e($album->description) }}">
                                        <i class="fal fa-plus"></i>
                                    </a>
                                </h3>
                            </div>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Gallery Section End -->
<!-- Feedback Section Begin -->
<section id="feedback">
    <div class="container">
        <div class="row g-0 align-items-start">
            <div class="col-12 col-md-6 col-lg-5 mb-4 mb-lg-0 pe-md-4">
                @php
                    $page = $pages['client-testimonials'] ?? null;
                @endphp
                @if($page)
                    <div class="section-title left-modifier">
                        <h2>{{ $page->english_title }}</h2>
                        <span>{{ $page->title }}</span>
                        <p>{!! $page->content !!}</p>
                    </div>
                @endif
                <a href="https://www.doktortakvimi.com/dilsad-yildiz-miniksar/cocuk-ve-ergen-psikiyatrisi/ankara" target="_blank" class="cp-btn cp-btn-primary mt-3 mb-5">Tüm Yorumlar <i class="far fa-arrow-right"></i></a>
                @foreach($testimonials as $testimonial)
                    <div class="testimonial-intro">
                        @if($testimonial->file && $testimonial->file->address)
                            <img src="{{ asset('FrontEnd/files/' . $testimonial->file->address) }}" alt="{{ $testimonial->title }}">
                        @else
                            <img src="{{ asset('FrontEnd/files/default.jpg') }}" alt="{{ $testimonial->title }}">
                        @endif
                        <a href="#" class="about-play-button play-modifier">
                            <i class="fas fa-play"></i>
                        </a>
                    </div>
                @endforeach
            </div>

            <div class="col-12 col-md-6 col-lg-7 ps-md-4">
                <div class="accordion accordion-flush" id="accordionFlushExample">
                    @foreach($faqs as $faq)
                        <div class="accordion-item block">
                            <h2 class="accordion-header" id="flush-heading{{ $loop->index }}">
                                <button class="accordion-button collapsed acc-btn" type="button"
                                        data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapse{{ $loop->index }}"
                                        aria-expanded="false"
                                        aria-controls="flush-collapse{{ $loop->index }}">
                                    {{ $faq->question }}
                                </button>
                            </h2>
                            <div id="flush-collapse{{ $loop->index }}" class="accordion-collapse collapse acc-content"
                                 aria-labelledby="flush-heading{{ $loop->index }}"
                                 data-bs-parent="#accordionFlushExample">
                                <div class="accordion-body content">
                                    <div class="text">{{ $faq->answer }}</div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Memberships Section Begin -->
<!-- Memberships Section Begin -->
<section id="memberships">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">
                @php
                    $page = $pages['academic-professional-memberships'] ?? null;
                @endphp
                @if($page)
                    <div class="section-title left-modifier">
                        <h2>{{ $page->english_title }}</h2>
                        <span>{{ $page->title }}</span>
                        <p>{!! $page->content !!}</p>
                    </div>
                @endif
                <a href="#" class="cp-btn cp-btn-primary mt-3">Tüm Üyelikler <i class="far fa-arrow-right"></i></a>
            </div>
            <div class="col-12 col-md-6 col-lg-7 col-xl-8">
                <div class="layout4b owl-carousel owl-loaded">
                    @foreach($members as $member)
                        @php
                            $files = $member->getFiles();
                            $imagePath = $files->isNotEmpty()
                                ? asset('FrontEnd/images/' . $files->first()->address)
                                : asset('FrontEnd/images/default.png');
                            $link = $member->link ?? '#';
                            $title = $member->title ?? 'Üyelik Bilgisi';
                        @endphp
                            <div class="membership-card">
                                <div class="membership-logo">
                                    <img src="{{ $imagePath }}" alt="{{ $title }}">
                                </div>
                                <div class="membership-title">
                                    <a href="{{ $link }}" target="_blank">{{ $title }}</a>
                                </div>
                            </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Memberships Section End -->
<!-- Blog Section Begin -->
<section id="blogs">
    <div class="container">
        <div class="row">
            <div class="col-12 mb-4">
                @php
                    $page = $pages['blogs'] ?? null;
                @endphp
                @if($page)
                    <div class="section-title">
                        <h2>{{ $page->english_title }}</h2> {{-- İngilizce başlık --}}
                        <span>{{ $page->title }}</span>     {{-- Türkçe başlık --}}
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="layout3 owl-carousel owl-loaded">
                    @foreach($blogs as $blog)
                        @php
                            // güvenli image (BlogModel::getFirstImageAttribute ile)
                            $image = $blog->first_image ?? 'default.jpg';
                            // link: slug varsa route, yoksa '#'
                           /* $detailUrl = !empty($blog->slug) ? route('frontend.blog.show', ['slug' => $slug."-".$id]) : '#';*/
                            $id    = $blog->id ?? null;
                            $slug  = $blog->slug ?? null;

                            $detailUrl = ($id && $slug) ? route('frontend.blog.show', ['slug' => $slug . '-' . $id]) : '#';
                            // views/hit alanı olabilir; yoksa 0
                            $views = $blog->views ?? $blog->hit ?? 0;
                            // tarih güvenli formatlama
                            $date = null;
                            try {
                                $date = optional($blog->created_at) ? \Carbon\Carbon::parse($blog->created_at)->translatedFormat('d F Y') : '';
                            } catch (\Exception $e) {
                                $date = '';
                            }
                        @endphp
                            <div class="blog-card">
                                <div class="blog-card-image">
                                    <img src="{{ asset('FrontEnd/files/' . $image) }}" alt="{{ $blog->title }}">
                                </div>
                                <div class="blog-card-content">
                                    <ul class="blog-meta">
                                        <li><i class="fas fa-eye"></i> {{ $views }} <span>|</span></li>
                                        <li><i class="fas fa-calendar-alt"></i> {{ $date }}</li>
                                    </ul>
                                    @php
                                        $detailUrl = route('frontend.blog.show', [
                                            'slug' => ($blog->slug ?? '') . '-' . $blog->id
                                        ]);
                                    @endphp
                                    <h3 class="blog-title">
                                        <a href="{{ $detailUrl }}">
                                            {{ $blog->title }}
                                        </a>
                                    </h3>
                                    <a href="{{ $detailUrl }}" class="blog-readmore">
                                        Daha Fazlası <i class="far fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Blog Section End -->
<!-- Contact Section Begin -->
<section id="contact">
    <div class="container-fluid p-0">
        <div class="row g-0">
            <div class="col-12 col-md-12 col-lg-6 mt-0 mt-lg-0 contact-form-area">
                <div class="contact-form-content">
                    <div class="contact-title">
                        <h2 data-title="Contact Us">Görüş ve Önerileriniz Bizim İçin Değerlidir.!</h2>
                    </div>
                    <form method="post" action="">
                        @csrf
                        <div class="contact-form special-frm">

                            <div class="row">
                                <div class="col-12 col-md-6 mb-3">
                                    <label class="input">
                                        <input type="text" name="f_fullName" placeholder="Ad Soyadınızı yazın">
                                        <b class="tooltip tooltip-top-right">Lütfen adınızı ve soyadınızı eksiksiz şekilde giriniz.</b>
                                    </label>
                                </div>
                                <div class="col-12 col-md-6 mb-3">
                                    <label class="input">
                                        <input type="text" name="f_email" placeholder="E-posta adresinizi yazın">
                                        <b class="tooltip tooltip-top-right">Geçerli bir e-posta adresi girin. Örn: cp@eposta.com</b>
                                    </label>
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="textarea">
                                        <textarea name="f_message" placeholder="Mesajınızı yazın…" rows="4"></textarea>
                                        <b class="tooltip tooltip-top-right">İletmek istediğiniz tüm bilgileri ve taleplerinizi açıkça yazınız.</b>
                                    </label>
                                </div>
                               {{-- <div class="col-12 col-md-6 mb-3">
                                    <label class="input">
                                        <input type="text" name="f_captchaAnswer" maxlength="2" oninput="this.value = this.value.replace(/[^0-9]/g, '');" placeholder="7 + 1 = ? "/>
                                        <b class="tooltip tooltip-top-right">Sadece sayıları girin. Cevabı eksiksiz ve doğru yazın.</b>
                                    </label>
                                </div>--}}
                                <div class="col-12 col-md-6 mb-3">
                                    <label class="input">
                                        <input type="text" name="captcha_answer" maxlength="2"
                                               oninput="this.value = this.value.replace(/[^0-9]/g, '');"
                                               placeholder="{{ $a }} + {{ $b }} = ?"/>
                                        <b class="tooltip tooltip-top-right">
                                            Sadece sayıları girin. Cevabı eksiksiz ve doğru yazın.
                                        </b>
                                    </label>
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="inline-group">
                                        <label class="checkbox">
                                            <input type="checkbox" name="f_wantsReply" value="1">
                                            <i></i> Mesajınıza yanıt almak için bu seçeneği işaretleyin.
                                        </label>
                                    </div>
                                </div>
                                <div class="col-12 text-center">
                                    <a id="sendMessage" class="cp-btn cp-btn-white">Mesajı Gönder <i class="far fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-6 mt-0">
                <div class="contact-map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d24480.241359658063!2d32.759205396728525!3d39.90034103160997!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d34978828982c3%3A0x6b232155eb569988!2s%C3%87ocuk%20Psikiyatri%20Ankara%20Do%C3%A7.%20Dr.%20Dil%C5%9Fad%20Y%C4%B1ld%C4%B1z%20Miniksar!5e0!3m2!1str!2sus!4v1750943580838!5m2!1str!2sus" width="100%" height="1050" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    @if ($contact)
                        <div class="contact-box">
                            <div class="contact-box-icon">
                                @if(!empty($contact->logoFile) && !empty($contact->logoFile->address))
                                    <img src="{{ asset('FrontEnd/images/' . $contact->logoFile->address) }}" alt="{{ $contact->title ?? 'Logo' }}">
                                @else
                                    <span class="contact-title-fallback">{{ $contact->title ?? 'Ç[P]' }}</span>
                                @endif
                            </div>
                            <ul class="contact-list">
                                @if (!empty($contact->address))
                                    <li>
                                        <div class="icon">
                                            <i class="far fa-map-marked"></i>
                                        </div>
                                        <div class="text">
                                            {{ $contact->address }}
                                        </div>
                                    </li>
                                @endif
                                @if (!empty($contact->mobile_phone))
                                    <li>
                                        <div class="icon">
                                            <i class="far fa-phone"></i>
                                        </div>
                                        <div class="text">
                                            <a href="tel:{{ $contact->mobile_phone }}">
                                                {{ $contact->mobile_phone }}
                                            </a>
                                        </div>
                                    </li>
                                @endif
                                @if (!empty($contact->email))
                                    <li>
                                        <div class="icon">
                                            <i class="far fa-envelope"></i>
                                        </div>
                                        <div class="text">
                                            <a href="mailto:{{ $contact->email }}">
                                                {{ $contact->email }}
                                            </a>
                                        </div>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    @else
                        <p>İletişim bilgileri bulunamadı.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Contact Section End -->
@endsection
@push('scripts')
<script>
    //console.log('Bu sadece ana sayfada çalışır.');
</script>

<script>
    $(function () {
        $('#sendMessage').on('click', function (e) {
            e.preventDefault();

            // Form verilerini topluyoruz
            var formData = {
                full_name: $('input[name=f_fullName]').val(),
                email: $('input[name=f_email]').val(),
                message: $('textarea[name=f_message]').val(),
                captcha_answer: $('input[name=captcha_answer]').val(),
                wants_reply: $('input[name=f_wantsReply]').is(':checked') ? 1 : 0,
                _token: '{{ csrf_token() }}'
            };

            $.ajax({
                url: "{{ route('frontend.message.store') }}",
                method: "POST",
                data: formData,
                success: function (res) {
                    Swal.fire({
                        position: "top-end",
                        icon: res.icon,
                        title: res.title,
                        showConfirmButton: false,
                        timer: 1500
                    });

                    if (res.status === 'success') {
                        // Formu sıfırla
                        $('input[name=f_fullName]').val('');
                        $('input[name=f_email]').val('');
                        $('textarea[name=f_message]').val('');
                        $('input[name=captcha_answer]').val('');
                        $('input[name=f_wantsReply]').prop('checked', false);

                        // Captcha yenilemek için sayfayı yeniden yükle
                        setTimeout(() => location.reload(), 1500);
                    }
                },
                error: function (xhr) {
                    Swal.fire({
                        position: "top-end",
                        icon: "error",
                        title: "Bir hata oluştu!",
                        showConfirmButton: false,
                        timer: 2000
                    });
                    console.error(xhr.responseText);
                }
            });
        });
    });
</script>
@endpush