@php
$titulo = "Cartões - SW";
@endphp
@include('components.head')
<div class="container">
<style>
     .painel{
        /* border-color: black; */
        border-style: solid;
        border-width: 5px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
    }    
    .painel:hover {
        transform: scale(1.1);
        z-index: 1;
        transition: all 0.5s ease;
    }
    .alert-light {
            transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Suavização da transição */
        }
    
    .alert-light:hover {
        /* background-color: #F2F6FF; */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para o efeito de elevação */
    }
</style>
 <!-- Page Heading -->
 <div class="form-group">
    <form action="{{ route('financeiro.cartoes.index') }}" method="GET" class="mb-3">
        <!-- Campo de pesquisa -->
        <div class="row mb-3">
            <div class="col-lg-3">
                <label for="search">Pesquisa por texto</label>
                <input
                    type="text"
                    name="search"
                    class="form-control"
                    placeholder="Pesquisar por dono do cartão"
                    value="{{ request('search') }}">
            </div>
            
            <div class="col-lg-3">
                <label for="search_num">Numeração do cartão</label>
                <input
                    type="text"
                    name="search_num"
                    class="form-control"
                    value="{{ request('search_num') }}">
            </div>
            
            <div class="col-lg-2">
                <label for="status">Status</label>
                <select class="custom-select" name="status" id="status">
                    <option value="">Selecione</option>
                    <option value="1" {{ old('status', request('status')) == '1' ? 'selected' : '' }}>Ativo</option>
                    <option value="0" {{ old('status', request('status')) == '0' ? 'selected' : '' }}>Inativo</option>
                </select>
            </div>
            
            
            <!-- Botões -->
            <div class="col-sm-1 d-flex align-items-end">
                <div class="">
                    {{-- @if(request('search') || request('start_date') || request('end_date')) --}}
                    <a href="{{ route('financeiro.cartoes.index') }}" class="btn btn-danger">Limpar</a>
                    {{-- @endif --}}
                </div>
            </div>
            
            <div class="col-sm-1 d-flex align-items-end">
                <div class="">
                    <button type="submit" class="btn btn-primary mr-2">Pesquisar</button>
                </div>
            </div>
          
           

        </form> 
        <div class="col-sm-2 d-flex align-items-end">
            
            <button type="button" class="btn btn-success shadow-sm "  class="fas fa-plus" data-toggle="modal" data-target="#novoCartaoModal"><i class="fas fa-plus"></i> Novo Cartão</button>
        </div>
    </div>

</div>


<hr>
    

    <!--TABELA COM DADOS PUXANDO DO BANCO DE DADOS-->
    @if (empty($cartoes)) 
        <hr style="color: #333; background-color: #333; height: 2px; border: none;">
        <p class="text-center">Sem Cartões cadastrados.</p>
    @else
        <div class="table-responsive shadow">
            <table class="table">
                <thead>
                    <th scope="col" class="text-center"> Dono </th>
                    <th scope="col" class="text-center"> Número do cartão </th>
                    <th scope="col" class="text-center"> Banco</th>
                    <th scope="col" class="text-center"> Dia de fechamento</th>
                    <th scope="col" class="text-center"> Status</th>
                    <th scope="col" class="text-center"> Ação </th>
                </thead>
                <tbody>
                    @foreach ($cartoes as $cartao) 
                        <tr>
                            <td class="text-center">{{ $cartao['car_dono'] }}</td>
                            <td class="text-center">{{ $cartao['car_numero'] }}</td>
                            <td class="text-center">{{ $cartao['car_banco'] }}</td>
                            <td class="text-center">{{ $cartao['car_fechamento'] }}</td>
                            @if ($cartao['car_status'] == 1)
                            <td class="text-center">Ativo</td>
                            @else 
                            <td class="text-center">Inativo</td> 
                            @endif    
                            <td class="text-center">
                                <button type="button "  onclick="location.href='{{ route('financeiro.cartoes.verifica', $cartao->car_id) }}'"class="btn btn-sm btn-warning shadow painel ">
                                Ver cartão 
                                </button>
                            </td>
                        
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
    @if ($cartoes->count())
            <nav class="mt-3 d-flex justify-content-end" aria-label="Navegação de página">
                <ul class="pagination">
                    {{-- Botão "Anterior" --}}
                    <li class="page-item {{ $currentPage == 1 ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $cartoes->previousPageUrl() }}" aria-label="Anterior">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
        
                    {{-- Números das páginas --}}
                    @foreach(range(1, $totalPages) as $i)
                        <li class="page-item {{ $i == $currentPage ? 'active' : '' }}">
                            <a class="page-link" href="{{ $cartoes->url($i) }}">{{ $i }}</a>
                        </li>
                    @endforeach
        
                    {{-- Botão "Próximo" --}}
                    <li class="page-item {{ $currentPage == $totalPages ? 'disabled' : '' }}">
                        <a class="page-link" href="{{ $cartoes->nextPageUrl() }}" aria-label="Próximo">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        @endif
