@extends('adminlte::page')

@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)

@section('title', 'Intranet | Recepcion De Movimientos De Salidas')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card card-aspen card-tabs">
                    <div class="card-header p-0 pt-1">
                        <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home" role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Requisición</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="custom-tabs-one-profile-tab" data-toggle="pill" href="#custom-tabs-one-profile" role="tab" aria-controls="custom-tabs-one-profile" aria-selected="false">Movimientos De Salida</a>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="custom-tabs-one-tabContent">
                            <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                <div class="contenedorDosCamposPorFilaEnLosFormulario">

                                    <div class="form-group">
                                        <label>Folio</label>
                                        <input type="text" class="form-control" id="folio" readonly="true" value="{{ $salidaBodega->folio }}">
                                    </div>

                                    <div class="form-group">
                                        <label>Bodega</label>
                                        <input type="text" class="form-control" id="bodega" readonly="true" value="{{ $salidaBodega->bodega->bodega }}">
                                    </div>

                                    <div class="form-group">
                                        <label>Nombre Solicitante</label>
                                        <input type="text" class="form-control" id="nombreSolicitante" readonly="true" value="{{ $salidaBodega->solicitante->name }}">
                                    </div>

                                    <div class="form-group">
                                        <label>Fecha Movimiento</label>
                                        <input type="text" class="form-control" id="fechaRegistro" readonly="true" value="{{ fechaConFormatoDeChile($salidaBodega->created_at) }}">
                                    </div>

                                    <div class="form-group">
                                        <label for="rut">Rut Receptor</label>
                                        <input type="text" class="form-control" id="rut" name="rut" readonly="true" value="{{ old('rut', $salidaBodega->rut_receptor) }}">
                                    </div>

                                    <div class="form-group">
                                        <label for="nombre">Nombre Receptor</label>
                                        <input type="text" class="form-control" id="nombreReceptor" name="nombreReceptor" readonly="true" value="{{ old('nameReceptor', $salidaBodega->nombre_receptor) }}">
                                    </div>

                                    <div class="form-group">
                                        <label>Fecha Recepción</label>
                                        <input type="date" class="form-control" name="fechaReceptor" id="fechaReceptor" readonly="true" value="{{ old('fechaReceptor', fechaConFormatoDeUSA($salidaBodega->fecha_recepcion)) }}">
                                    </div>

                                    <form action="{{ route('salida-bodega.store-recepcion', $salidaBodega) }}" method="post" id="formularioRecepcion">
                                        @csrf
                                        <input type="hidden" id="listadoDeSalidas" name="listado_salidas" value="[]">
                                        <input type="hidden" id="firma" name="firma">
                                        <button type="submit" style="display: none;">guardar</button>
                                    </form>
                                </div>

                                <div class="form-group">
                                    <label for="observacion">Observación</label>
                                    <textarea class="form-control" id="observacionGeneral" name="observacion_general" rows="3" readonly="true">{{ $salidaBodega->observacion }}</textarea>
                                    <div class="invalid-feedback" id="valicacionCampoObservacionGeneral">

                                    </div>
                                </div>

                                <!--<span class="d-block pb-2">Firma digital aqui</span>
                                                        <canvas id="canvas" style="border: 1px dashed red;"></canvas>
                                                        <br>
                                                        <button type="button" class="btn btn-info mt-1" id="btnLimpiar"><i class="fas fa-broom"></i> Limpiar Firma </button>-->
                            </div>

                            <div class="tab-pane fade" id="custom-tabs-one-profile" role="tabpanel" aria-labelledby="custom-tabs-one-profile-tab">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="datatable">
                                        <thead>
                                            <tr>
                                                <th>Recepcionado</th>
                                                <th>Folio</th>
                                                <th>Nombre Artículo</th>
                                                <th>Cuenta Gasto</th>
                                                <th>Cantidad Artículo Oc</th>
                                                <th>Centro Costo</th>
                                                <th>Fecha Registro</th>
                                                <th>Cantidad Enviada</th>
                                                <th>Bodega</th>
                                                <th>Numero RQ</th>
                                                <th>Numero Oc</th>
                                                <th>Total</th>
                                                <th>Nombre Solicitante</th>
                                                <th>Observación</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($salidaBodega->movimientosSalidas as $salida)
                                                @if ($salida->estado == 'Por Recepcionar')
                                                    <tr>
                                                        <td class="id-entrada-salida-bodega" style="display: none;">{{ $salida->id }}</td>
                                                        <td class="checkbox-recepcionado">
                                                            <div class="form-group">
                                                                <div class="custom-control custom-checkbox">
                                                                    <input class="custom-control-input" type="checkbox" id="customCheckbox{{ $salida->id }}" value="{{ $salida->id }}">
                                                                    <label for="customCheckbox{{ $salida->id }}" class="custom-control-label"></label>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>{{ $salidaBodega->folio }}</td>
                                                        <td>{{ $salida->articulo->descripcion }}</td>
                                                        <td>{{ $salida->articulo->cuentaDeGasto->cuenta_gasto }}</td>
                                                        <td>{{ $salida->articuloOrdenDeCompra->cantidad }}</td>
                                                        <td>{{ $salida->centroCosto->centro_costo }}</td>
                                                        <td>{{ fechaConFormatoDeChile($salida->created_at) }}</td>
                                                        <td>{{ $salida->cantidad }}</td>
                                                        <td>{{ $salidaBodega->bodega->bodega }}</td>
                                                        @if (isset($salida->articuloRequisicion))
                                                            <td>{{ $salida->articuloRequisicion->requisicion->numero_rq }}</td>
                                                        @else
                                                            <td></td>
                                                        @endif
                                                        <td>{{ $salida->articuloOrdenDeCompra->ordenDeCompra->numero_oc }}</td>
                                                        <td>{{ formatoMenedaSegunTipoDeMonedaOC($salida->articuloOrdenDeCompra->precio_total, $salida->articuloOrdenDeCompra->tipo_moneda) }}</td>
                                                        <td>{{ $salidaBodega->solicitante->name }}</td>
                                                        <td>{{ $salida->observacion }}</td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class=" card-footer">
                        @php
                            $urlAnterior = redirect()
                                ->back()
                                ->getTargetUrl();
                            $urlAnterior = explode('/', $urlAnterior);
                            $puedeVolverAlListadoDeOc = false;
                            foreach ($urlAnterior as $url) {
                                if ($url == 'por-folio' || $url == 'recepcion') {
                                    $puedeVolverAlListadoDeOc = true;
                                }
                            }
                        @endphp

                        <button type="button" class="btn btn-aspen" id="botonDeRecepcion" onclick="registrarRecepcionDeSalidas()"><i class="fas fa-people-carry"></i> Recepcionar Salidas </button>
                        @if ($puedeVolverAlListadoDeOc == true)
                            <a href="{{ route('salida-bodega.index-folio') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

