@extends('frontEnd.layouts.master')
@section('title', $details->title)
@section('content')
   <section class="blog-details-section py-5">
      <div class="container">
         <div class="row">
            <div class="col-lg-12">
               <div class="blog-details-content bg-white p-4 p-md-5 shadow-sm rounded-4">
                  <div class="blog-meta mb-4">
                     <span class="badge bg-primary px-3 py-2 rounded-pill mb-3">Announcement</span>
                     <h1 class="fw-bold mb-3">{{ $details->title }}</h1>
                     <div class="d-flex align-items-center text-muted small">
                        <span class="me-4"><i
                              class="fa fa-calendar-alt me-2"></i>{{ $details->created_at->format('M d, Y') }}</span>
                        <span><i class="fa fa-user me-2"></i>Admin</span>
                     </div>
                  </div>

                  <div class="blog-main-image mb-5 rounded-4 overflow-hidden">
                     <img src="{{ asset($details->image) }}" class="w-100 img-fluid" alt="{{ $details->title }}">
                  </div>

                  <div class="blog-description leading-relaxed" style="font-size: 1.1rem; line-height: 1.8; color: #444;">
                     {!! $details->description !!}
                  </div>

                  <div class="mt-5 pt-4 border-top">
                     <h5 class="fw-bold mb-3">Share this post:</h5>
                     <div class="social-links d-flex gap-2">
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}" target="_blank"
                           class="btn btn-outline-primary btn-sm rounded-pill px-3"><i
                              class="fab fa-facebook-f me-2"></i>Facebook</a>
                        <a href="https://twitter.com/intent/tweet?url={{ url()->current() }}&text={{ $details->title }}"
                           target="_blank" class="btn btn-outline-info btn-sm rounded-pill px-3"><i
                              class="fab fa-twitter me-2"></i>Twitter</a>
                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url()->current() }}"
                           target="_blank" class="btn btn-outline-secondary btn-sm rounded-pill px-3"><i
                              class="fab fa-linkedin-in me-2"></i>LinkedIn</a>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </section>
@endsection

@push('css')
   <style>
      .leading-relaxed {
         line-height: 1.8;
      }

      .hover-primary:hover {
         color: #0d6efd !important;
      }

      .sticky-sidebar {
         position: sticky;
         top: 100px;
      }

      .blog-description img {
         max-width: 100%;
         height: auto;
         border-radius: 10px;
         margin: 20px 0;
      }

      @media (max-width: 991px) {
         .sticky-sidebar {
            position: relative;
            top: 0;
         }
      }
   </style>
@endpush