@extends('layouts.vendor')

@section('page-title', 'Media Library')

@section('content')
<div class="flex justify-between items-center mb-6">
    <div>
        <h2 class="text-2xl font-bold">Media Library</h2>
        <p class="text-sm text-gray-500 mt-1">Manage your product images and media files</p>
    </div>
    <button onclick="document.getElementById('upload-media-modal').classList.remove('hidden')" class="royal-btn">
        <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m0 0l4 4"/></svg>
        Upload Files
    </button>
</div>

@if($media->count() > 0)
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
    @foreach($media as $item)
    <div class="group relative bg-white rounded-lg border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
        <div class="aspect-square bg-gray-100 relative">
            <img src="{{ asset('storage/' . $item->path) }}" alt="{{ $item->original_name }}" class="w-full h-full object-cover" loading="lazy">
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                <button onclick="previewMedia('{{ asset('storage/' . $item->path) }}', '{{ $item->original_name }}')" class="p-2 bg-white rounded-full hover:bg-gray-100 mx-1 transition">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </button>
                <form action="{{ route('vendor.media.destroy', $item) }}" method="POST" onsubmit="return confirm('Delete this file?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="p-2 bg-white rounded-full hover:bg-red-50 text-red-600 mx-1 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    </button>
                </form>
            </div>
        </div>
        <div class="p-2">
            <p class="text-xs text-gray-700 truncate" title="{{ $item->original_name }}">{{ $item->original_name }}</p>
            <p class="text-xs text-gray-400 mt-0.5">{{ $item->created_at->format('M d, Y') }}</p>
        </div>
    </div>
    @endforeach
</div>

@if($media->hasPages())
<div class="mt-6">{{ $media->links() }}</div>
@endif

@else
<div class="royal-card p-12 text-center">
    <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
    <h3 class="text-lg font-medium text-gray-900 mb-1">No media files yet</h3>
    <p class="text-sm text-gray-500 mb-6">Upload images to use across your product listings.</p>
    <button onclick="document.getElementById('upload-media-modal').classList.remove('hidden')" class="royal-btn">Upload Your First File</button>
</div>
@endif

{{-- Upload Media Modal --}}
<div id="upload-media-modal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl max-w-lg w-full">
        <div class="flex items-center justify-between p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold">Upload Media Files</h3>
            <button onclick="document.getElementById('upload-media-modal').classList.add('hidden')" class="p-2 hover:bg-gray-100 rounded-lg transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <form action="{{ route('vendor.media.store') }}" method="POST" enctype="multipart/form-data" class="p-6">
            @csrf
            <div id="drop-zone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-indigo-400 transition-colors cursor-pointer" onclick="document.getElementById('file-input').click()">
                <svg class="w-12 h-12 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m0 0l-3-3"/></svg>
                <p class="text-sm font-medium text-gray-700 mb-1">Click to upload or drag and drop</p>
                <p class="text-xs text-gray-500">PNG, JPG, WEBP (max 5MB per file)</p>
                <input type="file" id="file-input" name="files[]" multiple accept="image/*" class="hidden" onchange="updateFileCount(this.files.length)">
            </div>
            <p id="file-count" class="text-sm text-gray-600 mt-3 hidden">Selected: <span>0</span> file(s)</p>
            <div class="flex justify-end gap-3 mt-6">
                <button type="button" onclick="document.getElementById('upload-media-modal').classList.add('hidden')" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">Upload</button>
            </div>
        </form>
    </div>
</div>

{{-- Preview Modal --}}
<div id="preview-modal" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4" onclick="this.classList.add('hidden')">
    <div class="max-w-4xl max-h-[90vh]" onclick="event.stopPropagation()">
        <img id="preview-image" src="" alt="" class="max-w-full max-h-[85vh] object-contain rounded-lg">
        <p id="preview-name" class="text-center text-white text-sm mt-3"></p>
        <button onclick="document.getElementById('preview-modal').classList.add('hidden')" class="absolute top-4 right-4 p-2 bg-white/10 hover:bg-white/20 rounded-full text-white transition">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>
</div>

<script>
const dropZone = document.getElementById('drop-zone');
if (dropZone) {
    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('border-indigo-400'); });
    dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('border-indigo-400'); });
    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-indigo-400');
        document.getElementById('file-input').files = e.dataTransfer.files;
        updateFileCount(e.dataTransfer.files.length);
    });
}
function updateFileCount(count) {
    const el = document.getElementById('file-count');
    if (count > 0) { el.classList.remove('hidden'); el.querySelector('span').textContent = count; }
    else { el.classList.add('hidden'); }
}
function previewMedia(src, name) {
    document.getElementById('preview-image').src = src;
    document.getElementById('preview-name').textContent = name;
    document.getElementById('preview-modal').classList.remove('hidden');
}
</script>
@endsection