@extends("layout.base")

@section("styles")
    <title>ARB | OC Control Recibidos</title>
@endsection

@section("header")
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Ordenes de compra</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">Control recibidos</span>
@endsection

@section("content")
    <div class="card card-custom gutter-b">
        <div class="card-body">
            <h3 class="text-center gutter-b text-danger">Control de artículos <u><b>RECIBIDOS</b></u></h3>
            <div class="card card-custom gutter-b">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="input-group col-3">
                            <div class="input-group-prepend"><span class="input-group-text bg-danger text-white border-danger"><i class="fas fa-cart-arrow-down mr-2 text-white"></i>OC</span></div>
                            <select class="form-control id_orden_compra selectpicker" name="id_orden_compra" id="id_orden_compra" data-live-search="true" data-live-search-normalize="true">
                                <option value="">Seleccione orden compra</option>
                                <optgroup label="Ordenes pendientes">
                                    @foreach($ordenesPendientes as $item)
                                        <option {{(Empty($ordenCompra))?"":(($ordenCompra->id_orden_compra == $item->id_orden_compra)?"selected":"")}} value="{{$item->id_orden_compra}}">
                                            {{"Nº".$item->id_orden_compra." - Fecha: ".date("d-m-Y", strtotime($item->fecha))?:"-"}}
                                        </option>
                                    @endforeach
                                </optgroup>
                                <optgroup label="Ordenes recibidas parcialmente">
                                    @foreach($ordenesRecibidasParcialmente as $item)
                                        <option {{(Empty($ordenCompra))?"":(($ordenCompra->id_orden_compra == $item->id_orden_compra)?"selected":"")}} value="{{$item->id_orden_compra}}">
                                            {{"Nº".$item->id_orden_compra." - Fecha: ".date("d-m-Y", strtotime($item->fecha))?:"-"}}
                                        </option>
                                    @endforeach
                                </optgroup>
                                <optgroup label="Ordenes recibidas">
                                    @foreach($ordenesRecibidas as $item)
                                        <option {{(Empty($ordenCompra))?"":(($ordenCompra->id_orden_compra == $item->id_orden_compra)?"selected":"")}} value="{{$item->id_orden_compra}}">
                                            {{"Nº".$item->id_orden_compra." - Fecha: ".date("d-m-Y", strtotime($item->fecha))?:"-"}}
                                        </option>
                                    @endforeach
                                </optgroup>
                            </select>
                        </div>
                        <label class="col-2 m-0"><b>Medio pago: </b><span class="medio_pago">{{(isset($ordenCompra))?$ordenCompra->medioPago->medio_pago:"-"}}</span></label>
                        <label class="col-2 m-0"><b>Forma pago: </b><span class="forma_pago">{{(isset($ordenCompra))?$ordenCompra->formaPago->forma_pago:"-"}}</span></label>
                        <span class="label label-light-danger label-pill label-inline mr-2 h1 py-7 span_id_orden_compra">Nº {{(isset($ordenCompra))?$ordenCompra->id_orden_compra:"-"}}</span>
                    </div>
                </div>
            </div>
            <div class="card card-custom">
                <div class="card-body">
                    <div class="row">
                        <form action="{{route("oc.controlarRecibidos", ["ordenCompra" => ":ordenCompra"])}}" id="frmRecibidos" method="post" class="col-md-8 gutter-b">
                            <table class="table table-hover border border-dark">
                                <thead class="bg-gray-800 text-white">
                                <tr><th colspan="7" class="text-center">ARTÍCULOS</th></tr>
                                <tr>
                                    <th class="d-none">id_detalle</th>
                                    <th>Categoría</th>
                                    <th>Nombre</th>
                                    <th>Compatibilidad</th>
                                    <th>Unidad</th>
                                    <th class="text-center">Cantidad facturada</th>
                                    <th class="text-center">Cantidad recibida</th>
                                    <th class="text-center w-235px">Recibido</th>
                                </tr>
                                </thead>
                                <tbody class="detalles">
                                @if(isset($ordenCompra))
                                    @foreach($ordenCompra->detalles as $key => $item)
                                        <tr class="{{(!isset($item->cantidad_facturada) || $item->cantidad_facturada == 0)?"bg-light":""}}">
                                            <td class="d-none">
                                                <input type="text" value="{{$item->id_orden_compra_detalle}}" name="id_orden_compra_detalle[{{$key}}]">
                                            </td>
                                            <td class="align-middle {{(!isset($item->cantidad_facturada) || $item->cantidad_facturada == 0)?"text-muted":""}}">{{$item->parte->categoria->categoria}}</td>
                                            <td class="align-middle {{(!isset($item->cantidad_facturada) || $item->cantidad_facturada == 0)?"text-muted":""}}">{{$item->nombre_articulo}}</td>
                                            <td class="align-middle {{(!isset($item->cantidad_facturada) || $item->cantidad_facturada == 0)?"text-muted":""}}">
                                                @if(isset($item->parte->modelo))
                                                    {{$item->parte->modelo->marca->marca." ".$item->parte->modelo->modelo.(!Empty($item->parte->modelo->serie)?" ".$item->parte->modelo->serie:"")}}
                                                @else
                                                    Universal
                                                @endif
                                            </td>
                                            <td class="align-middle {{(!isset($item->cantidad_facturada) || $item->cantidad_facturada == 0)?"text-muted":""}}">{{$item->parte->unidad->nombre_unidad.(($item->parte->cantidad_unidad > 0) ? ": ".$item->parte->cantidad_unidad : "")}}</td>
                                            <td class="align-middle text-center col_cantidad_facturada {{(!isset($item->cantidad_facturada) || $item->cantidad_facturada == 0)?"text-muted":""}}">{{isset($item->cantidad_facturada)?$item->cantidad_facturada:"No facturado aún"}}</td>
                                            <td class="align-middle text-center col_cantidad_recibida {{(!isset($item->cantidad_facturada) || $item->cantidad_facturada == 0)?"text-muted":""}}">{{ !isset($item->cantidad_recibida) ? "-" : $item->cantidad_recibida }}</td>
                                            <td class="d-flex justify-content-center">
                                                <input type="number" class="form-control form-control-sm mr-2 cantidad_recibida" name="cantidad_recibida[{{$key}}]" {{(($item->cantidad_facturada == $item->cantidad_recibida)?"disabled":"")}}
                                                placeholder="{{(($item->cantidad_facturada == $item->cantidad_recibida)?"Recibido":"Cantidad recibida")}}">
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr><td colspan="7" class="text-muted text-center">- - -</td></tr>
                                @endif
                                </tbody>
                            </table>
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-success btn-md">Guardar</button>
                            </div>
                        </form>
                        <div class="col-md-4 gutter-b">
                            <table class="table table-hover border border-dark">
                                <thead class="bg-gray-800 text-white">
                                <tr>
                                    <th colspan="5" class="text-center">INCIDENCIAS
                                        <button value="{{Empty($ordenCompra)?"":$ordenCompra->id_orden_compra}}" data-toggle="tooltip" title="Agregar incidencia" class="btn btn-danger btn-sm btn-icon float-right btnIncidencia" style="position: absolute;top: 6px;right: 20px;"><i class="fas fa-plus"></i></button>
                                    </th>
                                </tr>
                                <tr>
                                    <th class="w-25">Fecha</th>
                                    <th class="w-50">Incidencia</th>
                                    <th class="w-25">Usuario</th>
                                </tr>
                                </thead>
                                <tbody class="incidencias">
                                @if(!Empty($ordenCompra) && count($ordenCompra->incidencias) > 0)
                                    @foreach($ordenCompra->incidencias as $item)
                                        <tr>
                                            <td>{{$item->created_at}}</td>
                                            <td>{{$item->incidencia}}</td>
                                            <td>{{$item->usuario->nombre}}</td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr><td colspan="6" class="text-muted text-center">- - -</td></tr>
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalIncidencia" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Incidencia</h5>
                    <button type="button" class="close btnCerrar" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="fas fa-times-circle fa-1x"></i></button>
                </div>
                <form action="{{route("ocIncidencia.agregar", ["ordenCompra" => ":ordenCompra"])}}" method="post" id="frmIncidencia">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label class="required form-label">Incidencia<span class="text-danger">*</span></label>
                                <textarea class="form-control incidencia" placeholder="Descripción de la incidencia" name="incidencia" cols="30" rows="5" required></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary font-weight-bold btnCerrar" data-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-success font-weight-bold">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script>
        $( document ).ready(function() {
            $("#id_orden_compra").on("change", function () {
                url = "{{route("ocDetalles.getListado",["ordenCompra" => ":ordenCompra"])}}".replace(":ordenCompra", $(this).val());
                $.ajax({
                    "url": url,
                    "method": "get",
                    "dataType": "json",
                })
                    .done(function (response) {
                        if(response) {
                            $(".medio_pago").html(response.medio_pago.medio_pago);
                            $(".forma_pago").html(response.forma_pago.forma_pago);
                            $(".span_id_orden_compra").html("Nº "+response.id_orden_compra);
                            $(".detalles").html("");
                            $.each(response.detalles, function (i,e) {
                                textClass = ""; bgClass = "";
                                if(!e.cantidad_facturada || e.cantidad_facturada == 0) {
                                    textClass = "text-muted";
                                    bgClass = "bg-light";
                                }
                                cantidad_unidad = (e.parte.cantidad_unidad > 0) ? ": "+e.parte.cantidad_unidad : "";
                                fila = '<tr class="'+bgClass+'">';
                                fila += '<td class="d-none"><input type="text" value="'+e.id_orden_compra_detalle+'" name="id_orden_compra_detalle['+i+']"></td>';
                                fila += '<td class="align-middle '+textClass+'">'+e.parte.categoria.categoria+'</td>';
                                fila += '<td class="align-middle '+textClass+'">'+e.nombre_articulo+'</td>';
                                fila += '<td class="align-middle '+textClass+'">';
                                let serie = (e.parte.modelo.serie)?" "+e.parte.modelo.serie:"";
                                if(e.parte.modelo) {
                                    fila += e.parte.modelo.marca.marca+" "+e.parte.modelo.modelo+serie;
                                } else {
                                    fila += 'Universal';
                                }
                                fila += '</td>';
                                fila += '<td class="align-middle '+textClass+'">'+e.parte.unidad.nombre_unidad+cantidad_unidad+'</td>';
                                fila += '<td class="align-middle text-center col_cantidad_facturada '+textClass+'">' + ((e.cantidad_facturada || e.cantidad_facturada == 0)?e.cantidad_facturada:'No facturado aún') + '</td>';

                                fila += '<td class="align-middle text-center col_cantidad_recibida '+textClass+'">'+((!e.cantidad_recibida)?'-':e.cantidad_recibida)+'</td>';
                                fila += '<td class="d-flex justify-content-center">';
                                //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
                                cantPlaceholder = (e.cantidad_facturada == e.cantidad_recibida)?"Recibido":"Cantidad recibida";
                                cantDisabled = (e.cantidad_facturada == e.cantidad_recibida)?"disabled":"";
                                fila += '<input type="number" class="form-control form-control-sm mr-2 cantidad_recibida" name="cantidad_recibida['+i+']" placeholder="'+cantPlaceholder+'" ' + cantDisabled;
                                fila += ((e.cantidad_recibida || e.cantidad_recibida == 0)?'>':'value=""></td>');
                                //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
                                fila += '</tr>';
                                $(".detalles").append(fila);
                            });

                            $(".incidencias").html("");
                            if(response.incidencias.length > 0) {
                                $.each(response.incidencias, function (i,e) {
                                    fila = '<tr>';
                                    fila += '<td>'+e.created_at+'</td>';
                                    fila += '<td>'+e.incidencia+'</td>';
                                    fila += '<td>'+e.usuario.nombre+'</td>';
                                    fila += '</tr>';
                                    $(".incidencias").append(fila);
                                });
                            } else {
                                $(".incidencias").append('<tr><td colspan="6" class="text-muted text-center">- - -</td></tr>');
                            }
                        }
                    })
                    .fail(function (error) {
                        $(".medio_pago").html("-");
                        $(".forma_pago").html("-");
                        $(".span_id_orden_compra").html("Nº -");
                        $(".detalles").html('<tr><td colspan="6" class="text-muted text-center">- - -</td></tr>');
                        $(".incidencias").append('<tr><td colspan="6" class="text-muted text-center">- - -</td></tr>');
                    })
            });

            $(".btnIncidencia").on("click", function () {
                if($("#id_orden_compra").val() != "") {
                    $("#modalIncidencia").modal("show");
                } else {
                    iziToast.warning({
                        title: 'Seleccione una orden primero',
                        position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                    });
                }
            });

            function recargarIncidencias() {
                url = "{{route("ocIncidencia.getListadoOC",["ordenCompra" => ":ordenCompra"])}}".replace(":ordenCompra", $("#id_orden_compra").val());
                $.ajax({
                    "url": url,
                    "method": "get",
                    "dataType": "json",
                })
                    .done(function (response) {
                        if(response) {
                            $(".incidencias").html("");
                            if(response.data.length > 0) {
                                $.each(response.data, function (i,e) {
                                    fila = '<tr>';
                                    fila += '<td>'+e.created_at+'</td>';
                                    fila += '<td>'+e.incidencia+'</td>';
                                    fila += '<td>'+e.usuario.nombre+'</td>';
                                    fila += '</tr>';
                                    $(".incidencias").append(fila);
                                });
                            } else {
                                $(".incidencias").append('<tr><td colspan="6" class="text-muted text-center">- - -</td></tr>');
                            }
                        }
                    });
            }

            $(document).on("change blur", ".cantidad_recibida", function () {
                let col_cantidad_recibida = $(this).parents("tr").find(".col_cantidad_recibida");
                let cantidad_recibida = (col_cantidad_recibida.html() != "-")?Number(col_cantidad_recibida.html()):0;

                let col_cantidad_facturada = $(this).parents("tr").find(".col_cantidad_facturada");
                let cantidad_facturada = col_cantidad_facturada.html();
                let maximo = Number(cantidad_facturada) - Number(cantidad_recibida);

                if(($(this).val() == "") || (maximo >= Number($(this).val())))
                    $(this).removeClass("is-invalid");
                else
                    $(this).addClass("is-invalid");

                if($(".is-invalid").length > 0)
                    $('#frmRecibidos :submit').attr('disabled', true).html("Cantidad incorrecta");
                else
                    $('#frmRecibidos :submit').attr('disabled', false).html("Guardar");
            });

            $(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);
                url = this.action.replace(":ordenCompra", $("#id_orden_compra").val());
                data = $(this).serialize();
                id = this.id;
                $.ajax({
                    "url": url,
                    "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
                            });
                            if(id == "frmIncidencia") {
                                recargarIncidencias();
                                $("#modalIncidencia").modal('hide');

                            } else if(id == "frmRecibidos") {
                                $.each($(".cantidad_recibida"), function () {
                                    if(!$(this).attr("disabled")) {
                                        let col_cantidad_recibida = $(this).parents("tr").find(".col_cantidad_recibida");
                                        if($(this).val() != "") {
                                            //recargar columna de cantidad recibida
                                            let cantidad_recibida = (col_cantidad_recibida.html() != "-")?Number(col_cantidad_recibida.html()):0;
                                            cantidad_recibida += Number($(this).val());
                                            col_cantidad_recibida.html(cantidad_recibida);
                                            //Limpiar inputs de recibido
                                            $(this).val("");
                                            //cambiar disabled y placeholader de recibido
                                            let col_cantidad_facturada = $(this).parents("tr").find(".col_cantidad_facturada");
                                            let cantidad_facturada = col_cantidad_facturada.html();
                                            if(cantidad_facturada == cantidad_recibida) {
                                                $(this).attr("disabled", true).prop("placeholder", "Recibido");
                                            }
                                        }
                                    }
                                });
                            }
                        }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 () {
                        $('button').attr('disabled', false);
                        $('form :submit').attr('disabled', false);
                        $('form :submit').removeClass('spinner spinner-white spinner-left');
                    });
            });
        });
    </script>
@endsection