@extends('admin.layout.header')
@section('content')

<!-- partial -->
<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 stretch-card">
                <div class="card">
                    <div class="card-body">
                        <p class="card-title">Blogs</p>
                        <!-- Add Blog button -->
                        <div class="text-right mb-4">
                            <a href="{{ route('viewblogform') }}" class="btn btn-primary">Add Blog</a>
                        </div>


                        <!-- Display success message if a blog was added -->
                        @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                        @endif

                        <!-- Check if there are any blogs to display -->
                        @if($blog->isEmpty())
                        <p>No blogs available.</p>
                        @else
                        <div class="row">
                            <!-- Loop through each blog and display its content -->
                            @foreach($blog as $blog)
                            <div class="col-md-12 mb-4"> <!-- Make card full width -->
                                <div class="card blog-card h-100"> <!-- Add h-100 class for full height -->
                                    <!-- Blog image 1 with inline styles -->
                                    <img src="{{ asset($blog->image1) }}" style="width: 30%; height: auto; object-fit: cover;" class="card-img-top" alt="Blog Image 1">

                                    <div class="card-body">
                                        <p class="card-text">{{ Str::limit($blog->paragraph1, 100) }}</p>
                                        <p class="card-text">{{ Str::limit($blog->paragraph2, 100) }}</p>
                                        <p class="card-text">{{ Str::limit($blog->paragraph3, 100) }}</p>

                                        <!-- Blog title1 and paragraph1 -->
                                        <h5 class="card-title">{{ $blog->title1 }}</h5>
                                        <img src="{{ asset($blog->image3) }}" class="img-fluid mt-3" alt="Blog Image 3" style="height: 200px; object-fit: cover;">
                                        <p class="card-text">{{ $blog->title1_p }}</p>
                                        <p class="card-text">{{ $blog->title1_pb }}</p>

                                        <!-- Display Title1 Content as an Array -->
                                        <h6>Title 1 Content</h6>
                                        @if($blog->title1_content)
                                        @foreach(json_decode($blog->title1_content, true) as $content)
                                        <p>{{ $content }}</p>
                                        @endforeach
                                        @endif

                                        <!-- Blog title2 and paragraph2 -->
                                        <h5 class="card-title">{{ $blog->title2 }}</h5>
                                        <img src="{{ asset($blog->image2) }}" class="img-fluid mt-3" alt="Blog Image 2" style="height: 200px; object-fit: cover;">
                                        <p class="card-text">{{ $blog->title2_p }}</p>
                                        <p class="card-text">{{ $blog->title2_pb }}</p>

                                        <!-- Display Title2 Content as an Array -->
                                        <h6>Title 2 Content</h6>
                                        @if($blog->title2_content)
                                        @foreach(json_decode($blog->title2_content, true) as $content)
                                        <p>{{ $content }}</p>
                                        @endforeach
                                        @endif

                                        <!-- 3 cards -->
                                        <h6 class="mt-3">Card 1: {{ $blog->card1 }}</h6>
                                        <p class="card-text">{{ Str::limit($blog->card1_content, 100) }}</p>

                                        <h6>Card 2: {{ $blog->card2 }}</h6>
                                        <p class="card-text">{{ Str::limit($blog->card2_content, 100) }}</p>

                                        <h6>Card 3: {{ $blog->card3 }}</h6>
                                        <p class="card-text">{{ Str::limit($blog->card3_content, 100) }}</p>

                                        <!-- Delete Form and Edit Button -->
                                        <div class="d-flex justify-content-between mt-3">
                                            <a href="{{ route('editblog', $blog->id) }}" class="btn btn-primary" title="Edit">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>

                                            <form action="{{ route('deleteBlog', $blog->id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger">Delete</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- content-wrapper ends -->
    <!-- partial:partials/_footer.html -->
    @endsection