@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">Producción diaria de dispositivo</li>
            </ol>
        </nav>
    </div>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Producción diaria de dispositivo</h1>
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3">
        @include('adminlte-templates::common.errors')
        <div class="card">
            <div class="row" style="margin-top:30px">
                <div class="col-8"></div>
                <div class="col-4">
                    <button type="button" class="btn btn-success" id="add_pieza"> 
                        <img src=" {{  asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">
                        AGREGAR PIEZA
                    </button>
                </div>
            </div>
            
            <form action="{!! url('/create-produce/'.$id) !!}" method="POST" id="form">
                @csrf
                <div class="card-body">
                    <div class="danger-message"></div>
                    @include('devices.fields_produce')
                </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>
    $(document).ready(function(){
        "use strict";

        var catidadAreas = "{!! count($productos) !!}"; 
        var countClass = 0;
        var aux = 1;

        $(`.product`).select2();

        $('#add_pieza').on('click', function(event){
            countClass = $('.contentAreas').length;
            if (countClass < parseInt(catidadAreas)) {
                $(`.danger-message`).text('');
                $('.content_products').append(`<div class="row contentAreas" style="margin-top:20px; margin-bottom:20px" id="contentProducts${aux}">
                    <div class="col-sm-4">
                        <label>Productos</label>
                        <select name="product_[]" class="product form-control">
                            <option value="0">Selecciona un producto</option>
                            @foreach($productos as $producto)
                                <option value="{!! $producto->id !!}">{!! $producto->description !!}</option>
                            @endforeach
                        </select>
                        <div class="messageAddSelect"></div>
                    </div>
                    <div class="col-sm-4">
                        <label>Cantidad de piezas</label>
                        <input name="cantidad[]" type="text" class="form-control time">
                        <div class="messageAddInput"></div>
                    </div>
                    <div class="col-sm-2 " style="display:flex; align-items:center; margin-top:25px">
                        <button type="button" class="btn btn-danger btn-xs remove_item" >
                            <i class="far fa-trash-alt"></i>
                        </button>
                    </div>
                </div>`);
                deleteSection();
                $(`.product`).select2();
            }else{
                $('.danger-message').html('¡Hey ya no puedes agregar más piezas!');
                $('.danger-message').fadeIn(1000);
                setTimeout(function() {
                    $('.danger-message').fadeOut(1000);
                },2500);
            }
        })
    });
    deleteSection();
    $(`#button_0`).remove();
    function deleteSection() {
        $('.remove_item').click(function(event) {
            $(this).parent().parent().remove();
        })
    }

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

    function aplicar_validacion(event){
        let validacion = true;

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

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

        if (validacion) {
            event.target.submit();
        }
    }
</script>
@endpush