@extends('admin.layouts.master')

@section('title', 'Galería - Lash Vanshy')

@section('page-title', 'Gestión de Galería')

@section('content')
<!-- Header Actions -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-0">Modelos / Galería</h2>
        <p class="text-muted mb-0">Administra las imágenes y videos de tus trabajos</p>
    </div>
    <a href="{{ route('admin.galeria.create') }}" class="btn btn-primary-admin">
        <i class="fas fa-plus me-2"></i>Nuevo Modelo
    </a>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-sm-4">
        <div class="stat-card py-3">
            <div class="stat-info">
                <h3>{{ $galerias->total() }}</h3>
                <p>Total Modelos</p>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="stat-card py-3">
            <div class="stat-info">
                <h3>{{ $galerias->where('tipo', 'imagen')->count() }}</h3>
                <p>Imágenes</p>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="stat-card py-3">
            <div class="stat-info">
                <h3>{{ $galerias->where('tipo', 'video')->count() }}</h3>
                <p>Videos</p>
            </div>
        </div>
    </div>
</div>

<!-- Gallery Table -->
<div class="card-admin">
    <div class="card-body">
        @if($galerias->isNotEmpty())
        <div class="table-responsive">
            <table class="table table-admin">
                <thead>
                    <tr>
                        <th>Orden</th>
                        <th>Vista Previa</th>
                        <th>Título</th>
                        <th>Tipo</th>
                        <th>Estado</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($galerias as $item)
                    <tr>
                        <td>
                            <span class="badge-admin bg-info">{{ $item->orden }}</span>
                        </td>
                        <td>
                            @if($item->tipo === 'video')
                                @if($item->thumbnail)
                                <img src="{{ asset('storage/' . $item->thumbnail) }}" 
                                     alt="{{ $item->titulo }}" 
                                     class="img-thumbnail"
                                     style="width: 60px; height: 40px; object-fit: cover;">
                                @else
                                <div class="placeholder-thumb">
                                    <i class="fas fa-video"></i>
                                </div>
                                @endif
                            @else
                                @if($item->archivo)
                                <img src="{{ asset('storage/' . $item->archivo) }}" 
                                     alt="{{ $item->titulo }}" 
                                     class="img-thumbnail"
                                     style="width: 60px; height: 40px; object-fit: cover;">
                                @else
                                <div class="placeholder-thumb">
                                    <i class="fas fa-image"></i>
                                </div>
                                @endif
                            @endif
                        </td>
                        <td>
                            <strong>{{ $item->titulo }}</strong>
                            @if($item->descripcion)
                            <br><small class="text-muted">{{ Str::limit($item->descripcion, 40) }}</small>
                            @endif
                        </td>
                        <td>
                            <span class="badge-admin {{ $item->tipo === 'video' ? 'bg-warning' : 'bg-info' }}">
                                <i class="fas {{ $item->tipo === 'video' ? 'fa-video' : 'fa-image' }} me-1"></i>
                                {{ ucfirst($item->tipo) }}
                            </span>
                        </td>
                        <td>
                            <span class="badge-admin {{ $item->activo ? 'bg-success' : 'bg-danger' }}">
                                {{ $item->activo ? 'Activo' : 'Inactivo' }}
                            </span>
                        </td>
                        <td>
                            <div class="actions">
                                <a href="{{ route('admin.galeria.edit', $item) }}" 
                                   class="btn btn-sm btn-primary-admin"
                                   title="Editar">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.galeria.destroy', $item) }}" 
                                      method="POST" 
                                      class="d-inline"
                                      onsubmit="return confirm('¿Estás seguro de que deseas eliminar este modelo?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger-admin" title="Eliminar">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="d-flex justify-content-center">
            {{ $galerias->links() }}
        </div>
        @else
        <div class="empty-state">
            <i class="fas fa-images"></i>
            <h4>No hay modelos</h4>
            <p>Comienza agregando tu primer modelo a la galería</p>
            <a href="{{ route('admin.galeria.create') }}" class="btn btn-primary-admin mt-3">
                <i class="fas fa-plus me-2"></i>Agregar Modelo
            </a>
        </div>
        @endif
    </div>
</div>

<style>
.placeholder-thumb {
    width: 60px;
    height: 40px;
    background: var(--secondary);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
}
</style>
@endsection