@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('/home') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Creación de embarque</li>
            </ol>
        </nav>
    </div>
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Creación de embarque</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">

        @include('adminlte-templates::common.errors')

        <div class="card">
            <form action="{!! url('/update-production-shipment/'.$embarque->id) !!}" id="form" method="POST">
                @csrf
                <div class="card-body">
                    <div class="row">
                        @include('product_productions.fields_shipment_edit')
                    </div>
                </div>
            </form>
        </div>
    </div>
@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>
        var bandera = true;
        $('.fechas_embarque').datetimepicker({
            format: 'YYYY-MM-DD',
            useCurrent: true,
            icons: {
                up: "icon-arrow-up-circle icons font-2xl",
                down: "icon-arrow-down-circle icons font-2xl"
            },
            sideBySide: true
        });


        $('.inputValue').keyup(function() {
            let cantidad = $(this).val();
            let anterior = $(this).parent().parent().find('.total_pagar');
            let 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'));
            }
        });

        $('.check_piezas').click(function() {
            let input = $(this).parent().parent().parent().find('.inputValue');

            input.attr('disabled', true);
            bandera = true;
            if ($(this).is(':checked')) {
                input.attr('disabled', false);
            }
        })

        $('#productProductions-table').DataTable({
            order: [0, 'desc'],
            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"
                }
            },
        });

        function cuentas() {
            $.each($(".inputValue"), function(key, value) {
                let cantidad = $(value).val();
                let anterior = $(value).parent().parent().find('.total_pagar');
                let total;

                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'));
                }
            });
        }
        cuentas();
        
        /*********** VALIDACIONES CREAR USUARIO ****************/
        $('#form').submit(function(event) {
            event.preventDefault();
            aplicar_validacion(event);
        });


        function aplicar_validacion(event) {
            let validacion = true;

            $('.messageGeneral').text('');

            $.each($('.selectValue'), function(key, value) {
                const id = $(value).parent().find('.messageInput');
                if ($(this).val() != '') {
                    $(id).text('');
                } else {
                    $(id).text('Selecciona una opcion válida');
                    validacion = false;
                }
            })

            if ($(`.select_two option:selected`).val() == 0) {
                validacion = false;
                $(`.messageSelect`).text('Seleccciona una opción válida');
            } else {
                $(`.messageSelect`).text('');
            }

            $.each($('.inputValue'), function(key, value) {
                var isDisabled = $(this).prop('disabled')
                const id = $(value).parent().find('.messageInputArray');

                $(id).text('');
                if (!isDisabled) {
                    bandera = isDisabled;
                    if ($(this).val() == '') {
                        validacion = false;
                        $(id).text('Seleccciona una opción válida');
                    } else {
                        $(id).text('');
                    }
                }
            });

            if (bandera) {
                validacion = false;
                $('.messageGeneral').text('Debes por lo menos activar una pieza para crear el embarque');
            }

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

    </script>
@endpush