@section('title', 'Brosur')

@extends('Frontend.Layouts.app2')

@section('content')
<br><br>
    <x-header-section-page title="Brosur {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}" breadcrumb-home="Home" breadcrumb-current="Brosur" />

    <div class="py-16">
        <div class="container mx-auto px-4 lg:px-16">
            <!-- Heading -->
            <div class="text-center mb-12">
                <p class="text-gray-600 font-dmsans text-lg">
                Unduh brosur {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }} untuk menjelajahi program studi, fasilitas, dan layanan terbaik yang siap mendukung perjalanan akademik Anda
                </p>
            </div>

            <!-- Brosur Gallery -->
            <!-- Brosur Gallery -->
<div class="flex flex-wrap justify-center gap-8">
    @if($brosurDepan)
        <div class="bg-white shadow-lg rounded-lg overflow-hidden flex flex-col items-center">
            <img src="{{ asset('storage/brosurFiles/' . $brosurDepan->file) }}" alt="Brosur Depan" class="w-full h-64 object-cover">
            <div class="p-6 text-center">
                <h3 class="text-lg font-poppins font-bold text-primary mb-2">Brosur {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}</h3>
                <p class="text-sm text-gray-600 mb-4">Format {{ pathinfo($brosurDepan->file, PATHINFO_EXTENSION) }}</p>
                <a href="{{ asset('storage/brosurFiles/' . $brosurDepan->file) }}" download class="bg-primary text-white py-2 px-4 rounded-md hover:bg-accent transition">
                    <i class="fas fa-download mr-2"></i>Download
                </a>
            </div>
        </div>
    @endif

    @if($brosurBelakang)
        <div class="bg-white shadow-lg rounded-lg overflow-hidden flex flex-col items-center">
            <img src="{{ asset('storage/brosurFiles/' . $brosurBelakang->file) }}" alt="Brosur Belakang" class="w-full h-64 object-cover">
            <div class="p-6 text-center">
                <h3 class="text-lg font-poppins font-bold text-primary mb-2">Brosur {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}</h3>
                <p class="text-sm text-gray-600 mb-4">Format {{ pathinfo($brosurBelakang->file, PATHINFO_EXTENSION) }}</p>
                <a href="{{ asset('storage/brosurFiles/' . $brosurBelakang->file) }}" download class="bg-primary text-white py-2 px-4 rounded-md hover:bg-accent transition">
                    <i class="fas fa-download mr-2"></i>Download
                </a>
            </div>
        </div>
    @endif
</div>


            <!-- Bagian Unduh Semua -->
            <div class="flex justify-center mt-12">
                <button onclick="downloadAllBrosur()" style="color:#fff"
                    class="bg-accent  py-3 px-6 rounded-md font-poppins font-bold hover:bg-accent transition">
                    <i class="fas fa-download mr-2"></i>Unduh Semua Brosur
                </button>
            </div>
        </div>
    </div>

<script>
    async function downloadAllBrosur() {
        const urls = [
            @if($brosurDepan) '{{ asset('storage/brosurFiles/' . $brosurDepan->file) }}', @endif
            @if($brosurBelakang) '{{ asset('storage/brosurFiles/' . $brosurBelakang->file) }}' @endif
        ];

        for (const url of urls) {
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', '');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
</script>
@endsection