@extends('layouts.model')

@section('content')
    <h3 class=""><i class="fas fa-laptop"></i> Projetos</h3><hr>
    <form action="" id="cadastro-projeto" nome="cadastro-projeto" method="post">
        @csrf
        @method('patch')

        <input type="hidden" name="route" id="route" value="/projeto/store">
        <input type="hidden" name="type" id="type" value="POST">
        <input type="hidden" name="origem" id="origem" value="projeto">

        <div class="row">
            <div class="form-group col-md-4">
                Cliente
                <select class="form-control limpar" type="text" name="id_cliente" id="id_cliente">
                    <option value="%">Todas</option>
                    @foreach ($clientes as $cliente )
                        <option value="{{ $cliente->id }}">{{ $cliente->cliente }}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group col-md-2">
                OS:
                <input class="form-control limpar" type="text" name="os" id="os">
            </div>
            <div class="form-group col-md-2">
                Data Inicio (Previsão):
                <input class="form-control limpar" type="date" name="data_inicio" id="data_inicio">
            </div>
            <div class="form-group col-md-2">
                Total de Colaboradores:
                <input class="form-control limpar" type="text" name="nr_colaborador" id="nr_colaborador">
            </div>
            <div class="form-group col-md-2">
                Projeto Ativo:
                <select class="form-control limpar" type="text" name="ativo" id="ativo">
                    <option value="">Selecione</option>
                    <option value="Sim">Sim</option>
                    <option value="Não">Não</option>
                </select>
            </div>
        </div>
        <hr>

        <div class="row">
            <div class="form-group col-md-3">
                Produto/Serviço
            </div>
            <div class="form-group col-md-2">
                Horas Projeto
            </div>
            <div class="form-group col-md-2">
                Horas Detalhamento
            </div>
            <div class="form-group col-md-2">
                Concluido
            </div>
        </div>
        <div class="row">
            <div class="form-group col-md-12">
                {{-- inicio do produto --}}
                <div id="sectionItem">
                    <div class="sectionItem">
                        <div class="row">
                            <div class="form-group col-md-3">
                                <select class="form-control" id="produto_id" name="produto_id[]">
                                    <option value="">Selecione o Produto</option>
                                    @foreach ($produtos as $item )
                                        <option value="{{$item->id}}">{{$item->produto}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-2">
                                <input class="form-control limpar" type="number" step="any" id="h_projeto" name="h_projeto[]">
                            </div>
                            <div class="form-group col-md-2">
                                <input class="form-control limpar" type="number" step="any" id="h_detalhamento" name="h_detalhamento[]">
                            </div>
                            <div class="form-group col-md-1">
                                <select class="form-control limpar" type="text" id="concluido" name="concluido[]">
                                    <option value="Não">Não</option>
                                    <option value="Sim">Sim</option>
                                </select>
                            </div>
                            <div class="form-group col-md-2">
                                <button type="button" name="add-Item[]" id="addItem" value="" class="btn btn-outline-primary addsectionItem fas fonte-10">
                                    <span class="fas fa-plus"></span>
                                </button>
                                <button type="button" name="delItem" id="minusItem" value="" class="btn btn-outline-danger removeItem fas fonte-10">
                                    <span class="fas fa-minus"></span>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- fim do produto --}}
            </div>
        </div><hr>

        <div class="row">
            <div class="form-group col-md-3">
                <button type="submit" name="salvar" value="" id="salvar" class="btn btn-success btn-block">
                    <span class="fas fa-save"></span> Salvar
                </button>
            </div>
                <div class="form-group col-md-3">
                    <button type="button" name="sair" id="sair" value="" class="btn btn-danger btn-block">
                        <span class="fa fa-door-open"></span> Sair
                    </button>
                </div>
            </div>
        </div>
    </form>

    <script>
        $(document).ready(function(){

            $('button#sair').click(function(){
                $(location).attr('href',url+'/projeto');
            })
        })

         /******************************** clone Item ******************************/
    var templateItem = $('#sectionItem .sectionItem:first').clone();
    //clear inputs
    templateItem.find("select").val('');
    templateItem.find("input").val('');

    //define counter
    var sectionsCountItem = $(document).find('.sectionItem').length;
    //add new section
    $('body').on('click', '.addsectionItem', function() {
        //increment
        sectionsCountItem++;
        //loop through each input
        var section = templateItem.clone().find(':input').each(function(){
            //set id to store the updated section number
            var newIdItem = this.id + sectionsCountItem;
            //update for label
            $(this).prev().attr('for', newIdItem);
            //update id
            this.id = newIdItem;

        }).end()

        //inject new section
        .appendTo('#sectionItem');
        colocaChosen();

        var Key = parseInt($(this).attr("id").replace(/\D/g, ''));
        if(isNaN(Key)){
            Key=1
        };
        Key ++;

        return false;
    });

    //remove section
    $('#sectionItem').on('click', '.removeItem', function() {
        var id = $(this).attr("id").replace(/[^\d]+/g,'');
        var  acao = 'del';
        if($(document).find('.sectionItem').length>1){
            $(this).parent().fadeOut(300, function(){
                //remove parent element (main section)
                $(this).parent().parent().remove();

                return false;
            })
        }
        return false;
    });


    </script>

@endsection