@extends('app')
@section('title','Panel admina – Verve')

@push('styles')
<style>
    :root{ --glass-bg:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.1); --glass-shadow:0 8px 32px 0 rgba(0,0,0,.37); --text-white:#fff; --text-gray:#ccc;}
    .admin-wrapper{padding:3rem 1rem;max-width:1400px;margin:auto;}
    .glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1.5rem;box-shadow:var(--glass-shadow);}
    .btn-primary{width:100%;padding:.75rem;background:var(--text-white);color:#000;font-weight:600;border-radius:12px;border:none;cursor:pointer;transition:.3s;}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(255,255,255,.2);}
    .product-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:rgba(255,255,255,.05);border-radius:12px;margin-bottom:.5rem;}
    .product-row:hover{background:rgba(255,255,255,.08);}
    @media(min-width:768px){.admin-wrapper{padding:4rem 2rem;}}
    .error-msg{color:#ff7b7b;font-size:.85rem;margin-top:.25rem;}
    /* === NOWA SEKCJA – GALERIA KLIENTÓW === */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
    }
    .gallery-item {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255,255,255,.05);
        border: 1px solid rgba(255,255,255,.1);
        transition: transform .2s;
    }
    .gallery-item:hover {
        transform: scale(1.03);
    }
    .gallery-item img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }
    .gallery-item form {
        margin: 0;
    }
    .gallery-item button {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(220, 38, 38, .9);
        color: #fff;
        border: none;
        cursor: pointer;
        font-size: 14px;
        line-height: 1;
    }
    img{
        max-height:200px;
        
    }

</style>
@endpush

@section('content')
<div class="admin-wrapper">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h1 class="text-3xl font-bold font-poppins">Panel admina</h1>
        <div style="display: flex; gap: 1rem;">
            <a href="{{ route('admin.drop') }}" 
               style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: rgba(245, 158, 11, 0.2); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 8px; color: #f59e0b; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                ⏰ Drop
            </a>
            <a href="{{ route('admin.discount-codes.index') }}" 
               style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: rgba(147, 51, 234, 0.2); border: 1px solid rgba(147, 51, 234, 0.4); border-radius: 8px; color: #9333ea; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                🎟️ Kody rabatowe
            </a>
            <a href="{{ route('admin.orders') }}" 
               style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: rgba(78, 204, 163, 0.2); border: 1px solid rgba(78, 204, 163, 0.4); border-radius: 8px; color: #4ecca3; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">
                📦 Zamówienia
            </a>
        </div>
    </div>

    {{-- 1. FORMULARZ DODAWANIA NOWEGO PRODUKTU --}}
    <section class="glass-card mb-10">
        <h2 class="text-xl font-semibold mb-4">Dodaj nowy produkt</h2>
        <div style="background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; font-size: 0.9rem;">
            <strong>ℹ️ Opisy:</strong> Opisy produktów dostosowują się automatycznie do języka użytkownika (PL/EN) na podstawie wybranego języka.
        </div>
        <form method="POST" action="{{ route('admin.products.store') }}" class="grid md:grid-cols-2 gap-4" enctype="multipart/form-data">
            @csrf
            <input name="name" placeholder="Nazwa produktu (PL)" required class="px-3 py-2 bg-white/10 rounded border border-white/20">
            <input name="name_en" placeholder="Product name (EN)" class="px-3 py-2 bg-white/10 rounded border border-white/20">
            <input name="price" type="number" step="0.01" placeholder="Cena (PLN)" required class="px-3 py-2 bg-white/10 rounded border border-white/20">
            
            <div class="md:col-span-2">
                <label class="block text-sm text-gray-300 mb-2">Główne zdjęcie</label>
                <input name="main_img" type="file" accept="image/*" required class="px-3 py-2 bg-white/10 rounded border border-white/20 w-full">
            </div>
            
            <div class="md:col-span-2">
                <label class="block text-sm text-gray-300 mb-2">Galeria zdjęć (opcjonalnie)</label>
                <input name="gallery[]" type="file" accept="image/*" multiple class="px-3 py-2 bg-white/10 rounded border border-white/20 w-full">
                <p class="text-xs text-gray-400 mt-1">Możesz wybrać wiele zdjęć naraz (Ctrl+klik)</p>
            </div>
            
            <textarea name="description" placeholder="Krótki opis produktu (PL)" rows="3" class="px-3 py-2 bg-white/10 rounded border border-white/20 md:col-span-2"></textarea>
            
            <textarea name="description_en" placeholder="Short product description (EN)" rows="3" class="px-3 py-2 bg-white/10 rounded border border-white/20 md:col-span-2"></textarea>
          
            <button type="submit" class="btn-primary md:col-span-2">Dodaj produkt</button>
        </form>
        @if(session('ok'))
            <div class="mt-4 text-green-400 text-sm">✅ {{ session('ok') }}</div>
        @endif
        @if($errors->any())
            <div class="mt-4 text-red-400 text-sm error-msg">
                @foreach($errors->all() as $e) {{ $e }}<br> @endforeach
            </div>
        @endif
    </section>

    {{-- 2. LISTA PRODUKTÓW --}}
    <section class="glass-card mb-10">
        <h2 class="text-xl font-semibold mb-4">Lista produktów</h2>
        @forelse($products as $p)
            <div class="product-row">
                <div>
                    <div class="font-semibold">{{ $p->name }}</div>
                    <div class="text-sm text-gray-400">{{ number_format($p->price/100,2) }} PLN</div>
                </div>
                <div class="flex gap-3 items-center">
                    <form method="POST" action="{{ route('admin.products.destroy', $p) }}" onsubmit="return confirm('Usunąć?')">
                        @csrf @method('DELETE')
                        <button class="text-red-400 hover:underline text-sm">Usuń</button>
                    </form>
                </div>
            </div>
        @empty
            <p class="text-gray-400 text-center">Brak produktów – dodaj pierwszy!</p>
        @endforelse
    </section>

{{-- 4. ZDJĘCIA OD KLIENTÓW – niezależne od produktów --}}
<section class="glass-card mt-10">
    <h2 class="text-xl font-semibold mb-4">Zdjęcia od klientów (galeria)</h2>

    {{-- Formularz dodawania --}}
    <form method="POST" action="{{ route('admin.dashboard.photos') }}" enctype="multipart/form-data" class="mb-6">
        @csrf
        <input type="file" name="photos[]" accept="image/*" multiple required
               class="px-3 py-2 bg-white/10 rounded border border-white/20 w-full mb-3">
        <button type="submit" class="btn-primary">Dodaj zdjęcia</button>
    </form>

    {{-- Lista zdjęć – możliwość usunięcia --}}
    @php
        $photos = \App\Models\CustomerPhoto::latest()->get();
    @endphp

    @if($photos->isEmpty())
        <p class="text-gray-400 text-sm">Brak zdjęć – dodaj pierwsze.</p>
    @else
        <div class="grid grid-cols-3 md:grid-cols-4 gap-3">
            @foreach($photos as $photo)
                <div class="relative group">
                    <img src="{{ asset('storage/' . $photo->path) }}" alt="Customer" class="rounded w-full h-32 object-cover">
                    <form method="POST" action="{{ route('admin.dashboard.photo.destroy', $photo) }}" class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition">
                        @csrf @method('DELETE')
                        <button class="bg-red-600 text-white text-xs px-2 py-1 rounded" title="Usuń">×</button>
                    </form>
                </div>
            @endforeach
        </div>
    @endif

    @if(session('photo_ok'))
        <div class="mt-4 text-green-400 text-sm">✅ {{ session('photo_ok') }}</div>
    @endif

</section>