@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">Familias</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-3">
                Lista Familias
            </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="/familias/store" method="POST" class="pt-4">
             @csrf
            <div class="border pt-3 pb-3 ml-3 mr-3 mb-3 bg-light collapse" id="collapseExample">
                <div class="row  align-items-end">
                    <div class="col-sm-3 pl-3 pr-3">
                        <label for="familia" class="col-form-label ">Nome da Familia</label>

                        <input type="text" name="familia" id="familia" class="form-control" required>
                            


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

                    </div>
            
                    <div class="col-sm-2 pl-3 pr-3">
                        <label for="unidade_padrao" class="col-form-label ">Unidade Padrão </label>
                        <select name="unidade_padrao" id="unidade_padrao" class="form-control" required>
                            <option></option>
                            <option value="LT">LT</option>
                            <option value="€">€</option>
                        </select>
                        
                        @error('unidade_padrao')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                    </div>

                    
                    <div class="col-sm-2 pl-3 pr-3">
                        <input type="checkbox" name="ignorar_soma_final_sem_iva" id="ignorar_soma_final_sem_iva" value="1">
                        <label for="ignorar_soma_final_sem_iva" class="col-form-label ">Ignorar na soma final Sem IVA</label>
                        
                        @error('ignorar_soma_final_sem_iva')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                    </div>

                    <div class="col-sm-2 pl-3 pr-3">
                        <input type="checkbox" name="ignorar_soma_final" id="ignorar_soma_final" value="1">
                        <label for="ignorar_soma_final" class="col-form-label ">Ignorar na soma final Com IVA</label>
                        
                        @error('ignorar_soma_final')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror

                    </div>


                            
                    <div class="col-sm-2 pl-3 pr-3">
                        <label for="taxa_iva" class="col-form-label ">Taxa IVA</label>
                        <select name="taxa_iva" id="taxa_iva" class="form-control" required>
                            <option value="0">Não definido</option>
                            <option value="6">6%</option>
                            <option value="13">13%</option>
                            <option value="23">23%</option>
                        </select>
                        
                        @error('taxa_iva')
                            <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" class="col-form-label ">Sub-Familia</label>
                        <select name="sub_familia" id="sub_familia" class="form-control">
                            <option></option>
                            @foreach($sub_familias as $item)
                                <option value="{{$item->id}}">{{$item->nome}}</option>
                            @endforeach
                        </select>    


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

                    </div>

                
                    <div class="col-sm-2 ">
                        
                        <button id="btn_adicionar" class="btn btn-primary" type="button">Adicionar</button>
                    </div>
                </div>
                
                <hr>
                <div class="row align-items-end">

                    
                    <div class="col-md-6 responsive">
                        <table id="tbl_sub_familias" class="table table-sm table-bordered text-center ">
                            <thead>
                                <tr>
                                    <th>
                                        ID
                                    </th>
                                    <th>
                                        Nome
                                    </th>
                                    <th>
                                        Remover
                                    </th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>

                        </table>
                     </div>

                     <div class="col-6">
                        <button class="btn btn-primary" type="submit">Salvar</button>
                    </div>

                </div>
                <div class="row align-items-end text-center">
                   
                </div>
            </div>
        </form>

   

        <div class="row mt-4">
            <div class="col-sm-6 ml-4">
                <table id="tabela1" class="table table-bordered text-center">
                    <tbody>
                        <tr>
                            <th>Nome da Familia</th>
                            <th>Unidade Padrão</th>
                            <th>Ações</th>
                        </tr>
                        @foreach($familias as $familia)
                        <tr>
                            <td>{{ $familia->familia }}</td>
                            <td>{{ $familia->unidade_padrao }}</td>
                            <td class="d-flex justify-content-around">
                                <form method="GET" action="/familias/{{ $familia->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 a familia?')" action="/familias/{{ $familia->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>
    $(document).ready(function(){
        $('#btn_adicionar').click(function(){
            var selectedId = $('#sub_familia').val();
            var selectedNome = $('#sub_familia option:selected').text();

            if(selectedId && selectedNome) {
                var newRow = '<tr>' +
                                '<td><input type="hidden" name="sub_familia_id[]" value="' + selectedId + '">' + selectedId + '</td>' +
                                '<td>' + selectedNome + '</td>' +
                                '<td><button class="btn btn-danger btn_remover" type="button">Remover</button></td>' +
                             '</tr>';
                
                $('#tbl_sub_familias tbody').append(newRow);
            }
        });

        // Remover linha ao clicar no botão "Remover"
        $(document).on('click', '.btn_remover', function(){
            $(this).closest('tr').remove();
        });
    });
</script>
@endsection