@extends($activeTemplate . 'layouts.master')
@section('content')
    @push('style')
    <style>
        /* Styling the blackboard */
        .blackboard {
          background-color: #2d2d2d; /* Dark gray for chalkboard feel */
          border: 5px solid #333;
          border-radius: 8px;
          padding: 20px;
          color: #e0e0e0; /* Chalk white text color */
          font-family: 'Courier New', Courier, monospace;
          font-size: 1.2em;
          line-height: 1.5;
          max-width: 100%;
          min-height: 100%;
          margin: 20px auto;
          box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
          position: relative;
        }

        /* Blackboard pseudo-element for texture */
        .blackboard::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url('https://www.transparenttextures.com/patterns/dark-geometric.png') repeat;
          opacity: 0.2;
          pointer-events: none;
          z-index: 1;
        }

        /* Content within blackboard */
        .blackboard-content {
          z-index: 2;
          position: relative;
          width="100%";
          height="100%";
        }

        /* Button styling */
        .btn {
          display: block;
          width: fit-content;
          padding: 10px 15px;
          margin: 15px auto;
          background-color: #6d6d6d;
          border: none;
          border-radius: 4px;
          color: #fff;
          font-weight: bold;
          cursor: pointer;
        }

        .btn:hover {
          background-color: #5a5a5a;
        }
      </style>
    @endpush
    <div class="transaction-section padding-top padding-bottom">
        <div class="container">


                <header>
                    <h3 class="text-center">Notice Board</h3>
                </header>

                <div class="container-fluid">
                    @if($notice)
                        <div class="blackboard">
                            <div class="blackboard-content" style="color: white">
                                {!! $notice->body !!}
                            </div>
                        </div>
                    @else
                        <div class="blackboard">
                            <div class="blackboard-content text-center" style="color: white">
                                <p>{{ $pageTitle }}</p>
                            </div>
                        </div>
                    @endif
                </div>

            </div>
        </div>
    @endsection

