@extends('frontend.layouts.app')


@section('content')
<style>
    .custom-container {
        height: 150px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("{{ asset('/frontend/assets/images/back.jpg') }}");

        background-size: cover;
        /* Ensures the image covers the entire section */
        background-position: center;
        /* Centers the image */
        background-repeat: no-repeat;
        /* Prevents the image from repeating */
        column-gap: 30px;
        opacity: 90%;

    }
</style>




<section style="background:#f1f5fd;" class="th-blog-wrapper">
    <div class="custom-container">
        <div style="text-align:center">
        <p class="text-center p-0 mb-1 mt-4" style="font-size:29px; color:rgb(2, 197, 187)">{{$note_title->note}}</p>
        <p class="text-center" style="font-size:17px; color:black">A collection of {{$note_title->note}} revision notes covering a broad range of medical topics.</p>
        </div>
    
    </div>
    <div   class="container">
      <div  class="row p-5">
        <div class="col-xxl-12 col-lg-12 col-md-12 col-sm-12">
            
           



            <div class="row mb-5">
                @forelse ($bolgCats as $note)
                    <div style="margin-bottom:102px" class="col-xxl-3 col-lg-3 col-md-4 col-sm-12">
                        <a href="{{route('frontend.note.subcategory', $note->id)}}" style="cursor: pointer">
                            <img style="width:250; height:200px; border-radius:4px" class="mb-3" src="{{ asset('frontend/assets/images/blog/' . $note->image) }}" alt="Note Image"/>
                        <p style="margin-top: -140px; margin-left:100px; color:rgb(87, 5, 124); font-size:19px; font-weight:700">{{$note->name}}</p>
                        </a>

                    </div>
                @empty
                    <p>No notes available.</p>
                @endforelse
            </div>





        </div>

      </div>
    </div>
  </section>
@endsection