@stop

@section('footer')
    <div class="float-right d-none d-sm-inline">
        Intranet
    </div>
    <strong>Copyright © 2023 <a href="https://aspenspa.cl/">aspenspa.cl</a></strong>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/estilo-generico.css') }}">
@stop

@section('js')
    <script src="{{ asset('js/funcionalidades-genericas.js') }}"></script>

    <!--<script>
        const $canvas = document.querySelector("#canvas");
        const $btnLimpiar = document.querySelector("#btnLimpiar");
        const contexto = $canvas.getContext("2d");
        const COLOR_PINCEL = "black";
        const COLOR_FONDO = "white";
        const GROSOR = 2;
        let xAnterior = 0,
            yAnterior = 0,
            xActual = 0,
            yActual = 0;
        const obtenerXReal = (clientX) => clientX - $canvas.getBoundingClientRect().left;
        const obtenerYReal = (clientY) => clientY - $canvas.getBoundingClientRect().top;
        let haComenzadoDibujo = false;

        $canvas.addEventListener("mousedown", evento => {
            // En este evento solo se ha iniciado el clic, así que dibujamos un punto
            xAnterior = xActual;
            yAnterior = yActual;
            xActual = obtenerXReal(evento.clientX);
            yActual = obtenerYReal(evento.clientY);
            contexto.beginPath();
            contexto.fillStyle = COLOR_PINCEL;
            contexto.fillRect(xActual, yActual, GROSOR, GROSOR);
            contexto.closePath();
            // Y establecemos la bandera
            haComenzadoDibujo = true;
        });

        $canvas.addEventListener("mousemove", (evento) => {
            if (!haComenzadoDibujo) {
                return;
            }
            // El mouse se está moviendo y el usuario está presionando el botón, así que dibujamos todo

            xAnterior = xActual;
            yAnterior = yActual;
            xActual = obtenerXReal(evento.clientX);
            yActual = obtenerYReal(evento.clientY);
            contexto.beginPath();
            contexto.moveTo(xAnterior, yAnterior);
            contexto.lineTo(xActual, yActual);
            contexto.strokeStyle = COLOR_PINCEL;
            contexto.lineWidth = GROSOR;
            contexto.stroke();
            contexto.closePath();
        });
        ["mouseup", "mouseout"].forEach(nombreDeEvento => {
            $canvas.addEventListener(nombreDeEvento, () => {
                haComenzadoDibujo = false;
            });
        });

        const limpiarCanvas = () => {
            // Colocar color blanco en fondo de canvas
            contexto.fillStyle = COLOR_FONDO;
            contexto.fillRect(0, 0, $canvas.width, $canvas.height);
        };
        limpiarCanvas();
        $btnLimpiar.onclick = limpiarCanvas;

        function isCanvasBlank() {
            const blank = document.createElement('canvas');

            blank.width = $canvas.width;
            blank.height = $canvas.height;

            console.log("canvas: " + $canvas.toDataURL())
            console.log("blank: " + blank.toDataURL())
            return $canvas.toDataURL() === blank.toDataURL();
        }
    </script>-->

    <script>
        function registrarRecepcionDeSalidas() {
            Swal.fire({
                title: '¿Esta seguro?',
                text: "Esta seguro de recepcionar estas salidas",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: '¡Si, recepcionar!',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById("botonDeRecepcion").setAttribute("disabled", true);
                    var filas = document.getElementById('datatable').tBodies[0].querySelectorAll("tr");
                    var listadoDeSalidas = [];
                    var todosLosMovimientoSeleccionado = true;
                    filas.forEach(elementoPadre => {
                        var checkbox = elementoPadre.querySelector(".checkbox-recepcionado").querySelector(".custom-control-input");
                        var idEntradaSalidaBodega = elementoPadre.querySelector(".id-entrada-salida-bodega").innerHTML;

                        if (checkbox != undefined && checkbox != null) {
                            if (checkbox.checked) {
                                listadoDeSalidas.push(idEntradaSalidaBodega);
                            } else {
                                todosLosMovimientoSeleccionado = false;
                            }
                        } else {
                            todosLosMovimientoSeleccionado = false;
                        }
                    });
                    var cantidadListado = listadoDeSalidas.length;
                    listadoDeSalidas = JSON.stringify(listadoDeSalidas);
                    if (cantidadListado > 0) {
                        if (todosLosMovimientoSeleccionado == true) {
                            document.getElementById("botonDeRecepcion").removeAttribute("disabled");
                            document.getElementById("listadoDeSalidas").value = listadoDeSalidas;
                            document.getElementById("formularioRecepcion").submit();

                            eliminarLoading()
                            Swal.fire({
                                    icon: 'success',
                                    title: '¡Recepcionado!',
                                    text: 'La recepcion de los movimientos de salidas se guardaron con éxito',
                                    confirmButtonColor: "#448aff",
                                    confirmButtonText: "Confirmar"
                                }).then((result) => {
                                    location.reload();
                                })
                                .catch((error) => {
                                    location.reload();
                                });
                        } else {
                            eliminarLoading()
                            document.getElementById("botonDeRecepcion").removeAttribute("disabled");
                            Swal.fire({
                                icon: 'error',
                                title: '¡Seleccionar!',
                                text: 'Debe seleccionar todos los movimientos de salidas para hacer la recepcion de articulos, avise al encargado de bodega',
                                confirmButtonColor: "#448aff",
                                confirmButtonText: "Confirmar"
                            })
                        }
                    } else {
                        eliminarLoading()
                        document.getElementById("botonDeRecepcion").removeAttribute("disabled");
                        Swal.fire({
                            icon: 'error',
                            title: '¡Seleccionar!',
                            text: 'Debe seleccionar movimientos de salidas para hacer la recepcion de articulos',
                            confirmButtonColor: "#448aff",
                            confirmButtonText: "Confirmar"
                        })
                    }
                }
            })
        }
    </script>


    <script>
        /*document.getElementById("listadoDeSalidas").value = listadoDeSalidas;
                                    document.getElementById("firma").value = $canvas.toDataURL();
                                    document.getElementById("formularioRecepcion").submit();

                                    eliminarLoading()
                                    Swal.fire({
                                            icon: 'success',
                                            title: '¡Recepcionado!',
                                            text: 'La recepcion de los movimientos de salidas se guardaron con éxito',
                                            confirmButtonColor: "#448aff",
                                            confirmButtonText: "Confirmar"
                                        }).then((result) => {
                                            location.reload();
                                        })
                                        .catch((error) => {
                                            location.reload();
                                        });*/
    </script>
@stop