@extends('layouts.app')

@section('content')
<div class="container">
    <h4 class="mb-3">Tareas del Operador</h4>

    <form method="GET" class="mb-3">
        <div class="input-group">
            <input type="text" name="cedula" class="form-control" placeholder="Buscar por cédula..." value="{{ request('cedula') }}">
            <div class="input-group-append">
                <button class="btn btn-primary">Buscar</button>
            </div>
        </div>
    </form>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    <table class="table table-striped">
        <thead>
            <tr>
                <th>Radicado</th>
                <th>Cédula</th>
                <th>Archivos</th>
                <th>Pagos</th>
            </tr>
        </thead>
        <tbody>
            @foreach($tareas as $t)
                <tr>
                    <td>{{ $t->radicado }}</td>
                    <td>{{ $t->cedula }}</td>
                    <td>
                    @if($t->archivos)
                    <button
                        class="btn btn-sm btn-info"
                        onclick="verArchivos('{{ $t->departamento }}', '{{ $t->cedula }}', '{{ basename($t->archivos) }}')"
                    >
                        Ver
                    </button>

                    @else
                        Sin archivos
                    @endif

                    </td>
                    <td>
                        <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#modalPago"
                                onclick="cargarModal('{{ $t->radicado }}', '{{ $t->cedula }}', '{{ $t->region_id }}', '{{ $t->departamento }}')">
                            Subir
                        </button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

{{-- Modal --}}
<div class="modal fade" id="modalPago" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <form method="POST" action="{{ route('viaticos.subir') }}" enctype="multipart/form-data" class="modal-content">
        @csrf
        <div class="modal-header">
            <h5 class="modal-title">Subir comprobantes</h5>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" name="radicado" id="modal_radicado">
            <input type="hidden" name="cedula" id="modal_cedula">
            <input type="hidden" name="region_id" id="modal_region">
            <input type="hidden" name="departamento" id="modal_departamento">

            <div id="inputs-archivos">
                <input type="file" name="archivo[]" class="form-control mb-2" required multiple>
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-primary">Subir</button>
        </div>
    </form>
  </div>
</div>

{{-- Modal de visualización de archivos --}}
<div class="modal fade" id="archivoModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Archivos</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body" id="archivoViewer"></div>
    </div>
  </div>
</div>

<script>
function verArchivos(departamento, cedula, subcarpeta) {
    const modal = $('#archivoModal');
    const viewer = document.getElementById('archivoViewer');
    viewer.innerHTML = 'Cargando...';

    fetch(`/ajax/archivos?departamento=${departamento}&cedula=${cedula}&subcarpeta=${subcarpeta}`)
        .then(response => {
            if (!response.ok) throw new Error('No se pudieron cargar los archivos');
            return response.json();
        })
        .then(data => {
            if (data.length === 0) {
                viewer.innerHTML = '<p>No se encontraron archivos.</p>';
            } else {
                let html = '<ul class="list-group">';
                data.forEach(archivo => {
                    html += `
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            ${archivo.nombre}
                            <a href="${archivo.url}" target="_blank" class="btn btn-sm btn-primary">Ver</a>
                        </li>`;
                });
                html += '</ul>';
                viewer.innerHTML = html;
            }

            modal.modal('show');
        })
        .catch(err => {
            viewer.innerHTML = `<div class="alert alert-danger">Error: ${err.message}</div>`;
            modal.modal('show');
        });
}


    function cargarModal(radicado, cedula, region, depto) {
        document.getElementById('modal_radicado').value = radicado;
        document.getElementById('modal_cedula').value = cedula;
        document.getElementById('modal_region').value = region;
        document.getElementById('modal_departamento').value = depto;
    }
</script>
@endsection