@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>


<!-- <div class="breadcumb-wrapper" data-bg-src="{{asset('frontend')}}/assets/img/bg/breadcumb-bg.jpg" data-overlay="title" data-opacity="8">

    <div class="shape-mockup breadcumb-shape2 jump d-lg-block d-none" data-right="30px" data-bottom="30px"><img
            src="{{asset('frontend')}}/assets/img/bg/breadcumb_shape_1_2.png" alt="shape"></div>
    <div class="shape-mockup breadcumb-shape3 jump-reverse d-lg-block d-none" data-left="50px" data-bottom="80px">
        <img src="{{asset('frontend')}}/assets/img/bg/breadcumb_shape_1_3.png" alt="shape"></div>
    <div class="container">
        <div class="breadcumb-content text-center">
            <h1 class="breadcumb-title">Notes</h1>
            <ul class="breadcumb-menu">
                <li><a href="index.html">Home</a></li>
                <li>Medicine</li>
            </ul>
        </div>
    </div>
</div> -->

<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)">Medical</p>
            <p class="text-center" style="font-size:17px; color:black">A collection of medical 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 ($subs 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.details', $note->id)}}" style="cursor: pointer">
                            <img style="width:100%; height:200px" class="mb-3" src="{{ asset('frontend/assets/images/blog/' . $note->image) }}" alt="Note Image"/>
                        <p style="margin-top: -140px; margin-left:100px; font-size:19px; font-weight:700; color:rgb(87, 5, 124);">{{$note->name}}</p>
                        </a>

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





        </div>

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