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



        <!-- start page title -->
        <section class="p-0 pt-2 ipad-top-space-margin page-title-big-typography bg-gradient-blue-transparent-second ">
            <div class="container">
                <div class="row align-items-center justify-content-center h-350px">
                    <div class="col-auto text-center page-title-double-large">
                        <h1 class="alt-font text-dark-gray fw-700 ls-minus-1px mb-0">{!! $department->title !!}</h1>
                    </div>

                </div>
            </div>
        </section>
        <!-- end page title -->





            <section class="mt-0 pt-0">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-9 dropcap-style-01 appear anime-child anime-complete fs-20  fw-400 text-dark-gray " data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">


                                    {!! $department->content !!}

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



    <section class="bg-very-light-gray position-relative">
      <div class="position-absolute left-minus-200px top-25 skrollable skrollable-between" data-bottom-top="transform: translateY(-80px)" data-top-bottom="transform: translateY(80px)" style="transform: translateY(12.2699px);">
                <img src="https://craftohtml.themezaa.com/images/demo-elder-care-01.png" alt="" data-no-retina="">
            </div>
        <div class="container">
            <div class="row mb-7 sm-mb-50px">
                <div class="col-12 col-xl-12 col-lg-12">
                    <h3 class="text-dark-gray text-center alt-font fw-600 ls-minus-1px mb-0">{{ $department->title }} - usluge iz oblasti</h3>
                </div>
            </div>
            <div class="row mb-6 sm-mb-30px justify-content-center">
                <div class="col-9" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                  @foreach($department->services as $service)

                  <div class="row border-bottom border-1 pb-20px mb-20px sm-pb-35px sm-mb-35px align-items-center">

                      <div class="col-md-10 md-mb-25px">
                          <div class="feature-box feature-box-left-icon-middle last-paragraph-no-margin">

                              <div class="feature-box-content">
                                  <h3 class="d-inline-block text-dark-gray mb-0px fw-500 fs-20 m-0 ls-minus-05px">{{ $service->title }}</h3>
                                  <!-- <p class="w-90 md-w-100">    {{ Str::limit(preg_replace('/<\/?p[^>]*>/', '', $service->short_description), 100, '...') }}</p> -->
                              </div>
                          </div>
                      </div>
                      <div class="col-md-2 text-center text-md-end">
                          <a href="{{ route('services.show', ['department' => $department->slug, 'slug' => $service->slug]) }}" class="btn btn-base-color btn-box-shadow btn-small btn-switch-text btn-rounded">
                              <span>
                                  <span class="btn-double-text" data-text="Saznaj više">Saznaj više</span>
                              </span>
                          </a>
                      </div>
                  </div>


                    @endforeach

                </div>
            </div>

        </div>
    </section>
@if($department->knowledgeArticles->count())
    <section class="overflow-hidden bg-gradient-blue-transparent-first position-relative">
        <div class="container">
            <div class="row align-items-center mb-5 sm-mb-30px text-center text-lg-start" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                <div class="col-lg-5 md-mb-30px">
                    <h3 class="text-dark-gray alt-font fw-600 ls-minus-1px mb-0">{{ $department->title }} i <br>sve što niste znali</h3>
                </div>
                <div class="col-lg-4 offset-xl-1 last-paragraph-no-margin md-mb-30px">
                </div>
                <div class="col-xl-2 col-lg-3 d-flex justify-content-center">
                    <!-- start slider navigation -->
                    <div class="slider-one-slide-prev-1 icon-small text-dark-gray swiper-button-prev slider-navigation-style-04 bg-white box-shadow-large"><i class="fa-solid fa-arrow-left"></i></div>
                    <div class="slider-one-slide-next-1 icon-small text-dark-gray swiper-button-next slider-navigation-style-04 bg-white box-shadow-large"><i class="fa-solid fa-arrow-right"></i></div>
                    <!-- end slider navigation -->
                </div>
            </div>
            <div class="row align-items-center" data-anime='{ "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                <div class="col-12">
                    <div class="outside-box-right-20 sm-outside-box-right-0">
                        <div class="swiper magic-cursor drag-cursor slider-one-slide" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }'>
                            <div class="swiper-wrapper">
                              @foreach($department->knowledgeArticles as $article)

                                <!-- start slider item -->
                                <div class="swiper-slide">
                                    <!-- start services box style -->
                                    <div class="services-box-style-04 hover-box last-paragraph-no-margin border-radius-6px overflow-hidden">

                                        <div class="bg-white">
                                            <div class="ps-65px pe-65px pt-30px pb-30px">
                                                <a href="{{ route('knowledge.show', $article->slug) }}" class="d-inline-block fs-18 fw-600 text-dark-gray mb-5px">{{ $article->title }}</a>
                                            </div>

                                        </div>
                                    </div>
                                    <!-- end services box style -->
                                </div>
                                <!-- end slider item -->
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif



@endsection
@section('scripts')
@endsection