@extends('adminlte.app')

@section('content')

<div class="content-wrapper pb-3">
    <!-- Content Header (Page header) -->
 <div class="content-header">
     <div class="container-fluid">
         <div class="row mb-2">
             <div class="col-sm-6">
                 <h1 class="m-0">Produtos</h1>
             </div><!-- /.col -->
             <div class="col-sm-6">
         
             </div><!-- /.col -->
         </div><!-- /.row -->
     </div><!-- /.container-fluid -->
 </div>
<!-- /.content-header -->

@if ($message = Session::get('success'))
<div class="alert alert-success">
    <p>{{ $message }}</p>
</div>
@endif

<div class="card mx-3 mt-3">
    <div class="card-header">
        <div class="row">  
            <div class="col-9">
                Produtos
            </div>
            <div class="col-sm-3 text-right">
                <a href="{{ route('ordem_produtos_index') }}">
                    <button class="btn btn-primary rounded">Definir Ordem</button>
                </a>
            </div>
        </div>
    </div>

        <div class="row pl-3 ml-3 pb-0 pt-0 mt-3 mr-3 bg-dark text-white">
           <div class="col-sm-11">
               Adicionar
            </div> 
            <div class="col-ms-1">
                <button class="btn btn-primary btn-sm" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" title="Adicionar"><i class="fas fa-plus" title="Adicionar" aria-hidden="true"></i></button>
            </div>
        </div>

        <form action="/produtos/store" method="POST" class="pt-4">
            @csrf
        <div class="row border pt-3 pb-3 ml-3 mr-3 mb-3 bg-light collapse" id="collapseExample">

            <div class="col-sm-3 pl-3 pr-3">
                <label for="artigo" class="col-form-label ">Artigo</label>

                <input id="artigo" class="form-control @error('artigo') is-invalid @enderror" name="artigo" value="{{ old('artigo') }}" required>
                    


                @error('artigo')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror

            </div>

       

            <div class="col-sm-3 pl-3 pr-3">

                <label for="descricao" class="col-form-label ">Descrição</label>

                <input id="descricao" type="text" class="form-control @error('descricao') is-invalid @enderror" name="descricao" value="{{ old('descricao') }}"  autofocus>

                @error('descricao')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            
            </div>

            <div class="col-sm-3 pl-3 pr-3">

                <label for="unidade" class="col-form-label ">Unidade</label>

                <input id="unidade" type="text"  class="form-control @error('unidade') is-invalid @enderror" name="unidade" value="{{ old('unidade') }}"  autofocus>

                @error('unidade')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror

            
            </div>

        

            <div class="col-sm-3 pl-3 pr-3">

                <label for="iva" class="col-form-label ">IVA (%)</label>

                <input id="iva" type="number" step="0.01" class="form-control @error('iva') is-invalid @enderror" name="iva" value="{{ old('iva') }}" required autofocus>

                @error('iva')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            
            </div>

            <div class="col-sm-3 pl-3 pr-3">
                <label for="isp" class="col-form-label ">ISP </label>

                <input id="isp" type="number" step="0.01" class="form-control @error('isp') is-invalid @enderror" name="isp" value="{{ old('isp') }}" required autofocus>

                @error('isp')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            
            </div>

            <div class="col-sm-3 pl-3 pr-3">

                <label for="dgeg" class="col-form-label ">DGEG</label>

                <input id="dgeg" type="text"  class="form-control @error('dgeg') is-invalid @enderror" name="dgeg" value="{{ old('dgeg') }}"  autofocus>

                @error('dgeg')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror

            
            </div>

            <div class="col-sm-3 pl-3 pr-3">

                <label for="ense" class="col-form-label ">ENSE</label>

                <input id="ense" type="text"  class="form-control @error('ense') is-invalid @enderror" name="ense" value="{{ old('ense') }}"  autofocus>

                @error('ense')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror

            
            </div>

            <div class="col-sm-3 pl-3 pr-3">

                <label for="familia_id" class="col-form-label ">Familia</label>
                    <select name="familia_id" id="familia_id" class="form-control">
                        <option></option>
                        @foreach($familias as $item)
                            @php
                                $subFamiliasJson = json_encode($subFamiliasNomes[$item->id]);
                            @endphp
                            <option data-subfamilia="{{ $subFamiliasJson }}" value="{{ $item->id }}">{{ $item->familia }}</option>
                        @endforeach
                    </select>    


                    @error('familia_id')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
            
            </div>

            <div class="col-sm-3 pl-3 pr-3">

                <label for="sub_familia_id" class="col-form-label ">Sub-Família</label>
                    <select name="sub_familia_id" id="sub_familia_id" class="form-control">
                        <option></option>
                  
                    </select>    


                    @error('sub_familia_id')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
            
            </div>

            <div class="col-sm-3 mt-4">
                
                <button class="btn btn-primary mt-3" type="submit">Adicionar</button>
            </div>
            
        </div>

        </form>


        <div class="row mt-4">
            <div class="col-sm-12 pl-3 pr-3">
                <table id="tabela1" class="table table-bordered text-center">
                    <tbody>
                        <tr>
                  
                            <th>Artigo</th>
                            <th>Descrição</th>
                            <th>Ordenaçao Report Mensal</th>
                            <th>Unidade </th>
                            <th>IVA (%) </th>
                            <th>ISP </th>
                            <th>DGEG </th>
                            <th>ENSE </th>
                            <th>Família </th>
                            <th>Sub-Família </th>
                            <th>Ações</th>
                        </tr>
                        @foreach($produtos as $produto)
                        <tr>
                            <td>{{ $produto->artigo }}</td>
                          
                            <td>{{ $produto->descricao }}</td>
                            <td>{{ $produto->ordenar_combustivel_report_mensal }}</td>
                            <td>{{ $produto->unidade }}</td>
                                
        
                            <td>{{ $produto->iva }}</td>
                            <td>{{ $produto->isp}}</td>
                            <td>{{ $produto->dgeg }}</td>   
                            <td>{{ $produto->ense }}</td>
                            <td>{{ $produto->familia->familia ?? "" }}</td>
                            <td>{{ $produto->subfamilia->nome ?? "" }}</td>
                            <td class="d-flex justify-content-around">
                                <form method="GET" action="/produtos/{{ $produto->id }}/edit">
                                    <button class="btn btn-success btn-sm" type="submit" title="Editar"><i class="fas fa-pencil-alt" title="Editar" aria-hidden="true"></i></button>
                                </form>
                                <form method="POST" onclick="return confirm('Deseja realmente excluir o produto?')" action="/produtos/{{ $produto->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <button class="btn btn-danger btn-sm" type="submit" title="Excluir"><i class="fa fa-trash" title="Excluir" aria-hidden="true"></i></button>
                                </form>
                            </td>
                          

                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
</div>
</div>
<script type="text/javascript">
    $("#telefone").mask("(00) 0000-0000");
    $("#celular").mask("(00) 00000-0000");
 </script>

 <script>
    $('#familia_id').change(function() {
        var subFamiliasJson = $(this).find(':selected').data('subfamilia');
        console.log(subFamiliasJson);
        var subFamilias = subFamiliasJson;
        
        $('#sub_familia_id').empty();
        $.each(subFamilias, function(key, value) {
            $('#sub_familia_id').append($('<option>').text(value).attr('value', key));
        });
    });
 </script>
@endsection