@extends('website.layouts.app')

@section('content')

    @include('website.layouts.title_section')
    
    <section class="edu-materials-page my-4 my-md-5">
        <div class="container">
            <div class="row g-3 g-xl-4">
                @foreach($VedicMaterials as $index => $row)
                <div class="col-xl-6">
                    <div class="info-card d-flex flex-column flex-sm-row align-items-center gap-3 bg-white border rounded-3 shadow-sm p-3">
                        @if($row->type === 'image')
                            <img src="{{ url('storage/' . $row->file_url) }}" height="140" class="img-fluid" alt="{{ $row->title }}">
                        @elseif($row->type === 'pdf')
                            <a href="{{ url('storage/' . $row->file_url) }}" target="_blank">
                                <img src="{{ url('assets/images/pdf.png')}}" height="140" class="img-fluid" alt="{{ $row->title }}">
                            </a>
                        @elseif($row->type === 'video')
                            <video width="250" height="170" controls>
                                <source src="{{ url('storage/' . $row->file_url) }}" type="video/mp4">
                            </video>
                        @elseif($row->type === 'youtube_link')
                            <iframe width="250" height="170" src="{{ $row->file_url }}" frameborder="0" allowfullscreen></iframe>
                        @endif

                        <div class="info-wrapper">
                            <h5 class="title-name fs-5 fw-bold text-black mb-2">{{ $row->title }}</h5>
                            <p class="description fs-6 text-black text-opacity-75 mb-3">
                                {!! Str::limit($row->description, 170) !!}
                            </p>
                            <button class="btn btn-custom btn-primary" data-bs-toggle="modal" data-bs-target="#modal{{ $index }}">
                                View Details <i class="bi bi-arrow-right-circle-fill"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Modal for each item -->
                <div class="modal fade" id="modal{{ $index }}" tabindex="-1">
                    <div class="modal-dialog modal-lg modal-dialog-centered">
                        <div class="modal-content rounded-4 overflow-hidden">
                            <div class="modal-header bg-secondary bg-opacity-10">
                                <h5 class="modal-title fs-5 fw-bold text-black lh-sm">{{ $row->title }}</h5>
                                <button class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body pb-4">
                                @if($row->type === 'image')
                                    <img src="{{ url('storage/' . $row->file_url) }}" class="img-fluid w-100 object-fit-cover rounded-1 mb-3" />
                                @elseif($row->type === 'pdf')
                                    <iframe src="{{ url('storage/' . $row->file_url) }}" width="100%" height="500px"></iframe>
                                @elseif($row->type === 'video')
                                    <video class="d-block" width="100%" controls>
                                        <source src="{{ url('storage/' . $row->file_url) }}" type="video/mp4">
                                    </video>
                                @elseif($row->type === 'youtube_link')
                                    <div class="ratio ratio-16x9 mb-3">
                                        <iframe src="{{ $row->file_url }}" allowfullscreen></iframe>
                                    </div>
                                @endif

                                <div class="description text-black text-opacity-75 mb-2">
                                    {!! $row->description !!}
                                </div>

                                <div class="download-btns d-flex flex-column flex-sm-row flex-wrap gap-2 mt-3">
                                    @if(in_array($row->type, ['pdf', 'video', 'image']))
                                        <a href="{{ url('storage/' . $row->file_url) }}" class="btn btn-primary rounded-2 px-3 py-2" download>
                                            <i class="bi bi-download"></i> Download {{ ucfirst($row->type) }}
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>


@endsection