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

@section('content')
<section id="details-title-wrapper" style="background-image: url('{{ asset('FrontEnd/files/cp-contact-1.jpg') }}');">
    <div class="container">
        <div class="row">
            <h2 class="blog-title-detail"> Misyon & Vizyon </h2>
            <div class="breadcrumb">
                <ul class="breadcrumb-link">
                    <li><i class="fas fa-home"></i></li>
                    <li><a href="{{ route('frontend.home') }}">Anasayfa</a></li>
                    <li><i class="fas fa-angle-right"></i></li>
                    <li>{{ $missionvision->page_title }}</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<section id="mission-detail-content" class="inside-bg">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-lg-6">
                @if($missionImages->count() > 0)
                    <div class="mission-vision">
                        @foreach($missionImages as $img)
                            <a href="{{ asset('FrontEnd/files/'.$img->address) }}" data-fslightbox="gallery-two">
                                <img src="{{ asset('FrontEnd/files/'.$img->address) }}" alt="img" class="img-fluid">
                            </a>
                        @endforeach
                    </div>
                @endif
            </div>
            <div class="col-12 col-lg-6">
                <div class="mission-vision-wrapper">
                    <div class="col-12 mb-4">
                        <div class="section-title">
                            <span>{{ $missionvision->who_title }}</span>
                        </div>
                    </div>
                    <div class="whoarewe-text">
                        {!! $missionvision->who_content !!}
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row mt-5 py-3">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="missionvision-area">
                            <div class="accordion accordion-flush" id="accordionFlushExample">
                                <div class="accordion-item block">
                                    <h2 class="accordion-header" id="flush-heading1">
                                        <button class="accordion-button acc-btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse1" aria-expanded="false" aria-controls="flush-collapse1">
                                            {{ $missionvision->mission_title }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapse1" class="accordion-collapse acc-content collapse" aria-labelledby="flush-heading1" data-bs-parent="#accordionFlushExample">
                                        <div class="accordion-body content">
                                            <div class="text">
                                                {!! $missionvision->mission_content !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
                        <div class="missionvision-area">
                            <div class="accordion accordion-flush" id="accordionFlushExample1">
                                <div class="accordion-item block">
                                    <h2 class="accordion-header" id="flush-heading2">
                                        <button class="accordion-button acc-btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse2" aria-expanded="false" aria-controls="flush-collapse2">
                                            {{ $missionvision->vision_title }}
                                        </button>
                                    </h2>
                                    <div id="flush-collapse2" class="accordion-collapse acc-content collapse" aria-labelledby="flush-heading2" data-bs-parent="#accordionFlushExample1">
                                        <div class="accordion-body content">
                                            <div class="text">
                                                {!! $missionvision->vision_content !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col py-4">
                        <hr class="solid">
                    </div>
                </div>
                <div class="row">
                    <div class="text-center mb-5">
                        <h2 class="timeline-title">{{ $timelineHeader->timeline_title }}</h2>
                        <p class="text-muted mt-2">{{ $timelineHeader->timeline_content }}</p>
                    </div>
                    <div class="col-md-8 mx-md-auto text-center">
                        <section class="timeline" id="timeline">
                            <div class="timeline-body">
                                @foreach($timeline as $k => $t)
                                    <div class="timeline-date" data-aos="zoom-in" data-aos-delay="{{ 100 + ($k*200) }}">
                                        <h3>{{ $t->year }}</h3>
                                    </div>

                                    <article class="timeline-box {{ $k % 2 == 0 ? 'left' : 'right' }} text-start"
                                             data-aos="fade-up" data-aos-delay="{{ 200 + ($k*200) }}">
                                        <div class="timeline-box-arrow"></div>
                                        <div class="history-box">
                                            @if($t->headerFile)
                                                <img class="img-fluid" src="{{ asset('FrontEnd/files/' . $t->headerFile->address) }}">
                                            @else
                                                <img class="img-fluid" src="{{ asset('FrontEnd/files/default.jpg') }}">
                                            @endif

                                            <h3>{{ $t->title }}</h3>
                                            <p>{{ $t->description }}</p>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection