@extends('layouts.public')
@section('title', 'KDA Press | Kenya Diaspora Alliance')
@section('content')

    <div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="page-header-inner text-center">
                        <h1 class="page-title">
                            Press
                        </h1>
                        <ul>
                            <li>
                                <a class="active" href="{{ route('welcome') }}">Home</a>
                            </li>
                            <li>Press</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="gallery" class="section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section-title-header text-center">
                        <h2 class="section-title wow fadeInUp" data-wow-delay="0.2s">
                            Resource Library
                        </h2>
                        <p class="wow fadeInDown" data-wow-delay="0.2s">
                            Explore our diverse media hub—access audio, video, and more. Discover music, podcasts, and <br>
                            interviews in our user-friendly library. Play, and listen to a variety of media
                            content.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row g-3">
                @if (isset($resources) && count($resources) > 0)
                    @foreach ($resources as $resource)
                        <div class="col-md-6 col-lg-4 " style="cursor: pointer;">
                            <div class="card shadow rounded-2 border-0 p-0">
                                <div class="card-body p-1 ">
                                    <div class="d-flex align-items-start ">
                                        <div>
                                            @if ($resource->file_type == 'audio')
                                                <i class="bi bi-music-note-beamed fs-2"></i>
                                            @else
                                                <i class="bi bi-camera-reels fs-2"></i>
                                            @endif
                                        </div>
                                        <div class="ms-3">
                                            <div>{{ $resource->description }}</div>
                                            <small>{{ date('jS M Y', strtotime($resource->created_at)) }}</small>
                                        </div>
                                    </div>
                                    <div class="img-fluid px-0 overflow-x-auto ">
                                        @if ($resource->file_type == 'audio')
                                            <audio controls>
                                                <source src="{{ asset('storage/resource/' . $resource->file) }}"
                                                    type="audio/mpeg" class="">
                                                Your browser does not support the audio element.
                                            </audio>
                                        @else
                                        @endif
                                    </div>
                                </div>
                                <div class="cad-body d-none ">
                                    <div class="d-flex">
                                        <div>
                                            @if ($resource->file_type == 'audio')
                                                <i class="bi bi-music-note-beamed fs-1"></i>
                                            @else
                                                <i class="bi bi-camera-reels fs-1"></i>
                                            @endif
                                        </div>
                                        <div class="ms-3">
                                            <div>{{ $resource->description }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-12">
                        <div class="p-3">
                            <button class="btn border-0" type="button" disabled>
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                No resources found currently
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </section>
@endsection