@extends('adminlte::page')

@section('title', 'Detalle de categoría')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0">Detalle de categoría</h1>
            <small class="text-muted">
                Información de la categoría reglamentaria de símbolos militares
            </small>
        </div>

        <div>
            <a href="{{ route('categorias-simbolos.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-arrow-left"></i> Volver
            </a>

            @can('solo-admin')
                <a href="{{ route('categorias-simbolos.edit', $categoria) }}" class="btn btn-warning btn-sm">
                    <i class="fas fa-edit"></i> Editar
                </a>
            @endcan
        </div>
    </div>
@stop

@section('content')

    <div class="row">

        {{-- DATOS PRINCIPALES --}}
        <div class="col-md-8">

            <div class="card card-primary card-outline">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-folder-open"></i> Datos de la categoría
                    </h3>
                </div>

                <div class="card-body">

                    <table class="table table-bordered table-striped">
                        <tbody>
                            <tr>
                                <th style="width: 230px;">ID</th>
                                <td>{{ $categoria->id }}</td>
                            </tr>

                            <tr>
                                <th>Nombre</th>
                                <td>{{ $categoria->nombre }}</td>
                            </tr>

                            <tr>
                                <th>Código</th>
                                <td>
                                    @if($categoria->codigo)
                                        <span class="badge badge-dark">
                                            {{ $categoria->codigo }}
                                        </span>
                                    @else
                                        <span class="text-muted">No definido</span>
                                    @endif
                                </td>
                            </tr>

                            <tr>
                                <th>Tipo reglamentario</th>
                                <td>
                                    {{ $categoria->tipo_reglamentario_texto ?? 'Sin tipo reglamentario' }}

                                    @if(!empty($categoria->tipo_reglamentario))
                                        <br>
                                        <small class="text-muted">
                                            {{ $categoria->tipo_reglamentario }}
                                        </small>
                                    @endif
                                </td>
                            </tr>

                            <tr>
                                <th>Orden</th>
                                <td>{{ $categoria->orden ?? 0 }}</td>
                            </tr>

                            <tr>
                                <th>Estado</th>
                                <td>
                                    @if($categoria->activo)
                                        <span class="badge badge-success">Activo</span>
                                    @else
                                        <span class="badge badge-danger">Inactivo</span>
                                    @endif
                                </td>
                            </tr>

                            <tr>
                                <th>Descripción</th>
                                <td>
                                    {{ $categoria->descripcion ?? 'Sin descripción registrada.' }}
                                </td>
                            </tr>

                            <tr>
                                <th>Fecha de registro</th>
                                <td>
                                    {{ optional($categoria->created_at)->format('d/m/Y H:i') ?? 'No disponible' }}
                                </td>
                            </tr>

                            <tr>
                                <th>Última actualización</th>
                                <td>
                                    {{ optional($categoria->updated_at)->format('d/m/Y H:i') ?? 'No disponible' }}
                                </td>
                            </tr>
                        </tbody>
                    </table>

                </div>
            </div>

        </div>

        {{-- RESUMEN LATERAL --}}
        <div class="col-md-4">

            <div class="card card-info card-outline">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-layer-group"></i> Resumen
                    </h3>
                </div>

                <div class="card-body text-center">

                    <h4 class="mb-2">{{ $categoria->nombre }}</h4>

                    <p class="text-muted mb-3">
                        {{ $categoria->tipo_reglamentario_texto ?? 'Categoría de simbología militar' }}
                    </p>

                    <div class="mb-3">
                        @if($categoria->activo)
                            <span class="badge badge-success p-2">Categoría activa</span>
                        @else
                            <span class="badge badge-danger p-2">Categoría inactiva</span>
                        @endif
                    </div>

                    <hr>

                    <p class="mb-1">
                        <strong>Símbolos asociados</strong>
                    </p>

                    <h2 class="text-primary">
                        {{ method_exists($categoria, 'simbolos') ? $categoria->simbolos()->count() : 0 }}
                    </h2>

                    <a href="{{ route('simbolos.index') }}" class="btn btn-outline-primary btn-sm mt-2">
                        <i class="fas fa-list"></i> Ver símbolos
                    </a>

                </div>
            </div>

        </div>

    </div>

    {{-- LISTA DE SÍMBOLOS ASOCIADOS --}}
    @if(method_exists($categoria, 'simbolos'))
        <div class="card card-secondary card-outline">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-icons"></i> Símbolos asociados a esta categoría
                </h3>
            </div>

            <div class="card-body table-responsive p-0">
                <table class="table table-hover table-striped mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th style="width: 70px;">ID</th>
                            <th style="width: 90px;">Imagen</th>
                            <th>Nombre</th>
                            <th>Código</th>
                            <th>Tipo</th>
                            <th>Afiliación</th>
                            <th style="width: 120px;">Estado</th>
                            <th style="width: 100px;">Acción</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($categoria->simbolos()->orderBy('orden')->orderBy('nombre')->get() as $simbolo)
                            <tr>
                                <td class="align-middle">
                                    {{ $simbolo->id }}
                                </td>

                                <td class="align-middle text-center">
                                    @if($simbolo->imagen)
                                        <img src="{{ asset('storage/' . $simbolo->imagen) }}"
                                             alt="{{ $simbolo->nombre }}"
                                             class="img-thumbnail"
                                             style="width: 48px; height: 48px; object-fit: contain;">
                                    @else
                                        <span class="badge badge-secondary">Sin imagen</span>
                                    @endif
                                </td>

                                <td class="align-middle">
                                    <strong>{{ $simbolo->nombre }}</strong>
                                </td>

                                <td class="align-middle">
                                    {{ $simbolo->codigo ?? 'No definido' }}
                                </td>

                                <td class="align-middle">
                                    {{ $simbolo->tipo_simbolo_texto ?? 'No definido' }}
                                </td>

                                <td class="align-middle">
                                    <span class="badge"
                                          style="background-color: {{ $simbolo->color_final ?? '#0057B8' }}; color: #fff;">
                                        {{ $simbolo->afiliacion_texto ?? 'Propio' }}
                                    </span>
                                </td>

                                <td class="align-middle">
                                    @if($simbolo->activo)
                                        <span class="badge badge-success">Activo</span>
                                    @else
                                        <span class="badge badge-danger">Inactivo</span>
                                    @endif
                                </td>

                                <td class="align-middle">
                                    <a href="{{ route('simbolos.show', $simbolo) }}" class="btn btn-info btn-sm">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">
                                    <i class="fas fa-info-circle"></i>
                                    Esta categoría todavía no tiene símbolos asociados.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    @endif

@stop

@section('css')
    <style>
        .table td,
        .table th {
            vertical-align: middle;
        }
    </style>
@stop