@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="mb-4">
        <a href="{{ route('categories.index') }}" class="text-decoration-none text-muted small">
            <i class="bi bi-arrow-left me-2"></i>Volver a Categorías
        </a>
    </div>

    <div class="row g-4">
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body text-center p-5">
                    @if($category->image)
                        <img src="{{ asset('storage/' . $category->image) }}"
                             class="rounded shadow-sm mb-4"
                             width="200" height="200"
                             style="object-fit: cover;">
                    @else
                        <div class="bg-light text-secondary d-inline-flex justify-content-center align-items-center rounded border mb-4"
                             style="width: 200px; height: 200px;">
                            <i class="bi bi-tags fs-1 opacity-25"></i>
                        </div>
                    @endif

                    <h3 class="fw-bold mb-1">{{ $category->name }}</h3>
                    <p class="text-muted mb-3">{{ $category->description ?? 'Sin descripción' }}</p>

                    <div class="mb-3">
                        <span class="badge {{ $category->is_active ? 'bg-success' : 'bg-secondary' }} px-3 py-2"
                              style="font-size: 0.9rem;">
                            @if($category->is_active)
                                <i class="bi bi-check-circle-fill me-1"></i>Categoría Activa
                            @else
                                <i class="bi bi-x-circle-fill me-1"></i>Categoría Inactiva
                            @endif
                        </span>
                    </div>

                    <div class="d-flex justify-content-center gap-2 mt-4">
                        <a href="{{ route('categories.edit', $category) }}"
                           class="btn btn-warning fw-bold px-4">
                            <i class="bi bi-pencil me-2"></i>Editar
                        </a>
                        <form action="{{ route('categories.destroy', $category) }}"
                              method="POST"
                              onsubmit="return confirm('¿Seguro que deseas eliminar esta categoría?');">
                            @csrf @method('DELETE')
                            <button class="btn btn-outline-danger fw-bold px-4"
                                    {{ $category->products->count() > 0 ? 'disabled' : '' }}
                                    title="{{ $category->products->count() > 0 ? 'No se puede eliminar con productos' : 'Eliminar categoría' }}">
                                <i class="bi bi-trash me-2"></i>Eliminar
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h6 class="fw-bold mb-3"><i class="bi bi-clock-history me-2 text-muted"></i>Auditoría</h6>
                    <div class="row small">
                        <div class="col-6 mb-2">
                            <div class="text-muted">Creado el</div>
                            <div class="fw-bold">{{ $category->created_at->format('d/m/Y') }}</div>
                        </div>
                        <div class="col-6 mb-2">
                            <div class="text-muted">Actualizado el</div>
                            <div class="fw-bold">{{ $category->updated_at->format('d/m/Y') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-7">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light border-0 py-3 px-4 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">
                        <i class="bi bi-box-seam me-2"></i>Productos en esta categoría
                        <span class="badge bg-primary ms-2">{{ $category->products->count() }}</span>
                    </h5>
                </div>
                <div class="card-body p-0">
                    @if($category->products->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-4">Producto</th>
                                        <th>Precio</th>
                                        <th>Stock</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($category->products as $product)
                                        <tr>
                                            <td class="ps-4 fw-bold">{{ $product->name }}</td>
                                            <td>
                                                <span class="fw-bold text-success">
                                                    {{ \App\Models\Setting::where('key', 'currency_symbol')->value('value') ?? '$' }}{{ number_format($product->price, 2) }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($product->stock === null)
                                                    <span class="badge bg-info">Ilimitado</span>
                                                @elseif($product->stock > 10)
                                                    <span class="badge bg-success">{{ $product->stock }}</span>
                                                @elseif($product->stock > 0)
                                                    <span class="badge bg-warning">{{ $product->stock }}</span>
                                                @else
                                                    <span class="badge bg-danger">Agotado</span>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="badge {{ $product->is_active ? 'bg-success' : 'bg-secondary' }}">
                                                    {{ $product->is_active ? 'Activo' : 'Inactivo' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">
                            <i class="bi bi-box fs-1 d-block mb-3 opacity-25"></i>
                            Esta categoría no tiene productos aún.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection