@extends('admin.layouts.app')

@section('title', 'Detail Galeri')

@section('content')
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2 class="mb-0">Detail Foto Galeri</h2>
            <div class="d-flex gap-2">
                <a href="{{ route('admin.galeri.edit', $galeri) }}" class="btn btn-warning">
                    <i class="fas fa-edit me-2"></i>Edit
                </a>
                <a href="{{ route('admin.galeri.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Kembali
                </a>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-image text-primary me-2"></i>
                            <h5 class="mb-0">{{ $galeri->judul }}</h5>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            @if($galeri->is_active ?? true)
                                <span class="badge bg-success">
                                    <i class="fas fa-eye me-1"></i>Aktif
                                </span>
                            @else
                                <span class="badge bg-danger">
                                    <i class="fas fa-eye-slash me-1"></i>Tidak Aktif
                                </span>
                            @endif
                            @if($galeri->kategori)
                                <span class="badge bg-primary">{{ $galeri->kategori }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if($galeri->gambar)
                        <div class="text-center mb-4">
                            <img src="{{ asset($galeri->gambar) }}" 
                                 alt="{{ $galeri->judul }}" 
                                 class="img-fluid rounded shadow-sm"
                                 style="max-height: 500px; cursor: pointer;"
                                 onclick="openImageModal('{{ asset($galeri->gambar) }}', '{{ $galeri->judul }}')">
                            <p class="text-muted mt-2 small">
                                <i class="fas fa-info-circle me-1"></i>
                                Klik gambar untuk melihat ukuran penuh
                            </p>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-image fa-4x text-muted mb-3"></i>
                            <p class="text-muted">Tidak ada gambar</p>
                        </div>
                    @endif

                    @if($galeri->deskripsi)
                        <div class="mb-4">
                            <h6 class="fw-bold">Deskripsi:</h6>
                            <p class="text-muted">{{ $galeri->deskripsi }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Informasi Detail
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>ID:</strong>
                        </div>
                        <div class="col-7">
                            #{{ $galeri->id }}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Judul:</strong>
                        </div>
                        <div class="col-7">
                            {{ $galeri->judul }}
                        </div>
                    </div>

                    @if($galeri->kategori)
                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Kategori:</strong>
                        </div>
                        <div class="col-7">
                            <span class="badge bg-primary">{{ $galeri->kategori }}</span>
                        </div>
                    </div>
                    @endif

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Urutan:</strong>
                        </div>
                        <div class="col-7">
                            {{ $galeri->urutan ?? '-' }}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Status:</strong>
                        </div>
                        <div class="col-7">
                            @if($galeri->is_active ?? true)
                                <span class="badge bg-success">Aktif</span>
                            @else
                                <span class="badge bg-danger">Tidak Aktif</span>
                            @endif
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Dibuat:</strong>
                        </div>
                        <div class="col-7">
                            <small>{{ $galeri->created_at->format('d/m/Y H:i') }}</small>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-5">
                            <strong>Diupdate:</strong>
                        </div>
                        <div class="col-7">
                            <small>{{ $galeri->updated_at->format('d/m/Y H:i') }}</small>
                        </div>
                    </div>

                    @if($galeri->gambar && file_exists(public_path($galeri->gambar)))
                        @php
                            $fileSize = round(filesize(public_path($galeri->gambar)) / 1024, 2);
                            $imageInfo = getimagesize(public_path($galeri->gambar));
                        @endphp
                        <div class="row mb-3">
                            <div class="col-5">
                                <strong>Ukuran File:</strong>
                            </div>
                            <div class="col-7">
                                <small>{{ $fileSize }} KB</small>
                            </div>
                        </div>

                        @if($imageInfo)
                        <div class="row mb-3">
                            <div class="col-5">
                                <strong>Dimensi:</strong>
                            </div>
                            <div class="col-7">
                                <small>{{ $imageInfo[0] }} x {{ $imageInfo[1] }} px</small>
                            </div>
                        </div>
                        @endif
                    @endif
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-cogs me-2"></i>Aksi
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('admin.galeri.edit', $galeri) }}" class="btn btn-warning">
                            <i class="fas fa-edit me-2"></i>Edit Galeri
                        </a>
                        
                        @if($galeri->gambar)
                            <a href="{{ asset($galeri->gambar) }}" download class="btn btn-info">
                                <i class="fas fa-download me-2"></i>Download Gambar
                            </a>
                        @endif
                        
                        <form action="{{ route('admin.galeri.destroy', $galeri) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus galeri ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="fas fa-trash me-2"></i>Hapus Galeri
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="imageModalTitle">Preview Gambar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <img id="modalImage" src="" alt="" class="img-fluid">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                <a id="downloadModalImage" href="" download class="btn btn-primary">
                    <i class="fas fa-download me-2"></i>Download
                </a>
            </div>
        </div>
    </div>
</div>

<script>
function openImageModal(imageSrc, imageTitle) {
    document.getElementById('modalImage').src = imageSrc;
    document.getElementById('imageModalTitle').textContent = imageTitle;
    document.getElementById('downloadModalImage').href = imageSrc;
    
    const modal = new bootstrap.Modal(document.getElementById('imageModal'));
    modal.show();
}
</script>
@endsection