@extends("intranet/layout2")
@section('title', 'Detalle Centro de Votación')

@section("content2")
    <div class="container my-4">
        <div class="card shadow">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <h2 class="mb-0">
                    <i class="fas fa-school mr-2"></i> Detalles del Centro de Votación
                </h2>
                <a href="{{ url()->previous() }}" class="btn btn-light btn-sm">
                    <i class="fas fa-arrow-left mr-1"></i> Volver
                </a>
            </div>

            <div class="card-body">
                <div class="row">
                    <!-- Columna izquierda - Información básica -->
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h4 class="text-dark border-bottom pb-2">
                                <i class="fas fa-info-circle mr-2"></i> Información General
                            </h4>
                            <div class="pl-3">
                                <div class="mb-3">
                                    <small class="text-muted mr-2">Nombre del centro</small>
                                    <p class="badge bg-dark text-white px-3 py-1">{{ $centro->Nombre_Centro }}</p>
                                </div>

                                <div class="mb-3">
                                    <p class="mb-1"><strong><i class="fas fa-map-marker-alt mr-2"></i>Dirección:</strong></p>
                                    <p class="pl-4">{{ $centro->Dirección }}</p>
                                </div>

                                <div class="mb-3">
                                    <p class="mb-1"><strong><i class="fas fa-map-marked-alt mr-2"></i>Ubicación:</strong></p>
                                    <p class="pl-4">
                                        {{ $centro->Departamento }} >
                                        {{ $centro->Provincia }} >
                                        {{ $centro->Distrito }}
                                    </p>
                                </div>

                                <div class="mb-3">
                                    <p class="mb-1"><strong><i class="fas fa-calendar-alt mr-2"></i>Fecha Registro:</strong></p>
                                    <p class="pl-4">{{ $centro->Fecha_Registro }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Columna derecha - Estado -->
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h4 class="text-dark border-bottom pb-2">
                                <i class="fas fa-chart-bar mr-2"></i> Estado
                            </h4>
                            <div class="pl-3">
                                <div class="mb-3">
                                    <p class="mb-1"><strong>Estado actual:</strong></p>
                                    <span class="badge {{ $centro->Estado == 'Activo' ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $centro->Estado }}
                                    </span>
                                </div>

                                <div class="mb-3">
                                    <p class="mb-1"><strong>Última modificación:</strong></p>
                                    <p class="pl-4">{{ $centro->Última_Modificación }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer con información adicional -->
            <div class="card-footer text-muted small">
                <div class="d-flex justify-content-between">
                    <div>
                        <i class="fas fa-calendar-plus mr-1"></i> Registrado: {{ $centro->Fecha_Registro }}
                    </div>
                    <div>
                        <i class="fas fa-calendar-check mr-1"></i> Última actualización: {{ $centro->Última_Modificación }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection