@extends('layouts.main')

@section('content')

    <section class="py-4 py-md-3 banner-c">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="text-white f-sm-30 f-30 fw-500 mb-0">
                        News
                    </h1>
                </div>
                <div class="col-md-6 text-end"></div>
            </div>
        </div>
    </section>

    <section class="breadcrumb pt-4 custom_breadcrumb d-sm-block d-none">
        <div class="container">
            <div class="row align-items-center">
                {{-- <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('home') }}" role="button" tabindex="0"><i class="fa fa-home"></i> Home</a>
                    </li>
                    <li class="breadcrumb-item">News</li>
                </ol> --}}
            </div>
        </div>
    </section>

    <section class="newsletter-slider-sec pb-4">
        <div class="container">
          <div class="newsletter-slider">
            @foreach ($newsletters as $newsletter)
                <div class="newsletter-slide">
                    <a href="https://sarvodayahospital19.com/admin/data/app/1580707385523.pdf" class="d-block text-center text-decoration-none" target="_blank">
                    <img src="https://sarvodayahospital19.com/admin/data/app/webp/1580707392087.webp" alt="missing image"/>
                    <div class="text-center newsletter-slider-caption pt-3">Issue {{ Carbon\Carbon::parse($newsletter->PublishDate)->format('d (M, Y)') }}</div>
                    </a>
                </div>
            @endforeach
          </div>
        </div>
    </section>
    {{-- <p>Issue 8 (Mar, 2018)</p> --}}
@stop

@section('javascript')
    <script>
        $('.newsletter-slider').slick({
            centerMode: true,
            centerPadding: '60px',
            autoplay:true,
            speed:500,
            arrows: true,
            slidesToShow: 5,
            responsive: [
            {
                breakpoint: 1024,
                settings: {
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 5
                }
            },
            {
                breakpoint: 768,
                settings: {
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
                }
            },
            {
                breakpoint: 480,
                settings: {
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
                }
            }
            ]
        });
    </script>
@endsection