@extends("layout.base")

@section("styles")
    <title>ARB | OC Control Facturados</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 facturados</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>FACTURADOS</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 de facturar">
                                    @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 facturadas parcialmente">
                                    @foreach($ordenesFacturadasParcialmente 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 facturadas">
                                    @foreach($ordenesFacturadas 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 px-0">
                        <div class="col-md-8">
                            <form action="{{route("oc.controlarFacturados", ["ordenCompra" => ":ordenCompra"])}}" id="frmFacturados" method="post" class="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 OC</th>
                                    </tr>
                                    <tr>
                                        <th class="d-none">id_detalle</th>
                                        <th># Parte</th>
                                        <th>Categoría</th>
                                        <th>Nombre</th>
                                        <th>Compatibilidad</th>
                                        <th>Unidad</th>
                                        <th class="text-center">Cantidad ordenada</th>
                                        <th class="text-center w-200px">Cantidad facturada</th>
                                    </tr>
                                    </thead>
                                    <tbody class="detalles">
                                    @if(isset($ordenCompra))
                                        @foreach($ordenCompra->detalles as $key => $item)
                                            <tr>
                                                <td class="d-none align-middle">
                                                    <input type="text" value="{{$item->id_orden_compra_detalle}}" name="id_orden_compra_detalle[{{$key}}]">
                                                </td>
                                                <td class="align-middle">{{$item->parte->num_parte}}</td>
                                                <td class="align-middle">{{$item->parte->categoria->categoria}}</td>
                                                <td class="align-middle">{{$item->nombre_articulo}}</td>
                                                <td class="align-middle">
                                                    @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">{{$item->parte->unidad->nombre_unidad.(($item->parte->cantidad_unidad > 0) ? ": ".$item->parte->cantidad_unidad : "")}}</td>
                                                <td class="text-center align-middle">{{$item->cantidad}}</td>
                                                <td class="d-flex justify-content-center">
                                                    <input type="number" class="form-control form-control-sm" name="cantidad_facturada[{{$key}}]" value="{{isset($item->cantidad_facturada)?$item->cantidad_facturada:""}}" placeholder="Cantidad facturada">
                                                </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>
                            <form action="{{route("oc.controlarFacturadosExtra", ["ordenCompra" => ":ordenCompra"])}}" id="frmFacturadosExtra" method="post">
                                <table class="table table-hover border border-dark">
                                    <thead class="bg-gray-800 text-white">
                                    <tr>
                                        <th colspan="7" class="text-center p-2">
                                            <span class="pt-2 d-inline-block">FACTURADOS EXTRA</span>
                                            <button type="button" value="{{Empty($ordenCompra)?"":$ordenCompra->id_orden_compra}}" class="btn btn-danger btn-sm btn-icon float-right btnDetalleExtra" data-toggle="tooltip" title="Agregar detalle extra" style="position: relative;right: 20px;"><i class="fas fa-plus"></i></button>
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="d-none">id_detalle</th>
                                        <th># Parte</th>
                                        <th>Categoría</th>
                                        <th>Nombre</th>
                                        <th>Compatibilidad</th>
                                        <th>Unidad</th>
                                        <th class="text-center w-200px">Cantidad facturada</th>
                                    </tr>
                                    </thead>
                                    <tbody class="detalles_extra">
                                    @if(isset($ordenCompra))
                                        @foreach($ordenCompra->detalles_extra as $key => $item)
                                            <tr>
                                                <td class="d-none align-middle">
                                                    <input type="text" value="{{$item->id}}" name="id_orden_compra_detalle_extra[{{$key}}]">
                                                </td>
                                                <td class="align-middle">{{$item->parte->num_parte}}</td>
                                                <td class="align-middle">{{$item->parte->categoria->categoria}}</td>
                                                <td class="align-middle">{{$item->nombre_articulo}}</td>
                                                <td class="align-middle">
                                                    @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">{{$item->parte->unidad->nombre_unidad.(($item->parte->cantidad_unidad > 0) ? ": ".$item->parte->cantidad_unidad : "")}}</td>
                                                <td class="d-flex justify-content-center">
                                                    <input type="number" class="form-control form-control-sm" name="cantidad_facturada[{{$key}}]" value="{{isset($item->cantidad_facturada)?$item->cantidad_facturada:""}}" placeholder="Cantidad facturada">
                                                </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>
                        <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 p-2">
                                        <span class="pt-2 d-inline-block">INCIDENCIAS</span>
                                        <button value="{{Empty($ordenCompra)?"":$ordenCompra->id_orden_compra}}" class="btn btn-danger btn-sm btn-icon float-right btnIncidencia" data-toggle="tooltip" title="Agregar incidencia" style="position: relative;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>
    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="modalDetalleExtra" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Detalle extra</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("oc.facturarExtra", ["ordenCompra" => ":ordenCompra"])}}" method="post" id="frmDetalleExtra">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xl-12 form-group">
                                <label class="required form-label">Artículo ARB<span class="text-danger">*</span></label>
                                <select class="form-control id_parte selectpicker" name="id_parte" data-live-search="true" data-live-search-normalize="true" required>
                                    <option value="">Seleccione</option>
                                    @foreach($partes as $grupo)
                                        <optgroup data-categ="{{$grupo[0]->id_articulo_categoria}}" label="{{$grupo[0]->categoria->categoria}}">
                                            @foreach($grupo as $item)
                                                @php($compatibilidad = (isset($item->modelo)) ? $item->modelo->marca->marca." ".$item->modelo->modelo." ".(isset($item->modelo->serie)?$item->modelo->serie:"") : 'Universal')
                                                <option value="{{$item->id_parte}}" data-subtext="{{$item->unidad->nombre_unidad.(($item->cantidad_unidad>0)?(": ".$item->cantidad_unidad):"")}}" data-precio="{{$item->precio_costo}}">
                                                    {{$item->nombre.((!Empty($item->descripcion))?" - ".$item->descripcion:"")." - ".$item->num_parte." - ".$compatibilidad}}
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-xl-2 form-group">
                                <label class="required form-label">Cantidad facturada<span class="text-danger">*</span></label>
                                <input type="number" class="form-control cantidad" placeholder="Cantidad facturada" name="cantidad_facturada" value="1" min="1" required>
                            </div>
                            <div class="col-xl-5 form-group">
                                <label class="required form-label">Precio<span class="text-danger">*</span></label>
                                <input type="text" data-type="currency" class="form-control precio" placeholder="Precio" name="precio" required>
                            </div>
                            <div class="col-xl-5 form-group">
                                <label class="required form-label">Total<span class="text-danger">*</span></label>
                                <input type="text" data-type="currency" class="form-control bg-secondary total" placeholder="$ 0,00" name="total" required readonly>
                            </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);
                            $(".btnIncidencia").val(response.id_orden_compra);
                            $(".btnDetalleExtra").val(response.id_orden_compra);
                            $(".detalles").html("");
                            $.each(response.detalles, function (i,e) {
                                cantidad_unidad = (e.parte.cantidad_unidad > 0) ? ": "+e.parte.cantidad_unidad : "";
                                cantidad_facturada = "";
                                fila = '<tr>';
                                fila += '<td class="d-none align-middle"><input type="text" value="'+e.id_orden_compra_detalle+'" name="id_orden_compra_detalle['+i+']"></td>';
                                fila += '<td class="align-middle">'+e.parte.num_parte+'</td>';
                                fila += '<td class="align-middle">'+e.parte.categoria.categoria+'</td>';
                                fila += '<td class="align-middle">'+e.nombre_articulo+'</td>';
                                fila += '<td class="align-middle">';
                                if(e.parte.modelo) {
                                    let serie = (e.parte.modelo.serie)?" "+e.parte.modelo.serie:"";
                                    fila += e.parte.modelo.marca.marca+" "+e.parte.modelo.modelo+serie;
                                } else {
                                    fila += 'Universal';
                                }
                                fila += '</td>';
                                fila += '<td class="align-middle">'+e.parte.unidad.nombre_unidad+cantidad_unidad+'</td>';
                                fila += '<td class="text-center align-middle">'+e.cantidad+'</td>';
                                fila += '<td class="d-flex justify-content-center align-middle"><input type="number" class="form-control form-control-sm" name="cantidad_facturada['+i+']" placeholder="Cantidad facturada"';
                                if(e.cantidad_facturada || e.cantidad_facturada == 0)
                                    cantidad_facturada = e.cantidad_facturada;
                                fila += ' value="'+cantidad_facturada+'"/></td>';
                                fila += '</tr>';
                                $(".detalles").append(fila);
                            });

                            if(response.detalles_extra.length > 0) {
                                $(".detalles_extra").html("");
                            } else {
                                $(".detalles_extra").html('<tr><td colspan="6" class="text-muted text-center">- - -</td></tr>');
                            }
                            $.each(response.detalles_extra, function (i,e) {
                                pintarExtra(i,e);
                            });

                            $(".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) {
                        Swal.fire({icon: 'error', title: 'Algo salio mal '+ error, showConfirmButton: true,})
                        $(".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>');
                        $(".detalles_extra").html('<tr><td colspan="6" class="text-muted text-center">- - -</td></tr>');
                        $(".incidencias").html('<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>');
                            }
                        }
                    });
            }

            $(".btnDetalleExtra").on("click", function () {
                if($("#id_orden_compra").val() != "") {
                    $("#modalDetalleExtra").modal("show");
                } else {
                    iziToast.warning({
                        title: 'Seleccione una orden primero',
                        position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                    });
                }
            });
            $(document).on("change", ".id_parte", function () {
                opcion = $(this).find("option:selected");
                if(opcion.val() == ""){
                    $("#modalDetalleExtra .precio").val("").change();
                } else {
                    $("#modalDetalleExtra .precio").val(formatCurrency(opcion.data("precio"))).change();
                }
            });
            $(document).on('blur change', '.precio, .cantidad', function () {
                if($("#modalDetalleExtra .precio").val() != "" && $("#modalDetalleExtra .cantidad").val() != "") {
                    let precio = currencyToNumber($("#modalDetalleExtra .precio").val());
                    let cantidad = $("#modalDetalleExtra .cantidad").val();
                    let total = cantidad*precio;
                    $("#modalDetalleExtra .total").val(formatCurrency(total));
                } else {
                    $("#modalDetalleExtra .total").val("");
                }
            });

            function pintarExtra(i, e) {
                console.log("pintando extra");
                cantidad_unidad = (e.parte.cantidad_unidad > 0) ? ": "+e.parte.cantidad_unidad : "";
                cantidad_facturada = "";
                fila = '<tr>';
                fila += '<td class="d-none align-middle"><input type="text" value="'+e.id+'" name="id_orden_compra_detalle_extra['+i+']"></td>';
                fila += '<td class="align-middle">'+e.parte.num_parte+'</td>';
                fila += '<td class="align-middle">'+e.parte.categoria.categoria+'</td>';
                fila += '<td class="align-middle">'+e.nombre_articulo+'</td>';
                fila += '<td class="align-middle">';
                if(e.parte.modelo) {
                    let serie = (e.parte.modelo.serie)?" "+e.parte.modelo.serie:"";
                    fila += e.parte.modelo.marca.marca+" "+e.parte.modelo.modelo+serie;
                } else {
                    fila += 'Universal';
                }
                fila += '</td>';
                fila += '<td class="align-middle">'+e.parte.unidad.nombre_unidad+cantidad_unidad+'</td>';
                fila += '<td class="d-flex justify-content-center align-middle"><input type="number" class="form-control form-control-sm" name="cantidad_facturada['+i+']" placeholder="Cantidad facturada"';
                if(e.cantidad_facturada || e.cantidad_facturada == 0)
                    cantidad_facturada = e.cantidad_facturada;
                fila += ' value="'+cantidad_facturada+'"/></td>';
                fila += '</tr>';
                console.log("antes append");
                $(".detalles_extra").append(fila);
                console.log("desp append");
            }

            $('.modal').on('hidden.bs.modal', function() {
                $(this).find('form').trigger("reset");
                $('.selectpicker').selectpicker('refresh');
            });

            $(document).on('submit','form',function(e){
                e.preventDefault();
                let form = $(this);
                $('form :submit').attr('disabled', true);
                form.find(':submit').addClass('spinner spinner-white spinner-left');
                $('button').attr('disabled', true);
                url = this.action.replace(":ordenCompra", $("#id_orden_compra").val());
                $.each($(this).find('[data-type="currency"]'), function () {
                    monto = currencyToNumber($(this).val())
                    $(this).val(monto);
                });
                data = $(this).serialize();
                $.each($(this).find('[data-type="currency"]'), function () {
                    monto = formatCurrency($(this).val())
                    $(this).val(monto);
                });
                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) {
                            iziToast.success({
                                title: 'Datos guardados',
                                position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
                            });
                            if(id == "frmIncidencia") {
                                recargarIncidencias();
                                $("#modalIncidencia").modal('hide');
                            } else if(id == 'frmDetalleExtra') {
                                pintarExtra(response.id, response);
                                $("#modalDetalleExtra").modal('hide');
                            }
                        }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.find(':submit').removeClass('spinner spinner-white spinner-left');
                    });
            });
        });
    </script>
@endsection