@extends('frontend.master')

@section('page_title', 'About KYAMC Journal')

@section('frontend_content')
    <!-- Inner Page Header -->
    <section class="inner-page-header py-4 mb-4 bg-theme-primary text-white">
        <div class="container">
            <h2 class="fw-semibold mb-0">About the Journal</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mt-2 mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"
                            class="text-white-50 text-decoration-none">Home</a></li>
                    <li class="breadcrumb-item"><span class="text-white-50">Journal Info</span></li>
                    <li class="breadcrumb-item active text-white" aria-current="page">About the Journal</li>
                </ol>
            </nav>
        </div>
    </section>

    <!-- Main Content Area -->
    <main class="container my-5 flex-grow-1">
        <div class="row gx-5">

            <!-- Left Content Column -->
            <div class="col-lg-8 mb-5">
                <div class="content-wrapper bg-white p-4 p-md-5 rounded-3 shadow-sm border border-light">

                    @if($about)
                        <!-- Dynamic Title -->
                        <h2 class="fw-semibold text-theme-primary mb-4 border-bottom pb-2">{{ $about->title }}</h2>

                        <!-- Dynamic CKEditor Content -->

                        <div class="text-muted lh-lg ck-content">
                            {!! $about->description !!}
                        </div>
                    @else
                        <!-- Fallback if database is empty -->
                        <div class="text-center py-5">
                            <h3 class="text-muted">Content Coming Soon</h3>
                            <p class="text-muted">The about information is currently being updated.</p>
                        </div>
                    @endif

                </div>
            </div>

            <!-- Right Sidebar Column -->
            <div class="col-lg-4">
                <!-- Journal Details Card -->
                <div class="card border-0 shadow-sm rounded-3 mb-4">
                    <div class="card-header bg-theme-primary text-white py-3 fw-medium">
                        Journal Details
                    </div>
                    <ul class="list-group list-group-flush text-muted small">
                        <li class="list-group-item py-3">
                            <strong class="text-dark d-block mb-1">Publisher:</strong>
                            Khwaja Yunus Ali Medical College
                        </li>
                        <li class="list-group-item py-3">
                            <strong class="text-dark d-block mb-1">Format:</strong>
                            Online and Print
                        </li>
                        <li class="list-group-item py-3">
                            <strong class="text-dark d-block mb-1">ISSN (Online):</strong>
                            2308-2860
                        </li>
                        <li class="list-group-item py-3">
                            <strong class="text-dark d-block mb-1">ISSN (Print):</strong>
                            2308-2720
                        </li>
                        <li class="list-group-item py-3">
                            <strong class="text-dark d-block mb-1">Language:</strong>
                            English
                        </li>
                    </ul>
                </div>

                <!-- Contact Card -->
                <div class="card border-0 shadow-sm rounded-3">
                    <div class="card-body bg-light p-4">
                        <h5 class="fw-semibold text-dark mb-3">Contact the Editorial Office</h5>
                        <p class="text-muted small mb-3">
                            For any inquiries regarding submissions or journal policies, please reach out to our support
                            team.
                        </p>
                        <a href="mailto:editor@kyamc.edu.bd" class="btn btn-outline-theme w-100 fw-medium">Email Editorial
                            Office</a>
                    </div>
                </div>
            </div>

        </div>
    </main>

@endsection