@extends('frontend.layouts.partials.app')

@section('title', 'Trainings')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')

{{-- Include Font Awesome and Alpine.js --}}
@push('head')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
@endpush

@section('content')

    {{-- HERO SECTION --}}
    <section>
        <div class="relative w-full h-[200px] sm:h-[300px] md:h-[400px] lg:h-[514px] flex justify-center items-center">
            <img src="{{ asset('assets/img/breadcrumb-about.jpg') }}" class="h-full w-full object-cover"
                alt="Trainings Banner" />
            <div class="absolute flex justify-center items-center w-full h-full bg-black/30">
                <div class="flex flex-col space-y-3 md:space-y-5 items-center text-white text-center px-4">
                    <p class="uppercase text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold animate-fade-in">
                        Trainings</p>
                    <div class="flex space-x-2 items-center text-sm sm:text-base md:text-lg">
                        <a href="/" class="capitalize font-semibold hover:underline">Home</a>
                        <span>>> </span>
                        <span class="text-white/70 font-bold">Trainings</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- TRAINING CARDS --}}
    <section class="lg:m-12 min-h-[90vh] flex flex-col justify-start p-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
            @forelse ($trainings as $training)
                @php
                    $file = $training->training_file;
                    $ext = pathinfo($file, PATHINFO_EXTENSION);
                    $icon = match ($ext) {
                        'pdf' => 'fas fa-file-pdf text-red-500',
                        'doc', 'docx' => 'fas fa-file-word text-blue-500',
                        'ppt', 'pptx' => 'fas fa-file-powerpoint text-yellow-500',
                        default => 'fas fa-file-alt text-gray-500',
                    };
                    $fileUrl = asset('storage/' . $file);
                @endphp
                <div x-data
                    class="w-full p-6 bg-white border border-gray-200 rounded-lg shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:scale-105 cursor-pointer"
                    @click="$dispatch('open-training', { url: '{{ $fileUrl }}' })">
                    <div class="flex items-center mb-4">
                        <i class="{{ $icon }} text-3xl"></i>
                        <h5 class="ml-4 text-xl font-bold text-gray-900">{{ $training->training_name }}</h5>
                    </div>
                    <p class="text-sm text-gray-500">Click to View</p>
                </div>
            @empty
                <div class="col-span-full text-center flex flex-col items-center justify-center h-64">
                    <h3 class="text-lg text-gray-500 mb-4">We're preparing new content for you. It will be available here
                        soon.</h3>
                </div>
            @endforelse
        </div>
    </section>

    {{-- MODAL --}}
    <div x-data="{ show: false, src: '' }"
        x-on:open-training.window="src = $event.detail.url.endsWith('.pdf') ? $event.detail.url : `https://docs.google.com/gview?url=${encodeURIComponent($event.detail.url)}&embedded=true`; show = true"
        x-show="show" x-transition.opacity class="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4"
        style="display: none" @click.self="show = false; src=''">
        <div class="bg-white w-full max-w-6xl rounded-xl shadow-lg relative h-[90vh]">
            {{-- CLOSE BUTTON --}}
            <button @click="show = false; src=''"
                class="absolute top-4 right-4 text-gray-600 hover:text-black text-xl">✕</button>
            {{-- IFRAME VIEWER --}}
            <iframe :src="src" width="100%" height="100%" class="rounded-b-xl border-none"></iframe>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        // Optional: Close modal with ESC key
        document.addEventListener('keydown', function(e) {
            if (e.key === "Escape") {
                document.querySelectorAll('[x-data]').forEach(modal => {
                    if (modal.__x && modal.__x.$data.show) {
                        modal.__x.$data.show = false;
                        modal.__x.$data.src = '';
                    }
                });
            }
        });
    </script>
@endpush