@extends('layouts.app')

@section('title', 'Gestión de Marcas')

@section('content')
<div class="container-fluid">
    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800 text-gradient-primary"><i class="fas fa-award me-2"></i>Gestión de Marcas
        </h1>
        <div class="btn-group" role="group">
            <x-professional-button variant="primary" href="{{ route('admin.inventory.brands.create') }}" icon="fas fa-plus" class="">Nueva Marca
            </x-professional-button>
            <button type="button" class="btn btn-outline-secondary" onclick="location.reload()">
                <i class="fas fa-sync-alt me-2"></i>Actualizar
            </button>
        </div>
    </div>

    <!-- Tabla de marcas -->
    <div class="card shadow mb-4">
        <div class="card-header bg-gradient-warning text-dark py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold">
                    <i class="fas fa-award me-2"></i>Listado de Marcas ({{ $brands->total() }} marcas)
                </h6>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="brandsTable">
                    <thead class="table-light">
                        <tr>
                            <th class="border-0 text-center" style="width: 80px;">
                                <i class="fas fa-image text-muted"></i>
                            </th>
                            <th class="border-0">
                                <i class="fas fa-award text-muted me-1"></i>Nombre
                            </th>
                            <th class="border-0">
                                <i class="fas fa-align-left text-muted me-1"></i>Descripción
                            </th>
                            <th class="border-0">
                                <i class="fas fa-flag text-muted me-1"></i>País
                            </th>
                            <th class="border-0 text-center">
                                <i class="fas fa-box text-muted me-1"></i>Productos
                            </th>
                            <th class="border-0 text-center">
                                <i class="fas fa-toggle-on text-muted me-1"></i>Estado
                            </th>
                            <th class="border-0 text-center" style="width: 140px;">
                                <i class="fas fa-cogs text-muted me-1"></i>Acciones
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($brands as $brand)
                            <tr class="brand-row">
                                <td class="text-center align-middle">
                                    <div class="brand-logo-container">
                                        @if($brand->logo)
                                            <img src="{{ asset('storage/' . $brand->logo) }}" 
                                                 alt="{{ $brand->name }}" 
                                                 class="brand-logo">
                                        @else
                                            <div class="brand-logo-placeholder">
                                                <i class="fas fa-award"></i>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="brand-name">
                                        <div class="fw-bold">{{ $brand->name }}</div>
                                        <div class="brand-badges">
                                            @if($brand->is_featured)
                                                <span class="badge bg-warning text-dark">
                                                    <i class="fas fa-star me-1"></i>Destacada
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="brand-description">
                                        {{ $brand->description ?: 'Sin descripción' }}
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="brand-country">
                                        @if($brand->country)
                                            <i class="fas fa-flag text-muted me-1"></i>{{ $brand->country }}
                                        @else
                                            <span class="text-muted">No especificado</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="badge bg-info text-white">
                                        {{ $brand->products_count }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="status-badge bg-{{ $brand->is_active ? 'success' : 'danger' }}">
                                        <i class="fas fa-{{ $brand->is_active ? 'check' : 'times' }} me-1"></i>
                                        {{ $brand->is_active ? 'Activa' : 'Inactiva' }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <div class="action-buttons">
                                        <a href="{{ route('admin.inventory.brands.show', $brand) }}" 
                                           class="btn btn-sm btn-outline-info me-1" title="Ver detalles">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.inventory.brands.edit', $brand) }}" 
                                           class="btn btn-sm btn-outline-primary me-1" title="Editar">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.inventory.brands.toggle-status', $brand) }}" 
                                              method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-{{ $brand->is_active ? 'warning' : 'success' }}" 
                                                    title="{{ $brand->is_active ? 'Desactivar' : 'Activar' }}">
                                                <i class="fas fa-{{ $brand->is_active ? 'pause' : 'play' }}"></i>
                                            </button>
                                        </form>
                                        <form action="{{ route('admin.inventory.brands.destroy', $brand) }}" 
                                              method="POST" class="d-inline" 
                                              onsubmit="return confirm('¿Está seguro de eliminar esta marca?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fas fa-award fa-4x text-muted mb-3"></i>
                                        <h5 class="text-muted">No hay marcas disponibles</h5>
                                        <p class="text-muted">Comience creando su primera marca.</p>
                                        <x-professional-button variant="primary" href="{{ route('admin.inventory.brands.create') }}" icon="fas fa-plus" class="">Crear Primera Marca
                                        </x-professional-button>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Paginación -->
            @if($brands->hasPages())
                <div class="card-footer bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="text-muted">
                            Mostrando {{ $brands->firstItem() }} a {{ $brands->lastItem() }} de {{ $brands->total() }} marcas
                        </div>
                        <div>
                            {{ $brands->links() }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Inicializar DataTable si hay marcas
    @if($brands->count() > 0)
        $(document).ready(function() {
            $('#brandsTable').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                "pageLength": 25,
                "order": [[1, "asc"]], // Ordenar por nombre
                "columnDefs": [
                    { "orderable": false, "targets": [0, 6] } // No ordenar logo y acciones
                ]
            });
        });
    @endif
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
<style>
    /* Estilos personalizados para la tabla de marcas */
    .brand-row {
        transition: all 0.3s ease;
        border-bottom: 1px solid #e3e6f0;
    }
    
    .brand-row:hover {
        background-color: #f8f9fc;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .brand-logo-container {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .brand-logo {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-color: #f8f9fc;
        transition: transform 0.3s ease;
    }
    
    .brand-logo:hover {
        transform: scale(1.05);
    }
    
    .brand-logo-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
    }
    
    .brand-name {
        min-width: 150px;
    }
    
    .brand-badges {
        margin-top: 4px;
    }
    
    .brand-description {
        max-width: 200px;
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .brand-country {
        font-weight: 500;
        color: #5a5c69;
    }
    
    /* ESTILOS ESPECÍFICOS PARA BADGES EN TABLA */
    .table .badge {
        font-weight: 500 !important;
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
        border-radius: 3px !important;
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
    }
    
    .table .badge i {
        font-size: 0.7rem !important;
        margin-right: 2px !important;
    }
    
    .action-buttons {
        display: flex;
        gap: 4px;
        justify-content: center;
    }
    
    .action-buttons .btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    
    .action-buttons .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .empty-state {
        padding: 40px 20px;
    }
    
    .empty-state i {
        opacity: 0.5;
    }
    
    /* Header de la tabla mejorado */
    .table thead th {
        background-color: #f8f9fc;
        border-bottom: 2px solid #e3e6f0;
        font-weight: 600;
        color: #5a5c69;
        padding: 15px 12px;
        font-size: 0.9rem;
    }
    
    /* Gradiente en el header de la card */
    .bg-gradient-warning {
        background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    }
    
    /* Mejoras en la paginación */
    .card-footer {
        background-color: #f8f9fc !important;
        border-top: 1px solid #e3e6f0;
    }
    
    /* Responsive mejoras */
    @media (max-width: 768px) {
        .brand-logo-container {
            width: 40px;
            height: 40px;
        }
        
        .action-buttons {
            flex-direction: column;
            gap: 2px;
        }
        
        .action-buttons .btn {
            width: 28px;
            height: 28px;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
@endpush
@endsection