@extends('frontend.layouts.app')


@section('content')


<!-- <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 class="th-blog-wrapper">
    <div class="container">
      <div class="row p-5">
        <div class="col-xxl-12 col-lg-12 col-md-12 col-sm-12">
        <p class="text-center p-0 mb-1" style="font-size:25px">Medical</p>
            <p class="text-center" style="font-size:17px">A collection of medical revision notes covering a broad range of medical topics.</p>
            <hr class="mb-4">


            <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: -130px; margin-left:140px; color:white">{{$note->name}}</p>
                        </a>

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





        </div>

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