@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="#">Perfiles</a></li>
                <li class="breadcrumb-item active" aria-current="page">Perfiles</li>
            </ol>
        </nav>
    </div>
    
    @include('product_productions.menu')
    @include('product_productions.menu_pintura')

    <div class="row">
        <div class="col-sm-6"></div>
        <div class="col-sm-6" style="text-align: right">
            {{-- <button type="button" class="btn btn-success" id="add_production">
                <img src=" {{ asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">
                AGREGAR PRODUCTO
            </button> --}}
            {{-- <a href="{!! url('/create-view-shipment') !!}" type="button" class="btn btn-success" id="add_production">

                <img src=" {{ asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">
                CREAR EMBARQUE
            </a> --}}
        </div>
    </div>
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table_all" >
                    <thead>
                        <tr>
                            <th>Producto</th>
                            <th>Cantidad/En Pintura</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($productos_produccion as $producto)
                            <tr>
                                <td> {{ $producto->product->no_part }}</td>
                                <td> {{ $producto->en_pintura }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="main-wrapper">
        <div class="row">
            <div class="col">


                @include('flash::message')

                <div class="clearfix"></div>

                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table_all" id="productProductions-table">
                                <thead>
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Producto</th>
                                        <th>Cantidad</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $aux = 0; 
                                    @endphp
                                    @foreach ($pinturas as $pintura)
                                        <tr>
                                            <td>{{ $pintura->created_at }}</td>
                                            <td>{{ $pintura->product->no_part }}</td>
                                            <td>{{ $pintura->cantidad }}</td>
                                            <td width="120">
                                                <div class='btn-group'>
                                                    <button type="button" data-aux="{!! $aux !!}" data-id="{!! $pintura->id  !!}"
                                                        class='btn btn-default btn-xs edit_pintura'>
                                                        <i class="fas fa-reply-all"></i>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                        @php
                                            $aux ++; 
                                        @endphp
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- <div class="clearfix"></div>

                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table_all" id="productProductions-table">
                                <thead>
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Producto</th>
                                        <th>Por pintar</th>
                                        <th>
                                            Pintados
                                        </th>
                                        <th>En pintura</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($shipment_generals as $shipment_general)
                                        <tr>
                                            <td>{{ $shipment_general->created_at }}</td>
                                            <td>{{ $shipment_general->component->boms->products->no_part }} / {{ $shipment_general->component->material }}</td>
                                            <td>{{ $shipment_general->por_pintar }}</td>
                                            <td>{{ !is_null($shipment_general->pintados) ? $shipment_general->pintados : 0 }}</td>
                                            <td>{{ !is_null($shipment_general->en_pitura) ? $shipment_general->en_pintura : 0}}</td>
                                            <td width="120">
                                                <div class='btn-group'>
                                                    <a href="{!! url('view-paint-component') !!}/{!! $shipment_general->component->id !!}" data-id="{!! $shipment_general->id  !!}"
                                                        class='btn btn-default btn-xs'>
                                                        <i class="far fa-eye"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <h2 style="margin:50px 0 30px">Embarques</h2>
                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table_all" id="productProductions-table">
                                <thead>
                                    <tr>
                                        <th>Cantidad</th>
                                        <th>
                                            Fecha
                                        </th>
                                        <th>Estatus</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($embarques as $embarque)
                                        <tr>
                                            <td>{{ $embarque->shipmentPaintDetails->sum('quantity')  }}</td>
                                            <td>{{ $embarque->created_at->format('d M Y')  }}</td>
                                            <td>{{  $embarque->status }}</td>
                                            <td width="120">
                                                <div class='btn-group'>
                                                    {!! Form::open(['route' => ['productProductions.destroy_embarque', $embarque->id], 'method' => 'delete', 'id' =>  $embarque->id]) !!}
                                                    <div class='btn-group'>
                                                        <a href="{!! url('show-production-shipment/'.$embarque->id) !!}" class='btn btn-default btn-xs'>
                                                            <i class="far fa-eye"></i>
                                                        </a>
                                                        <a href="{!! url('edit-view-shipment') !!}/{!! $embarque->id !!}" class='btn btn-default btn-xs'>
                                                            <i class="far fa-edit"></i>
                                                        </a>
                                                        @if($embarque->status != 'Retornado')
                                                            <button  type="button" class='btn btn-danger btn-xs'  onclick="modal_delete('Embarque', '{{ $embarque->name  }}', {{ $embarque->id }})">
                                                                <i class="far fa-trash-alt"></i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                    {!! Form::close() !!}
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div> --}}
                
            </div>
        </div>
    </div>
    <livewire:modal-delete /> 
    <livewire:modal-create />
    <livewire:modal-edit />
