@extends('guest.layouts.app')
@section('content')
    <div class="row">
        <div class="col-lg-9">
            <div class="col-12 my-2">
                {{-- <div class="style-msg primarymsg mb-3">
                    <div class="sb-msg"><i class="bi-question-circle-sign"></i>Dalam <strong>Unduhan</strong></div>
                </div> --}}
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" style="font-size: 11pt" border="0">
                        <tr>
                            <td width="13%"><strong>Kegiatan</strong></td>
                            <td>{{ $data->judul ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td><strong>Tanggal</strong></td>
                            <td>{{ tanggal_indo($data->tanggal_publish) }}</td>
                        </tr>
                        <tr>
                            <td><strong>Deskripsi</strong></td>
                            <td>{{ $data->deskripsi ?? '-' }}</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="mt-0">
                <div class="fancy-title title-center title-border mb-4">
                    <h3>Foto Kegiatan</h3>
                </div>
                @if ($foto->isNotEmpty())
                    <div class="-container row row-cols-3 g-3" data-big="3" data-lightbox="gallery">
                        @foreach ($foto as $res)
                            <a class="grid-item" href="{{ $res->file ? asset('storage/'.$res->file) : asset('default.jpg') }}" data-lightbox="gallery-item"><img
                                     src="{{ $res->file ? asset('storage/'.$res->file) : asset('default.jpg') }}" onerror="this.src='{{ asset('default.jpg') }}'" alt="thumb"></a>
                        @endforeach
                    </div>
                @else
                    <span>Belum Ada Data</span>
                @endif
            </div>
        </div>
        <div class="col-lg-3 sticky-sidebar-wrap mt-0 mt-lg-0">
            <div class="sticky-sidebar">
                <x-guest.skm></x-guest.skm>
                <x-guest.sosial-media></x-guest.sosial-media>
                <x-guest.kategori></x-guest.kategori>
                <x-guest.link></x-guest.link>
            </div>
        </div>
    </div>
@endsection