@extends('layouts.app')
@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">
@endpush
@section('content')
    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Gestión del embarque</li>
            </ol>
        </nav>
    </div>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Gestión del embarque</h1>
                </div>
                <div class="col-sm-6">
                </div>
            </div>
        </div>
    </section>

    <div class="main-wrapper">
        <div class="row">
            <div class="col">

                @include('flash::message')

                <div class="clearfix"></div>
                <form action="{!! url('/getionar-shipment/'.$embarque->id) !!}" id="form" method="POST">
                    @csrf
                    <div class="card">
                        <div class="card-body ">
                            <div class="row">
                                <div class="form-group col-sm-4">
                                    {!! Form::label('area', 'Estatus:') !!}
                                    <br />
                                    <select name="status" id="status" class="select_two form-control status" style="width:100%">
                                        <option value="0" selected disabled>Selecciona una opción</option>
                                        @foreach ($shipment_paints as $item)
                                            @if (($embarque->status == 'Enviado' || $embarque->status == 'Retornado') && $item == 'Por enviar')
                                                <option value="{!! $item !!}" disabled>{!! $item !!}</option>
                                            @elseif( $embarque->status == 'Retornado'  && $item == 'Enviado')    
                                                <option value="{!! $item !!}" disabled >{!! $item !!}</option>
                                            @else
                                                <option value="{!! $item !!}" {!! $embarque->status == $item ? 'selected' : null !!}>{!! $item !!}</option>
                                            @endif
                                    
                                            
                                        @endforeach
                                    </select>
                                    <div class="messageSelect"></div>
                                </div>
                                <div class="col-12">
                                    <div class="messageGeneral class_message_danger"></div>
                                    <div class="table-responsive">
                                        <table class="table" id="productProductions-table">
                                            <thead>
                                                <tr>
                                                    <th>Nombre</th>
                                                    <th>Enviados</th>
                                                    <th>Retornados</th>
                                                    <th>Diferencia</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($enviados as $enviado)
                                                    <tr>
                                                        <td>{{ $enviado->component->material }}</td>
                                                        <td>
                                                            <span>{!! $enviado->quantity  !!}</span>
                                                        </td>
                                                        <td>
                                                            <input type='number' class="form-control inputValue cantidad" name="cantidad_[]" value="{{ $enviado->retornado != 0 ?  $enviado->retornado : '' }}" disabled/>
                                                            <div class="messageInputArray class_message_danger"></div>
                                                            <input type="hidden" name="componente_[]" value="{!!  $enviado->component_id !!}"/>
                                                            <input type="hidden" name="cantidad_actual_[]" value="{!!  $enviado->quantity !!}"/>
                                                            <input type="hidden" name="id_embarque_[]" value="{!!  $enviado->id !!}"/>
                                                        </td>
                                                        <td>
                                                            <span class="total_pagar" 
                                                                data-total="{{ $enviado->retornado != 0 ? $enviado->quantity - $enviado->retornado : $enviado->quantity }}">
                                                                {{ $enviado->retornado != 0 ? $enviado->quantity  - $enviado->retornado : $enviado->quantity }}
                                                            </span>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer col-sm-12" style="margin-top:30px">
                                <div class="form-group  flex-content">
                                    <a type="button" href="{{ route('productProductions.index_pintura') }}"
                                        class="btn btn-light">CANCELAR</a>
                                    <button type="submit" class="btn btn-primary">GUARDAR</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <livewire:modal-delete />
@endsection

@push('page_scripts')
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>
    <script src="{!! asset('assets') !!}/views_js/devices/create.js"></script>
    <script>

        $(document).ready(function(){

            $('#productProductions-table').DataTable({
                order: [0, 'asc'],
                language: {
                    "decimal": "",
                    "emptyTable": "No hay información",
                    "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
                    "infoEmpty": "Mostrando 0 a 0 de 0 Entradas",
                    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "lengthMenu": "Mostrar _MENU_ Entradas",
                    "loadingRecords": "Cargando...",
                    "processing": "Procesando...",
                    "search": "Buscar:",
                    "zeroRecords": "Sin resultados encontrados",
                    "paginate": {
                        "first": "Primero",
                        "last": "Ultimo",
                        "next": "Siguiente",
                        "previous": "Anterior"
                    }
                },
            })

            $('.inputValue').keyup(function() {
                let cantidad = $(this).val();
                let anterior = $(this).parent().parent().find('.total_pagar');
                let total;

                total = parseInt(anterior.data('total')) - cantidad;
                anterior.text(total);
                anterior.val(total);

                // if (parseInt(anterior.data('total')) >= cantidad) {
                //     total = parseInt(anterior.data('total')) - cantidad;
                //     anterior.text(total);
                //     anterior.val(total);
                // } else {
                //     $(this).val('');
                //     anterior.text(anterior.data('total'));
                //     anterior.val(anterior.data('total'));
                // }

            });

            /*********** VALIDACIONES CREAR USUARIO ****************/
            $('#form').submit(function(event) {
                if( $('#status').val() != 'Por enviar' && $('#status').val() != 'Enviado' ){
                    event.preventDefault();
                    aplicar_validacion(event);
                }
            });

            $('#status').on('change',function(e){

                console.log('entramos al cambio');

                let cantidad =  $('.cantidad');
                if( $('#status').val() != 'Por enviar' && $('#status').val() != 'Enviado' ){
                    cantidad.attr('disabled',false);
                    console.log('bloquamos');
                }else{
                    cantidad.attr('disabled',true);
                    console.log('desbloqueamos');
                }

                console.log('entramos al cambio');
                //si tenemos datos se cargan y genera el js en caso contrario se crea uno nuevo y se crea el json
                
                // console.log('entramos');
                // console.log(e.date.format('YYYY'));

                // let product_id = $('#product_id').val();
                // let llamada = `${url}/${product_id}/${e.date.format('YYYY')}`; 

                // // mandar a llamar a la funcion para generar el json si existe
                // fetch(llamada)
                // .then(response => {
                //         if (!response.ok)   
                //             throw new Error('error'); 
                //         return response.json()
                //     })
                // .then(data => conDatos(data))
                // .catch(data =>  sinDatos());
            });

            //llamadas automaticas
            //cuentas();
        });

        function cuentas() {
            $.each($(".inputValue"), function(key, value) {
                let cantidad = $(value).val();
                let anterior = $(value).parent().parent().find('.total_pagar');
                let total;
                console.log(parseInt(anterior.data('total')),cantidad);
                if (parseInt(anterior.data('total')) >= cantidad) {
                    total = parseInt(anterior.data('total')) - cantidad;

                    anterior.text(total);
                    anterior.val(total);
                } else {
                    $(value).val('');
                    anterior.text(anterior.data('total'));
                    anterior.val(anterior.data('total'));
                }
            });
        }

        function aplicar_validacion(event) {
            let validacion = true;
            $.each($('.inputValue'), function(key, value) {
                const id = $(value).parent().find('.messageInputArray');
                if ($(this).val() == '') {
                    validacion = false;
                    $(id).text('Este campo es requerido');
                } else {
                    $(id).text('');
                }
            });

            if (validacion) {
                event.target.submit();
            }
        }

    </script>
@endpush