@extends('adminlte::page')

@section('title', 'Eventos especiales')

@section('content_header')
    <h1></h1>
@stop


@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>Cargar evento especial</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-2">
                    <input type="text" placeholder="despacho" class="form-control" id="despacho" name="despacho">
                </div>
                <div class="col-2">
                    <div class="form-group">
                        <select class="form-control" id="evento" name="evento">
                            @if(!$eventos)
                                <option value="">Crear un evento</option>
                            @endif
                            @foreach($eventos as $evento)
                                <option value="{{$evento->desc}}">{{$evento->desc}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <input type="number" placeholder="Cantidad" step=".01" class="form-control" id="cantidad" name="cantidad">
                </div>
                <div class="col-1">
                    <button type="button" id="cargar" class="btn btn-success form-control" onClick="cargar()">Cargar</button>
                </div>
            </div>
        </div>
    </div>
    <div class="card card-outline card-primary">
        <div class="card-header">
            <h3>Crear evento especial</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-2">
                    <input type="text"  placeholder="Descripción" class="form-control" id="desc" name="desc" autocorrect="off" autocapitalize="off"/>
                </div>
                <div class="col-1">
                    <button type="button" id="cargar" class="btn btn-primary form-control" onClick="crear()">Crear</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('js')


<script type="text/javascript">

    let despacho, accion, desc, cantidad;

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

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

    function cargar()
    {
        mostrar();

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

        cantidad = document.getElementById("cantidad").value;
        if(cantidad.length < 1){
            Swal.fire({
                title: 'Error',
                text: "Debe ingresar una cantidad",
                type: 'error',
            }).then(function () {
                ocultar();
            });
            return;
        }
        
        let datos = new FormData();
        datos.append('_token', "{{ csrf_token() }}");
        datos.append('despacho', despacho);
        datos.append('evento', $("#evento").val());
        datos.append('cantidad', cantidad);

        accion = "{{ route('temporales.cargarEvento') }}";
        $.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 () {
                        window.location.reload();
                    });
                }else{
                    Swal.fire({
                        title: 'Error',
                        text: data.mensaje,
                        type: 'error',
                    }).then(function () {
                        ocultar();
                    });
                }
            },
            error: function (data) {
                console.log(data);
            }
        });
    }

    function crear()
    {
        mostrar();

        desc = document.getElementById("desc").value;
        if(desc.length < 1){
            Swal.fire({
                title: 'Error',
                text: "Debe ingresar una descripción de evento",
                type: 'error',
            }).then(function () {
                ocultar();
            });
            return;
        }

        accion = "{{ route('temporales.crearEvento') }}";

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

        $.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();
                    });
                }else{
                    Swal.fire({
                        title: 'Error',
                        text: data.mensaje,
                        type: 'error',
                    }).then(function () {
                        window.location.reload();
                    });
                }
            },
            error: function (data) {
                console.log(data);
            }
        });
    }
</script>
@endsection