@extends('adminlte::page')

@switch($tipo)
    @case("vencimiento")
        @section('title', 'Modificación de vencimiento de temporales')
        @break
    @case("segundovencimiento")
        @section('title', 'Modificación de segundo vencimiento de temporales')
        @php $tipo = "segundo vencimiento"; @endphp
        @break
    @case("estado")
        @section('title', 'Asignar estado a temporales')
        @break
    @case("legajo")
        @section('title', 'Adjuntar legajo a temporales')
        @break
    @case("seriales")
        @section('title', 'Asignar estado a seriales de cilindro')
        @break
    @default
@endswitch

@section('content')
<div>
    <div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999;"></div>
    <div class="text-center" id="spinner" style="display:none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
        <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
    </div>
    <div class="card card-outline card-primary">
        <div class="card-header">
            <h3>@if($tipo == "estado") Asignar @elseif($tipo == "seriales") Asignar estado a seriales de cilindro @else Buscar {{ $tipo }} de la temporal por número de despacho @endif</h3>
        </div>
        <div class="card-body ">
            <div class="row">
                @if($tipo != "seriales")
                <div class="col-1">
                    <input type="radio" value="envases" id="temporal" name="temporal" checked> Envase
                </div>
                <div class="col-1">
                    <input type="radio" value="productos" id="temporal" name="temporal"> Producto
                </div>
                @endif
                <div class="col-2">
                    <input type="text" placeholder="despacho" class="form-control" id="despacho" name="despacho">
                </div>
                @if($tipo == "seriales")
                <div class="col-2">
                    <input type="text" placeholder="serial" class="form-control" id="serial" name="serial">
                </div>
                @endif
                <div class="col-1">
                    <button type="button" class="btn btn-warning form-control" onClick="buscar()"><i class="fas fa-search"></i> Buscar </button>
                </div>
                @switch($tipo)
                    @case("vencimiento")
                    @case("segundo vencimiento")
                        <div class="col-2">
                            <input type="text" placeholder="" disabled class="form-control" id="vencimiento" name="vencimiento">
                        </div>
                        <h6> @if($tipo == "vencimiento") Si la fecha presentada por AFIP es distinta, ingresala: @else Ingresar la nueva fecha @endif</h6>
                        <div class="col-2">
                            <input type="date" id="fecha" disabled class="form-control" placeholder="YYYY-MM-DD" name="fecha" >
                        </div>
                        @break
                    @case("estado")
                        <div class="mb-6">
                            <div class="form-group">
                                <select class="form-control" id="estado" name="estado" disabled>
                                    <option value="automatico" title="El estado se define por el cálculo del saldo en Orus">Calculado automáticamente</option>
                                    <option value="available">Disponible</option>
                                    <option value="cancelled">Cancelado</option>
                                    <option value="cancellation process">En proceso de cancelación</option>
                                </select>
                            </div>
                        </div>
                        @break
                    @case("legajo")
                        <div class="col-md-6">
                            <label for="archivo" id="legajo"></label>
                            <input type="file" id="archivo" name="archivo" hidden/>
                        </div>
                        @break
                    @default
                        <div class="mb-6">
                            <div class="form-group">
                                <select class="form-control" id="estado" name="estado" disabled>
                                    <option value="Pendiente">Pendiente</option>
                                    <option value="Retornado">Retornado</option>
                                    <option value="Nacionalizado">Nacionalizado</option>
                                </select>
                            </div>
                        </div>
                        @break
                @endswitch
                <div class="col-1">
                    <button type="button" id="cargar" disabled class="btn btn-success form-control" onClick="cargar()"><i class="fas fa-search"></i> Cargar</button>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('js')


