@extends('layouts.admin')

@section('title', 'Tipos de Cursos')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2 fw-bold text-dark"><i class="bi bi-tags-fill text-primary me-2"></i>Tipos de Cursos</h1>
    <button type="button" class="btn btn-primary fw-bold shadow-sm rounded-3" data-bs-toggle="modal" data-bs-target="#createTypeModal">
        <i class="bi bi-plus-lg me-1"></i> Nuevo Tipo
    </button>
</div>

@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
        <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if (session('error'))
    <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="card border-0 shadow-sm rounded-3">
    <div class="card-body p-0 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light text-secondary fw-semibold">
                    <tr>
                        <th class="px-4 py-3" style="width: 10%">ID</th>
                        <th class="py-3">Nombre del Tipo de Curso</th>
                        <th class="py-3" style="width: 20%">Creado el</th>
                        <th class="px-4 py-3 text-end" style="width: 20%">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($types as $type)
                        <tr>
                            <td class="px-4 text-muted fw-bold">#{{ $type->id }}</td>
                            <td>
                                <span class="fw-semibold text-dark fs-6">{{ $type->name }}</span>
                            </td>
                            <td class="text-muted small">
                                {{ $type->created_at ? $type->created_at->format('d/m/Y H:i') : 'N/A' }}
                            </td>
                            <td class="px-4 text-end">
                                <div class="d-flex justify-content-end gap-3">
                                    <button type="button" class="btn btn-link text-warning p-0 border-0 fs-5" 
                                            data-bs-toggle="modal" data-bs-target="#editTypeModal{{ $type->id }}" title="Editar Nombre">
                                        <i class="bi bi-pencil-square"></i>
                                    </button>

                                    <form action="{{ route('admin.course-types.destroy', $type->id) }}" method="POST" onsubmit="return confirm('¿Estás seguro de que deseas eliminar este tipo?');" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-link text-danger p-0 border-0 fs-5" title="Eliminar">
                                            <i class="bi bi-trash3-fill"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        <div class="modal fade" id="editTypeModal{{ $type->id }}" tabindex="-1" aria-labelledby="editTypeModalLabel{{ $type->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content rounded-3 border-0 shadow-lg">
                                    <div class="modal-header bg-warning text-dark py-3">
                                        <h5 class="modal-title fw-bold" id="editTypeModalLabel{{ $type->id }}"><i class="bi bi-pencil-fill me-2"></i>Editar Tipo de Curso</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <form action="{{ route('admin.course-types.update', $type->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <div class="modal-body p-4">
                                            <div class="mb-3">
                                                <label for="name{{ $type->id }}" class="form-label small fw-semibold text-secondary">Nombre de la Categoría/Tipo</label>
                                                <input type="text" class="form-control text-dark py-2" 
                                                       id="name{{ $type->id }}" name="name" value="{{ $type->name }}" placeholder="Ej: Diplomados, Cursos, Seminarios" required>
                                            </div>
                                        </div>
                                        <div class="modal-footer bg-light py-2 px-4">
                                            <button type="button" class="btn btn-secondary btn-sm rounded-2 fw-semibold" data-bs-dismiss="modal">Cancelar</button>
                                            <button type="submit" class="btn btn-warning btn-sm rounded-2 fw-bold text-dark">Actualizar Nombre</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    @empty
                        <tr>
                            <td colspan="4" class="text-center py-5 text-muted">
                                <i class="bi bi-folder-x fs-1 d-block mb-2 opacity-50"></i>
                                No hay tipos de cursos registrados aún.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="createTypeModal" tabindex="-1" aria-labelledby="createTypeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-3 border-0 shadow-lg">
            <div class="modal-header bg-primary text-white py-3">
                <h5 class="modal-title fw-bold" id="createTypeModalLabel"><i class="bi bi-tag-fill me-2"></i>Crear Tipo de Curso</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.course-types.store') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label for="name" class="form-label small fw-semibold text-secondary">Nombre de la Categoría/Tipo</label>
                        <input type="text" class="form-control text-dark py-2 @error('name') is-invalid @enderror" 
                               id="name" name="name" placeholder="Ej: Diplomados, Cursos, Seminarios" required>
                        @error('name')
                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer bg-light py-2 px-4">
                    <button type="button" class="btn btn-secondary btn-sm rounded-2 fw-semibold" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary btn-sm rounded-2 fw-bold">Guardar Cambios</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection