@extends('adminlte::page')

@section('title', 'Símbolos militares')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark mb-0">Símbolos militares</h1>
            <small class="text-muted">
                Catálogo reglamentario para generación de simbología militar
            </small>
        </div>

        @if(auth()->user()->hasRole('administrador') || auth()->user()->hasRole('admin') || auth()->user()->hasRole('operador'))
            <a href="{{ route('simbolos.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> Nuevo símbolo
            </a>
        @endif
    </div>
@stop

@section('content')

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}

            <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="fas fa-exclamation-triangle"></i>
            {{ session('error') }}

            <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card card-outline card-primary">

        <div class="card-header">
            <h3 class="card-title">
                Listado de símbolos
            </h3>
        </div>

        <div class="card-body table-responsive p-0">

            <table class="table table-hover table-striped mb-0 simbolos-table">
                <thead class="bg-light">
                    <tr>
                        <th style="width: 60px;">ID</th>
                        <th style="width: 95px;">Imagen</th>
                        <th style="width: 170px;">Vista reglamentaria</th>
                        <th style="width: 180px;">Nombre</th>
                        <th style="width: 170px;">Categoría</th>
                        <th style="width: 100px;">Código</th>
                        <th style="width: 130px;">Tipo</th>
                        <th style="width: 120px;">Afiliación</th>
                        <th style="width: 100px;">Estado</th>
                        <th style="width: 230px;">Acciones</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($simbolos as $simbolo)

                        @php
                            /*
                            |--------------------------------------------------------------------------
                            | Datos base para vista reglamentaria del listado
                            |--------------------------------------------------------------------------
                            */

                            $colorFinal = $simbolo->color_final
                                ?? $simbolo->color_reglamentario
                                ?? '#0057B8';

                            $codigoFinal = $simbolo->abreviatura
                                ?? $simbolo->codigo
                                ?? 'UN';

                            $magnitudFinal = $simbolo->magnitud
                                ?? $simbolo->magnitud_escalon
                                ?? '';

                            $designacionIzquierda = $simbolo->designacion_izquierda
                                ?? '';

                            /*
                            |--------------------------------------------------------------------------
                            | No usamos el código como designación derecha.
                            | Esto evita duplicar UN, CMDO, SPAC, etc.
                            |--------------------------------------------------------------------------
                            */
                            $designacionDerecha = $simbolo->designacion_derecha
                                ?? '';

                            $informacionAdicional = $simbolo->informacion_adicional
                                ?? '';

                            $armamentoFinal = $simbolo->armamento
                                ?? '';

                            $estadoGrafico = $simbolo->estado_grafico
                                ?? 'actual';

                            $estadoClase = match($estadoGrafico) {
                                'futuro' => 'militar-futuro',
                                'simulado' => 'militar-simulado',
                                default => '',
                            };

                            $valorClase = strtolower(
                                ($simbolo->identificacion_clase ?? '')
                                . ' '
                                . ($simbolo->codigo ?? '')
                                . ' '
                                . ($simbolo->abreviatura ?? '')
                                . ' '
                                . ($simbolo->nombre ?? '')
                            );

                            if (str_contains($valorClase, 'inf')) {
                                $claseIdentificacion = 'simbolo-infanteria';
                            } elseif (str_contains($valorClase, 'cab')) {
                                $claseIdentificacion = 'simbolo-caballeria';
                            } elseif (str_contains($valorClase, 'art')) {
                                $claseIdentificacion = 'simbolo-artilleria';
                            } elseif (str_contains($valorClase, 'com')) {
                                $claseIdentificacion = 'simbolo-comunicaciones';
                            } elseif (str_contains($valorClase, 'ing')) {
                                $claseIdentificacion = 'simbolo-ingenieria';
                            } elseif (str_contains($valorClase, 'blind') || str_contains($valorClase, 'tanque')) {
                                $claseIdentificacion = 'simbolo-blindados';
                            } elseif (str_contains($valorClase, 'mot')) {
                                $claseIdentificacion = 'simbolo-motorizado';
                            } elseif (str_contains($valorClase, 'selva')) {
                                $claseIdentificacion = 'simbolo-selva';
                            } elseif (str_contains($valorClase, 'pm')) {
                                $claseIdentificacion = 'simbolo-pm';
                            } elseif (str_contains($valorClase, 'san')) {
                                $claseIdentificacion = 'simbolo-sanidad';
                            } elseif (str_contains($valorClase, 'int')) {
                                $claseIdentificacion = 'simbolo-intendencia';
                            } elseif (str_contains($valorClase, 'mb') || str_contains($valorClase, 'material')) {
                                $claseIdentificacion = 'simbolo-material-belico';
                            } else {
                                $claseIdentificacion = 'simbolo-generico';
                            }

                            $tipoSimboloTexto = $simbolo->tipo_simbolo_texto
                                ?? $simbolo->tipo_simbolo
                                ?? 'No definido';

                            $afiliacionTexto = $simbolo->afiliacion_texto
                                ?? $simbolo->afiliacion_reglamentaria
                                ?? $simbolo->afiliacion
                                ?? 'Propio';

                            $estadoGraficoTexto = $simbolo->estado_grafico_texto
                                ?? ucfirst($estadoGrafico);
                        @endphp

                        <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 simbolo-img"
                                         style="width: 56px; height: 56px; object-fit: contain;">
                                @else
                                    <span class="badge badge-secondary">
                                        Sin imagen
                                    </span>
                                @endif
                            </td>

                            <td class="align-middle text-center">
                                <div class="preview-lista">
                                    <div class="militar-symbol {{ $estadoClase }}" style="--militar-color: {{ $colorFinal }};">

                                        @if($magnitudFinal)
                                            <div class="militar-magnitud">
                                                {{ $magnitudFinal }}
                                            </div>
                                        @endif

                                        <div class="militar-cuerpo">

                                            <div class="militar-lateral militar-izq">
                                                {{ $designacionIzquierda }}
                                            </div>

                                            <div class="militar-marco">
                                                <div class="militar-centro-identidad {{ $claseIdentificacion }}"
                                                     data-label="{{ $codigoFinal }}">
                                                </div>

                                                @if($informacionAdicional)
                                                    <span class="militar-info">
                                                        {{ $informacionAdicional }}
                                                    </span>
                                                @endif
                                            </div>

                                            <div class="militar-lateral militar-der">
                                                {{ $designacionDerecha }}
                                            </div>

                                        </div>

                                        @if($armamentoFinal)
                                            <div class="militar-armamento">
                                                {{ $armamentoFinal }}
                                            </div>
                                        @endif

                                        <div class="militar-nombre">
                                            {{ $simbolo->nombre }}
                                        </div>
                                    </div>
                                </div>
                            </td>

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

                                @if(!empty($simbolo->abreviatura))
                                    <br>
                                    <small class="text-muted">
                                        Abrev.: {{ $simbolo->abreviatura }}
                                    </small>
                                @endif
                            </td>

                            <td class="align-middle">
                                {{ $simbolo->categoria->nombre ?? 'Sin categoría' }}

                                @if(optional($simbolo->categoria)->tipo_reglamentario_texto)
                                    <br>
                                    <small class="text-muted">
                                        {{ $simbolo->categoria->tipo_reglamentario_texto }}
                                    </small>
                                @endif
                            </td>

                            <td class="align-middle">
                                @if($simbolo->codigo)
                                    <span class="badge badge-dark">
                                        {{ $simbolo->codigo }}
                                    </span>
                                @else
                                    <span class="text-muted">No definido</span>
                                @endif
                            </td>

                            <td class="align-middle">
                                {{ $tipoSimboloTexto }}

                                <div class="mt-1">
                                    @if($simbolo->es_punto ?? false)
                                        <span class="badge badge-primary">Punto</span>
                                    @endif

                                    @if($simbolo->es_linea ?? false)
                                        <span class="badge badge-success">Línea</span>
                                    @endif

                                    @if($simbolo->es_area ?? false)
                                        <span class="badge badge-warning">Área</span>
                                    @endif

                                    @if($simbolo->es_combinable ?? false)
                                        <span class="badge badge-info">Combinable</span>
                                    @endif

                                    @if(
                                        !($simbolo->es_punto ?? false)
                                        && !($simbolo->es_linea ?? false)
                                        && !($simbolo->es_area ?? false)
                                        && !($simbolo->es_combinable ?? false)
                                    )
                                        <span class="text-muted small">No definido</span>
                                    @endif
                                </div>
                            </td>

                            <td class="align-middle">
                                <span class="badge afiliacion-badge" style="background-color: {{ $colorFinal }};">
                                    {{ $afiliacionTexto }}
                                </span>
                            </td>

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

                                <br>

                                <small class="text-muted">
                                    {{ $estadoGraficoTexto }}
                                </small>
                            </td>

                            <td class="align-middle">
                                <div class="btn-group btn-group-sm" role="group">

                                    <a href="{{ route('simbolos.show', $simbolo) }}"
                                       class="btn btn-info"
                                       title="Ver símbolo">
                                        <i class="fas fa-eye"></i> Ver
                                    </a>

                                    @if(auth()->user()->hasRole('administrador') || auth()->user()->hasRole('admin') || auth()->user()->hasRole('operador'))
                                        <a href="{{ route('simbolos.edit', $simbolo) }}"
                                           class="btn btn-warning"
                                           title="Editar símbolo">
                                            <i class="fas fa-edit"></i> Editar
                                        </a>

                                        <form action="{{ route('simbolos.destroy', $simbolo) }}"
                                              method="POST"
                                              class="d-inline"
                                              onsubmit="return confirm('¿Está seguro de eliminar este símbolo militar?');">
                                            @csrf
                                            @method('DELETE')

                                            <button type="submit" class="btn btn-danger" title="Eliminar símbolo">
                                                <i class="fas fa-trash"></i> Eliminar
                                            </button>
                                        </form>
                                    @endif

                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center text-muted py-4">
                                <i class="fas fa-info-circle"></i>
                                No hay símbolos militares registrados.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

        </div>

        @if(method_exists($simbolos, 'links'))
            <div class="card-footer clearfix">
                <div class="float-right">
                    {{ $simbolos->links('pagination::bootstrap-4') }}
                </div>
            </div>
        @endif

    </div>

@stop

@section('css')
<link rel="stylesheet" href="{{ asset('css/simbolos-militares.css') }}">

<style>
    .simbolos-table td,
    .simbolos-table th {
        vertical-align: middle !important;
    }

    .simbolos-table th {
        font-size: 13px;
        white-space: nowrap;
    }

    .simbolos-table td {
        font-size: 13px;
    }

    .simbolo-img {
        background: #ffffff;
    }

    .afiliacion-badge {
        color: #ffffff;
        font-weight: 800;
        padding: 5px 7px;
    }

    .btn-group form {
        margin: 0;
    }

    .btn-group form .btn {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .pagination {
        margin-bottom: 0;
    }

    .pagination svg {
        width: 16px !important;
        height: 16px !important;
    }
</style>
@stop