@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">Canais</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 Canais
            </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="/canais/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="nome_canal" class="col-form-label ">Nome do Canal</label>

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


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

            </div>

            <div class="col-sm-3 pl-3 pr-3">
                <label for="vermelho" class="col-form-label ">Vermelho (Dias vencidos)</label>

                <input type="number" step="1" name="vermelho" id="vermelho" class="form-control" required>
                    


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

            </div>

       
            <div class="col-sm-3 pl-3 pr-3">
                <label for="amarelo" class="col-form-label ">Amarelo (Dias vencidos)</label>

                <input type="number" step="1" name="amarelo" id="amarelo" class="form-control" required>
                    


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

            </div>

            <div class="col-sm-3 pl-3 pr-3">
                <label for="verde" class="col-form-label ">Verde (Dias vencidos)</label>

                <input type="number" step="1" name="verde" id="verde" class="form-control" required>
                    


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

            </div>

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

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


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

            </div>

          
            <div class="col-sm-3 mt-4 pl-3">
                
                <button class="btn btn-primary mt-3" type="submit">Adicionar</button>
            </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>Canais</th>
                            <th>Vermelho</th>
                            <th>Amarelo</th>
                            <th>Verde</th>
                            <th>IBAN</th>
                            <th>Ações</th>
                        </tr>
                        @foreach($canais as $canal)
                        <tr>
                            <td>{{ $canal->nome_canal }}</td>
                            <td>{{ $canal->vermelho }}</td>
                            <td>{{ $canal->amarelo }}</td>
                            <td>{{ $canal->verde }}</td>
                            <td>{{ $canal->iban }}</td>
                            <td class="d-flex justify-content-around">
                                <form method="GET" action="/canais/{{ $canal->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 canal?')" action="/canais/{{ $canal->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>
@endsection