@extends('layouts.horizontal', ['title' => 'Carga Masiva de Archivos'])

@section('css')
<style>
.dropzone-area{
    border:2px dashed #ccc;
    padding:35px;
    text-align:center;
    border-radius:10px;
    cursor:pointer;
    transition:0.2s;
}
.dropzone-area.dragover{
    background:#f5f5f5;
    border-color:#007bff;
}
.folder-block{
    border:1px solid #ddd;
    border-radius:8px;
    margin-bottom:18px;
    background:white;
}
.folder-header{
    padding:10px 14px;
    background:#f8f9fa;
    border-bottom:1px solid #e5e5e5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:600;
}
.folder-title{
    font-size:15px;
}
.folder-count{
    font-size:13px;
    background:#e9ecef;
    padding:3px 8px;
    border-radius:6px;
}
.folder-body{
    padding:10px;
    min-height:55px;
}
.file-item{
    border:1px solid #e0e0e0;
    background:#fafafa;
    padding:7px 10px;
    margin-bottom:6px;
    border-radius:6px;
    cursor:grab;
    font-size:14px;
}
.file-item:hover{
    background:#f0f0f0;
}
</style>
@endsection


@section('content')
<div class="container-fluid">

    @include('layouts.partials.page-title', [
        'subtitle' => 'Historial',
        'title' => 'Carga Masiva de Archivos del Paciente'
    ])

    <div class="alert alert-info mb-4">
        <strong>Paciente:</strong> {{ $paciente->nombre }} {{ $paciente->apPaterno }} {{ $paciente->apMaterno }}<br>
        <strong>Cita #:</strong> {{ $historial->idCita }} 
    </div>
      <div class="alert alert-danger mb-4">
        *Par que la carga Masiva auto-asigne los archivos a los estudios correctos, el nombre del archivo PDF tiene que contener el numero que tiene el estudio, 01,02,03,05,11, esos valores deben existir en en el nombre del archivo de lo contrario la asignacion se vuelve manual arrastrando el archivo al estudio que corresponde.<br>
         Para saber la numeracion de los estudios, <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#modalTablaEstudios">
                        <i class="ti ti-list"></i> Ver tabla de estudios
                    </button>
    </div>

    <div class="row mb-3">
        <div class="col-md-3">
            <label class="form-label">Fecha del Estudio *</label>
            <input type="date" id="fechaMasivo" class="form-control" required>
        </div>
    </div>

    <div id="dropzone" class="dropzone-area mb-4">
        Arrastra archivos PDF aquí o haz clic para seleccionarlos
        <br><small>(solo PDF • máx 10MB)</small>
        <input type="file" id="fileInput" multiple style="display:none" accept="application/pdf">
    </div>

    <h5 class="mb-3 text-danger">Archivos por asignar</h5>

    <div class="folder-block" data-id="">
        <div class="folder-header">
            <div class="folder-title text-danger">POR ASIGNAR</div>
            <div class="folder-count" id="count-unassigned">0</div>
        </div>
        <div class="folder-body drop-area" id="col-unassigned"></div>
    </div>

    <h5 class="mb-3">Estudios disponibles</h5>

    @foreach($estudios as $est)
    <div class="folder-block" data-id="{{ $est->idAnalisis }}">
        <div class="folder-header">
            <div class="folder-title">
                {{ str_pad($est->idAnalisis, 2, '0', STR_PAD_LEFT) }} {{ $est->descripcion }}
            </div>
            <div class="folder-count" id="count-{{ $est->idAnalisis }}">0</div>
        </div>

        <div class="folder-body drop-area" id="col-{{ $est->idAnalisis }}"></div>
    </div>
    @endforeach


    <div class="mt-4 text-end">
        <button class="btn btn-primary" id="btnGuardar">
            <i class="ti ti-device-floppy"></i> Guardar Archivos
        </button>
    </div>

