@extends('admin.layouts.app')

@section('title', 'Kelola 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">Kelola Galeri Desa</h2>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-primary" onclick="toggleView()">
                    <i class="fas fa-th-large" id="viewIcon"></i>
                    <span id="viewText">Grid View</span>
                </button>
                <a href="{{ route('admin.galeri.create') }}" class="btn btn-success">
                    <i class="fas fa-plus me-2"></i>Tambah Foto
                </a>
            </div>
        </div>
    </div>

    <!-- Summary Stats -->
    @if(isset($galeris) && $galeris->count() > 0)
        @php
            $totalFotos = $galeris->count();
            $withImages = $galeris->whereNotNull('gambar')->count();
            $activeItems = $galeris->where('is_active', true)->count();
            $categoriesCount = $galeris->whereNotNull('kategori')->pluck('kategori')->unique()->count();
        @endphp
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-1">Total Foto</h6>
                                <h4 class="mb-0">{{ $totalFotos }}</h4>
                            </div>
                            <div class="ms-3">
                                <i class="fas fa-images fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-1">Dengan Gambar</h6>
                                <h4 class="mb-0">{{ $withImages }}</h4>
                            </div>
                            <div class="ms-3">
                                <i class="fas fa-camera fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-1">Aktif</h6>
                                <h4 class="mb-0">{{ $activeItems }}</h4>
                            </div>
                            <div class="ms-3">
                                <i class="fas fa-eye fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card bg-warning text-white">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-1">Kategori</h6>
                                <h4 class="mb-0">{{ $categoriesCount }}</h4>
                            </div>
                            <div class="ms-3">
                                <i class="fas fa-tags fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Category-first view: show categories when no category is selected --}}
    @if(empty($selectedKategori))
        <div class="row mb-3">
            <div class="col-12 d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Pilih Kategori Galeri</h5>
                <span class="text-muted small">{{ isset($categories) ? $categories->count() : 0 }} Kategori</span>
            </div>
        </div>

        <div class="row">
            @forelse(($categories ?? collect()) as $category)
                <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                    <a href="{{ route('admin.galeri.index', ['kategori' => $category]) }}" class="text-decoration-none text-reset">
                        <div class="card h-100 shadow-sm hover-card">
                            <div class="position-relative">
                                @php $thumb = $categoryThumbs[$category] ?? null; @endphp
                                @if($thumb)
                                    <img src="{{ asset($thumb) }}" class="card-img-top" alt="{{ $category }}" style="height: 180px; object-fit: cover;">
                                @else
                                    <div class="card-img-top d-flex align-items-center justify-content-center bg-light" style="height: 180px;">
                                        <i class="fas fa-images fa-3x text-muted"></i>
                                    </div>
                                @endif
                                <div class="position-absolute top-0 end-0 m-2">
                                    <span class="badge bg-primary">
                                        <i class="fas fa-images me-1"></i>
                                        {{ $categoryCounts[$category] ?? 0 }} Foto
                                    </span>
                                </div>
                            </div>
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">{{ $category }}</h6>
                                <i class="fas fa-arrow-right text-muted"></i>
                            </div>
                        </div>
                    </a>
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-info">Belum ada kategori galeri.</div>
                </div>
            @endforelse
        </div>
    @endif

    @if(!empty($selectedKategori) && isset($galeris) && $galeris->count() > 0)
        <!-- Filter Controls -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-body py-2">
                        <div class="d-flex flex-wrap align-items-center gap-3">
                            <div class="d-flex align-items-center">
                                <label class="form-label mb-0 me-2">Filter:</label>
                                <select class="form-select form-select-sm" style="width: auto;" onchange="filterByCategory(this.value)">
                                    <option value="">Semua Kategori</option>
                                    @foreach($galeris->whereNotNull('kategori')->pluck('kategori')->unique() as $category)
                                        <option value="{{ $category }}">{{ $category }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="d-flex align-items-center">
                                <select class="form-select form-select-sm" style="width: auto;" onchange="filterByStatus(this.value)">
                                    <option value="">Semua Status</option>
                                    <option value="active">Aktif</option>
                                    <option value="inactive">Tidak Aktif</option>
                                </select>
                            </div>
                            <div class="ms-auto">
                                <span class="badge bg-secondary">{{ $galeris->total() }} Total Item</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Grid View (Default) -->
        <div id="gridView">
            <div class="row">
                @foreach($galeris as $item)
                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4 galeri-item" 
                         data-category="{{ $item->kategori }}" 
                         data-status="{{ $item->is_active ? 'active' : 'inactive' }}">
                        <div class="card h-100 shadow-sm hover-card">
                            <div class="position-relative">
                                @if($item->gambar)
                                    <img src="{{ asset($item->gambar) }}" 
                                         class="card-img-top galeri-thumbnail" 
                                         alt="{{ $item->judul }}"
                                         style="height: 200px; object-fit: cover; cursor: pointer;"
                                         onclick="previewImage('{{ asset($item->gambar) }}', '{{ $item->judul }}')">
                                @else
                                    <div class="card-img-top d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
                                        <i class="fas fa-image fa-3x text-muted"></i>
                                    </div>
                                @endif
                                
                                <!-- Status Badge -->
                                <div class="position-absolute top-0 end-0 m-2">
                                    @if($item->is_active ?? true)
                                        <span class="badge bg-success">
                                            <i class="fas fa-eye"></i>
                                        </span>
                                    @else
                                        <span class="badge bg-danger">
                                            <i class="fas fa-eye-slash"></i>
                                        </span>
                                    @endif
                                </div>

                                <!-- Category Badge -->
                                @if($item->kategori)
                                    <div class="position-absolute top-0 start-0 m-2">
                                        <span class="badge bg-primary">{{ $item->kategori }}</span>
                                    </div>
                                @endif
                            </div>
                            
                            <div class="card-body">
                                <h6 class="card-title mb-2">{{ Str::limit($item->judul, 50) }}</h6>
                                @if($item->deskripsi)
                                    <p class="card-text text-muted small mb-3">{{ Str::limit($item->deskripsi, 80) }}</p>
                                @endif
                                
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        <i class="fas fa-calendar-alt me-1"></i>
                                        {{ $item->created_at->format('d/m/Y') }}
                                    </small>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.galeri.show', $item) }}" 
                                           class="btn btn-sm btn-outline-info" title="Detail">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.galeri.edit', $item) }}" 
                                           class="btn btn-sm btn-outline-primary" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" 
                                                class="btn btn-sm btn-outline-danger" 
                                                title="Hapus"
                                                onclick="deleteGaleri({{ $item->id }}, '{{ $item->judul }}')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Table View (Hidden by default) -->
        <div id="tableView" class="d-none">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-table me-2"></i>Daftar Galeri (Table View)
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>No</th>
                                    <th>Gambar</th>
                                    <th>Judul</th>
                                    <th>Kategori</th>
                                    <th>Status</th>
                                    <th>Tanggal</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($galeris as $index => $item)
                                <tr class="galeri-item" 
                                    data-category="{{ $item->kategori }}" 
                                    data-status="{{ $item->is_active ? 'active' : 'inactive' }}">
                                    <td>{{ $galeris->firstItem() + $index }}</td>
                                    <td>
                                        @if($item->gambar)
                                            <img src="{{ asset($item->gambar) }}" 
                                                 alt="{{ $item->judul }}" 
                                                 class="rounded"
                                                 style="width: 60px; height: 60px; object-fit: cover; cursor: pointer;"
                                                 onclick="previewImage('{{ asset($item->gambar) }}', '{{ $item->judul }}')">
                                        @else
                                            <div class="bg-light rounded d-flex align-items-center justify-content-center" 
                                                 style="width: 60px; height: 60px;">
                                                <i class="fas fa-image text-muted"></i>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $item->judul }}</div>
                                        @if($item->deskripsi)
                                            <small class="text-muted">{{ Str::limit($item->deskripsi, 50) }}</small>
                                        @endif
                                    </td>
                                    <td>
                                        @if($item->kategori)
                                            <span class="badge bg-primary">{{ $item->kategori }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($item->is_active ?? true)
                                            <span class="badge bg-success">Aktif</span>
                                        @else
                                            <span class="badge bg-danger">Tidak Aktif</span>
                                        @endif
                                    </td>
                                    <td>
                                        <small>{{ $item->created_at->format('d/m/Y H:i') }}</small>
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('admin.galeri.show', $item) }}" 
                                               class="btn btn-sm btn-info" title="Detail">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.galeri.edit', $item) }}" 
                                               class="btn btn-sm btn-primary" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button" 
                                                    class="btn btn-sm btn-danger" 
                                                    title="Hapus"
                                                    onclick="deleteGaleri({{ $item->id }}, '{{ $item->judul }}')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        <div class="row mt-4">
            <div class="col-12">
                {{ $galeris->links() }}
            </div>
        </div>
    @elseif(empty($selectedKategori))
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="text-center py-5">
                            <i class="fas fa-images fa-4x text-secondary mb-4"></i>
                            <h4 class="mb-2">Belum Ada Foto Galeri</h4>
                            <p class="text-muted mb-4">Mulai dengan menambahkan foto kegiatan atau acara desa pertama untuk mempercantik website.</p>
                            <a href="{{ route('admin.galeri.create') }}" class="btn btn-success btn-lg">
                                <i class="fas fa-plus me-2"></i>Tambah Foto Pertama
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>

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