</div>
@include('components.footer')

{{--    dividsao                --}} 




 
{{-- <div class="container">
    <h5> Cadastro de cartões </h5>
   
    <form action="" method="post" id="meuFormulario" enctype="multipart/form-data">

         

        <div class="row">
            <div class="form-group col-3 d-inline">
                <label for="car_dono">Dono do cartão:</label>
                <input class="form-control" id="car_dono" name="car_dono" required>
            </div>

            <div class="form-group col-3 d-inline">
                <label for="car_numero">4 últimos dígitos do cartão:</label>
                <input class="form-control" id="car_numero" name="car_numero" maxlength="4" required>
            </div>

            <div class="form-group col-3 d-inline">
                <label for="car_banco">Banco:</label>
                <input class="form-control" id="car_banco" name="car_banco" required>
            </div>

            <div class="form-group col-3 d-inline">
                <label for="car_fechamento">Dia de fechamento do cartão:</label>
                <select class="form-control custom-select" id="car_fechamento" name="car_fechamento">
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select>
            </div>

            <div class="form-group col-3 d-inline">
                <label for="car_status">Dia de fechamento do cartão:</label>
                <select class="form-control custom-select" id="car_status" name="car_status">
                    <option value="0">Ativo</option>
                    <option value="1">Inativo</option>
                </select>
            </div>

        </div>

        <hr style="color: #333; background-color: #333; height: 2px; border: none;">

        <!--BOTÕES-->
        <div class="col-12 text-center">
            <a href="index.php" class="btn btn-danger mr-5">Cancelar</a>
            <button type="submit" class="btn btn-primary ml-5">Incluir despesa</button>
        </div>

    </form>

</div> --}}
<div class="modal fade" id="novoCartaoModal" tabindex="-1" role="dialog" aria-labelledby="novaCartaoModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="novaCartaoModalLabel">Cadastro de Cartão</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('financeiro.cartoes.cadastrar') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <!-- Coloque aqui o conteúdo do formulário de cadastro -->
                    <div class="form-group">
                        <label for="car_dono"><strong>Dono do cartão:</strong></label>
                        <input class="form-control" id="car_dono" name="car_dono" required>
                    </div>

                    <div class="form-group">
                        <label for="car_numero"><strong>4 últimos dígitos do cartão:</strong></label>
                        <input class="form-control" id="car_numero" name="car_numero" maxlength="4" required>
                    </div>
                    <div class="form-group ">
                        <label for="car_banco"><strong>Banco:</strong></label>
                        <input class="form-control" id="car_banco" name="car_banco" required>
                    </div>
                    <div class="form-group">
                        <label for="car_bandeira"><strong>Bandeira do cartão</strong></label>
                        <select class="form-control custom-select" id="car_bandeira" name="car_bandeira" onchange="mostrarCampos()">
                            <option value="VISA">VISA</option>
                            <option value="MasterCard">MasterCard</option>
                            <option value="ELO">ELO</option>
                            <option value="AmericanExpress">AmericanExpress</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="car_fechamento"><strong>Dia de fechamento do cartão:</strong></label>
                        <select class="form-control custom-select" id="car_fechamento" name="car_fechamento">
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="car_status"><strong>Status do cartão:</strong></label>
                        <select class="form-control custom-select" id="car_status" name="car_status">
                            <option value="1">Ativo</option>
                            <option value="0">Inativo</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Incluir Cartão</button>
                </div>
            </form>
        </div>
    </div>
</div>