@php
$titulo =  'Detalhes Cartões - SW';
@endphp

@include('components.head')
<style>
    #fotos {
        display: none;
        /* Oculta o input de arquivo padrão */
    }

    .btn {
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 5px;
        display: inline-block;
        color: white;
    }

    #labelFotos {
        background-color: #4CAF50;
        /* Cor verde para o botão de fotos */
    }

    #labelFotos:hover {
        background-color: #45a049;
    }

    .btn:hover {
        background-color: #769ea2;
        /* Cor de fundo padrão para outros botões */
    }.painel{
    /* border-color: black;  */
    border-style: solid;
    border-width: 2px;
    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 */
    } 
 
.modal-open .painel:hover {
    transform: none !important;
    z-index: auto !important;
}

.modal-open .painel:hover {
    transform: none !important;
    z-index: auto !important;
}


</style>
<div class="container">
    <div class="col-md-12 mb-2">
        <div class="card">
            <div class="card-body shadow">
                <div>
                    <div class="row">
                        <div class="col">

                            <h5>Detalhes do Cartão</h5>
                        </div>
                        {{-- <a href="{{ route('financeiro.cartoes.edit', ['car_id' => $cartao['car_id']]) }}" > --}}
                            <div class="col d-flex justify-content-end">

                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editCartaoModal" onclick="loadCartaoData({{ $cartao['car_id'] }})">Editar</button>
                            </div>
                        </div>
                            {{-- </a> --}}
                    {{-- <p>Editar</p> --}}
                </div>
                <hr>
                <div class="row">
                    <div class="col-2">
                        <span class="text-primary"><strong>Dono do cartão:</strong></span>
                        <p><strong>{{ $cartao['car_dono'] ?? 'Não cadastrado' }}</strong></p>
                    </div>
                    <div class="col-2">
                        <span class="text-primary"> <strong>Bandeira:</strong></span>
                        <p><strong>{{ $cartao->car_bandeira ?? 'Não cadastrado' }}</strong></p>
                    </div>
                    <div class="col-2">
                        <span class="text-primary"><strong>Número do cartão:</strong></span>
                        <p><strong>{{ $cartao['car_numero'] ?? 'Não cadastrado' }}</strong></p>
                    </div>
                    <div class="col-2">
                        <span class="text-primary"><strong>Banco:</strong></span>
                        <p><strong>{{ $cartao['car_banco'] ?? 'Não cadastrado' }}</strong></p>
                    </div>
                    <div class="col-2">
                        <span class="text-primary"><strong>Dia de fechamento:</strong></span>
                        <p><strong>{{ $cartao['car_fechamento'] ?? 'Não cadastrado' }}</strong></p>
                    </div>
                    <div class="col-2">
                        <span class="text-primary"><strong>Status do cartão:</strong></span>
                        <p><strong>{{ $cartao['car_status'] == 0 ? 'Inativo' : 'Ativo' }}</strong></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr>
    <h4>Ações</h4>
    <form action="{{ route('financeiro.cartoes.verifica', $cartao->car_id) }}" method="GET" class="mb-3">
        <div class="row">
            <div class="col-lg-3">
                <label for="recurso">Tipo de despesa</label>
                <input type="text" name="tipo" class="form-control" value="{{ request('tipo') }}" placeholder="Pesquisar por tipo de despesa">
            </div>
    
            <div class="col-lg-2">
                <label for="valor_min">Valor Mínimo</label>
                <input type="number" step="0.01" name="valor_min" class="form-control" value="{{ request('valor_min') }}">
            </div>
    
            <div class="col-lg-2">
                <label for="valor_max">Valor Máximo</label>
                <input type="number" step="0.01" name="valor_max" class="form-control" value="{{ request('valor_max') }}">
            </div>
    
            <div class="col-lg-2">
                <label for="data_inicio">Data Início</label>
                <input type="date" name="data_inicio" class="form-control" value="{{ request('data_inicio') }}">
            </div>
    
            <div class="col-lg-2">
                <label for="data_fim">Data Fim</label>
                <input type="date" name="data_fim" class="form-control" value="{{ request('data_fim') }}">
            </div>
            
            
            <div class="col-lg-1 d-flex align-items-end">
                <button type="submit" class="btn btn-primary">Filtrar</button>
            </div>

            @if(request()->filled('tipo') || request()->filled('valor_min') || request()->filled('valor_max') || request()->filled('data_inicio') || request()->filled('data_fim'))
            <div class="col-lg-12 d-flex justify-content-end mt-1">
                <a href="{{ route('financeiro.cartoes.verifica', $cartao->car_id) }}" class="btn btn-danger">Limpar</a>
            </div>
            @endif  
        </div>
    </form>
    
    <hr>
    <div>
        <h5>Despesas</h5>
        @if($todasdespesas->isEmpty())
        <div class="alert alert-secondary">Sem despesas cadastradas.</div>
    @else
        @foreach($todasdespesas as $despesa)
            <div class="card card-alert alert painel alert-light mb-3">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-12 align-items-center">
                            <small>Tipo de despesa: </small>
                            <strong>{{ $despesa['via_tipo'] ?? $despesa['des_tipo'] ?? 'Não cadastrado' }}</strong>
                            <br>
                            <small>CNPJ: </small>
                            <strong>{{ $despesa['via_cnpj'] ?? $despesa['des_cnpj'] ?? 'Não cadastrado' }}</strong><br>
                        </div>
                        <div class="col-md-4 col-sm-12 align-items-center">
                            <small>Valor: </small>
                            <strong>R$ {{ $despesa['via_valor'] ?? $despesa['des_valor'] ?? 'Não cadastrado' }}</strong> <br>
                            <small>Data: </small>
                            <strong>{{ Carbon\Carbon::parse($despesa['via_data'])->format('d/m/Y') ?? Carbon\Carbon::parse($despesa['des_data'])->format('d/m/Y') ?? 'Não cadastrado' }}</strong><br>
                        </div>
                        @php
                            $imagem = $despesa['via_imagem'] ?? $despesa['des_imagem'] ?? null;
                        @endphp
                        
                            <div class="col-4 d-flex align-items-center">
                                <button type="button" class="btn btn-primary mr-5" 
                                    data-toggle="modal" 
                                    data-target="#modalDespesa"
                                    data-extensao="{{ pathinfo($imagem, PATHINFO_EXTENSION) }}"
                                    data-imagem="{{ asset('storage/'.$imagem) }}"
                                    data-tipo="{{ $despesa['via_tipo'] ?? $despesa['des_tipo'] }}"
                                    data-cnpj="{{ $despesa['via_cnpj'] ?? $despesa['des_cnpj'] }}"
                                    data-valor="{{ $despesa['via_valor'] ?? $despesa['des_valor'] }}"
                                    data-data="{{ Carbon\Carbon::parse($despesa['via_data'] ?? $despesa['des_data'])->format('d/m/Y') }}">
                                    Visualizar
                                </button>

                                <a href="{{ asset('storage/'.$imagem) }}" download="{{ $imagem }}_codigo{{ $despesa['des_id'] }}_{{ $despesa['des_tipo'] }}_{{ $despesa['des_valor'] }}.jpg" class="btn btn-secondary mr-5">
                                    Download
                                </a>
                            </div>
                       
                        {{-- @if($imagem)
                            <div class="col-4 d-flex align-items-center">
                                <a href="{{ asset('storage/'.$imagem) }}" target="_blank" class="btn btn-primary mr-5">Visualizar</a>
                                <a href="{{ asset('storage/'.$imagem) }}" download="{{ $imagem }}_codigo{{ $despesa['des_id'] }}_{{ $despesa['des_tipo'] }}_{{ $despesa['des_valor'] }}.jpg" class="btn btn-secondary mr-5">
                                    Download
                                </a>
                            </div>
                        @endif --}}
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modalDespesa" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalLabel">Detalhes da Despesa</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p><strong>Tipo de Despesa:</strong> <span id="modalTipo"></span></p>
                            <p><strong>CNPJ:</strong> <span id="modalCnpj"></span></p>
                            <p><strong>Valor:</strong> R$ <span id="modalValor"></span></p>
                            <p><strong>Data:</strong> <span id="modalData"></span></p>
                            <div id="imagemContainer" class="text-center" style="display: none;">
                                <img id="modalImagem" src="" class="img-fluid" alt="Imagem da Despesa">
                            </div>
            
                            <div id="pdfContainer" class="text-center" style="display: none;">
                                <iframe id="modalPdf" width="100%" height="500px" frameborder="0"></iframe>
                            </div>
                            
                        </div>
                        <div class="modal-footer">
                            <a id="downloadLink" class="btn btn-secondary" download>Download</a>
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>
            
        @endforeach
        @if ($despesas->count() || $viadespesas->count())
    <nav class="mt-3 d-flex justify-content-end" aria-label="Navegação de página">
        <ul class="pagination">
            {{-- Paginação para despesas --}}
            @if ($despesas->lastPage() > 1)
                <li class="page-item {{ $despesas->onFirstPage() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $despesas->previousPageUrl() }}" aria-label="Anterior">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                @foreach(range(1, $despesas->lastPage()) as $i)
                    <li class="page-item {{ $i == $despesas->currentPage() ? 'active' : '' }}">
                        <a class="page-link" href="{{ $despesas->url($i) }}">{{ $i }}</a>
                    </li>
                @endforeach

                <li class="page-item {{ $despesas->currentPage() == $despesas->lastPage() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $despesas->nextPageUrl() }}" aria-label="Próximo">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            @endif
        </ul>

        {{-- Paginação para viadespesas --}}
        <ul class="pagination">
            @if ($viadespesas->lastPage() > 1)
                <li class="page-item {{ $viadespesas->onFirstPage() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $viadespesas->previousPageUrl() }}" aria-label="Anterior">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>

                @foreach(range(1, $viadespesas->lastPage()) as $i)
                    <li class="page-item {{ $i == $viadespesas->currentPage() ? 'active' : '' }}">
                        <a class="page-link" href="{{ $viadespesas->url($i) }}">{{ $i }}</a>
                    </li>
                @endforeach

                <li class="page-item {{ $viadespesas->currentPage() == $viadespesas->lastPage() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $viadespesas->nextPageUrl() }}" aria-label="Próximo">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            @endif
        </ul>
    </nav>
