@extends('layouts.app')

@section('title', 'Gestión de Categorías')

@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-tags me-2"></i>Gestión de Categorías
        </h1>
        <div class="btn-group" role="group">
            <x-professional-button variant="primary" href="{{ route('admin.inventory.categories.create') }}" icon="fas fa-plus" class="">Nueva Categoría
            </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 categorías -->
    <div class="card shadow mb-4">
        <div class="card-header bg-gradient-success text-white py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold">
                    <i class="fas fa-tags me-2"></i>Listado de Categorías ({{ $categories->total() }} categorías)
                </h6>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="categoriesTable">
                    <thead class="table-light">
                        <tr>
                            <th class="border-0 text-center" style="width: 80px;">
                                <i class="fas fa-palette text-muted"></i>
                            </th>
                            <th class="border-0">
                                <i class="fas fa-tag 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 text-center">
                                <i class="fas fa-box text-muted me-1"></i>Productos
                            </th>
                            <th class="border-0 text-center">
                                <i class="fas fa-sort text-muted me-1"></i>Orden
                            </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($categories as $category)
                            <tr class="category-row">
                                <td class="text-center align-middle">
                                    <div class="category-icon-container">
                                        <div class="category-icon" style="background-color: {{ $category->color }};">
                                            @if($category->icon)
                                                <i class="{{ $category->icon }}"></i>
                                            @else
                                                <i class="fas fa-tag"></i>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="align-middle">
                                    <div class="category-name">
                                        <div class="fw-bold">{{ $category->name }}</div>
                                        <div class="category-badges">
                                            @if($category->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="category-description">
                                        {{ $category->description ?: 'Sin descripción' }}
                                    </div>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="badge bg-info text-white">
                                        {{ $category->products_count }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="sort-order-badge">
                                        {{ $category->sort_order }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <span class="status-badge bg-{{ $category->is_active ? 'success' : 'danger' }}">
                                        <i class="fas fa-{{ $category->is_active ? 'check' : 'times' }} me-1"></i>
                                        {{ $category->is_active ? 'Activa' : 'Inactiva' }}
                                    </span>
                                </td>
                                <td class="text-center align-middle">
                                    <div class="action-buttons">
                                        <a href="{{ route('admin.inventory.categories.show', $category) }}" 
                                           class="btn btn-sm btn-outline-info me-1" title="Ver detalles">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <a href="{{ route('admin.inventory.categories.edit', $category) }}" 
                                           class="btn btn-sm btn-outline-primary me-1" title="Editar">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <form action="{{ route('admin.inventory.categories.toggle-status', $category) }}" 
                                              method="POST" class="d-inline">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-{{ $category->is_active ? 'warning' : 'success' }}" 
                                                    title="{{ $category->is_active ? 'Desactivar' : 'Activar' }}">
                                                <i class="fas fa-{{ $category->is_active ? 'pause' : 'play' }}"></i>
                                            </button>
                                        </form>
                                        <form action="{{ route('admin.inventory.categories.destroy', $category) }}" 
                                              method="POST" class="d-inline" 
                                              onsubmit="return confirm('¿Está seguro de eliminar esta categoría?')">
                                            @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-tags fa-4x text-muted mb-3"></i>
                                        <h5 class="text-muted">No hay categorías disponibles</h5>
                                        <p class="text-muted">Comience creando su primera categoría.</p>
                                        <x-professional-button variant="primary" href="{{ route('admin.inventory.categories.create') }}" icon="fas fa-plus" class="">Crear Primera Categoría
                                        </x-professional-button>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

@push('scripts')
<script>
    // Inicializar DataTable si hay categorías
    @if($categories->count() > 0)
        $(document).ready(function() {
            $('#categoriesTable').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
                },
                "pageLength": 25,
                "order": [[4, "asc"]], // Ordenar por orden
                "columnDefs": [
                    { "orderable": false, "targets": [0, 6] } // No ordenar color 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 categorías - Diseño basado en Movimientos */
    .category-row {
        transition: all 0.3s ease;
        border-bottom: 1px solid #e3e6f0;
    }
    
    .category-row:hover {
        background-color: #f8f9fc;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Icono de categoría */
    .category-icon-container {
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }
    
    .category-icon {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
    }
    
    .category-icon:hover {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    }
    
    .category-name {
        min-width: 150px;
    }
    
    .category-badges {
        margin-top: 4px;
    }
    
    .category-description {
        max-width: 200px;
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    /* DISEÑO DE BADGES BASADO EN LISTA DE MOVIMIENTOS */
    /* Badges compactos con diseño estándar */
    .table .badge,
    .table td .badge,
    td .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,
    td .badge i {
        font-size: 0.7rem !important;
        margin-right: 2px !important;
    }
    
    /* Colores de badges según el diseño de Movimientos */
    .table .bg-info,
    .table td .bg-info {
        background-color: #17a2b8 !important;
        color: #ffffff !important;
    }
    
    .table .bg-success,
    .table td .bg-success {
        background-color: #28a745 !important;
        color: #ffffff !important;
    }
    
    .table .bg-warning,
    .table td .bg-warning {
        background-color: #ffc107 !important;
        color: #212529 !important;
    }
    
    .table .bg-danger,
    .table td .bg-danger {
        background-color: #dc3545 !important;
        color: #ffffff !important;
    }
    
    /* Estilo para el número de orden */
    .sort-order-badge {
        font-weight: 600;
        color: #495057;
        background-color: #f8f9fa;
        padding: 2px 8px;
        border-radius: 3px;
        border: 1px solid #dee2e6;
    }
    
    /* Acciones */
    .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: 4px;
        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 - Diseño limpio como Movimientos */
    .table thead th {
        background-color: #f8f9fa !important;
        border-bottom: 2px solid #e3e6f0 !important;
        font-weight: 600 !important;
        color: #343a40 !important;
        padding: 12px 15px !important;
        font-size: 0.9rem !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* Bordes de la tabla */
    .table-bordered {
        border: none !important;
    }
    
    .table-bordered td {
        border-right: none !important;
        border-left: none !important;
        vertical-align: middle !important;
    }
    
    .table-bordered thead th {
        border: none !important;
    }
    
    /* Gradiente en el header de la card */
    .bg-gradient-success {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    }
    
    /* Mejoras en la paginación */
    .card-footer {
        background-color: #f8f9fc !important;
        border-top: 1px solid #e3e6f0;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .category-icon-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