@extends('view.public.layouts.app')
@section('content')
<!--SIDE NAVIGASI-->
<div class="container-fluid">
    <div class="row pospage bg-green">
        <div class="container">
            <a href="#" class="pospage_link">Beranda</a><i class="icofont-thin-right"></i>
            <a href="#" class="pospage_link">Dokumentasi</a><i class="icofont-thin-right"></i>
            <a href="#" class="pospage_link">Foto</a><i class="icofont-thin-right"></i>
            <a href="#" class="pospage_link">{{$data->nama}}</a>
        </div>
    </div>
</div>
<!--SIDE NAVIGASI-->
<div class="container">
    <div class="row marginside">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <div class="heading heading-left">
                        <p class="heading_text">Detail Album Foto</p>
                        <hr class="heading_hr2">
                        <hr class="heading_hr">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="detailfoto">
                        <i class="detailfoto_date">{{$data->created_at->format('d, M Y')}}</i>
                        <i class="detailfoto_tittle">{{$data->nama}} ({{$data->file->count()}} foto)</i>
                    </div>
                </div>
            </div>
            <div class="row">
                @forelse($data->file as $foto)
                <div class="col-md-3">
                    <div class="foto">
                        <img src="{{asset('uploads/'.$foto->filename)}}" alt="" class="foto_image">
                        <div class="foto_frame text-center">
                            <a href="{{asset('uploads/'.$foto->filename)}}" data-lightbox="image-4" class="foto_zoom" data-title="My caption"><i class="icofont-ui-zoom-in"></i></a>
                        </div>
                    </div>
                </div>
                @empty
                Data Foto Kosong
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true
    })
</script>
@endsection