@extends('master')

@section('content')
    <section class="section">
        @include('admin.layout.breadcrumbs', [
            'title' => __('Farm Gallery') . ' - ' . $farm->name,
            'headerData' => __('Farms'),
            'url' => 'farms',
        ])

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ $errors->first() }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif
                </div>

                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-4 mt-2">
                                <div class="col-lg-8">
                                    <h2 class="section-title mt-0">{{ __('Gallery') }} - {{ $farm->name }}</h2>
                                </div>
                                <div class="col-lg-4 text-right">
                                    <a href="{{ route('farms.index') }}" class="btn btn-secondary mr-2">
                                        <i class="fas fa-arrow-left"></i> {{ __('Back to Farms') }}
                                    </a>
                                </div>
                            </div>

                            <ul class="nav nav-pills mb-4">
                                <li class="nav-item">
                                    <a class="nav-link {{ ($tab ?? 'images') === 'images' ? 'active' : '' }}" href="{{ route('farms.gallery.index', [$farm, 'tab' => 'images']) }}">
                                        {{ __('Images') }}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link {{ ($tab ?? '') === 'videos' ? 'active' : '' }}" href="{{ route('farms.gallery.index', [$farm, 'tab' => 'videos']) }}">
                                        {{ __('Videos') }}
                                    </a>
                                </li>
                            </ul>

                            @if(($tab ?? 'images') === 'images')
                                <div class="gallery-upload-zone mb-3" data-upload="image-files" onclick="document.getElementById('image-files').click()">
                                    <input type="file" id="image-files" name="files[]" multiple accept="image/jpeg,image/png,image/jpg,image/gif,image/svg+xml" class="d-none" form="image-upload-form">
                                    <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                                    <p class="mb-1">{{ __('Drag files here or click to select') }}</p>
                                    <small class="text-muted">{{ __('Max 5MB per image, 50MB total. JPG, PNG, GIF, SVG.') }}</small>
                                </div>
                                <div id="image-preview" class="gallery-selected mb-3" style="display:none"></div>
                                <form id="image-upload-form" action="{{ route('farms.gallery.store', $farm) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="type" value="image">
                                    <button type="submit" class="btn btn-primary mb-4" id="image-upload-btn" disabled>
                                        <i class="fas fa-upload"></i> {{ __('Upload Image') }}
                                    </button>
                                </form>

                                <div class="gallery-grid">
                                    @forelse($images as $item)
                                        <div class="gallery-item">
                                            <div class="gallery-thumb" data-toggle="modal" data-target="#galleryModal" data-src="{{ url('images/upload/' . $item->file_path) }}" data-type="image">
                                                <img src="{{ url('images/upload/' . $item->file_path) }}" alt="">
                                                <span class="gallery-overlay"><i class="fas fa-search-plus"></i></span>
                                            </div>
                                            <form action="{{ route('farms.gallery.destroy', [$farm, $item]) }}" method="POST" class="gallery-delete" onsubmit="return confirm('{{ __('Remove') }}?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger" title="{{ __('Remove') }}"><i class="fas fa-times"></i></button>
                                            </form>
                                        </div>
                                    @empty
                                        <div class="col-12 text-muted text-center py-5">{{ __('No images yet.') }}</div>
                                    @endforelse
                                </div>
                            @else
                                <div class="gallery-upload-zone mb-3" data-upload="video-files" onclick="document.getElementById('video-files').click()">
                                    <input type="file" id="video-files" name="files[]" multiple accept="video/mp4,video/webm,video/ogg" class="d-none" form="video-upload-form">
                                    <i class="fas fa-cloud-upload-alt fa-2x text-muted mb-2"></i>
                                    <p class="mb-1">{{ __('Drag files here or click to select') }}</p>
                                    <small class="text-muted">{{ __('Max 50MB per video, 250MB total. MP4, WebM, OGG.') }}</small>
                                </div>
                                <div id="video-preview" class="gallery-selected mb-3" style="display:none"></div>
                                <form id="video-upload-form" action="{{ route('farms.gallery.store', $farm) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="type" value="video">
                                    <button type="submit" class="btn btn-primary mb-4" id="video-upload-btn" disabled>
                                        <i class="fas fa-upload"></i> {{ __('Upload Video') }}
                                    </button>
                                </form>

                                <div class="gallery-grid">
                                    @forelse($videos as $item)
                                        <div class="gallery-item">
                                            <div class="gallery-thumb" data-toggle="modal" data-target="#galleryModal" data-src="{{ url('videos/upload/' . $item->file_path) }}" data-type="video">
                                                <video src="{{ url('videos/upload/' . $item->file_path) }}" preload="metadata"></video>
                                                <span class="gallery-overlay"><i class="fas fa-play"></i></span>
                                            </div>
                                            <form action="{{ route('farms.gallery.destroy', [$farm, $item]) }}" method="POST" class="gallery-delete" onsubmit="return confirm('{{ __('Remove') }}?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-danger" title="{{ __('Remove') }}"><i class="fas fa-times"></i></button>
                                            </form>
                                        </div>
                                    @empty
                                        <div class="col-12 text-muted text-center py-5">{{ __('No videos yet.') }}</div>
                                    @endforelse
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="galleryModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg gallery-lightbox-dialog">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body p-0 text-center gallery-lightbox-body">
                    <button type="button" class="close position-absolute" style="right:10px;top:-10px;z-index:1;color:#fff;opacity:1;text-shadow:0 0 4px #000" data-dismiss="modal">&times;</button>
                    <img id="galleryModalImg" src="" alt="" class="gallery-lightbox-media d-none">
                    <video id="galleryModalVideo" src="" controls class="gallery-lightbox-media d-none"></video>
                </div>
            </div>
        </div>
    </div>

    <style>
        .gallery-upload-zone { border: 2px dashed #ddd; border-radius: 8px; padding: 2rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
        .gallery-upload-zone:hover { border-color: var(--primary_color, #6777ef); background: rgba(103, 119, 239, 0.05); }
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
        .gallery-item { position: relative; }
        .gallery-thumb { position: relative; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #f0f0f0; }
        .gallery-thumb img, .gallery-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
        .gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; color: #fff; font-size: 1.5rem; }
        .gallery-thumb:hover .gallery-overlay { opacity: 1; }
        .gallery-delete { position: absolute; top: 8px; right: 8px; z-index: 2; }
        .gallery-selected { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
        .gallery-selected .badge { font-size: 0.9rem; padding: 0.5rem 0.75rem; }
        .gallery-selected-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
        .gallery-lightbox-dialog { max-width: calc(100vw - 2rem); }
        .gallery-lightbox-body { max-height: calc(100vh - 2rem); display: flex; align-items: center; justify-content: center; }
        .gallery-lightbox-media { max-width: 100%; max-height: calc(100vh - 4rem); width: auto; height: auto; object-fit: contain; }
    </style>

    <script>
        (function() {
            function setupUpload(inputId, btnId, previewId, isImage) {
                var zone = document.querySelector('[data-upload="' + inputId + '"]');
                var inp = document.getElementById(inputId);
                var btn = document.getElementById(btnId);
                var preview = document.getElementById(previewId);
                if (!inp || !btn) return;
                inp.onchange = function() {
                    var n = inp.files.length;
                    btn.disabled = !n;
                    if (!preview) return;
                    if (!n) { preview.style.display = 'none'; preview.innerHTML = ''; return; }
                    preview.style.display = 'flex';
                    preview.innerHTML = '<span class="badge badge-success mr-2 mb-1">' + n + ' ' + (n === 1 ? (isImage ? '{{ __("Image") }}' : '{{ __("Video") }}') : (isImage ? '{{ __("Images") }}' : '{{ __("Videos") }}')) + ' {{ __("ready to upload") }}</span>';
                    if (isImage) {
                        for (var i = 0; i < Math.min(n, 8); i++) {
                            var f = inp.files[i];
                            if (!f.type.match('image.*')) continue;
                            var img = document.createElement('img');
                            img.className = 'gallery-selected-thumb';
                            img.title = f.name;
                            preview.appendChild(img);
                            (function(im, file) {
                                var r = new FileReader();
                                r.onload = function(e) { im.src = e.target.result; };
                                r.readAsDataURL(file);
                            })(img, f);
                        }
                        if (n > 8) {
                            var more = document.createElement('span');
                            more.className = 'text-muted small ml-1';
                            more.textContent = '+' + (n - 8) + ' {{ __("more") }}';
                            preview.appendChild(more);
                        }
                    }
                };
                if (zone) {
                    zone.ondragover = function(e) { e.preventDefault(); zone.style.borderColor = 'var(--primary_color)'; };
                    zone.ondragleave = function() { zone.style.borderColor = ''; };
                    zone.ondrop = function(e) {
                        e.preventDefault();
                        zone.style.borderColor = '';
                        if (e.dataTransfer.files.length) {
                            inp.files = e.dataTransfer.files;
                            inp.dispatchEvent(new Event('change'));
                        }
                    };
                }
            }
            setupUpload('image-files', 'image-upload-btn', 'image-preview', true);
            setupUpload('video-files', 'video-upload-btn', 'video-preview', false);

            $('#galleryModal').on('show.bs.modal', function(e) {
                var el = $(e.relatedTarget);
                var src = el.data('src'), type = el.data('type');
                $('#galleryModalImg, #galleryModalVideo').addClass('d-none');
                if (type === 'image') {
                    $('#galleryModalImg').attr('src', src).removeClass('d-none');
                } else {
                    $('#galleryModalVideo').attr('src', src).removeClass('d-none');
                }
            }).on('hidden.bs.modal', function() {
                $('#galleryModalVideo')[0].pause();
            });
        })();
    </script>
@endsection