<script type="text/javascript">

    let despacho, accion = "", tipo = "{{ $tipo }}";

    function mostrar()
    {
        $('#spinner').show();
        $('#overlay').show();
    }

    function ocultar()
    {
        $('#spinner').hide();
        $('#overlay').hide();
    }

    function buscar()
    {
        mostrar();
        
        despacho = document.getElementById("despacho").value;
        if(despacho.length < 1){
            Swal.fire({
                title: 'Error',
                text: "Debe ingresar un número de despacho",
                type: 'error',
            }).then(function () {
                ocultar();
            });
            return;
        }

        let datos = new FormData();
        datos.append('_token', "{{ csrf_token() }}");
        datos.append('despacho', despacho);

        if(tipo.includes("vencimiento")) datos.append('tipo', tipo);

        if(tipo == "seriales")
        {
            let serial = document.getElementById("serial").value;
            datos.append('serial', serial);
        }
        
        $('input[name="temporal"]:checked').each(function() {
            datos.append('tipoTemporal', $(this).val());
        });

        switch(tipo){
            case "vencimiento":
            case "segundo vencimiento":
                accion = "{{ route('temporales.buscarFecha') }}";
                break;
            case "estado":
                accion = "{{ route('temporales.buscarEstado') }}";
                break;
            case "legajo":
                accion = "{{ route('temporales.buscarLegajo') }}";
                break; 
            case "seriales":
                accion = "{{ route('temporales.buscarEstadoSeriales') }}";
                break;        
        }
        
        $.ajax({
            url: accion,
            type: 'POST',
            data: datos,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                console.log(data);
                switch(tipo){
                    case "vencimiento":
                    case "segundo vencimiento":
                        $("#vencimiento").val(data.respuesta);
                        $("#fecha").attr("disabled",false);
                        break;
                    case "estado":
                        $("#estado").val(data.respuesta);
                        $("#estado").attr("disabled", false);
                        break;
                    case "legajo":
                        $("#legajo").html(data.respuesta);
                        $("#legajo").attr("title", (data.respuesta).includes("legajo") ? '' : "Volver a subir un legajo reemplaza el archivo ya subido por el nuevo");
                        $("#archivo").attr("hidden", false);
                        $("#legajo").attr("style", (data.respuesta).includes("legajo") ? '' : "cursor: pointer");
                        $("#legajo").attr("onclick","verLegajo(event)");
                        break;
                    case "seriales":
                        $("#estado").val(data.respuesta);
                        $("#estado").attr("disabled", false);
                        break;
                }

                $("#cargar").attr("disabled",false);
                ocultar();
            },
            error: function (data) {
                console.log(data);
            }
        });

        $('#modalFileImporter').modal('hide');
    }

    function cargar()
    {
        mostrar();
        let accion = "", tipo = "{{ $tipo }}";

        despacho = document.getElementById("despacho").value;
        if(despacho.length < 1){
            Swal.fire({
                title: 'Error',
                text: "Debe ingresar un número de despacho",
                type: 'error',
            }).then(function () {
                ocultar();
            });
            return;
        }

        let datos = new FormData();
        datos.append('_token', "{{ csrf_token() }}");
        datos.append('despacho', despacho);
        if(tipo.includes("vencimiento")) datos.append('tipo', tipo);

        if(tipo == "seriales")
        {
            let serial = document.getElementById("serial").value;
            datos.append('serial', serial);
        }

        $('input[name="temporal"]:checked').each(function() {
            datos.append('tipoTemporal', $(this).val());
        });
        
        switch(tipo){
            case "vencimiento":
            case "segundo vencimiento":
                let fecha = document.getElementById("fecha").value;
                if(fecha.length < 1){
                    Swal.fire({
                        title: 'Error',
                        text: "Debe ingresar una fecha",
                        type: 'error',
                    }).then(function () {
                        ocultar();
                    });
                    return;
                }
                accion = "{{ route('temporales.cargarFecha') }}";
                datos.append('fecha', fecha);
                break;
            case "estado":
                let estado = $("#estado").val();
                datos.append('estado', estado);
                accion = "{{ route('temporales.cargarEstado') }}";
                break;
            case "legajo":
                let archivo = document.getElementById('archivo');
                if (archivo.files.length > 0)
                    archivo = archivo.files[0];
                else {
                    Swal.fire({
                        title: 'Atención',
                        text: "Debe seleccionar un archivo",
                        icon: 'warning',
                    });
                    return;
                }
                datos.append('archivo', archivo);
                accion = "{{ route('temporales.cargarLegajo') }}";
                break;
            case "seriales":
                let estadoSerial = $("#estado").val();
                datos.append('estado', estadoSerial);
                accion = "{{ route('temporales.cargarEstadoSeriales') }}";
        }


        $.ajax({
            url: accion,
            type: 'POST',
            data: datos,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                if(data.status == "exito"){
                    Swal.fire({
                        title: 'Exito',
                        text: data.mensaje,
                        type: 'success',
                    }).then(function () {
                        ocultar();
                        if(tipo.include("vencimiento") || tipo == "estado"){
                                $("#despacho").val("");
                            if(tipo.include("vencimiento")){
                                $("#vencimiento").val("");
                                $("#fecha").val("");
                            }
                        }
                        if(tipo == "legajo"){
                            buscar();
                        }
                    });
                }else{
                    Swal.fire({
                        title: 'Error',
                        text: data.mensaje,
                        type: 'error',
                    }).then(function () {
                        ocultar();
                    });
                }
            },
            error: function (data) {
                console.log(data);
            }
        });

        $('#modalFileImporter').modal('hide');
    }

    function verLegajo(event)
    {
        event.preventDefault();
        const nombre = document.getElementById("legajo").textContent;
        if(nombre.includes("legajo")) return;
        despacho = document.getElementById("despacho").value;
        if(despacho.length < 1){
            Swal.fire({
                title: 'Error',
                text: "Debe ingresar un número de despacho",
                type: 'error',
            }).then(function () {
                ocultar();
            });
            return;
        }

        window.open('{{ route("temporales.verLegajo", [":despacho", ":nombre"]) }}'.replace(':despacho', despacho).replace(':nombre', nombre), '_blank');
    }
</script>
@endsection