@extends($activeTemplate . 'layouts.master')
@section('content')
<div class="transaction-section padding-top padding-bottom">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12 mb-3">
                <a href="{{ route('user.noticeBoard') }}" class="btn btn--primary btn-sm"><i class="las la-arrow-left"></i> @lang('Return')</a>
            </div>
            <div class="row mt-5">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    <h1 class="" style="font-family: 'Noto Serif'">{{ $notice->title }}</h1>
                    <div class="wysiwyg-content" >{!! $notice->body !!}</div>
                    <h5 class="mt-5"> <strong >@lang('Published At')</strong> :<span class="text-muted"> {{ $notice->published_at->format('d M Y') }} </span></h5>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection


@push('style')
<style>
    .wysiwyg-content {
        margin-top: 1rem;
    /* font-family: 'Arial', sans-serif; */
    line-height: 1.6;
    color: #333;
}

.wysiwyg-content h1,
.wysiwyg-content h2,
.wysiwyg-content h3,
.wysiwyg-content h4,
.wysiwyg-content h5,
.wysiwyg-content h6 {
    font-family: 'Georgia', serif;
    margin-bottom: 15px;
    color: #222;
}

.wysiwyg-content h1 {
    font-size: 2.5em;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

.wysiwyg-content h2 {
    font-size: 2em;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
}

.wysiwyg-content h3 {
    font-size: 1.75em;
}

.wysiwyg-content p {
    margin-bottom: 20px;
    font-size: 1.1em;
}

.wysiwyg-content ul,
.wysiwyg-content ol {
    margin: 20px 0;
    padding-left: 40px;
}

.wysiwyg-content ul {
    list-style-type: disc;
}

.wysiwyg-content ol {
    list-style-type: decimal;
}

.wysiwyg-content blockquote {
    margin: 20px 0;
    padding: 15px;
    background-color: #f1f1f1;
    border-left: 5px solid #ccc;
    font-style: italic;
}

.wysiwyg-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    display: block;
}

.wysiwyg-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.wysiwyg-content table,
.wysiwyg-content th,
.wysiwyg-content td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.wysiwyg-content th {
    background-color: #f4f4f4;
}

.wysiwyg-content a {
    color: #3498db;
    text-decoration: none;
}

.wysiwyg-content a:hover {
    text-decoration: underline;
}

</style>
@endpush
