@extends('layouts.web_master')

@section('header-content')
  <div class="header-blog" style="background-image: url('{{asset($banner->blog_banner)}}'); background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;">
        <!-- ====== 3.1 hero section ====== -->
        <section class="hero">
            <div class="container">
                <div class="row justify-content-center mt-5">
                    <div class="col-lg-11 col-md-12 text-center" data-aos="fade">
                        <div>
                            <h2>Blog</h2>
                            <div class="d-flex justify-content-center gap-4 pt-4">
                                <nav aria-label="breadcrumb">
                                    <div class="breadcrumb d-flex gap-4 align-items-center">
                                        <div class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></div>
                                        <i class="fa-solid fa-angles-right"></i>
                                        <div class="breadcrumb-item" aria-current="page">Blog</div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- ====== End 3.1 hero section ====== -->
@endsection
<style>
    .overlay {
        height: 347px !important;
    }
</style>
@section('main-content')
    <!-- ====== 1.4 about section ====== -->
    <section>
        <div class="container mt-lg-5 mt-md-5 mt-0 pt-lg-5 pt-md-4 pt-0">
            <div class="row">
                <div class="col-lg-12 col-md-12">
                    <div class="row mb-4">
                        <div class="col-lg-6 col-md-6 aos-init aos-animate" data-aos="fade" data-aos-duration="2000">
                            <img src="{{ asset($blog->image) }}"
                                style="width: 100%; height: 240px; border-radius: .25rem;" alt=""
                                onclick="openModal();">
                        </div>

                        <div class="col-lg-6">
                            <h3 class="mt-5">{{ $blog->title }}</h3>
                            <h6 class="mt-5">{{ $blog->category }}</h6>
                            <div class="d-flex">
                                <div class="location mt-3 text-slate-600">
                                    <p style="padding-right:10px"><i class="fa fa-user"></i> {{ $blog->user->name }} </p>

                                </div>
                                <div class="location mt-3 text-slate-600">
                                    <p><i class="fa fa-calendar" aria-hidden="true"></i> {{ $blog->date }} </p>
                                </div>
                            </div>
                        </div>

                        <!-- Modal Structure -->
                        <div id="imageModal" class="modal" onclick="closeModal();">
                            <span class="close" onclick="closeModal();">&times;</span>
                            <img class="modal-content" id="modalImage" src="">
                        </div>
                    </div>

                    <div class="package-details">
                        <div class="package-content mt-4 mb-5">
                            <div class="package-description mt-5">
                                <h5 class="mb-3">Overview</h5>
                                <div class="text-slate-600" style="font-weight:300!important">
                                    {!!$blog->description!!}
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.4 about section ====== -->
@endsection