@extends('layouts.app')

@section('styles')
<link href="{{ asset('theme/js/plugins/magnific-popup/magnific-popup.css') }}" rel="stylesheet">
<style>
    .pdf-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
    }

    .pdf-item {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-left: 4px solid #e74c3c;
    }

    .pdf-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    }

    .pdf-item .pdf-icon {
        font-size: 40px;
        color: #e74c3c;
        margin-bottom: 10px;
    }

    .pdf-item h6 {
        margin: 0 0 5px 0;
        color: #333;
        font-weight: 500;
    }

    .pdf-item p {
        margin: 0;
        color: #666;
        font-size: 14px;
    }

    .pdf-actions {
        margin-top: 15px;
        display: flex;
        gap: 10px;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #666;
    }

    .empty-state i {
        font-size: 60px;
        color: #ddd;
        margin-bottom: 20px;
    }

    .empty-state h5 {
        margin: 0 0 10px 0;
        color: #999;
    }

    .empty-state p {
        margin: 0;
        color: #bbb;
    }
</style>
@endsection

@section('content')
<div class="row">
    <div class="col s12 m12 l12">
        <div class="card">
            <div class="card-content">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="card-title">Galeri Foto Kondisi Sarpras Rawa</span>
                    <a href="{{ route('sarpras-rawa.show', $sarpras->id) }}" class="btn waves-effect waves-light grey right">
                        <i class="mdi-navigation-arrow-back"></i> Kembali
                    </a>
                </div>
                <div class="row">
                    <div class="col s12 m12 l12">
                        <div class="masonry-gallery-wrapper">
                            <div class="popup-gallery">
                                <div class="gallary-sizer"></div>
                                @foreach($dokumenImages as $index => $dokumen)
                                    <div class="gallary-item">
                                        <a href="{{ asset('storage/dokumen_kondisi_rawa/' . $dokumen->file_dokumen) }}" title="Foto Kondisi Sarpras Rawa">
                                            <img src="{{ asset('storage/dokumen_kondisi_rawa/' . $dokumen->file_dokumen) }}">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col s12 m12 l12">
        <div class="card">
            <div class="card-content">
                <div class="d-flex justify-content-between align-items-center">
                    <span class="card-title">Dokumen Kondisi Sarpras Rawa</span>
                </div>
                <div class="row">
                    <div class="col s12 m12 l12">
                        @if($dokumenPdfs->count() > 0)
                            <div class="pdf-list">
                                @foreach($dokumenPdfs as $index => $dokumen)
                                    <div class="pdf-item">
                                        <div class="pdf-icon">
                                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                                <path d="M14 2V8H20" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                                <path d="M9 13H15" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                                <path d="M9 17H15" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                                <path d="M9 9H10" stroke="#e74c3c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                            </svg>
                                        </div>
                                        <p>{{ $dokumen->file_dokumen }}</p>
                                        <div class="pdf-actions">
                                            <a href="{{ asset('storage/dokumen_kondisi_rawa/' . $dokumen->file_dokumen) }}"
                                                target="_blank"
                                                class="btn waves-effect waves-light blue">
                                                <i class="mdi-action-open-in-browser"></i> Buka
                                            </a>
                                            <a href="{{ asset('storage/dokumen_kondisi_rawa/' . $dokumen->file_dokumen) }}"
                                                download="{{ $dokumen->file_dokumen }}"
                                                class="btn waves-effect waves-light green">
                                                <i class="mdi-file-file-download"></i> Download
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="empty-state">
                                <svg width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                    <path d="M14 2V8H20" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                    <path d="M9 13H15" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                    <path d="M9 17H15" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                    <path d="M9 9H10" stroke="#ddd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                </svg>
                                <h5>Tidak ada dokumen PDF</h5>
                                <p>Belum ada dokumen PDF yang diunggah untuk kondisi ini</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- masonry -->
<script src="{{ asset('theme/js/plugins/masonry.pkgd.min.js') }}"></script>
<!-- imagesloaded -->
<script src="{{ asset('theme/js/plugins/imagesloaded.pkgd.min.js') }}"></script>
<!-- magnific-popup -->
<script type="text/javascript" src="{{ asset('theme/js/plugins/magnific-popup/jquery.magnific-popup.min.js') }}"></script>

<script type="text/javascript">
    var $containerGallery = $(".masonry-gallery-wrapper");
    $containerGallery.imagesLoaded(function() {
        $containerGallery.masonry({
            itemSelector: '.gallary-item img',
            columnWidth: '.gallary-sizer',
            isFitWidth: true
        });
    });

    //popup-gallery
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        closeOnContentClick: true,
        fixedContentPos: true,
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile mfp-no-margins mfp-with-zoom',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1]
        },
        image: {
            verticalFit: true,
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {

            },
            zoom: {
                enabled: true,
                duration: 300
            }
        }
    });
</script>
@endpush