@extends('backEnd.layouts.master')
@section('title', 'Photo Gallery')

@section('css')
<style>@verbatim
    .card { border: none; box-shadow: 0 0 20px rgba(18,38,63,.03); border-radius: 12px; }
    .gallery-img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; display: block; }
    .gallery-card { position: relative; border-radius: 10px; overflow: hidden; background: #f8f9fa; border: 1px solid #e9ecef; }
    .gallery-card .overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .gallery-card:hover .overlay { background: rgba(0,0,0,.45); }
    .gallery-card .overlay button, .gallery-card .overlay a { opacity: 0; transition: .2s; }
    .gallery-card:hover .overlay button, .gallery-card:hover .overlay a { opacity: 1; }
    .upload-zone { border: 2px dashed #dee2e6; border-radius: 12px; padding: 32px; text-align: center; cursor: pointer; transition: .2s; background: #fafbfc; }
    .upload-zone:hover, .upload-zone.drag-over { border-color: #0acf97; background: #f0fdf4; }
    .upload-zone i { font-size: 2.5rem; color: #adb5bd; }
    .preview-area { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .preview-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 2px solid #e9ecef; }
    .badge-soft-success { background: rgba(10,207,151,.18); color: #0acf97; }
    .badge-soft-danger  { background: rgba(250,92,124,.18);  color: #fa5c7c; }
@endverbatim</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row mb-3 mt-3">
        <div class="col-12">
            <h4 class="page-title mb-0 fw-bold">Photo Gallery <small class="text-muted fs-6">(Landing Page)</small></h4>
        </div>
    </div>

    <div class="row g-4">

        {{-- Upload Form --}}
        <div class="col-lg-4">
            <div class="card h-100">
                <div class="card-body">
                    <h6 class="fw-bold mb-3 border-bottom pb-2">ছবি আপলোড করুন</h6>
                    <form action="{{ route('admin.landing-gallery.store') }}" method="POST" enctype="multipart/form-data" id="uploadForm">
                        @csrf

                        <div class="upload-zone" id="uploadZone" onclick="document.getElementById('imageInput').click()">
                            <i class="fe-upload-cloud"></i>
                            <p class="mt-2 mb-0 fw-semibold text-muted">ক্লিক করুন বা ড্র্যাগ করুন</p>
                            <small class="text-muted">JPG, PNG, WEBP — একসাথে একাধিক ছবি</small>
                            <input type="file" name="images[]" id="imageInput" multiple accept="image/*" class="d-none" onchange="previewImages(this)">
                        </div>

                        <div class="preview-area" id="previewArea"></div>

                        <div class="mt-3">
                            <label class="form-label fw-semibold small">Caption (ঐচ্ছিক)</label>
                            <input type="text" name="caption" class="form-control form-control-sm" placeholder="ছবির বিবরণ">
                        </div>

                        <button type="submit" class="btn btn-primary w-100 mt-3 rounded-pill" id="uploadBtn" disabled>
                            <i class="fe-upload me-1"></i> Upload Photos
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- Gallery Grid --}}
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3 border-bottom pb-2">
                        <h6 class="fw-bold mb-0">সব ছবি <span class="badge bg-secondary ms-1">{{ $photos->count() }}</span></h6>
                    </div>

                    @if($photos->count() > 0)
                    <div class="row g-3">
                        @foreach($photos as $photo)
                        <div class="col-6 col-md-4 col-xl-3" id="photo-card-{{ $photo->id }}">
                            <div class="gallery-card">
                                <img src="{{ asset($photo->image) }}" alt="{{ $photo->caption }}" class="gallery-img">
                                <div class="overlay">
                                    <button type="button"
                                        onclick="toggleStatus({{ $photo->id }}, this)"
                                        class="btn btn-sm {{ $photo->status ? 'btn-success' : 'btn-secondary' }} rounded-pill px-2 py-1"
                                        title="{{ $photo->status ? 'Active' : 'Inactive' }}"
                                        data-status="{{ $photo->status }}">
                                        <i class="fe-{{ $photo->status ? 'eye' : 'eye-off' }}"></i>
                                    </button>
                                    <form method="POST" action="{{ route('admin.landing-gallery.destroy') }}" onsubmit="return confirm('Delete?');" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="hidden_id" value="{{ $photo->id }}">
                                        <button type="submit" class="btn btn-sm btn-danger rounded-pill px-2 py-1">
                                            <i class="fe-trash-2"></i>
                                        </button>
                                    </form>
                                </div>
                                <div class="p-1 text-center">
                                    <span class="badge {{ $photo->status ? 'badge-soft-success' : 'badge-soft-danger' }} small">
                                        {{ $photo->status ? 'Active' : 'Hidden' }}
                                    </span>
                                    @if($photo->caption)
                                    <p class="text-muted mb-0" style="font-size: 10px;">{{ \Str::limit($photo->caption, 20) }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <div class="text-center py-5 text-muted">
                        <i class="fe-image" style="font-size: 3rem; opacity:.3;"></i>
                        <p class="mt-2">এখনো কোনো ছবি নেই। বাম দিক থেকে আপলোড করুন।</p>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
function previewImages(input) {
    const area = document.getElementById('previewArea');
    const btn  = document.getElementById('uploadBtn');
    area.innerHTML = '';
    if (input.files && input.files.length > 0) {
        Array.from(input.files).forEach(file => {
            const reader = new FileReader();
            reader.onload = e => {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'preview-thumb';
                area.appendChild(img);
            };
            reader.readAsDataURL(file);
        });
        btn.disabled = false;
        btn.innerHTML = '<i class="fe-upload me-1"></i> Upload ' + input.files.length + ' Photo(s)';
    } else {
        btn.disabled = true;
        btn.innerHTML = '<i class="fe-upload me-1"></i> Upload Photos';
    }
}

// Drag & drop
const zone = document.getElementById('uploadZone');
zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
zone.addEventListener('drop', e => {
    e.preventDefault();
    zone.classList.remove('drag-over');
    const input = document.getElementById('imageInput');
    input.files = e.dataTransfer.files;
    previewImages(input);
});

function toggleStatus(id, btn) {
    fetch('{{ route("admin.landing-gallery.toggle") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: JSON.stringify({ id: id })
    })
    .then(r => r.json())
    .then(data => {
        const isActive = data.status == 1;
        btn.className = 'btn btn-sm ' + (isActive ? 'btn-success' : 'btn-secondary') + ' rounded-pill px-2 py-1';
        btn.innerHTML = '<i class="fe-' + (isActive ? 'eye' : 'eye-off') + '"></i>';
        btn.setAttribute('data-status', data.status);
        // update badge in card
        const card = document.getElementById('photo-card-' + id);
        const badge = card.querySelector('.badge');
        if (badge) {
            badge.className = 'badge ' + (isActive ? 'badge-soft-success' : 'badge-soft-danger') + ' small';
            badge.textContent = isActive ? 'Active' : 'Hidden';
        }
    });
}
</script>
@endsection