</div>
<div class="modal fade" id="modalTablaEstudios" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Catálogo de Tipos de Estudios</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <table class="table table-bordered table-sm align-middle">
          <thead class="table-light">
            <tr>
              <th style="width: 80px;">ID</th>
              <th>Descripción</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>01</td><td>Ultrasonido AB ocular y orbitario</td></tr>
            <tr><td>02</td><td>Ultrasonido UBM – Segmento anterior</td></tr>
            <tr><td>03</td><td>IOL máster. Interferometría</td></tr>
            <tr><td>04</td><td>Conteo de células endoteliales</td></tr>
            <tr><td>05</td><td>Tomografía de nervio óptico y CFNR</td></tr>
            <tr><td>06</td><td>Tomografía, OCT de mácula. Retina</td></tr>
            <tr><td>07</td><td>Tomografía de segmento anterior y ángulo irido corneal</td></tr>
            <tr><td>08</td><td>Campos visuales</td></tr>
            <tr><td>09</td><td>Topografía anterior y posterior de la córnea – ORBSCAN</td></tr>
            <tr><td>10</td><td>Paquimetría con PIO corregida</td></tr>
            <tr><td>11</td><td>Auto queratorefracción</td></tr>
            <tr><td>12</td><td>Adaptación de prótesis oculares. Ocularística</td></tr>
            <tr><td>13</td><td>Otros estudios y servicios</td></tr>
            <tr><td>14</td><td>FAR, fluorangiografía, inyectable</td></tr>
            <tr><td>15</td><td>Angio OCT láser, no inyectable</td></tr>
            <tr><td>16</td><td>Fotografía de fondo de ojo, no midriático</td></tr>
          </tbody>
        </table>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
      </div>

    </div>
  </div>
</div>

@endsection


@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

<script>

document.addEventListener('dragover', e => e.preventDefault());
document.addEventListener('drop', e => e.preventDefault());

let idCita = {{ $historial->idCita }};
let idPaciente = {{ $paciente->idPaciente }};

const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('fileInput');

dropzone.addEventListener('click', () => fileInput.click());
dropzone.addEventListener('dragover', e=>{
    e.preventDefault();
    dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', ()=> dropzone.classList.remove('dragover'));
dropzone.addEventListener('drop', e=>{
    e.preventDefault();
    dropzone.classList.remove('dragover');
    handleFiles(e.dataTransfer.files);
});
fileInput.addEventListener('change', ()=> handleFiles(fileInput.files));


function updateCounts(){
    document.querySelectorAll('.folder-block').forEach(block=>{
        let id = block.dataset.id || 'unassigned';
        let body = block.querySelector('.folder-body');
        let countEl = document.getElementById('count-' + id);
        if(countEl) countEl.innerText = body.children.length;
        if(id === 'unassigned'){
            document.getElementById('count-unassigned').innerText = body.children.length;
        }
    });
}


function handleFiles(files){
    let formData = new FormData();
    for(let f of files){
        formData.append('files[]', f);
    }
    formData.append('idCita', idCita);
    formData.append('idPaciente', idPaciente);

    fetch("{{ route('historial.detalle.masivo.upload') }}", {
        method:"POST",
        headers:{ 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        body: formData
    })
    .then(r=>r.json())
    .then(res=>{
        if(!res.success) return;

        res.files.forEach(f=>{
            const item = document.createElement('div');
            item.classList.add('file-item');
            item.innerText = f.name;
            item.dataset.file = f.file;
            item.dataset.estudio = f.idEstudio ?? '';

            let container = document.getElementById('col-' + f.idEstudio);
            if(!container){
                document.getElementById('col-unassigned').appendChild(item);
            } else {
                container.appendChild(item);
            }
        });

        updateCounts();
    });
}


document.querySelectorAll('.drop-area').forEach(el=>{
    new Sortable(el, { 
        group:'shared', 
        animation:150,
        onSort: updateCounts
    });
});


document.getElementById('btnGuardar').addEventListener('click', ()=>{

    if(document.getElementById('col-unassigned').children.length > 0){
        alert("Archivos faltantes por asignar. Debe asignar todos antes de guardar.");
        return;
    }

    let fecha = document.getElementById('fechaMasivo').value;
    if(!fecha){
        alert("Selecciona una fecha antes de guardar.");
        return;
    }

    let archivos = [];

    document.querySelectorAll('.file-item').forEach(item=>{
        let parent = item.closest('.folder-block');
        archivos.push({
            archivo: item.dataset.file,
            idEstudio: parent.dataset.id || null
        });
    });

    fetch("{{ route('historial.detalle.masivo.asignar') }}", {
        method:"POST",
        headers:{
            'Content-Type':'application/json',
            'X-CSRF-TOKEN':'{{ csrf_token() }}'
        },
        body: JSON.stringify({
            archivos: archivos,
            idPaciente: idPaciente,
            idCita: idCita,
            fecha: fecha
        })
    })
    .then(r=>r.json())
    .then(res=>{
        if(res.success){
            alert("Archivos guardados correctamente");
            window.location.href = "{{ route('historial.detalle.index', $historial->idCita) }}";
        }
    });

});

</script>
@endsection