@extends('front.layouts.app')
@section('title', $service->title)
@section('content')





        <section class="p-0 pt-2 ipad-top-space-margin page-title-big-typography " >
            <div class="container">
                <div class="row align-items-center justify-content-center h-350px">
                    <div class="col-auto text-center page-title-double-large" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }'>
                        <h1 class="alt-font text-dark-gray fw-700 ls-minus-1px mb-0">{!! $service->title !!}</h1>
                    </div>

                </div>
            </div>
        </section>
        @if($service->short_description)
<section class="bg-very-light-gray">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-9 dropcap-style-01 fs-20  fw-400 text-dark-gray " data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>


                      {!! $service->short_description !!}
                      
                      <a href="{!! url('oblasti') !!}" class="btn btn-large btn-base-color btn-rounded d-inline-block me-20px sm-me-10px right-icon btn-box-shadow btn-switch-text">
                          <span>
                              <span class="btn-double-text" data-text="Zakažite pregled">Zakažite pregled</span>
                              <span><i class="fa-solid fa-arrow-right fs-14"></i></span>
                          </span>
                      </a>
                    </div>
                </div>
            </div>
        </section>
@endif
<section id="down-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 pe-5 order-2 order-lg-1 lg-pe-3 md-pe-15px" data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
              <div class="position-sticky top-50px lg-top-40px">


                <div class="bg-very-light-gray border-radius-6px p-45px lg-p-25px mb-25px">
                    <span class="fs-22 alt-font text-dark-gray fw-700 mb-20px d-inline-block">Ostale usluge iz oblasti</span>
                    <ul class="p-0 m-0 list-style-02 fw-500">
                      @foreach($department->services as $ser)
                        <li class="pb-5px mb-10px border-bottom border-color-transparent-dark"><a href="{{ route('services.show', ['department' => $department->slug, 'slug' => $ser->slug]) }}" class="{{ request()->route('slug') === $ser->slug ? 'text-dark-gray text-dark-gray-hover' : '' }}">{{ $ser->title }}</a> <i class="feather icon-feather-arrow-right ms-auto icon-small"></i></li>
                      @endforeach
                    </ul>
                </div>
                <div class="bg-dark-gray border-radius-6px ps-35px pb-25px pt-25px lg-ps-25px mb-25px">
                    <div class="feature-box feature-box-left-icon-middle">
                        <div class="feature-box-icon feature-box-icon-rounded w-65px h-65px me-20px lg-me-15px rounded-circle bg-base-color rounded-box">
                            <i class="bi bi-telephone icon-extra-medium text-white"></i>
                        </div>
                        <div class="feature-box-content last-paragraph-no-margin">
                            <span class="mb-5px d-block text-white opacity-6 fw-300">Zakažite pregled</span>
                            <a href="tel:+381693196808" class="text-white fs-20 fw-500 lh-22">+381 69 319 68 08</a>
                        </div>
                    </div>
                </div>

                </div>
            </div>
            <div class="col-lg-8 order-1 order-lg-2 md-mb-50px" data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
                {!! $service->content !!}





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



<section class="pb-0 bg-gradient-blue-transparent-second">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9 text-center mb-2">
                <h5 class="alt-font text-dark-gray fw-600">Pitali ste...</h5>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <ul class="blog-comment">
                    <li>
                        <div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
                            <div class="w-90px sm-w-65px sm-mb-10px">
                                <img src="https://placehold.co/130x130" class="rounded-circle" alt="">
                            </div>
                            <div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
                                <a href="#" class="text-dark-gray text-dark-gray-hover fw-700">Herman Miller</a>

                                <div class="fs-14 lh-24 mb-10px">17 July 2020, 6:05 PM</div>
                                <p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make book.</p>
                            </div>
                        </div>
                        <ul class="child-comment">

                            <li>
                                <div class="d-block d-md-flex w-100 align-items-center align-items-md-start border-radius-5px p-50px md-p-30px sm-p-20px bg-very-light-gray">
                                    <div class="w-90px sm-w-65px sm-mb-10px">
                                        <img src="https://placehold.co/130x130" class="rounded-circle" alt="">
                                    </div>
                                    <div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
                                        <a href="#" class="text-dark-gray text-dark-gray-hover fw-700">Colene Landin</a>

                                        <div class="fs-14 lh-24 mb-10px">18 July 2020, 12:39 PM</div>
                                        <p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Ipsum has been the industry's standard dummy text.</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
                            <div class="w-90px sm-w-65px sm-mb-10px">
                                <img src="https://placehold.co/130x130" class="rounded-circle" alt="">
                            </div>
                            <div class="w-100 ps-30px last-paragraph-no-margin sm-ps-0">
                                <a href="#" class="text-dark-gray text-dark-gray-hover fw-700">Jennifer Freeman</a>

                                <div class="fs-14 lh-24 mb-10px">19 July 2020, 8:25 PM</div>
                                <p class="w-85 sm-w-100">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make a type specimen book.</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<!-- end section -->
<!-- start section -->
<section id="comments">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9 mb-3 sm-mb-6">
                <h5 class="alt-font text-dark-gray fw-600 mb-5px">Pitajte doktora</h5>

            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-9">
                <form action="email-templates/contact-form.php" method="post" class="row contact-form-style-02">
                    <div class="col-md-6 mb-30px">
                        <input class="input-name border-radius-4px form-control required" type="text" name="name" placeholder="Ime i prezime *">
                    </div>
                    <div class="col-md-6 mb-30px">
                        <input class="border-radius-4px form-control required" type="email" name="email" placeholder="Email adresa *">
                    </div>
                    <div class="col-md-12 mb-30px">
                        <textarea class="border-radius-4px form-control" cols="40" rows="4" name="comment" placeholder="Pitanje / poruka"></textarea>
                    </div>
                    <div class="col-12">
                        <input type="hidden" name="redirect" value="">
                        <button class="btn btn-dark-gray btn-small btn-round-edge submit" type="submit">Pošalji</button>
                        <div class="form-results mt-20px d-none"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>





@endsection
@section('scripts')
@endsection