@extends("layout.base")

@section("styles")
    <title>ARB | Nuevo Gasto</title>
@endsection

@section("header")
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Gastos</h5>
    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
    <span class="text-danger font-weight-bold mr-4">Nuevo</span>
@endsection

@section("content")
    <div class="card card-custom">
        <div class="card-header">
            <div class="card-title">
                <h3 class="card-label">Nuevo gasto</h3>
            </div>
        </div>
        <div class="card-body">
            <form action="{{route('gasto.agregar')}}" method="post" class="col-12 col-md-8 offset-md-2">
                <input type="hidden" name="id_usuario" value="{{Auth::user()->id_usuario}}">
                <div class="row">
                    <div class="col-md-4 form-group px-5">
                        <label class="required form-label">Fecha<span class="text-danger">*</span></label>
                        <input type="date" class="form-control" name="fecha" id="fecha" value="{{date('Y-m-d')}}" required>
                    </div>
                    <div class="col-md-4 form-group px-5">
                        <label class="required form-label">Moneda<span class="text-danger">*</span></label>
                        <select class="form-control" name="id_moneda" id="id_moneda" required>
                            @foreach($monedas as $moneda)
                                <option value="{{$moneda->id_moneda}}">{{$moneda->moneda}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 form-group px-5">
                        <label class="required form-label">Compra<span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="venta_dolar" step="any" name="venta_dolar" value="{{$tc->compra}}" required>
                    </div>
                    <div class="col-md-2 form-group px-5">
                        <label class="required form-label">Venta<span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="compra_dolar"  step="any"  name="compra_dolar" value="{{$tc->venta}}" required>
                    </div>
                </div>
                <div class="row px-5">
                    <div class="col-md-12 form-group">
                        <label class="required form-label">Descripción<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="descripcion" placeholder="Descripción del gasto" required>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="required form-label">Categoría<span class="text-danger">*</span></label>
                        <select class="form-control" name="id_gasto_categoria" id="" required>
                            @foreach($categorias as $item)
                                <option value="{{$item->id_gasto_categoria}}">{{$item->gasto_categoria}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 form-group">
                        <label class="required form-label">Monto<span class="text-danger">*</span></label>
                        <input type="text"  data-type="currency" class="form-control monto"  id="monto" name="monto" placeholder="$ 0" required>
                    </div>
                </div>
                <div class="d-flex justify-content-center mt-5">
                    <button class="btn btn-success">Guardar</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section("scripts")
    <script>
        $( document ).ready(function() {

            $(document).on('submit','form',function(e){
                e.preventDefault();
                $('form :submit').attr('disabled', true);
                $('form :submit').addClass('spinner spinner-white spinner-left');
                $('button').attr('disabled', true);
                monto = currencyToNumber($(".monto").val())
                $(".monto").val(monto);
                data = $("form").serialize();
                monto = formatCurrency($(".monto").val())
                $(".monto").val(monto);
                $.ajax({
                    "url": this.action,
                    "method": "post",
                    "data": data,
                    "dataType": "json",
                    // "data":  new FormData(this),
                    // "processData": false,
                    // "contentType": false,
                })
                    .done(function (response) {
                        if (response > 0) {
                            iziToast.success({
                                title: 'Datos guardados',
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });
                            $("form").trigger("reset");
                        }else{
                            iziToast.error({
                                title: 'Nada que guardar',
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });
                        }
                    })
                    .fail(function (error) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,})
                    })
                    .always(function () {
                        $("#modalDatos").modal('hide');
                        $('button').attr('disabled', false);
                        $('form :submit').attr('disabled', false);
                        $('form :submit').removeClass('spinner spinner-white spinner-left');
                    });
            });

            $(document).on('change','#fecha',function(e){
                $('form :submit').attr('disabled', true);
                $('form :submit').addClass('spinner spinner-white spinner-left');
                $('button').attr('disabled', true);

                $.ajax({
                    "url": "{{route("precioDolar.consultarPrecio")}}",
                    "method": "get",
                    "data": {"fecha":$(this).val()},
                    "dataType": "json",
                })
                .done(function (response) {
                    $("#compra_dolar").val(response.compra)
                    $("#venta_dolar").val(response.venta)
                })
                .fail(function (error) {
                    Swal.fire({icon: 'error', title: 'Algo salio mal al traer el tipo de cambio'+ error, showConfirmButton: true,})
                })
                .always(function () {
                    $('button').attr('disabled', false);
                    $('form :submit').attr('disabled', false);
                    $('form :submit').removeClass('spinner spinner-white spinner-left');
                });
            });


            $(document).on('change','#id_moneda',function(){
                let monto= currencyToNumber($("#monto").val());
                if($(this).val()==2){
                    $("#monto").attr("data-type", "currencyColon");
                    $("#monto").attr("placeholder","₡ 0");
                    $("#monto").val(formatCurrency(monto, "₡ "));
                }else{
                    $("#monto").attr("placeholder","$ 0");
                    $("#monto").val(formatCurrency(monto));
                    $("#monto").attr("data-type", "currency");
                }

            });

        });
    </script>
@endsection