@extends('layouts.app')
@section('title', 'Mis Registros — Sampedro')

@section('content')
<div class="max-w-5xl mx-auto px-4 py-8">

    {{-- Cabecera --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Mis Registros</h1>
            <p class="text-sm text-gray-500 mt-0.5">
                Sets registrados por <strong>{{ Auth::user()->name }}</strong>
            </p>
        </div>
        <a href="{{ route('sets.create') }}"
           class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white
                  font-semibold px-5 py-2.5 rounded-xl transition shadow text-sm whitespace-nowrap">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Nuevo Registro
        </a>
    </div>

    {{-- Sin registros --}}
    @if ($sets->isEmpty())
        <div class="bg-white rounded-2xl shadow p-14 text-center">
            <svg class="h-16 w-16 mx-auto mb-4 text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2
                         0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
            <p class="text-gray-500 font-medium">Aún no tienes registros</p>
            <a href="{{ route('sets.create') }}"
               class="text-blue-600 hover:underline text-sm mt-2 inline-block">
                Crear el primero →
            </a>
        </div>

    {{-- Tabla con registros --}}
    @else
        <div class="bg-white rounded-2xl shadow overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-gray-500 uppercase text-xs tracking-wider border-b border-gray-200">
                        <tr>
                            <th class="px-5 py-3 text-left">Código Set</th>
                            <th class="px-5 py-3 text-left">Material</th>
                            <th class="px-5 py-3 text-left hidden md:table-cell">Sucursal</th>
                            <th class="px-5 py-3 text-left hidden sm:table-cell">Fecha</th>
                            <th class="px-5 py-3 text-center">Evidencia</th>
                            <th class="px-5 py-3"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach ($sets as $set)
                        <tr class="hover:bg-blue-50/40 transition">
                            <td class="px-5 py-4 font-semibold text-blue-700">
                                {{ $set->codigo_set }}
                            </td>
                            <td class="px-5 py-4 text-gray-700 max-w-[160px] truncate">
                                {{ $set->material }}
                            </td>
                            <td class="px-5 py-4 text-gray-600 hidden md:table-cell">
                                {{ $set->sucursal }}
                            </td>
                            <td class="px-5 py-4 text-gray-400 text-xs whitespace-nowrap hidden sm:table-cell">
                                {{ $set->created_at->setTimezone('America/Bogota')->format('d/m/Y H:i') }}
                            </td>
                            <td class="px-5 py-4 text-center">
                                @if ($set->evidencia_path)
                                    @if ($set->esImagen())
                                        <span class="inline-flex items-center gap-1 text-emerald-600
                                                     bg-emerald-50 px-2 py-0.5 rounded-full text-xs font-medium">
                                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586
                                                         a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6
                                                         a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                            </svg>
                                            Imagen
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 text-violet-600
                                                     bg-violet-50 px-2 py-0.5 rounded-full text-xs font-medium">
                                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M15 10l4.553-2.069A1 1 0 0121 8.87v6.26a1 1 0 01-1.447.894
                                                         L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                                            </svg>
                                            Video
                                        </span>
                                    @endif
                                @else
                                    <span class="text-gray-300 text-xs">—</span>
                                @endif
                            </td>
                            <td class="px-5 py-4 text-right">
                                <a href="{{ route('sets.show', $set) }}"
                                   class="text-blue-600 hover:text-blue-800 hover:underline text-xs font-semibold">
                                    Ver →
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Paginación --}}
            @if ($sets->hasPages())
                <div class="px-5 py-4 border-t border-gray-100">
                    {{ $sets->links() }}
                </div>
            @endif
        </div>

        <p class="text-xs text-gray-400 mt-3 text-right">
            Total: {{ $sets->total() }} registro(s)
        </p>
    @endif

</div>
@endsection