<!-- Delete Form (Hidden) -->
<form id="deleteForm" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<script>
let currentView = 'grid';

function toggleView() {
    const gridView = document.getElementById('gridView');
    const tableView = document.getElementById('tableView');
    const viewIcon = document.getElementById('viewIcon');
    const viewText = document.getElementById('viewText');

    if (currentView === 'grid') {
        gridView.classList.add('d-none');
        tableView.classList.remove('d-none');
        viewIcon.className = 'fas fa-th-list';
        viewText.textContent = 'Table View';
        currentView = 'table';
    } else {
        gridView.classList.remove('d-none');
        tableView.classList.add('d-none');
        viewIcon.className = 'fas fa-th-large';
        viewText.textContent = 'Grid View';
        currentView = 'grid';
    }
}

function filterByCategory(category) {
    const items = document.querySelectorAll('.galeri-item');
    items.forEach(item => {
        if (category === '' || item.dataset.category === category) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
}

function filterByStatus(status) {
    const items = document.querySelectorAll('.galeri-item');
    items.forEach(item => {
        if (status === '' || item.dataset.status === status) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
}

function previewImage(src, title) {
    document.getElementById('previewImage').src = src;
    document.getElementById('previewTitle').textContent = title;
    document.getElementById('downloadImage').href = src;
    
    const modal = new bootstrap.Modal(document.getElementById('imagePreviewModal'));
    modal.show();
}

function deleteGaleri(id, title) {
    if (confirm(`Yakin ingin menghapus foto "${title}"?`)) {
        const form = document.getElementById('deleteForm');
        form.action = `/admin/galeri/${id}`;
        form.submit();
    }
}

// Hover effects
document.addEventListener('DOMContentLoaded', function() {
    const hoverCards = document.querySelectorAll('.hover-card');
    hoverCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});
</script>

<style>
.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.galeri-thumbnail {
    transition: transform 0.3s ease;
}

.galeri-thumbnail:hover {
    transform: scale(1.05);
}

.btn-group .btn {
    border-radius: 0.375rem !important;
    margin-left: 2px;
}

.badge {
    font-size: 0.75em;
}

@media (max-width: 768px) {
    .btn-group {
        flex-direction: column;
    }
    
    .btn-group .btn {
        margin-left: 0;
        margin-bottom: 2px;
    }
}
</style>
@endsection