@extends('layouts.app')

@section('title', 'Ficha del Expediente')

@section('content')
<div class="container-fluid p-0">
    <div class="row mb-4 align-items-center">
        <div class="col-md-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('expedientes.index') }}">Expedientes</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Ficha de Seguimiento</li>
                </ol>
            </nav>
            <h2 class="fw-bold mb-1"><i class="fa-solid fa-folder-open text-primary me-2"></i> Ficha: {{ $expediente->numero_expediente }}</h2>
            <p class="text-muted mb-0">Código Interno: <span class="badge bg-light text-dark border">{{ $expediente->codigo_interno }}</span></p>
        </div>
        <div class="col-md-4 text-md-end mt-3 mt-md-0">
            @php
                $canEdit = true;
                if (auth()->user()->hasRole('abogado')) {
                    $canEdit = (auth()->user()->lawyer && $expediente->abogados->contains('id', auth()->user()->lawyer->id));
                }
            @endphp
            @if($canEdit)
                <a href="{{ route('expedientes.edit', $expediente->id) }}" class="btn btn-primary-gradient px-4 py-2 rounded-3 me-2">
                    <i class="fa-regular fa-edit me-1"></i> Editar Ficha
                </a>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-3 mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="row g-4 mb-4">
        <!-- Main details -->
        <div class="col-xl-4 col-12">
            <div class="card border-0 bg-white p-4 shadow-sm h-100">
                <h5 class="fw-bold mb-3">Resumen de Causa</h5>
                <hr>
                
                <div class="mb-3">
                    <span class="text-muted small d-block">Estado Procesal</span>
                    <span class="badge py-1.5 px-3 rounded-pill 
                        @if($expediente->estado === 'Nuevo') bg-info-subtle text-info
                        @elseif($expediente->estado === 'En Proceso') bg-primary-subtle text-primary
                        @elseif($expediente->estado === 'En Audiencia') badge-gold
                        @elseif($expediente->estado === 'Ganado') bg-success-subtle text-success
                        @elseif($expediente->estado === 'Perdido') bg-danger-subtle text-danger
                        @else bg-secondary-subtle text-secondary
                        @endif">
                        {{ $expediente->estado }}
                    </span>
                </div>

                <div class="mb-3">
                    <span class="text-muted small d-block">Prioridad</span>
                    <span class="badge py-1 px-3 rounded 
                        @if($expediente->prioridad === 'Alta') bg-danger-subtle text-danger
                        @elseif($expediente->prioridad === 'Media') bg-warning-subtle text-warning
                        @else bg-success-subtle text-success
                        @endif">
                        {{ $expediente->prioridad }}
                    </span>
                </div>



                <div class="mb-3">
                    <span class="text-muted small d-block">Cliente</span>
                    <strong class="text-dark">{{ $expediente->cliente?->nombre_completo ?? 'Sin cliente' }}</strong>
                    <div class="small text-muted">Empresa: {{ $expediente->cliente?->empresa ?? 'Ninguna' }}</div>
                </div>

                <div class="mb-3">
                    <span class="text-muted small d-block">Abogado(s) Responsable(s)</span>
                    @forelse($expediente->abogados as $abg)
                        <div class="fw-semibold text-dark">
                            <i class="fa-solid fa-user-tie text-primary fa-xs me-1"></i>
                            {{ $abg->nombres }} {{ $abg->apellidos }}
                        </div>
                        <div class="small text-muted mb-1">{{ $abg->especialidad }}</div>
                    @empty
                        <span class="text-muted fst-italic small">Sin abogado asignado</span>
                    @endforelse
                </div>

                <div class="mb-3">
                    <span class="text-muted small d-block">Sujetos Procesales</span>
                    <div class="small"><span class="text-success fw-bold">Dte:</span> {{ $expediente->demandante }}</div>
                    <div class="small"><span class="text-danger fw-bold">Ddo:</span> {{ $expediente->demandado }}</div>
                </div>

                <div class="mb-3">
                    <span class="text-muted small d-block">Materia / Proceso</span>
                    <div>{{ $expediente->materia }} ({{ $expediente->especialidad }})</div>
                    <div class="small text-muted">{{ $expediente->tipo_proceso }}</div>
                </div>

                <div class="row g-2 mb-3">
                    <div class="col-6">
                        <span class="text-muted small d-block">Inicio</span>
                        <strong>{{ $expediente->fecha_inicio ? $expediente->fecha_inicio->format('d-m-Y') : 'Sin fecha' }}</strong>
                    </div>
                    <div class="col-6">
                        <span class="text-muted small d-block">Vence / Límite</span>
                        <strong class="text-danger">{{ $expediente->fecha_vencimiento ? $expediente->fecha_vencimiento->format('d-m-Y') : 'Sin fecha' }}</strong>
                    </div>
                </div>

                <div class="border rounded-3 p-3 mb-3 bg-light bg-opacity-50">
                    <span class="text-primary fw-bold small d-block mb-2 border-bottom pb-1">DATOS DE CARPETA FISCAL</span>
                    <div class="row g-2">
                        <div class="col-6"><span class="text-muted small">Carpeta:</span> <strong class="small d-block">{{ $expediente->carpeta_fiscal ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Inv/Proc:</span> <strong class="small d-block">{{ $expediente->investigado_procesado ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Agraviado:</span> <strong class="small d-block">{{ $expediente->agraviado ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Despacho:</span> <strong class="small d-block">{{ $expediente->fiscalia ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Fisc. Prov.:</span> <strong class="small d-block">{{ $expediente->fiscal_provincial ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Fisc. Enc.:</span> <strong class="small d-block">{{ $expediente->fiscal_encargado ?? '-' }}</strong></div>
                        <div class="col-12"><span class="text-muted small">Dirección:</span> <strong class="small d-block">{{ $expediente->fiscal_direccion ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Correo:</span> <strong class="small d-block">{{ $expediente->fiscal_correo ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Telf:</span> <strong class="small d-block">{{ $expediente->fiscal_telefono ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Celular:</span> <strong class="small d-block">{{ $expediente->fiscal_celular ?? '-' }}</strong></div>
                    </div>
                </div>

                <div class="border rounded-3 p-3 mb-3 bg-light bg-opacity-50">
                    <span class="text-primary fw-bold small d-block mb-2 border-bottom pb-1">DATOS PNP</span>
                    <div class="row g-2">
                        <div class="col-12"><span class="text-muted small">Dependencia:</span> <strong class="small d-block">{{ $expediente->pnp_dependencia ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Instructor:</span> <strong class="small d-block">{{ $expediente->pnp_instructor ?? '-' }}</strong></div>
                        <div class="col-6"><span class="text-muted small">Telf:</span> <strong class="small d-block">{{ $expediente->pnp_telefono ?? '-' }}</strong></div>
                    </div>
                </div>

                <div class="border rounded-3 p-3 mb-3 bg-light bg-opacity-50">
                    <span class="text-primary fw-bold small d-block mb-2 border-bottom pb-1">DATOS EXPEDIENTE JUDICIAL</span>
                    <div class="row g-2">
                        <div class="col-12"><span class="text-muted small">Dependencia Jud.:</span> <strong class="small d-block">{{ $expediente->dependencia_judicial ?? '-' }}</strong></div>
                        <div class="col-12"><span class="text-muted small">Dirección:</span> <strong class="small d-block">{{ $expediente->jud_direccion ?? '-' }}</strong></div>
                        <div class="col-12"><span class="text-muted small">Telf / Anexo:</span> <strong class="small d-block">{{ $expediente->jud_telefono ?? '-' }}</strong></div>
                    </div>
                </div>

                <div>
                    <span class="text-muted small d-block">Observaciones Generales</span>
                    <p class="mb-0 text-muted small">{{ $expediente->observaciones ?? 'Sin observaciones' }}</p>
                </div>
            </div>
        </div>

        <!-- Interactive Tabs Sub-resources -->
        <div class="col-xl-8 col-12">
            <div class="card border-0 bg-white p-4 shadow-sm h-100">
                <!-- Navigation Tabs -->
                <ul class="nav nav-tabs border-bottom mb-4 gap-2" id="caseTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active border-0 fw-semibold" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline" type="button" role="tab" aria-controls="timeline" aria-selected="true">
                            <i class="fa-solid fa-list-check me-1"></i> Actividades
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link border-0 fw-semibold" id="seguimiento-tab" data-bs-toggle="tab" data-bs-target="#seguimiento" type="button" role="tab" aria-controls="seguimiento" aria-selected="false">
                            <i class="fa-solid fa-shoe-prints me-1"></i> Seguimiento
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link border-0 fw-semibold" id="cuadernos-tab" data-bs-toggle="tab" data-bs-target="#cuadernos" type="button" role="tab" aria-controls="cuadernos" aria-selected="false">
                            <i class="fa-solid fa-folder-tree me-1"></i> Cuadernos Incidentales
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link border-0 fw-semibold" id="docs-tab" data-bs-toggle="tab" data-bs-target="#docs" type="button" role="tab" aria-controls="docs" aria-selected="false">
                            <i class="fa-solid fa-file-pdf me-1"></i> Gestión Documental
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link border-0 fw-semibold" id="agenda-tab" data-bs-toggle="tab" data-bs-target="#agenda" type="button" role="tab" aria-controls="agenda" aria-selected="false">
                            <i class="fa-solid fa-calendar-plus me-1"></i> Agenda Judicial
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link border-0 fw-semibold" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab" aria-controls="history" aria-selected="false">
                            <i class="fa-solid fa-clock-rotate-left me-1"></i> Auditoría Ficha
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link border-0 fw-semibold position-relative" id="ia-tab" data-bs-toggle="tab" data-bs-target="#ia-panel" type="button" role="tab" aria-controls="ia-panel" aria-selected="false" style="color: #0B1F3A;">
                            <i class="fa-solid fa-wand-magic-sparkles me-1" style="color: #C9A227;"></i> Copiloto Jurídico IA
                            <span class="badge bg-primary text-white ms-1" style="font-size: 0.65rem;">Gemini</span>
                        </button>
                    </li>
                </ul>

                <!-- Tab Contents -->
                <div class="tab-content" id="caseTabsContent">
                    
                    <!-- TAB 1: TIMELINE / SEGUIMIENTO -->
                    <div class="tab-pane fade show active" id="timeline" role="tabpanel" aria-labelledby="timeline-tab">
                        <!-- Add activity form -->
                        <div class="border rounded-4 p-3 mb-4 bg-light bg-opacity-40">
                            <h6 class="fw-bold mb-3"><i class="fa-solid fa-plus text-primary me-1"></i> Registrar Nueva Diligencia / Actividad</h6>
                            <form action="{{ route('actividades.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="expediente_id" value="{{ $expediente->id }}">
                                <div class="row g-2 mb-3">
                                    <div class="col-md-6">
                                        <label for="tipo_actividad" class="form-label small fw-semibold text-muted">TIPO</label>
                                        <select class="form-select" id="tipo_actividad" name="tipo_actividad" required>
                                            <option value="Diligencia">Diligencia</option>
                                            <option value="Reunión">Reunión</option>
                                            <option value="Llamada">Llamada</option>
                                            <option value="Presentación de escritos">Presentación de escritos</option>
                                            <option value="Seguimientos">Seguimiento</option>
                                        </select>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="fecha_hora" class="form-label small fw-semibold text-muted">FECHA Y HORA</label>
                                        <input type="datetime-local" class="form-control" id="fecha_hora" name="fecha_hora" value="{{ date('Y-m-d\TH:i') }}" required>
                                    </div>
                                    <div class="col-12">
                                        <label for="descripcion" class="form-label small fw-semibold text-muted">DETALLE / ACTA</label>
                                        <textarea class="form-control" id="descripcion" name="descripcion" rows="2" placeholder="Resumen del escrito, acta de reunión o llamada..." required></textarea>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary-gradient btn-sm px-3 rounded-2">Guardar Actividad</button>
                            </form>
                        </div>

                        <!-- Timeline list -->
                        <div class="timeline ps-3">
                            @forelse($expediente->actividades as $act)
                                <div class="timeline-item mb-4">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <span class="badge bg-secondary py-1 px-2.5 rounded-pill">{{ $act->tipo_actividad }}</span>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="text-muted small"><i class="fa-regular fa-clock me-1"></i> {{ $act->fecha_hora->format('d-m-Y H:i') }}</span>
                                            <form action="{{ route('actividades.destroy', $act->id) }}" method="POST" onsubmit="return confirm('¿Eliminar esta actividad?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-link text-danger p-0" title="Eliminar"><i class="fa-regular fa-trash-can"></i></button>
                                            </form>
                                        </div>
                                    </div>
                                    <p class="mb-1 text-dark">{{ $act->descripcion }}</p>
                                    <div class="small text-muted text-end">Registrado por: <strong>{{ $act->user->name }}</strong></div>
                                </div>
                            @empty
                                <div class="text-center py-4 text-muted">
                                    No se han registrado actividades para este expediente aún.
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- TAB: SEGUIMIENTO FISCAL -->
                    <div class="tab-pane fade" id="seguimiento" role="tabpanel" aria-labelledby="seguimiento-tab">
                        <div class="border rounded-4 p-3 mb-4 bg-light bg-opacity-40">
                            <h6 class="fw-bold mb-3"><i class="fa-solid fa-plus text-primary me-1"></i> Añadir Nota de Seguimiento Fiscal</h6>
                            <form action="{{ route('seguimientos.store', $expediente->id) }}" method="POST">
                                @csrf
                                <div class="row g-2 mb-3">
                                    <div class="col-md-3">
                                        <label for="fecha_seguimiento" class="form-label small fw-semibold text-muted">FECHA</label>
                                        <input type="date" class="form-control" id="fecha_seguimiento" name="fecha" value="{{ date('Y-m-d') }}" required>
                                    </div>
                                    <div class="col-md-9">
                                        <label for="nota_seguimiento" class="form-label small fw-semibold text-muted">NOTAS DEL SEGUIMIENTO (EJ. FUI A FISCALÍA Y...)</label>
                                        <input type="text" class="form-control" id="nota_seguimiento" name="nota" placeholder="Ej: Me dijeron que para el 30 proveerán mi escrito..." required>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary-gradient btn-sm px-3 rounded-2">Añadir Seguimiento</button>
                            </form>
                        </div>

                        <div class="timeline ps-3">
                            @forelse($expediente->seguimientos as $seg)
                                <div class="timeline-item mb-4">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <span class="badge bg-primary py-1 px-2.5 rounded-pill"><i class="fa-regular fa-calendar me-1"></i> {{ $seg->fecha->format('d.m.y') }}</span>
                                        <div class="d-flex align-items-center gap-2">
                                            <form action="{{ route('seguimientos.destroy', $seg->id) }}" method="POST" onsubmit="return confirm('¿Eliminar este seguimiento?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-link text-danger p-0" title="Eliminar"><i class="fa-regular fa-trash-can"></i></button>
                                            </form>
                                        </div>
                                    </div>
                                    <p class="mb-1 text-dark">{{ $seg->nota }}</p>
                                    <div class="small text-muted text-end">Registrado por: <strong>{{ $seg->user->name }}</strong></div>
                                </div>
                            @empty
                                <div class="text-center py-4 text-muted">
                                    No hay seguimientos registrados.
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- TAB: CUADERNOS INCIDENTALES -->
                    <div class="tab-pane fade" id="cuadernos" role="tabpanel" aria-labelledby="cuadernos-tab">
                        <div class="border rounded-4 p-3 mb-4 bg-light bg-opacity-40">
                            <h6 class="fw-bold mb-3"><i class="fa-solid fa-plus text-primary me-1"></i> Crear Nuevo Cuaderno Incidental</h6>
                            <form action="{{ route('cuadernos.store', $expediente->id) }}" method="POST">
                                @csrf
                                <div class="row g-2 mb-3">
                                    <div class="col-md-9">
                                        <label for="nombre_cuaderno" class="form-label small fw-semibold text-muted">NOMBRE DEL CUADERNO / INCIDENTE</label>
                                        <input type="text" class="form-control" id="nombre_cuaderno" name="nombre" placeholder="Ej: Prórroga de investigación preparatoria, Prisión preventiva..." required>
                                    </div>
                                    <div class="col-md-3 d-flex align-items-end">
                                        <button type="submit" class="btn btn-primary-gradient btn-sm px-4 rounded-2 w-100 mb-1" style="height: 38px;">Crear Cuaderno</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="accordion" id="accordionCuadernos">
                            @forelse($expediente->cuadernosIncidentales as $index => $cuaderno)
                                <div class="accordion-item mb-3 border rounded-3 overflow-hidden shadow-sm">
                                    <h2 class="accordion-header" id="headingCuaderno{{ $cuaderno->id }}">
                                        <button class="accordion-button collapsed fw-bold text-dark bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCuaderno{{ $cuaderno->id }}" aria-expanded="false" aria-controls="collapseCuaderno{{ $cuaderno->id }}">
                                            <i class="fa-solid fa-folder-open text-warning me-2 fs-5"></i> Cuaderno: {{ $cuaderno->nombre }}
                                        </button>
                                    </h2>
                                    <div id="collapseCuaderno{{ $cuaderno->id }}" class="accordion-collapse collapse" aria-labelledby="headingCuaderno{{ $cuaderno->id }}" data-bs-parent="#accordionCuadernos">
                                        <div class="accordion-body bg-light">
                                            <div class="d-flex justify-content-between mb-3 align-items-center">
                                                <h6 class="mb-0 fw-semibold text-secondary">Documentos en este Cuaderno</h6>
                                                <div>
                                                    <button type="button" class="btn btn-sm btn-outline-primary me-2" data-bs-toggle="modal" data-bs-target="#modalAdjuntarCuaderno{{ $cuaderno->id }}">
                                                        <i class="fa-solid fa-cloud-arrow-up me-1"></i> Adjuntar Documento
                                                    </button>
                                                    <form action="{{ route('cuadernos.destroy', $cuaderno->id) }}" method="POST" onsubmit="return confirm('¿Eliminar este cuaderno y todos sus documentos?');" class="d-inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fa-regular fa-trash-can me-1"></i> Eliminar Cuaderno</button>
                                                    </form>
                                                </div>
                                            </div>
                                            
                                            <!-- List docs in cuaderno -->
                                            <div class="table-responsive bg-white rounded-3 border">
                                                <table class="table align-middle mb-0">
                                                    <tbody>
                                                        @forelse($cuaderno->documentos as $doc)
                                                            <tr>
                                                                <td class="ps-3">
                                                                    <i class="fa-regular fa-file-lines me-2 text-primary"></i>
                                                                    <span class="fw-semibold">{{ $doc->nombre }}</span> <small class="text-muted ms-2">v{{ $doc->version }}</small>
                                                                </td>
                                                                <td class="text-end pe-3">
                                                                    @if(Str::endsWith($doc->ruta_archivo, '.pdf'))
                                                                        <a href="{{ route('documentos.preview', $doc->id) }}" target="_blank" class="btn btn-light btn-sm rounded-circle p-2" title="Previsualizar">
                                                                            <i class="fa-regular fa-eye text-info"></i>
                                                                        </a>
                                                                    @endif
                                                                    <a href="{{ route('documentos.download', $doc->id) }}" class="btn btn-light btn-sm rounded-circle p-2" title="Descargar">
                                                                        <i class="fa-solid fa-download text-success"></i>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="2" class="text-center py-3 text-muted small">No hay documentos en este cuaderno.</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center py-4 text-muted">
                                    No hay cuadernos incidentales creados.
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- TAB 2: DOCUMENTOS -->
                    <div class="tab-pane fade" id="docs" role="tabpanel" aria-labelledby="docs-tab">
                        <!-- Add document form -->
                        <div class="border rounded-4 p-3 mb-4 bg-light bg-opacity-40">
                            <h6 class="fw-bold mb-3"><i class="fa-solid fa-cloud-arrow-up text-primary me-1"></i> Adjuntar Documento Habilitante</h6>
                            <form action="{{ route('documentos.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" name="expediente_id" value="{{ $expediente->id }}">
                                <div class="row g-2 mb-3">
                                    <div class="col-md-6">
                                        <label for="nombre" class="form-label small fw-semibold text-muted">NOMBRE DEL DOCUMENTO (Opcional si son varios)</label>
                                        <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Demanda, Sentencia, Escrito...">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="tipo_documento" class="form-label small fw-semibold text-muted">CATEGORÍA</label>
                                        <select class="form-select" id="tipo_documento" name="tipo_documento" required>
                                            <option value="Demanda">Demanda</option>
                                            <option value="Contestación">Contestación</option>
                                            <option value="Resolución">Resolución</option>
                                            <option value="Sentencia">Sentencia</option>
                                            <option value="Audiencia">Audiencia</option>
                                            <option value="Pruebas">Pruebas</option>
                                            <option value="Varios">Varios</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="archivos" class="form-label small fw-semibold text-muted">SELECCIONE ARCHIVO(S) (PDF, Word, Imagen)</label>
                                        <input type="file" class="form-control" id="archivos" name="archivos[]" multiple required>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="cuaderno_incidental_id" class="form-label small fw-semibold text-muted">UBICACIÓN / CUADERNO</label>
                                        <select class="form-select" id="cuaderno_incidental_id" name="cuaderno_incidental_id">
                                            <option value="">Expediente Principal</option>
                                            @foreach($expediente->cuadernosIncidentales as $cuad)
                                                <option value="{{ $cuad->id }}">Cuaderno: {{ $cuad->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4 d-flex align-items-center">
                                        <div class="form-check form-switch mt-4">
                                            <input class="form-check-input" type="checkbox" role="switch" id="autorizado_cliente" name="autorizado_cliente" value="1">
                                            <label class="form-check-label small fw-bold text-dark" for="autorizado_cliente">
                                                Visibilidad Portal Cliente
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary-gradient btn-sm px-3 rounded-2">Subir y Adjuntar</button>
                            </form>
                        </div>

                        <!-- Documents list -->
                        <div class="table-responsive">
                            <table class="table align-middle">
                                <thead>
                                    <tr>
                                        <th>Archivo</th>
                                        <th>Ubicación</th>
                                        <th>Categoría</th>
                                        <th>Versión</th>
                                        <th>Autorizado</th>
                                        <th>Subido por</th>
                                        <th class="text-end">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($expediente->documentos as $doc)
                                        <tr>
                                            <td>
                                                <i class="fa-regular fa-file-lines me-2 text-primary fs-4"></i>
                                                <span class="fw-bold">{{ $doc->nombre }}</span>
                                            </td>
                                            <td>
                                                @if($doc->cuadernoIncidental)
                                                    <span class="badge bg-warning text-dark"><i class="fa-solid fa-folder-tree me-1"></i> {{ $doc->cuadernoIncidental->nombre }}</span>
                                                @else
                                                    <span class="badge bg-secondary"><i class="fa-regular fa-folder me-1"></i> Exp. Principal</span>
                                                @endif
                                            </td>
                                            <td><span class="badge bg-light text-dark border">{{ $doc->tipo_documento }}</span></td>
                                            <td>v{{ $doc->version }}</td>
                                            <td>
                                                @if($doc->autorizado_cliente)
                                                    <span class="text-success small"><i class="fa-solid fa-eye me-1"></i> Sí</span>
                                                @else
                                                    <span class="text-muted small"><i class="fa-solid fa-eye-slash me-1"></i> No</span>
                                                @endif
                                            </td>
                                            <td>{{ $doc->user->name }}</td>
                                            <td class="text-end">
                                                <div class="d-flex justify-content-end gap-2">
                                                    <!-- In-browser preview -->
                                                    @if(Str::endsWith($doc->ruta_archivo, '.pdf'))
                                                        <a href="{{ route('documentos.preview', $doc->id) }}" target="_blank" class="btn btn-light btn-sm rounded-circle p-2" title="Previsualizar PDF">
                                                            <i class="fa-regular fa-eye text-info"></i>
                                                        </a>
                                                    @endif
                                                    <a href="{{ route('documentos.download', $doc->id) }}" class="btn btn-light btn-sm rounded-circle p-2" title="Descargar">
                                                        <i class="fa-solid fa-download text-success"></i>
                                                    </a>
                                                    <form action="{{ route('documentos.destroy', $doc->id) }}" method="POST" onsubmit="return confirm('¿Seguro de que desea eliminar este documento?');">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-light btn-sm rounded-circle p-2" title="Eliminar"><i class="fa-regular fa-trash-can text-danger"></i></button>
                                                    </form>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-4 text-muted">
                                                No hay documentos vinculados a esta causa.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- TAB 3: AGENDA / AUDIENCIAS -->
                    <div class="tab-pane fade" id="agenda" role="tabpanel" aria-labelledby="agenda-tab">
                        <!-- Add hearing/appointment form -->
                        <div class="border rounded-4 p-3 mb-4 bg-light bg-opacity-40">
                            <h6 class="fw-bold mb-3"><i class="fa-regular fa-calendar-plus text-primary me-1"></i> Agendar Citación / Audiencia</h6>
                            <form action="{{ route('agenda.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="expediente_id" value="{{ $expediente->id }}">
                                <div class="row g-2 mb-3">
                                    <div class="col-md-4">
                                        <label for="tipo_actividad_agenda" class="form-label small fw-semibold text-muted">TIPO ACTIVIDAD</label>
                                        <select class="form-select" id="tipo_actividad_agenda" name="tipo_actividad">
                                            <option value="Audiencia">Audiencia</option>
                                            <option value="Citación">Citación</option>
                                            <option value="Reunión">Reunión</option>
                                            <option value="Presentación de escritos">Presentación de escritos</option>
                                            <option value="Vencimiento">Vencimiento procesal</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="fecha" class="form-label small fw-semibold text-muted">FECHA</label>
                                        <input type="date" class="form-control" id="fecha" name="fecha" required>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="hora" class="form-label small fw-semibold text-muted">HORA</label>
                                        <input type="time" class="form-control" id="hora" name="hora" required>
                                    </div>
                                    <div class="col-md-12">
                                        <label for="responsable_id" class="form-label small fw-semibold text-muted">RESPONSABLE ASIGNADO</label>
                                        <select class="form-select" id="responsable_id" name="responsable_id" required>
                                            @foreach($abogados as $abg)
                                                <option value="{{ $abg->user_id }}">{{ $abg->nombre_completo }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label for="descripcion_agenda" class="form-label small fw-semibold text-muted">DESCRIPCIÓN / ENLACE VIRTUAL / SALA</label>
                                        <textarea class="form-control" id="descripcion_agenda" name="descripcion" rows="2" placeholder="Detalles de la sala, enlace a Zoom o Teams, indicaciones..." required></textarea>
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-primary-gradient btn-sm px-3 rounded-2">Agendar Evento</button>
                            </form>
                        </div>

                        <!-- Hearings List -->
                        <div class="table-responsive">
                            <table class="table align-middle">
                                <thead>
                                    <tr>
                                        <th>Fecha y Hora</th>
                                        <th>Actividad</th>
                                        <th>Responsable</th>
                                        <th>Descripción</th>
                                        <th class="text-end">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($expediente->audiencias as $aud)
                                        <tr>
                                            <td>
                                                <span class="badge bg-light text-dark py-2 px-3">
                                                    {{ $aud->fecha->format('d-m-Y') }} {{ \Carbon\Carbon::parse($aud->hora)->format('H:i') }}
                                                </span>
                                            </td>
                                            <td>
                                                <span class="badge py-1.5 px-3 rounded-pill 
                                                    @if($aud->tipo_actividad === 'Audiencia') bg-primary
                                                    @elseif($aud->tipo_actividad === 'Citación') badge-gold
                                                    @elseif($aud->tipo_actividad === 'Reunión') bg-success
                                                    @else bg-secondary
                                                    @endif">
                                                    {{ $aud->tipo_actividad }}
                                                </span>
                                            </td>
                                            <td>{{ $aud->responsable->name }}</td>
                                            <td><span class="small">{{ $aud->descripcion }}</span></td>
                                            <td class="text-end">
                                                <form action="{{ route('agenda.destroy', $aud->id) }}" method="POST" onsubmit="return confirm('¿Eliminar esta cita de la agenda?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-light btn-sm rounded-circle p-2" title="Eliminar"><i class="fa-regular fa-trash-can text-danger"></i></button>
                                                </form>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center py-4 text-muted">
                                                No hay audiencias agendadas.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- TAB 4: HISTORIAL DE CAMBIOS -->
                    <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                        <h6 class="fw-bold mb-3"><i class="fa-solid fa-clock-rotate-left text-primary me-1"></i> Bitácora de Modificaciones del Expediente</h6>
                        <div class="timeline ps-3">
                            @forelse($expediente->historiales as $hist)
                                <div class="timeline-item mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <span class="small fw-bold text-dark">Campo modificado: <code class="text-primary">{{ $hist->campo }}</code></span>
                                        <span class="text-muted small"><i class="fa-regular fa-clock me-1"></i> {{ $hist->created_at->format('d-m-Y H:i') }}</span>
                                    </div>
                                    <div class="small">
                                        <span class="text-muted">Valor anterior:</span> <span class="text-danger decoration-line-through">{{ $hist->valor_anterior ?? '(vacio)' }}</span>
                                        <br>
                                        <span class="text-muted">Valor nuevo:</span> <span class="text-success fw-bold">{{ $hist->valor_nuevo }}</span>
                                    </div>
                                    <div class="small text-muted mt-1">Modificado por: <strong>{{ $hist->user ? $hist->user->name : 'Sistema' }}</strong></div>
                                </div>
                            @empty
                                <div class="text-center py-4 text-muted">
                                    Este expediente no ha recibido modificaciones desde su registro.
                                </div>
                            @endforelse
                        </div>
                    </div>

                    <!-- TAB 5: COPILOTO JURÍDICO IA (GEMINI) -->
                    <div class="tab-pane fade" id="ia-panel" role="tabpanel" aria-labelledby="ia-tab">
                        <!-- AI Header Banner -->
                        <div class="ai-glass-card p-4 mb-4 shadow-sm">
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="bg-primary text-white rounded-circle p-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                        <i class="fa-solid fa-wand-magic-sparkles fs-4"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-bold mb-1 d-flex align-items-center gap-2">
                                            Copiloto Jurídico Inteligente
                                            <span class="badge bg-primary text-white" style="font-size: 0.7rem;">Google Gemini</span>
                                        </h5>
                                        <p class="text-muted small mb-0">Auditoría procesal automatizada, cálculo de contingencias y redactor de escritos para la causa: <strong>{{ $expediente->numero_expediente }}</strong></p>
                                    </div>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3" data-bs-toggle="offcanvas" data-bs-target="#geminiChatOffcanvas">
                                        <i class="fa-regular fa-comments me-1"></i> Abrir Chat Interactivo
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Sub-navigation for IA Tools -->
                        <ul class="nav nav-pills mb-3 gap-2" id="iaSubTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active rounded-pill px-3 py-1.5 fw-semibold" id="ia-diag-tab" data-bs-toggle="pill" data-bs-target="#ia-diag" type="button" role="tab">
                                    <i class="fa-solid fa-chart-pie me-1"></i> Diagnóstico y Riesgos Procesales
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link rounded-pill px-3 py-1.5 fw-semibold" id="ia-draft-tab" data-bs-toggle="pill" data-bs-target="#ia-draft" type="button" role="tab">
                                    <i class="fa-solid fa-pen-nib me-1"></i> Generador de Escritos
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content" id="iaSubTabsContent">
                            <!-- SUB-TAB 1: DIAGNÓSTICO -->
                            <div class="tab-pane fade show active" id="ia-diag" role="tabpanel">
                                <div class="border rounded-4 p-3 mb-4 bg-light bg-opacity-40">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                                        <div>
                                            <h6 class="fw-bold mb-1"><i class="fa-solid fa-brain text-primary me-1"></i> Análisis Integral de la Causa</h6>
                                            <p class="text-muted small mb-0">Gemini examinará las partes, juzgado, estado, actuaciones y audiencias registradas para formular una auditoría procesal.</p>
                                        </div>
                                        <button type="button" class="btn btn-primary-gradient px-4 py-2 rounded-3 d-flex align-items-center gap-2" id="btn-run-ia-analisis">
                                            <i class="fa-solid fa-play" id="icon-run-analisis"></i>
                                            <span class="spinner-border spinner-border-sm d-none" id="spinner-run-analisis" role="status"></span>
                                            <span>Generar Diagnóstico</span>
                                        </button>
                                    </div>
                                    <div id="analisis-status-alert" class="d-none"></div>
                                </div>

                                <!-- Output Box for Diagnosis -->
                                <div id="analisis-result-wrapper" class="d-none">
                                    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
                                        <span class="small text-muted"><i class="fa-regular fa-clock me-1"></i> Resultado generado en tiempo real con Gemini</span>
                                        <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill px-3" id="btn-copy-analisis">
                                            <i class="fa-regular fa-copy me-1"></i> Copiar Informe
                                        </button>
                                    </div>
                                    <div class="ai-output-box shadow-sm" id="analisis-output-content"></div>
                                </div>
                            </div>

                            <!-- SUB-TAB 2: REDACTOR DE ESCRITOS -->
                            <div class="tab-pane fade" id="ia-draft" role="tabpanel">
                                <div class="border rounded-4 p-3 mb-4 bg-light bg-opacity-40">
                                    <h6 class="fw-bold mb-3"><i class="fa-solid fa-file-pen text-primary me-1"></i> Redactar Minuta / Escrito Forense con IA</h6>
                                    <form id="form-ia-redactar">
                                        <div class="row g-3 mb-3">
                                            <div class="col-md-6">
                                                <label for="tipo_escrito_select" class="form-label small fw-semibold text-muted">TIPO DE ESCRITO JUDICIAL</label>
                                                <select class="form-select" id="tipo_escrito_select" name="tipo_escrito" required>
                                                    <option value="Escrito de Apersonamiento y Señalamiento de Domicilio Procesal">Apersonamiento y Domicilio Procesal</option>
                                                    <option value="Escrito de Impulso Procesal y Solicitud de Celeridad">Impulso Procesal / Solicitud de Celeridad</option>
                                                    <option value="Solicitud de Expedición de Copias Certificadas del Expediente">Solicitud de Copias Certificadas</option>
                                                    <option value="Recurso de Apelación con Expresión de Agravios">Recurso de Apelación</option>
                                                    <option value="Escrito de Absolución de Traslado / Contestación">Contestación / Absolución de Traslado</option>
                                                    <option value="Escrito de Subsanación de Requisitos Formales">Subsanación de Inadmisibilidad</option>
                                                    <option value="Escrito de Formulación de Alegatos Escritos Finales">Alegatos Finales</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <label for="instrucciones_redaccion" class="form-label small fw-semibold text-muted">INSTRUCCIONES O HECHOS ESPECÍFICOS (OPCIONAL)</label>
                                                <input type="text" class="form-control" id="instrucciones_redaccion" name="instrucciones" placeholder="Ej: Mencionar que la otra parte no notificó la resolución 5...">
                                            </div>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-muted small">Los nombres de las partes, número de expediente y juzgado se insertarán automáticamente.</span>
                                            <button type="submit" class="btn btn-primary-gradient px-4 py-2 rounded-3 d-flex align-items-center gap-2" id="btn-run-redaccion">
                                                <i class="fa-solid fa-pen-fancy" id="icon-run-redaccion"></i>
                                                <span class="spinner-border spinner-border-sm d-none" id="spinner-run-redaccion" role="status"></span>
                                                <span>Redactar Escrito</span>
                                            </button>
                                        </div>
                                    </form>
                                    <div id="redaccion-status-alert" class="mt-3 d-none"></div>
                                </div>

                                <!-- Output Box for Draft -->
                                <div id="redaccion-result-wrapper" class="d-none">
                                    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
                                        <span class="small text-muted"><i class="fa-regular fa-file-lines me-1"></i> Borrador formal listo para revisión forense</span>
                                        <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3" id="btn-copy-redaccion">
                                            <i class="fa-regular fa-copy me-1"></i> Copiar Escrito al Portapapeles
                                        </button>
                                    </div>
                                    <div class="ai-output-box shadow-sm" id="redaccion-output-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Set global context for Copilot drawer
    window.currentExpedienteId = {{ $expediente->id }};
    window.currentExpedienteNumero = "{{ $expediente->numero_expediente }}";

    // Trigger context indicator if drawer was already initialized
    if (typeof syncAiContext === 'function') {
        syncAiContext();
    }

    // Diagnostics Handler
    const btnRunAnalisis = document.getElementById('btn-run-ia-analisis');
    const iconRunAnalisis = document.getElementById('icon-run-analisis');
    const spinnerRunAnalisis = document.getElementById('spinner-run-analisis');
    const analisisWrapper = document.getElementById('analisis-result-wrapper');
    const analisisContent = document.getElementById('analisis-output-content');
    const analisisAlert = document.getElementById('analisis-status-alert');
    const btnCopyAnalisis = document.getElementById('btn-copy-analisis');

    let rawAnalisisText = '';

    if (btnRunAnalisis) {
        btnRunAnalisis.addEventListener('click', async () => {
            iconRunAnalisis.classList.add('d-none');
            spinnerRunAnalisis.classList.remove('d-none');
            btnRunAnalisis.disabled = true;
            analisisAlert.className = 'd-none';

            try {
                const response = await fetch('{{ route("expedientes.ia.analizar", $expediente->id) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    rawAnalisisText = data.text;
                    analisisContent.innerHTML = (typeof parseMarkdown === 'function') 
                        ? parseMarkdown(data.text) 
                        : data.text.replace(/\n/g, '<br>');
                    analisisWrapper.classList.remove('d-none');
                    analisisWrapper.scrollIntoView({ behavior: 'smooth' });
                } else {
                    analisisAlert.className = 'alert alert-warning border-0 rounded-3 mt-3 d-block';
                    analisisAlert.innerHTML = `<i class="fa-solid fa-triangle-exclamation me-1"></i> ${data.message || 'Error al generar el análisis con IA.'}`;
                }
            } catch (err) {
                analisisAlert.className = 'alert alert-danger border-0 rounded-3 mt-3 d-block';
                analisisAlert.innerHTML = `<i class="fa-solid fa-circle-exclamation me-1"></i> No se pudo comunicar con el servidor para el análisis.`;
            } finally {
                iconRunAnalisis.classList.remove('d-none');
                spinnerRunAnalisis.classList.add('d-none');
                btnRunAnalisis.disabled = false;
            }
        });
    }

    if (btnCopyAnalisis) {
        btnCopyAnalisis.addEventListener('click', () => {
            if (!rawAnalisisText) return;
            navigator.clipboard.writeText(rawAnalisisText).then(() => {
                const originalText = btnCopyAnalisis.innerHTML;
                btnCopyAnalisis.innerHTML = '<i class="fa-solid fa-check text-success me-1"></i> ¡Copiado!';
                setTimeout(() => { btnCopyAnalisis.innerHTML = originalText; }, 2500);
            });
        });
    }

    // Drafting Handler
    const formRedactar = document.getElementById('form-ia-redactar');
    const btnRunRedaccion = document.getElementById('btn-run-redaccion');
    const iconRunRedaccion = document.getElementById('icon-run-redaccion');
    const spinnerRunRedaccion = document.getElementById('spinner-run-redaccion');
    const redaccionWrapper = document.getElementById('redaccion-result-wrapper');
    const redaccionContent = document.getElementById('redaccion-output-content');
    const redaccionAlert = document.getElementById('redaccion-status-alert');
    const btnCopyRedaccion = document.getElementById('btn-copy-redaccion');

    let rawRedaccionText = '';

    if (formRedactar) {
        formRedactar.addEventListener('submit', async (e) => {
            e.preventDefault();
            iconRunRedaccion.classList.add('d-none');
            spinnerRunRedaccion.classList.remove('d-none');
            btnRunRedaccion.disabled = true;
            redaccionAlert.className = 'd-none';

            const tipoEscrito = document.getElementById('tipo_escrito_select').value;
            const instrucciones = document.getElementById('instrucciones_redaccion').value;

            try {
                const response = await fetch('{{ route("expedientes.ia.redactar", $expediente->id) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        tipo_escrito: tipoEscrito,
                        instrucciones: instrucciones
                    })
                });

                const data = await response.json();

                if (data.success) {
                    rawRedaccionText = data.text;
                    redaccionContent.innerHTML = `<pre>${data.text.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>`;
                    redaccionWrapper.classList.remove('d-none');
                    redaccionWrapper.scrollIntoView({ behavior: 'smooth' });
                } else {
                    redaccionAlert.className = 'alert alert-warning border-0 rounded-3 mt-3 d-block';
                    redaccionAlert.innerHTML = `<i class="fa-solid fa-triangle-exclamation me-1"></i> ${data.message || 'Error al redactar el escrito con IA.'}`;
                }
            } catch (err) {
                redaccionAlert.className = 'alert alert-danger border-0 rounded-3 mt-3 d-block';
                redaccionAlert.innerHTML = `<i class="fa-solid fa-circle-exclamation me-1"></i> No se pudo comunicar con el servidor para la redacción.`;
            } finally {
                iconRunRedaccion.classList.remove('d-none');
                spinnerRunRedaccion.classList.add('d-none');
                btnRunRedaccion.disabled = false;
            }
        });
    }

    if (btnCopyRedaccion) {
        btnCopyRedaccion.addEventListener('click', () => {
            if (!rawRedaccionText) return;
            navigator.clipboard.writeText(rawRedaccionText).then(() => {
                const originalText = btnCopyRedaccion.innerHTML;
                btnCopyRedaccion.innerHTML = '<i class="fa-solid fa-check text-success me-1"></i> ¡Escrito Copiado!';
                setTimeout(() => { btnCopyRedaccion.innerHTML = originalText; }, 2500);
            });
        });
    }
</script>

<!-- Modales para Adjuntar Documentos a Cuadernos Incidentales -->
@foreach($expediente->cuadernosIncidentales as $cuaderno)
<div class="modal fade" id="modalAdjuntarCuaderno{{ $cuaderno->id }}" tabindex="-1" aria-labelledby="modalAdjuntarCuadernoLabel{{ $cuaderno->id }}" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAdjuntarCuadernoLabel{{ $cuaderno->id }}">Adjuntar Documento a: {{ $cuaderno->nombre }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('documentos.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="expediente_id" value="{{ $expediente->id }}">
                    <input type="hidden" name="cuaderno_incidental_id" value="{{ $cuaderno->id }}">
                    
                    <div class="mb-3">
                        <label for="nombre_doc_{{ $cuaderno->id }}" class="form-label small fw-semibold text-muted">NOMBRE DEL DOCUMENTO (Opcional si son varios)</label>
                        <input type="text" class="form-control" id="nombre_doc_{{ $cuaderno->id }}" name="nombre" placeholder="Ej: Escrito de apelación">
                    </div>
                    
                    <div class="mb-3">
                        <label for="tipo_doc_{{ $cuaderno->id }}" class="form-label small fw-semibold text-muted">CATEGORÍA</label>
                        <select class="form-select" id="tipo_doc_{{ $cuaderno->id }}" name="tipo_documento" required>
                            <option value="Demanda">Demanda</option>
                            <option value="Contestación">Contestación</option>
                            <option value="Resolución">Resolución</option>
                            <option value="Sentencia">Sentencia</option>
                            <option value="Audiencia">Audiencia</option>
                            <option value="Pruebas">Pruebas</option>
                            <option value="Varios">Varios</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="archivos_{{ $cuaderno->id }}" class="form-label small fw-semibold text-muted">SELECCIONE ARCHIVO(S) (PDF, Word, Imagen)</label>
                        <input type="file" class="form-control" id="archivos_{{ $cuaderno->id }}" name="archivos[]" multiple required>
                    </div>
                    
                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" role="switch" id="auth_cliente_{{ $cuaderno->id }}" name="autorizado_cliente" value="1">
                        <label class="form-check-label small fw-bold text-dark" for="auth_cliente_{{ $cuaderno->id }}">
                            Visibilidad Portal Cliente
                        </label>
                    </div>
                    
                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary-gradient">Subir y Adjuntar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endforeach

@endsection