@extends('layouts.admin')

@section('title', 'Lista de Comercios')

@section('content')
@php
    // Fallback (ajusta la ruta a donde tengas tu imagen por defecto)
    // Opción A (si tienes en public/images/logo-default.png):
    $logoDefault = asset('images/logo-default.png');

    // Opción B (si está dentro de public/images):
    // $logoDefault = asset('public/images/logo-default.png');
@endphp

<style>
    .comercio-logo{
        width: 60px;
        height: 60px;
        object-fit: contain;
        border-radius: 10px;
        background: #fff;
        padding: 4px;
        border: 1px solid #e5e7eb;
        flex: 0 0 auto;
    }
</style>

<div class="container py-4">
    <h2 class="mb-4">Comercios registrados</h2>

    <a href="{{ route('admin.comercios.create') }}" class="btn btn-primary mb-3">+ Nuevo Comercio</a>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <div class="table-responsive">
        <table class="table table-bordered align-middle">
            <thead class="table-light">
                <tr>
                    <th>Logo</th>
                    <th>Nombre</th>
                    <th>Email</th>
                    <th>Dirección</th>
                    <th>Estado Cuenta</th>
                    <th>Usuarios</th>
                    <th>Acciones</th>
                </tr>
            </thead>

            <tbody>
                @forelse ($comercios as $comercio)
                    @php
                        $comercioNombre = $comercio->nombre ?? 'Comercio';

                        // URL del logo (si existe) o fallback
                        $comercioLogo = $comercio->logo
                            ? asset('/storage/' . ltrim($comercio->logo, '/'))
                            : $logoDefault;
                    @endphp

                    <tr>
                        <td style="width: 90px;">
                            <img
                                src="{{ $comercioLogo }}"
                                alt="Logo {{ $comercioNombre }}"
                                class="comercio-logo"
                                onerror="this.onerror=null;this.src='{{ $logoDefault }}';"
                            >
                        </td>

                        <td>{{ $comercio->nombre }}</td>
                        <td>{{ $comercio->email }}</td>
                        <td>{{ $comercio->direccion ?? '-' }}</td>
                        <td>
                            @if($comercio->estado_cuenta === 'activo')
                                <span class="badge bg-success">Activo</span>
                            @else
                                <span class="badge bg-danger">Inactivo</span>
                            @endif
                        </td>
                        <td>{{ $comercio->usuarios_count }}</td>
                        <td class="text-nowrap">
                            <a href="{{ route('admin.comercios.show', $comercio) }}" class="btn btn-sm btn-outline-info">Ver</a>
                            <a href="{{ route('admin.comercios.edit', $comercio) }}" class="btn btn-sm btn-outline-primary">Editar</a>

                            <form action="{{ route('admin.comercios.destroy', $comercio) }}"
                                  method="POST"
                                  class="d-inline"
                                  onsubmit="return confirm('¿Eliminar este comercio?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger">Eliminar</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted">No hay comercios registrados.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection