@extends('layouts.dashboard')

@section('header_title', 'Configuración Académica')

@section('content')
<style>
    .exec-container { font-family: 'Inter', 'Segoe UI', sans-serif; }
    .exec-card { background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); overflow: hidden; }
    .btn-exec { background-color: #1e293b; color: #ffffff; padding: 12px 24px; border-radius: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; border: none; transition: background-color 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
    .btn-exec:hover { background-color: #0f172a; color: white; }
    .exec-table { width: 100%; border-collapse: collapse; }
    .exec-table th { background: #f8fafc; padding: 16px 24px; text-align: left; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; border-bottom: 1px solid #e2e8f0; }
    .exec-table td { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: #334155; vertical-align: middle; }
    .exec-table tr:hover td { background: #fcfcfd; }
    .status-badge { display: inline-flex; items-center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
    .status-ready { background: #ecfdf5; color: #059669; border: 1px solid #d1fae5; }
    .status-incomplete { background: #fef2f2; color: #e11d48; border: 1px solid #ffe4e6; }
    .action-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; transition: all 0.2s; color: #64748b; background: transparent; border: 1px solid transparent; }
    .action-btn:hover { background: #f1f5f9; color: #1e293b; border-color: #e2e8f0; }
    .action-btn.delete:hover { background: #fef2f2; color: #e11d48; border-color: #ffe4e6; }
</style>

<div class="exec-container">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
        <div>
            <h1 style="font-size: 24px; font-weight: 800; color: #0f172a; margin: 0; letter-spacing: -0.02em;">Especialidades y Carreras</h1>
            <p style="font-size: 14px; color: #64748b; margin: 4px 0 0 0;">Gestión de programas académicos y requisitos de emisión.</p>
        </div>
        <div style="display: flex; gap: 12px; align-items: center;">
            <div style="position: relative;">
                <i class="bi bi-search" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8;"></i>
                <input type="text" id="specialty-search" placeholder="Buscar programa..." style="padding: 10px 15px 10px 35px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px; width: 250px; outline: none; transition: all 0.2s;" onkeyup="filterSpecialties()">
            </div>
            <a href="{{ route('specialties.create') }}" class="btn-exec">
                <i class="bi bi-plus-lg"></i> Registrar Programa
            </a>
        </div>
    </div>

    <div class="exec-card">
        <div style="overflow-x: auto;">
            <table class="exec-table" id="specialties-table">
                <thead>
                    <tr>
                        <th>N°</th>
                        <th>Programa Académico</th>
                        <th>Institución</th>
                        <th style="text-align: center;">Estado Operativo</th>
                        <th style="text-align: right;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($specialties as $specialty)
                    @php $isReady = $specialty->isReadyForEmission(); @endphp
                    <tr class="specialty-row">
                        <td style="font-weight: 700; color: #94a3b8;">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</td>
                        <td class="searchable-name">
                            <div style="font-weight: 700; color: #1e293b; margin-bottom: 2px;">{{ $specialty->name }}</div>
                            <div style="font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em;">{{ $specialty->course_type }}</div>
                        </td>
                        <td class="searchable-institution">
                            <span style="font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; padding: 4px 8px; border-radius: 4px; border: 1px solid #e2e8f0;">
                                {{ $specialty->institution_type }}
                            </span>
                        </td>
                        <td style="text-align: center;">
                            @if($isReady)
                                <div class="status-badge status-ready">
                                    <i class="bi bi-check2-circle" style="font-size: 14px;"></i> Completado
                                </div>
                            @else
                                <div class="status-badge status-incomplete">
                                    <i class="bi bi-x-circle" style="font-size: 14px;"></i> Incompleto
                                </div>
                            @endif
                        </td>
                        <td style="text-align: right;">
                            <div style="display: flex; justify-content: flex-end; gap: 8px;">
                                <a href="{{ route('specialties.edit', $specialty) }}" class="action-btn" title="Editar / Completar">
                                    <i class="bi bi-pencil-square"></i>
                                </a>
                                <form action="{{ route('specialties.destroy', $specialty) }}" method="POST" style="margin: 0;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-btn delete" onclick="return confirm('¿Eliminar definitivamente este programa?')" title="Eliminar">
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" style="text-align: center; padding: 60px 20px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">
                            No existen programas registrados.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    function filterSpecialties() {
        const input = document.getElementById('specialty-search');
        const filter = input.value.toUpperCase();
        const table = document.getElementById('specialties-table');
        const rows = table.getElementsByClassName('specialty-row');

        for (let i = 0; i < rows.length; i++) {
            const nameDiv = rows[i].querySelector('.searchable-name');
            const instSpan = rows[i].querySelector('.searchable-institution');
            
            if (nameDiv || instSpan) {
                const textContent = (nameDiv ? nameDiv.textContent : '') + ' ' + (instSpan ? instSpan.textContent : '');
                if (textContent.toUpperCase().indexOf(filter) > -1) {
                    rows[i].style.display = "";
                } else {
                    rows[i].style.display = "none";
                }
            }
        }
    }
</script>
@endsection