@extends('admin.layouts.layouts')

@section('content')
    <style>
        .blog-container {
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
            width: 50%;
        }

        .blog-title {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 20px;
            color: #007bff;
            text-align: center;
        }

        .blog-section {
            margin-bottom: 30px;
        }

        .blog-section label {
            font-weight: bold;
            color: #333;
            display: block;
            margin-bottom: 10px;
        }

        .blog-section p {
            margin: 0;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .blog-image {
            display: block;
            max-width: 100%;
            height: auto;
            margin-bottom: 20px;
            border-radius: 5px;
        }
    </style>

    <div class="blog-container">
        <h1 class="blog-title">View Blog</h1>

        <div class="blog-section">
            <label>Title One (Arabic):</label>
            <p>{{ $blog->title_one_ar }}</p>
        </div>

        <div class="blog-section">
            <label>Date:</label>
            <p>{{ $blog->date }}</p>
        </div>

        <div class="blog-section">
            <label>Description One:</label>
            <p>{{ $blog->desc_one }}</p>
        </div>

        <div class="blog-section">
            <label>Description One (Arabic):</label>
            <p>{{ $blog->desc_one_ar }}</p>
        </div>

        <div class="blog-section">
            <a href="{{ asset('storage/' . $blog->image) }}" target="_blank">
                <img src="{{ asset('storage/' . $blog->image) }}" alt="Blog Image" class="blog-image" style="height: 60px;">
            </a>
        </div>

        <div class="blog-section">
            <label>Text Button (English):</label>
            <p>{{ $blog->text_button_en }}</p>
        </div>

        <div class="blog-section">
            <label>Text Button (Arabic):</label>
            <p>{{ $blog->text_button_ar }}</p>
        </div>

        <div class="blog-section">
            <label>URL for Button:</label>
            <p><a href="{{ $blog->url_text_button }}">{{ $blog->url_text_button }}</a></p>
        </div>

        <div class="blog-section">
            <label>Creator Description (English):</label>
            <p>{{ $blog->creator_desc_en }}</p>
        </div>

        <div class="blog-section">
            <label>Creator Description (Arabic):</label>
            <p>{{ $blog->creator_desc_ar }}</p>
        </div>

        <div class="blog-section">
            <label>Creator (English):</label>
            <p>{{ $blog->creator_en }}</p>
        </div>

        <div class="blog-section">
            <label>Creator (Arabic):</label>
            <p>{{ $blog->creator_ar }}</p>
        </div>

        <div class="blog-section">
            <a href="{{ asset('storage/' . $blog->image_two) }}" target="_blank">
                <img src="{{ asset('storage/' . $blog->image_two) }}" alt="Second Blog Image" class="blog-image" style="height: 60px;">
            </a>
        </div>


        <div class="blog-section">
            <label>Title Two:</label>
            <p>{{ $blog->title_two }}</p>
        </div>

        <div class="blog-section">
            <label>Title Two (Arabic):</label>
            <p>{{ $blog->title_two_ar }}</p>
        </div>

        <div class="blog-section">
            <label>Description Two One:</label>
            <p>{{ $blog->desc_two_one }}</p>
        </div>

        <div class="blog-section">
            <label>Description Two One (Arabic):</label>
            <p>{{ $blog->desc_two_one_ar }}</p>
        </div>

        <div class="blog-section">
            <label>Title Three:</label>
            <p>{{ $blog->title_three }}</p>
        </div>

        <div class="blog-section">
            <label>Title Three (Arabic):</label>
            <p>{{ $blog->title_three_ar }}</p>
        </div>

        <div class="blog-section">
            <label>Description Three One:</label>
            <p>{{ $blog->desc_three_one }}</p>
        </div>

        <div class="blog-section">
            <label>Description Three One (Arabic):</label>
            <p>{{ $blog->desc_three_one_ar }}</p>
        </div>
        <button type="button" class="btn btn-primary" onclick="window.location.href='{{ route('admin.blogs.index') }}'">Back</button>
    </div>
@endsection