@endif

   
 
 @endif
       
    </div>
</div>
@include('components.footer')

<script>
   document.addEventListener("DOMContentLoaded", function () {
    $('#modalDespesa').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); 
        var tipo = button.data('tipo');
        var cnpj = button.data('cnpj');
        var valor = button.data('valor');
        var data = button.data('data');
        var imagem = button.data('imagem');
        var extensao = button.data('extensao');

        var modal = $(this);
        modal.find('#modalTipo').text(tipo);
        modal.find('#modalCnpj').text(cnpj);
        modal.find('#modalValor').text(valor);
        modal.find('#modalData').text(data);

        if (imagem) {
            $('#downloadLink').attr('href', imagem).show();
            
            if (extensao === "pdf") {
                $('#imagemContainer').hide();
                $('#pdfContainer').show();
                $('#modalPdf').attr('src', imagem);
            } else {
                $('#pdfContainer').hide();
                $('#imagemContainer').show();
                $('#modalImagem').attr('src', imagem);
            }
        } else {
            $('#imagemContainer').hide();
            $('#pdfContainer').hide();
            $('#downloadLink').hide();
        }
    });
});
    </script>
    

<div class="modal fade" id="editCartaoModal" tabindex="-1" role="dialog" aria-labelledby="editCartaoModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="editCartaoForm" method="POST" action="{{ route('financeiro.cartoes.post_edit', $cartao['car_id']) }}">
                @csrf
                @method('POST')

                <div class="modal-header">
                    <h5 class="modal-title" id="editCartaoModalLabel">Editar Cartão</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <div class="form-group">
                        <label for="car_dono">Dono do cartão</label>
                        <input type="text" class="form-control" id="car_dono" value="{{$cartao->car_dono}}" name="car_dono">
                    </div>
                    <div class="form-group">
                        <label for="car_numero">Número do cartão</label>
                        <input type="text" class="form-control" id="car_numero" name="car_numero" value="{{$cartao->car_numero}}" maxlength="4">
                    </div>
                    <div class="form-group">
                        <label for="car_banco">Banco</label>
                        <input type="text" class="form-control" id="car_banco" name="car_banco" value="{{$cartao->car_banco}}">
                    </div>
                    <div class="form-group">
                        <label for="car_bandeira">Bandeira do cartão</label>
                        <select class="form-control custom-select" id="car_bandeira" name="car_bandeira">
                            <option value="VISA" {{ $cartao->car_bandeira == 'VISA' ? 'selected' : '' }}>VISA</option>
                            <option value="MasterCard" {{ $cartao->car_bandeira == 'MasterCard' ? 'selected' : '' }}>MasterCard</option>
                            <option value="ELO" {{ $cartao->car_bandeira == 'ELO' ? 'selected' : '' }}>ELO</option>
                            <option value="AmericanExpress" {{ $cartao->car_bandeira == 'AmericanExpress' ? 'selected' : '' }}>AmericanExpress</option>
                                                        
                        </select>
                    </div>
                    {{-- <div class="form-group">
                        <label for="car_fechamento">Dia de fechamento</label>
                        <select class="form-control custom-select" id="car_fechamento" name="car_fechamento" value="{{$cartao->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_fechamento">Dia de fechamento</label>
                        <select class="form-control custom-select" id="car_fechamento" name="car_fechamento">
                            @for ($i = 1; $i <= 31; $i++)
                                <option value="{{ str_pad($i, 2, '0', STR_PAD_LEFT) }}" 
                                    @selected($cartao->car_fechamento == str_pad($i, 2, '0', STR_PAD_LEFT))>
                                    {{ str_pad($i, 2, '0', STR_PAD_LEFT) }}
                                </option>
                            @endfor
                        </select>
                    </div>
                    
                    {{-- <div class="form-group">
                        <label for="car_status">Status</label>
                        <select class="form-control" id="car_status" name="car_status">
                            <option value="1">Ativo</option>
                            <option value="0">Inativo</option>
                        </select>
                    </div> --}}
                    <div class="form-group">
                        <label for="car_status">Status</label>
                        <select class="form-control" id="car_status" name="car_status">
                            <option value="1" @selected($cartao->car_status == 1)>Ativo</option>
                            <option value="0" @selected($cartao->car_status == 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">Salvar alterações</button>
                </div>
            </form>
        </div>
    </div>
</div>