@endsection
@push('page_scripts')
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>
    <script>

        const pinturas  = {!! count($pinturas) > 0 ? $pinturas : '[]' !!};
        const productos  = {!! count($productProductions) > 0 ? $productProductions : '[]' !!};
        let html = `@include('product_productions.fields_pintura_in')`;
        var html_producto = `@include('product_productions.fields')`;
        let url_dinamica = "{!! url('/') !!}";
        let url_create = `${url_dinamica}/create-pintura-product`;
        let cantidad = 0;
        let cantidad_input = 0;
        
        $(document).ready(function(){
            $('body').on("keyup",'.selectValue', function(){
                var restante = 0;
                cantidad_input = 0;
                $(`.class_message_danger`).text('');
                $.each($(`.selectValue`), function(key, value){
                    var valor = $(value).val()
                    if(!isNaN(parseInt(valor))){
                        cantidad_input += parseInt(valor);
                        restante = cantidad - cantidad_input;
                        $(`.total_cantidad`).text(restante);
                    }

                    if(cantidad_input > cantidad){
                        $(`.class_message_danger`).fadeIn(1);
                        $(`.class_message_danger`).text(`Ya no puedes agregar más cantidad a la establecida del producto terminado, la cantidad permitida es: ${cantidad}`);
                        $(`.total_cantidad`).text(0);
                        $(`.total_cantidad`).text(restante + parseInt(valor));
                        $(this).val('');
                    }
                });
            });

            $(`.edit_pintura`).on('click', function() {
                var aux = $(this).data('aux');
                var id = $(this).data('id');
                var url_move = `${url_dinamica}/move-pintura-in/${id}`;

                $(`#editModalTitle`).text('Mover pintura')
                $('#form_edit').attr('action', url_move);
                $('#modulo_modal').html('Pintura ');
                $('#modulo_modal_title').html('Pintura');
                $('.edit_content_form').html(html);
                $(`.total_cantidad`).text(pinturas[aux].cantidad);
                cantidad = pinturas[aux].cantidad;
                $('#editModal').modal('show');
            });

            $('.table_all').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"
                    }
                },
            })

            $(`#add_production`).on('click', function() {
                $('#form_create').attr('action', url_create);
                $('#modulo_modal').html('Crear Producto');
                $('#modulo_modal_title').html('Crear Producto');
                $('.create_content_form').html(html_producto);
                $('.select_two').select2();
                $('#createModal').modal('show');
            });
        });

        /*********** VALIDACIONES CREAR USUARIO ****************/
        $('#form_create').submit(function(event) {
            event.preventDefault();
            aplicar_validacion(event);
        });

        function aplicar_validacion(event) {
            let validacion = true;

            $.each($('.selectValue'), function(key, value) {
                const id = $(value).parent().find('.messageInput');
                if ($(this).val() != 0) {
                    $(id).text('');
                } else {
                    $(id).text('El campo es requerido');
                    validacion = false;
                }
            })

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

        function modal_delete(modulo, info, form){
            $('#id_form').val(form);
            $('#modulo_modal').html(modulo);
            $('#modulo_modal_title').html(modulo);
            $('#info_modal').html(info);
            
            $('#exampleModalCenter').modal('show');
        }

        function btn_modal_delete(){
            let id_form = $('#id_form').val();
            document.getElementById(id_form).submit();
        }
    </script>
@endpush