@extends('client.layouts.app')
@section('content')
<section class="due-date-sec top-section">
    
    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto text-center">
                <div class="title">
                	<img class="white-star-img " src="{{ asset('client/images/white-star.png') }}">
                	<button type="button" class="btn btn-outline-primary due" style="background: #FFF;">{{ $due->month }} {{ $due->year }}</button>
                    <h1>{{ $due->title }}</h1>
                    <!-- <p class="mb-4">{{ $due->title }}</p> -->
                    <button class="btn btn-primary btn-calendar" > <a href="{{ $due->link }}"><img src="{{ asset('client/images/google-calendar.png') }}" class="calendar"> ADD GOOGLE CALENDAR </a></button>
                </div>
            </div>
        </div>
    </div>
    
</section>

<section class="dates-boxes" style="background: #FFF;">
	<div class="container due-container">
		<div class="row">
        @foreach ($due->dueDates as $duedate)
                <div class="col-md-4 due-box">
				<div class="date-box">
					<p class="date">{{ $duedate->date }}</p>
					<p class="py-3 m-0">{{ $duedate->desc }}</p>
                    @if($duedate->link)
					<a href="{{ $duedate->link }}" class="blog-readbtn pay-link">{!! str_replace('_', ' ', $duedate->type) !!} <img src="{{ asset('client/images/Vector 157.png') }}"> </a>
                    @endif
				</div>
			</div>
        @endforeach
			
			<div class="col-md-12 text-center">
				<img src="{{ asset('client/images/Vector 165.png') }}">
				<div>
					<p style="font-style: italic;" class="my-3">Share this with people</p>
					<div>
						<a href="#"> <img class="share-img" src="{{ asset('client/images/Social icon.png') }}"> </a>
						<a href="#"> <img class="share-img" src="{{ asset('client/images/mdi_whatsapp.png') }}"> </a>
						<a href="#"> <img class="share-img" src="{{ asset('client/images/Social icon (1).png') }}"> </a>
						<a href="#"> <img class="share-img" src="{{ asset('client/images/ri_twitter-x-fill.png') }}"> </a>
					</div>
				</div>
			</div>
		</div>
		<div class="row mt-3">
			<div class="col-md-12">
				<p><b>Important Update</b></p>
				<p>  </p>
			</div>
			<div class="col-md-6">
				<p> {!! $due->note !!} </p>
			</div>
			<div class="col-md-6">
				<p> {!! $due->desc !!} </p>
			</div>
			<div class="col-md-12 text-center">
				<button class="btn btn-primary btn-calendar" > <a href="{{ $due->link }}"> <img src="{{ asset('client/images/google-calendar.png') }}" class="calendar"> ADD GOOGLE CALENDAR </a></button>
			</div>
		</div>
	</div>
</section>

<section class="pt-0 read-blog" style="background: #FFF;" >
    <div class="container">
        <div class="row">
            <div class="col-md-12 pt-4">
                <div class="title text-center">
                    <h2 class="related">Related Posts</h2>
                </div>
            </div>
            @foreach($blogs as $blog)
            <div class="col-md-4 ">
                <a href="{{ route('show-page', $blog->slug) }}">
                    <img src="{{ asset('storage/blogs/' . $blog->image) }}" class="img-fluid blog-img">
                    <p class="blog-title">{{$blog->title}}</p>
                    <span class="blog-category">Read More</span>
                </a>
            </div>
            @endforeach
          
        </div>
    </div>
</section>
@endsection