@extends('layouts.app')

@section('title', 'Cartelera - Tablero Kanban')

@push('styles')
<style>
    /* Variables de colores */
    :root {
        --kanban-primary: #667eea;
        --kanban-secondary: #764ba2;
        --kanban-success: #10b981;
        --kanban-warning: #f59e0b;
        --kanban-danger: #ef4444;
        --kanban-info: #3b82f6;
        --kanban-gray: #6b7280;
        --kanban-bg: #f8fafc;
        --kanban-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --kanban-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Asegurar que los modales estén por encima de la barra superior */
    /* La barra superior tiene z-index: 1030, así que usamos valores mucho más altos */
    #createCardModal,
    #viewCardModal {
        z-index: 99999 !important;
    }

    #createCardModal.show,
    #viewCardModal.show {
        z-index: 99999 !important;
        display: block !important;
        opacity: 1 !important;
    }

    #createCardModal .modal-dialog,
    #viewCardModal .modal-dialog {
        z-index: 100000 !important;
        position: relative;
        margin-top: 80px !important; /* Espacio para la barra superior */
    }

    #createCardModal .modal-content,
    #viewCardModal .modal-content {
        z-index: 100001 !important;
        position: relative;
        opacity: 1 !important;
        background-color: #ffffff !important;
    }

    /* Backdrop debe estar entre la barra y el modal - más claro */
    #createCardModal ~ .modal-backdrop,
    #viewCardModal ~ .modal-backdrop,
    body.modal-open .modal-backdrop,
    .modal-backdrop.show {
        z-index: 99998 !important;
        background-color: rgba(0, 0, 0, 0.3) !important; /* Más claro que el default 0.5 */
        opacity: 1 !important;
    }

    /* Forzar que el navbar esté por debajo cuando hay modal abierto */
    body.modal-open .navbar-top {
        z-index: 1030 !important;
    }

    /* Asegurar que el modal esté por encima de todo cuando está abierto */
    body.modal-open #createCardModal.show,
    body.modal-open #viewCardModal.show {
        z-index: 99999 !important;
        display: block !important;
        opacity: 1 !important;
    }

    /* Asegurar que el contenido del modal sea completamente visible */
    body.modal-open #createCardModal.show .modal-content,
    body.modal-open #viewCardModal.show .modal-content {
        opacity: 1 !important;
        background-color: #ffffff !important;
    }

    /* Tablero Kanban */
    .kanban-board {
        display: flex;
        gap: 1.5rem;
        overflow-x: auto;
        padding: 1.5rem 0;
        min-height: 650px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 12px;
        margin-top: 1rem;
    }

    .kanban-board::-webkit-scrollbar {
        height: 8px;
    }

    .kanban-board::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.05);
        border-radius: 10px;
    }

    .kanban-board::-webkit-scrollbar-thumb {
        background: var(--kanban-primary);
        border-radius: 10px;
    }

    .kanban-board::-webkit-scrollbar-thumb:hover {
        background: var(--kanban-secondary);
    }

    /* Columnas */
    .kanban-column {
        min-width: 320px;
        max-width: 320px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 16px;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .kanban-column:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .kanban-column-header {
        padding: 1rem 1.25rem;
        border-radius: 12px;
        margin-bottom: 1.25rem;
        font-weight: 700;
        font-size: 0.95rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
        overflow: hidden;
    }

    .kanban-column-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s;
    }

    .kanban-column-header:hover::before {
        left: 100%;
    }

    .kanban-column-header.bg-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .kanban-column-header.bg-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }

    .kanban-column-header.bg-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
    }

    .kanban-column-header .badge {
        background: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(10px);
        padding: 0.35rem 0.75rem;
        border-radius: 20px;
        font-weight: 700;
        font-size: 0.85rem;
    }

    .kanban-column-body {
        flex: 1;
        min-height: 450px;
        padding: 0.5rem 0;
    }

    /* Tarjetas */
    .kanban-card {
        background: #ffffff;
        border-radius: 12px;
        padding: 1.25rem;
        margin-bottom: 1rem;
        cursor: grab;
        box-shadow: var(--kanban-card-shadow);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 5px solid;
        position: relative;
        overflow: hidden;
    }

    .kanban-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background: inherit;
        transition: width 0.3s ease;
    }

    .kanban-card:hover {
        box-shadow: var(--kanban-card-shadow-hover);
        transform: translateY(-4px) scale(1.02);
    }

    .kanban-card:hover::before {
        width: 100%;
        opacity: 0.05;
    }

    .kanban-card:active {
        cursor: grabbing;
        transform: rotate(2deg) scale(1.05);
    }

    .kanban-card.ghost {
        opacity: 0.5;
        transform: scale(0.95);
        background: #e5e7eb;
    }

    .kanban-card.drag-over {
        border-top: 3px solid var(--kanban-primary);
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
    }

    /* Colores de borde izquierdo */
    .kanban-card[style*="border-left-color: rgb(52, 152, 219)"] {
        border-left-color: #3b82f6 !important;
    }
    .kanban-card[style*="border-left-color: rgb(46, 204, 113)"] {
        border-left-color: #10b981 !important;
    }
    .kanban-card[style*="border-left-color: rgb(243, 156, 18)"] {
        border-left-color: #f59e0b !important;
    }
    .kanban-card[style*="border-left-color: rgb(231, 76, 60)"] {
        border-left-color: #ef4444 !important;
    }
    .kanban-card[style*="border-left-color: rgb(155, 89, 182)"] {
        border-left-color: #8b5cf6 !important;
    }
    .kanban-card[style*="border-left-color: rgb(230, 126, 34)"] {
        border-left-color: #f97316 !important;
    }
    .kanban-card[style*="border-left-color: rgb(149, 165, 166)"] {
        border-left-color: #6b7280 !important;
    }

    .kanban-card-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 0.75rem;
        position: relative;
        z-index: 1;
    }

    .kanban-card-title {
        font-weight: 700;
        font-size: 1rem;
        color: #1f2937;
        margin: 0;
        flex: 1;
        line-height: 1.4;
    }

    .kanban-card-actions {
        display: flex;
        gap: 0.5rem;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .kanban-card:hover .kanban-card-actions {
        opacity: 1;
    }

    .kanban-card-actions .btn-link {
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
        transition: all 0.2s ease;
        pointer-events: auto !important;
        position: relative;
        z-index: 10;
        cursor: pointer;
    }
    
    .kanban-card-actions {
        pointer-events: auto !important;
        z-index: 10;
        position: relative;
    }

    .kanban-card-actions .btn-link:hover {
        background: rgba(0,0,0,0.05);
        transform: scale(1.1);
    }

    .kanban-card-body {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 0.75rem;
        line-height: 1.5;
        position: relative;
        z-index: 1;
    }

    .kanban-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.75rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid #e5e7eb;
        position: relative;
        z-index: 1;
    }

    .kanban-card-priority {
        padding: 0.35rem 0.65rem;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .priority-low { 
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        border: 1px solid #6ee7b7;
    }
    .priority-medium { 
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        border: 1px solid #fcd34d;
    }
    .priority-high { 
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
        border: 1px solid #fca5a5;
    }
    .priority-urgent { 
        background: linear-gradient(135deg, #fecaca 0%, #f87171 100%);
        color: #7f1d1d;
        border: 1px solid #ef4444;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }

    .kanban-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
        background: rgba(0,0,0,0.05);
    }

    .btn-add-card {
        width: 100%;
        margin-top: 1rem;
        border: 2px dashed #cbd5e1;
        background: rgba(255, 255, 255, 0.5);
        color: #64748b;
        padding: 0.75rem;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .btn-add-card::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(102, 126, 234, 0.1);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .btn-add-card:hover {
        background: rgba(102, 126, 234, 0.05);
        border-color: var(--kanban-primary);
        color: var(--kanban-primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    }

    .btn-add-card:hover::before {
        width: 300px;
        height: 300px;
    }

    .btn-add-card i {
        position: relative;
        z-index: 1;
    }

    /* Estadísticas mejoradas */
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.3), 0 4px 6px -2px rgba(102, 126, 234, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .stats-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .stats-card:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 20px 25px -5px rgba(102, 126, 234, 0.4), 0 10px 10px -5px rgba(102, 126, 234, 0.2);
    }

    .stats-card h5 {
        margin: 0;
        font-size: 0.875rem;
        opacity: 0.95;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
        z-index: 1;
    }

    .stats-card h2 {
        margin: 0.75rem 0 0 0;
        font-size: 2.5rem;
        font-weight: 800;
        position: relative;
        z-index: 1;
    }

    .card.border-primary,
    .card.border-warning,
    .card.border-success,
    .card.border-danger {
        border-width: 3px !important;
        border-radius: 12px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .card.border-primary:hover,
    .card.border-warning:hover,
    .card.border-success:hover,
    .card.border-danger:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }

    /* Header mejorado */
    .kanban-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 2rem;
        border-radius: 16px;
        margin-bottom: 2rem;
        box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.3);
    }

    .kanban-header h1 {
        color: white;
        font-weight: 800;
        margin: 0;
    }

    .kanban-header p {
        color: rgba(255, 255, 255, 0.9);
        margin: 0.5rem 0 0 0;
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 10px;
        font-weight: 600;
        box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.3);
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(102, 126, 234, 0.4);
    }

    /* Badges mejorados */
    .badge {
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.75rem;
    }

    /* Animaciones de entrada */
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .kanban-column {
        animation: slideIn 0.5s ease-out;
    }

    .kanban-column:nth-child(1) { animation-delay: 0.1s; }
    .kanban-column:nth-child(2) { animation-delay: 0.2s; }
    .kanban-column:nth-child(3) { animation-delay: 0.3s; }

    /* Modales mejorados */
    .modal-content {
        border-radius: 16px;
        border: none;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 16px 16px 0 0;
        padding: 1.5rem;
        border-bottom: none;
    }

    .modal-header .btn-close {
        filter: brightness(0) invert(1);
        opacity: 0.9;
    }

    .modal-header .btn-close:hover {
        opacity: 1;
    }

    .modal-body {
        padding: 2rem;
    }

    .modal-footer {
        border-top: 1px solid #e5e7eb;
        padding: 1.5rem;
        border-radius: 0 0 16px 16px;
    }

    /* Formularios mejorados */
    .form-label {
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.5rem;
    }

    .form-control,
    .form-select {
        border-radius: 8px;
        border: 1px solid #d1d5db;
        padding: 0.75rem;
        transition: all 0.2s ease;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--kanban-primary);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* Alertas mejoradas */
    .alert {
        border-radius: 12px;
        border: none;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .alert-warning {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
    }

    .alert-danger {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
    }

    /* Botones mejorados */
    .btn-light {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-light:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    /* Efectos de carga */
    .loading {
        opacity: 0.6;
        pointer-events: none;
    }

    /* Scrollbar personalizado para el body del modal */
    .modal-body::-webkit-scrollbar {
        width: 8px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: var(--kanban-primary);
        border-radius: 10px;
    }

    .modal-body::-webkit-scrollbar-thumb:hover {
        background: var(--kanban-secondary);
    }

    /* Mejoras en badges de tarjetas */
    .badge.rounded-pill {
        padding: 0.4rem 0.75rem;
        font-weight: 600;
        font-size: 0.7rem;
    }

    /* Efecto de glassmorphism en columnas */
    @supports (backdrop-filter: blur(10px)) {
        .kanban-column {
            background: rgba(255, 255, 255, 0.8);
        }
    }

    /* Animación de tarjetas al agregar */
    @keyframes cardAppear {
        from {
            opacity: 0;
            transform: scale(0.8) translateY(-20px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    .kanban-card {
        animation: cardAppear 0.3s ease-out;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .kanban-column {
            min-width: 280px;
            max-width: 280px;
        }

        .kanban-header {
            padding: 1.5rem;
        }

        .kanban-header h1 {
            font-size: 1.5rem;
        }

        .stats-card h2 {
            font-size: 2rem;
        }
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header Mejorado -->
    <div class="kanban-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="mb-2">
                    <i class="fas fa-clipboard-list me-2"></i>Cartelera
                </h1>
                <p class="mb-0">Tablero Kanban profesional para gestionar notas y tareas</p>
            </div>
            <div>
                <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#createCardModal">
                    <i class="fas fa-plus me-2"></i>Nueva Nota
                </button>
            </div>
        </div>
    </div>

    <!-- Estadísticas Mejoradas -->
    <div class="row mb-4 g-3">
        <div class="col-md-2">
            <div class="stats-card">
                <h5><i class="fas fa-tasks me-2"></i>Total</h5>
                <h2>{{ $stats['total'] }}</h2>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card border-primary h-100">
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    <i class="fas fa-list fa-2x text-primary mb-2"></i>
                    <h3 class="text-primary mb-1 fw-bold">{{ $stats['todo'] }}</h3>
                    <small class="text-muted fw-semibold">Por Hacer</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card border-warning h-100">
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    <i class="fas fa-spinner fa-2x text-warning mb-2"></i>
                    <h3 class="text-warning mb-1 fw-bold">{{ $stats['in_progress'] }}</h3>
                    <small class="text-muted fw-semibold">En Progreso</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card border-success h-100">
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                    <h3 class="text-success mb-1 fw-bold">{{ $stats['done'] }}</h3>
                    <small class="text-muted fw-semibold">Completadas</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card border-danger h-100">
                <div class="card-body text-center d-flex flex-column justify-content-center">
                    <i class="fas fa-exclamation-triangle fa-2x text-danger mb-2"></i>
                    <h3 class="text-danger mb-1 fw-bold">{{ $stats['overdue'] }}</h3>
                    <small class="text-muted fw-semibold">Vencidas</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Mensaje de alerta si falta migración -->
    @if(isset($migration_needed) && $migration_needed)
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <h5><i class="fas fa-exclamation-triangle me-2"></i>Migración Requerida</h5>
            <p class="mb-0">
                La tabla <code>kanban_cards</code> no existe en la base de datos. 
                Por favor ejecuta la migración para crear las tablas necesarias:
            </p>
            <pre class="mt-2 mb-0 bg-light p-2 rounded"><code>php artisan migrate</code></pre>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(isset($error))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h5><i class="fas fa-exclamation-circle me-2"></i>Error</h5>
            <p class="mb-0">{{ $error }}</p>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Tablero Kanban -->
    <div class="kanban-board" id="kanbanBoard">
        <!-- Columna: Por Hacer -->
        <div class="kanban-column">
            <div class="kanban-column-header bg-primary text-white">
                <span><i class="fas fa-list me-2"></i>Por Hacer</span>
                <span class="badge">{{ $cardsByStatus['todo']->count() }}</span>
            </div>
            <div class="kanban-column-body" data-status="todo" id="column-todo">
                @foreach($cardsByStatus['todo'] as $card)
                    @include('admin.kanban.partials.card', ['card' => $card])
                @endforeach
            </div>
            <button class="btn btn-add-card" onclick="openCreateModal('todo')">
                <i class="fas fa-plus me-2"></i>Agregar Nota
            </button>
        </div>

        <!-- Columna: En Progreso -->
        <div class="kanban-column">
            <div class="kanban-column-header bg-warning text-white">
                <span><i class="fas fa-spinner me-2"></i>En Progreso</span>
                <span class="badge">{{ $cardsByStatus['in_progress']->count() }}</span>
            </div>
            <div class="kanban-column-body" data-status="in_progress" id="column-in_progress">
                @foreach($cardsByStatus['in_progress'] as $card)
                    @include('admin.kanban.partials.card', ['card' => $card])
                @endforeach
            </div>
            <button class="btn btn-add-card" onclick="openCreateModal('in_progress')">
                <i class="fas fa-plus me-2"></i>Agregar Nota
            </button>
        </div>

        <!-- Columna: Completadas -->
        <div class="kanban-column">
            <div class="kanban-column-header bg-success text-white">
                <span><i class="fas fa-check-circle me-2"></i>Completadas</span>
                <span class="badge">{{ $cardsByStatus['done']->count() }}</span>
            </div>
            <div class="kanban-column-body" data-status="done" id="column-done">
                @foreach($cardsByStatus['done'] as $card)
                    @include('admin.kanban.partials.card', ['card' => $card])
                @endforeach
            </div>
            <button class="btn btn-add-card" onclick="openCreateModal('done')">
                <i class="fas fa-plus me-2"></i>Agregar Nota
            </button>
        </div>
    </div>
</div>

<!-- Modal para Crear/Editar Tarjeta -->
<div class="modal fade" id="createCardModal" tabindex="-1" aria-labelledby="createCardModalLabel" aria-hidden="true" style="z-index: 10500 !important;">
    <div class="modal-dialog modal-lg" style="z-index: 10501 !important; position: relative;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createCardModalLabel">
                    <i class="fas fa-sticky-note me-2"></i>Nueva Nota
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="cardForm">
                <div class="modal-body">
                    <input type="hidden" id="cardId" name="id">
                    <input type="hidden" id="cardStatus" name="status" value="todo">
                    
                    <div class="mb-3">
                        <label for="cardTitle" class="form-label">Título <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="cardTitle" name="title" required maxlength="255">
                    </div>

                    <div class="mb-3">
                        <label for="cardDescription" class="form-label">Descripción</label>
                        <textarea class="form-control" id="cardDescription" name="description" rows="2" maxlength="1000"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="cardContent" class="form-label">Contenido</label>
                        <textarea class="form-control" id="cardContent" name="content" rows="4"></textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <label for="cardPriority" class="form-label">Prioridad</label>
                            <select class="form-select" id="cardPriority" name="priority">
                                <option value="low">Baja</option>
                                <option value="medium" selected>Media</option>
                                <option value="high">Alta</option>
                                <option value="urgent">Urgente</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="cardColor" class="form-label">Color</label>
                            <select class="form-select" id="cardColor" name="color">
                                <option value="blue" selected>Azul</option>
                                <option value="green">Verde</option>
                                <option value="yellow">Amarillo</option>
                                <option value="red">Rojo</option>
                                <option value="purple">Morado</option>
                                <option value="orange">Naranja</option>
                                <option value="gray">Gris</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label for="cardDueDate" class="form-label">Fecha Límite</label>
                            <input type="datetime-local" class="form-control" id="cardDueDate" name="due_date">
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <label for="cardAssignedTo" class="form-label">Asignar a</label>
                            <select class="form-select" id="cardAssignedTo" name="assigned_to">
                                <option value="">Sin asignar</option>
                                @if(isset($users) && $users->count() > 0)
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label d-block">Visibilidad</label>
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" id="cardIsPublic" name="is_public" value="1">
                                <label class="form-check-label" for="cardIsPublic">
                                    <i class="fas fa-globe me-1"></i>Pública (visible para todos los usuarios)
                                </label>
                            </div>
                            <small class="text-muted">Si está desactivada, solo tú podrás ver esta nota</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal para Ver Tarjeta -->
<div class="modal fade" id="viewCardModal" tabindex="-1" aria-labelledby="viewCardModalLabel" aria-hidden="true" style="z-index: 10500 !important;">
    <div class="modal-dialog modal-lg" style="z-index: 10501 !important; position: relative;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewCardModalLabel">
                    <i class="fas fa-eye me-2"></i>Ver Nota
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="viewCardContent">
                <!-- Contenido cargado dinámicamente -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="editCardBtn">
                    <i class="fas fa-edit me-2"></i>Editar
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
    // Función para forzar z-index y opacidad del modal
    function forceModalZIndex(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.style.zIndex = '99999';
            modal.style.opacity = '1';
            modal.style.display = 'block';
            
            const dialog = modal.querySelector('.modal-dialog');
            if (dialog) {
                dialog.style.zIndex = '100000';
                dialog.style.position = 'relative';
                dialog.style.marginTop = '80px';
                dialog.style.opacity = '1';
            }
            
            const content = modal.querySelector('.modal-content');
            if (content) {
                content.style.zIndex = '100001';
                content.style.position = 'relative';
                content.style.opacity = '1';
                content.style.backgroundColor = '#ffffff';
            }
            
            // Ajustar backdrop si existe
            const backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) {
                backdrop.style.zIndex = '99998';
                backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
                backdrop.style.opacity = '1';
            }
        }
    }

    // Observer para mantener z-index cuando el modal se muestra
    document.addEventListener('DOMContentLoaded', function() {
        const createModal = document.getElementById('createCardModal');
        const viewModal = document.getElementById('viewCardModal');
        
        if (createModal) {
            createModal.addEventListener('show.bs.modal', function() {
                forceModalZIndex('createCardModal');
            });
            createModal.addEventListener('shown.bs.modal', function() {
                forceModalZIndex('createCardModal');
            });
        }
        
        if (viewModal) {
            viewModal.addEventListener('show.bs.modal', function() {
                forceModalZIndex('viewCardModal');
            });
            viewModal.addEventListener('shown.bs.modal', function() {
                forceModalZIndex('viewCardModal');
            });
        }
        
        // Observer para cambios en el DOM
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                    const target = mutation.target;
                    if (target.id === 'createCardModal' || target.id === 'viewCardModal') {
                        if (target.classList.contains('show')) {
                            forceModalZIndex(target.id);
                        }
                    }
                }
            });
        });
        
        if (createModal) {
            observer.observe(createModal, { attributes: true, attributeFilter: ['class'] });
        }
        if (viewModal) {
            observer.observe(viewModal, { attributes: true, attributeFilter: ['class'] });
        }
    });

    let currentCardId = null;
    let sortableInstances = [];

    // Inicializar Sortable en cada columna
    document.addEventListener('DOMContentLoaded', function() {
        const columns = ['todo', 'in_progress', 'done'];
        
        columns.forEach(status => {
            const column = document.getElementById(`column-${status}`);
            if (column) {
                const sortable = Sortable.create(column, {
                    group: 'kanban',
                    animation: 150,
                    ghostClass: 'ghost',
                    dragClass: 'drag-over',
                    onEnd: function(evt) {
                        updateCardPosition(evt.item.dataset.cardId, status, evt.newIndex);
                    }
                });
                sortableInstances.push(sortable);
            }
        });
    });

    // Abrir modal de creación
    function openCreateModal(status = 'todo') {
        document.getElementById('cardForm').reset();
        document.getElementById('cardId').value = '';
        document.getElementById('cardStatus').value = status;
        document.getElementById('createCardModalLabel').innerHTML = '<i class="fas fa-sticky-note me-2"></i>Nueva Nota';
        document.getElementById('cardIsPublic').checked = false;
        
        const modalElement = document.getElementById('createCardModal');
        // Forzar z-index antes de mostrar
        modalElement.style.zIndex = '99999';
        const modal = new bootstrap.Modal(modalElement);
        modal.show();
        
        // Asegurar z-index después de mostrar
        setTimeout(() => {
            modalElement.style.zIndex = '99999';
            const dialog = modalElement.querySelector('.modal-dialog');
            if (dialog) {
                dialog.style.zIndex = '100000';
                dialog.style.marginTop = '80px';
            }
        }, 100);
    }

    // Guardar tarjeta
    document.getElementById('cardForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const cardId = document.getElementById('cardId').value;
        const url = cardId 
            ? `/kanban/${cardId}` 
            : '/kanban';
        const method = cardId ? 'PUT' : 'POST';

        try {
            const response = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(Object.fromEntries(formData))
            });

            const data = await response.json();

            if (data.success) {
                location.reload();
            } else {
                alert(data.message || 'Error al guardar la tarjeta');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error al guardar la tarjeta');
        }
    });

    // Actualizar posición de tarjeta
    async function updateCardPosition(cardId, newStatus, newPosition) {
        try {
            const response = await fetch('/kanban/update-positions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    positions: [{
                        id: parseInt(cardId),
                        status: newStatus,
                        position: newPosition
                    }]
                })
            });

            const data = await response.json();
            if (!data.success) {
                console.error('Error al actualizar posición:', data.message);
                location.reload(); // Recargar si hay error
            }
        } catch (error) {
            console.error('Error:', error);
            location.reload();
        }
    }

    // Ver tarjeta - Función global
    window.viewCard = async function(cardId) {
        try {
            const response = await fetch(`/kanban/${cardId}`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();

            if (data.success) {
                const card = data.card;
                const modalContent = document.getElementById('viewCardContent');
                modalContent.innerHTML = `
                    <div class="mb-3">
                        <h4>${escapeHtml(card.title)}</h4>
                        <p class="text-muted">${escapeHtml(card.description || 'Sin descripción')}</p>
                    </div>
                    ${card.content ? `<div class="mb-3"><strong>Contenido:</strong><p>${escapeHtml(card.content)}</p></div>` : ''}
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Estado:</strong> ${getStatusLabel(card.status)}<br>
                            <strong>Prioridad:</strong> <span class="priority-${card.priority}">${getPriorityLabel(card.priority)}</span><br>
                            <strong>Color:</strong> ${getColorLabel(card.color)}
                        </div>
                        <div class="col-md-6">
                            <strong>Creado por:</strong> ${card.creator ? escapeHtml(card.creator.name) : 'N/A'}<br>
                            ${card.assignee ? `<strong>Asignado a:</strong> ${escapeHtml(card.assignee.name)}<br>` : ''}
                            ${card.due_date ? `<strong>Fecha límite:</strong> ${new Date(card.due_date).toLocaleDateString()}<br>` : ''}
                            <strong>Visibilidad:</strong> ${card.is_public ? '<i class="fas fa-globe text-success"></i> Pública' : '<i class="fas fa-lock text-warning"></i> Privada'}
                        </div>
                    </div>
                `;
                currentCardId = cardId;
                document.getElementById('editCardBtn').onclick = () => editCard(cardId);
                
                const viewModalElement = document.getElementById('viewCardModal');
                // Forzar z-index antes de mostrar
                viewModalElement.style.zIndex = '99999';
                const viewModal = new bootstrap.Modal(viewModalElement);
                viewModal.show();
                
                // Asegurar z-index después de mostrar
                setTimeout(() => {
                    viewModalElement.style.zIndex = '99999';
                    const dialog = viewModalElement.querySelector('.modal-dialog');
                    if (dialog) {
                        dialog.style.zIndex = '100000';
                        dialog.style.marginTop = '80px';
                    }
                }, 100);
            } else {
                alert(data.message || 'Error al cargar la tarjeta');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error al cargar la tarjeta');
        }
    }

    // Editar tarjeta - Función global
    window.editCard = async function(cardId) {
        try {
            const response = await fetch(`/kanban/${cardId}`, {
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();

            if (data.success) {
                const card = data.card;
                document.getElementById('cardId').value = card.id;
                document.getElementById('cardTitle').value = card.title || '';
                document.getElementById('cardDescription').value = card.description || '';
                document.getElementById('cardContent').value = card.content || '';
                document.getElementById('cardStatus').value = card.status;
                document.getElementById('cardPriority').value = card.priority || 'medium';
                document.getElementById('cardColor').value = card.color || 'blue';
                document.getElementById('cardAssignedTo').value = card.assigned_to || '';
                document.getElementById('cardIsPublic').checked = card.is_public || false;
                document.getElementById('cardDueDate').value = card.due_date ? new Date(card.due_date).toISOString().slice(0, 16) : '';
                
                document.getElementById('createCardModalLabel').innerHTML = '<i class="fas fa-edit me-2"></i>Editar Nota';
                
                // Cerrar el modal de vista si está abierto (verificar que exista la instancia)
                const viewModalElement = document.getElementById('viewCardModal');
                if (viewModalElement) {
                    const viewModalInstance = bootstrap.Modal.getInstance(viewModalElement);
                    if (viewModalInstance) {
                        viewModalInstance.hide();
                    }
                }
                
                // Mostrar el modal de edición
                const editModalElement = document.getElementById('createCardModal');
                if (editModalElement) {
                    forceModalZIndex('createCardModal');
                    const editModal = new bootstrap.Modal(editModalElement);
                    editModal.show();
                    
                    // Asegurar z-index después de mostrar
                    setTimeout(() => {
                        forceModalZIndex('createCardModal');
                    }, 100);
                }
            } else {
                alert(data.message || 'Error al cargar la tarjeta para editar');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error al cargar la tarjeta para editar: ' + error.message);
        }
    }

    // Eliminar tarjeta - Función global
    window.deleteCard = async function(cardId) {
        if (!confirm('¿Estás seguro de que deseas eliminar esta nota?')) {
            return;
        }

        try {
            const response = await fetch(`/kanban/${cardId}`, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                }
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();

            if (data.success) {
                // Remover la tarjeta del DOM en lugar de recargar toda la página
                const cardElement = document.querySelector(`[data-card-id="${cardId}"]`);
                if (cardElement) {
                    cardElement.style.transition = 'opacity 0.3s ease';
                    cardElement.style.opacity = '0';
                    setTimeout(() => {
                        cardElement.remove();
                        // Actualizar contadores
                        updateColumnCounts();
                    }, 300);
                } else {
                location.reload();
                }
            } else {
                alert(data.message || 'Error al eliminar la tarjeta');
            }
        } catch (error) {
            console.error('Error:', error);
            alert('Error al eliminar la tarjeta: ' + error.message);
        }
    }
    
    // Función para actualizar contadores de columnas
    function updateColumnCounts() {
        const columns = ['todo', 'in_progress', 'done'];
        columns.forEach(status => {
            const column = document.getElementById(`column-${status}`);
            if (column) {
                const count = column.querySelectorAll('.kanban-card').length;
                const badge = document.querySelector(`#column-${status}`).closest('.kanban-column').querySelector('.badge');
                if (badge) {
                    badge.textContent = count;
                }
            }
        });
    }

    // Función auxiliar para escapar HTML
    function escapeHtml(text) {
        if (!text) return '';
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Funciones auxiliares
    function getStatusLabel(status) {
        const labels = {
            'todo': 'Por Hacer',
            'in_progress': 'En Progreso',
            'done': 'Completada',
            'archived': 'Archivada'
        };
        return labels[status] || status;
    }

    function getPriorityLabel(priority) {
        const labels = {
            'low': 'Baja',
            'medium': 'Media',
            'high': 'Alta',
            'urgent': 'Urgente'
        };
        return labels[priority] || priority;
    }

    function getColorLabel(color) {
        const labels = {
            'blue': 'Azul',
            'green': 'Verde',
            'yellow': 'Amarillo',
            'red': 'Rojo',
            'purple': 'Morado',
            'orange': 'Naranja',
            'gray': 'Gris'
        };
        return labels[color] || color;
    }
</script>
@endpush