@extends('adminlte::page')

@section('title', 'Detalle de equipo')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="mb-0">Detalle de equipo</h1>

        <div>
            <a href="{{ route('equipos.edit', $equipo) }}" class="btn btn-warning btn-sm">
                <i class="fas fa-edit"></i> Editar
            </a>

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

@section('content')
    <div class="row">
        <div class="col-md-5">
            <div class="card card-outline card-primary">
                <div class="card-header">
                    <h3 class="card-title">Información del equipo</h3>
                </div>

                <div class="card-body">
                    <p><strong>ID:</strong> {{ $equipo->id }}</p>
                    <p><strong>Proyecto:</strong> {{ $equipo->proyecto->nombre ?? '' }}</p>
                    <p><strong>Nombre:</strong> {{ $equipo->nombre }}</p>

                    <p class="d-flex align-items-center" style="gap: 10px;">
                        <strong>Color:</strong>

                        @php
                            $colorEquipo = $equipo->color ?: '#ffffff';

                            if (!str_starts_with($colorEquipo, '#')) {
                                $colorEquipo = '#' . $colorEquipo;
                            }
                        @endphp

                        @if($equipo->color)
                            <span
                                title="Color del equipo"
                                style="
                                    display: inline-block;
                                    width: 50px;
                                    height: 28px;
                                    border-radius: 6px;
                                    border: 1px solid #6c757d;
                                    background-color: {{ $colorEquipo }};
                                    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
                                ">
                            </span>
                        @else
                            <span
                                title="Sin color"
                                style="
                                    display: inline-block;
                                    width: 50px;
                                    height: 28px;
                                    border-radius: 6px;
                                    border: 1px solid #6c757d;
                                    background-color: #ffffff;
                                ">
                            </span>
                        @endif
                    </p>

                    <p>
                        <strong>Tipo:</strong>

                        @php
                            $tipo = strtolower($equipo->tipo ?? '');

                            $badge = match($tipo) {
                                'amigo' => 'primary',
                                'enemigo' => 'danger',
                                'neutral' => 'secondary',
                                default => 'info',
                            };

                            $tipoTexto = match($tipo) {
                                'amigo' => 'Amigo',
                                'enemigo' => 'Enemigo',
                                'neutral' => 'Neutral',
                                default => $equipo->tipo,
                            };
                        @endphp

                        <span class="badge badge-{{ $badge }}">
                            {{ $tipoTexto }}
                        </span>
                    </p>

                    <p>
                        <strong>Creado:</strong>
                        {{ $equipo->created_at?->format('d/m/Y H:i') }}
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-7">
            <div class="card card-outline card-success">
                <div class="card-header">
                    <h3 class="card-title">Unidades asociadas</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>ID</th>
                                <th>Nombre</th>
                                <th>Bando</th>
                                <th>Nivel</th>
                                <th>Estado</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($equipo->unidades as $unidad)
                                <tr>
                                    <td>{{ $unidad->id }}</td>
                                    <td>{{ $unidad->nombre }}</td>
                                    <td>{{ $unidad->bando }}</td>
                                    <td>{{ $unidad->nivel_planeamiento }}</td>
                                    <td>{{ $unidad->estado }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        Este equipo aún no tiene unidades asociadas.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@stop