<script>
    import Paginate from "$/components/Paginate.svelte";
    import { getGtfsArchivo } from "$/services/gtfs_archivo";
    import PageTitle from "$/components/PageTitle.svelte";    
    import { useLocation } from "svelte-navigator";
    import ModalgtfsUpload from "./ModalgtfsUpload.svelte";
    import { getPermisosPath } from "$/services/usuarios";
    import { getRedTransporte } from "$/services/red_transporte";
    
    
    let loading = false;
    let escritura = false;
    let location = useLocation()
    let redes = []
    let red = null
    let id_red;  
    let file; 
    let uploading = false;
    let gtfsArchivo = null;

    getPermisosPath($location.pathname)
        
        .catch(error => console.log({ error }))

  

    getRedTransporte({ vigente: 1 })
        .then(data => data.sort((a,b) => a.nombre_red < b.nombre_red? -1 : 1))
   
        .then(data => {
            redes = data;
            if (redes.length > 0) {
                id_red = redes[0].id_red;                 
            }
        })
        .catch(error => globalThis.toast.error(error))

  
    function onNuevo() {
        gtfsArchivo = {}
    }

    async function handleUpload() {
        if (!file) {
            toast.push('Por favor, seleccione un archivo para cargar.');
            return;
        }

        const formData = new FormData();
        formData.append('filezip', file); // 'filezip' es la clave que se espera en el backend

        try {
            uploading = true;
            const response = await fetch('/api/upload_zip', {
                method: 'POST',
                body: formData, // Enviar los datos del formulario
                // No establecer 'Content-Type': 'multipart/form-data', 
                // fetch lo hará automáticamente con el boundary correcto
            });

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

            const result = await response.json();
            toast.push(result.message);
        } catch (error) {
            console.error('Error al subir el archivo:', error);
            toast.push(error.message);
        } finally {
            uploading = false;
        }
    }
  
</script>

<PageTitle {loading}>Cargar GTFS</PageTitle>
     
<div class="row">
    <div class="col-md">
        
        <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
         <i class="bi bi-plus-lg"></i> Nuevo
     </button>
         
        <div class="input-group mb-3">
            <div class="input-group-text">Redes de Transporte</div>
            <select bind:value={id_red} class="form-select">                 
                {#each redes as rt}
                    <option value={rt.id_red}>{rt.nombre_red}</option>
                {/each}
            </select>
        </div> 

    </div>
</div>

<div class="card">
   
    <div>
         
        <input type="file"   accept=".zip" on:change="{(e) => file = e.target.files[0]}" />
        {#if uploading}
            <p>Subiendo archivo...</p>
        {:else}
        <button class="primary sm"  on:click="{handleUpload}">
              Cargar
        </button>   
      
        {/if}

      

    </div>
  
</div>

  
{#if gtfsArchivo}
<ModalgtfsUpload
    {gtfsArchivo}
    {escritura}
    on:close={() => gtfsArchivo = null}     
/>
{/if}