@php
$titulo = 'Avarias de BDT';
@endphp
@include('components.head')
<style>
    .card-img-top {
        transition: filter 0.3s ease;
    }


    .form-control {
        height: 40px;
        /* Ajusta a altura da caixa de pesquisa */
    }

    .card-header {
        color: #007bff !important;
        /* Azul aplicado com prioridade */
        font-family: 'Arial', sans-serif;
        /* Definindo fonte personalizada */
        font-weight: bold;

    }

    /* .card-header {
    color: #007bff;  
    font-family: 'Arial', sans-serif;  
    text-decoration: none;  
    font-size: 18px; 
    font-weight: bold; 
    text-align: center;  
    background-color: #f8f9fa; 
    padding: 10px;  
    border-bottom: 2px solid #007bff;  
    border-radius: 4px 4px 0 0; 
    transition: color 0.3s ease;  
}

.card-header:hover {
    color: #0056b3; 
    background-color: #e9ecef;  
    cursor: pointer; 
} */
</style>
{{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"> --}}

{{-- {{ dd($carro)}} --}}
<div class="container">
    <h3>Seu BDT ativo</h3>
    @if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <div class="card shadow p-4 mb-5">
        <div class="row">
            <div class="col-lg-3">

                <label for="car_id">Modelo do Carro e placa:</label><br>
                <strong>
                    {{ $carro->car_modelo }} - {{ $carro->car_placa }}
                </strong>

                <input type="text" hidden name="modelo_placa" class="form-control" readonly placeholder="Modelo e Placa do Carro">
            </div>
            {{-- <select class="custom-select" id="car_modelo" name="car_modelo">
                <option selected>SELECIONE SEU CARRO</option>
                @foreach ($carrosAtivos as $carro)
                <option value="{{ $carro->car_modelo }}">{{ $carro->car_modelo }} - {{ $carro->car_placa }}</option>
            @endforeach
            </select> --}}

            <div class="col-lg-3">

                <div class="form-group">
                    <label for="bdt_destino_avarias">Destino:</label><br>
                    <strong>
                        {{$bdt->bdt_destino}}
                    </strong>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-lg-5">
                        <label for="bdt_km_saida">KM de saída:</label><br>
                        <strong>
                            {{$bdt->bdt_km_saida}}
                        </strong>
                    </div>
                    <div class="col-lg-7">
                        <label for="bdt_data_saida">Horário de saida e data</label><br>
                        <strong>{{$bdt->bdt_hora_saida}} - {{\Carbon\Carbon::parse($bdt->bdt_data_saida)->format('d/m/Y')}}</strong>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 d-flex justify-content-center">
                <form action="{{route('bdt.update', ['bdt_id' => $bdt->bdt_id])}} ">
                    @csrf
                    <button class="btn btn-danger mt-3 ">Finalizar BDT</button>

                </form>
            </div>
        </div>
    </div>

    <h3 class="">Buscar Avarias</h3>

    <div class="container">

        {{-- <form action="{{ route('bdt.avaria', $bdt->bdt_id) }}" method="GET" class="">
        <div class="row align-items-center">
            <!-- Campo de pesquisa -->
            <div class="col-lg-9 d-flex align-items-center">
                <input type="text" name="search" class="form-control mr-2"
                    placeholder="Pesquisar tipos de avarias"
                    value="{{ request('search') }}">

                <!-- Botão para limpar a pesquisa -->
                @if(request('search'))
                <a href="{{ route('bdt.avaria', $bdt->bdt_id) }}" class="btn btn-danger ml-2">Limpar</a>
                @endif
            </div>

            <!-- Botões -->
            <div class="col-lg-3 d-flex justify-content-end">
                <button type="submit" class="btn btn-primary me-2">Pesquisar avarias</button>
                <button class="btn btn-success ">Adicionar avaria</button>
            </div>
        </div>
        </form> --}}
        <div class="row align-items-center ">
            <!-- Primeiro formulário -->
            <div class="col-lg-10">
                <form action="{{ route('bdt.avaria', $bdt->bdt_id) }}" method="GET" class="d-flex">
                    <!-- Campo de pesquisa -->
                    <input
                        type="text"
                        name="search"
                        class="form-control me-2"
                        placeholder="Pesquisar nome por usuario ou Titulo da avaria"
                        value="{{ request('search') }}">
                    <!-- Botão para limpar a pesquisa -->
                    @if(request('search'))
                    <a href="{{ route('bdt.avaria', $bdt->bdt_id) }}" class="btn btn-danger me-2">Limpar</a>
                    @endif
                    <button type="submit" class="btn btn-primary">Pesquisar</button>
                </form>
            </div>

            <!-- Segundo formulário -->
            <div class="col-lg-2 d-none d-md-block">
                <form action="{{ route('bdt.avaria.nova', ['bdt_id' => $bdt->bdt_id]) }}" method="GET">
                    <button class="btn btn-success w-100">Adicionar Avaria</button>
                </form>
            </div>
        </div>



    </div>
    <div class="col-lg-2 mt-3 d-sm-block d-md-none">
        <form action="{{ route('bdt.avaria.nova', ['bdt_id' => $bdt->bdt_id]) }}" method="GET">
            <button class="btn btn-success w-100">Adicionar Avaria</button>
        </form>
    </div>

    <script>
        const baseUrl = "{{ route('bdt.avaria.imagem', ':ava_id') }}"; // Placeholder correto para Laravel
    </script>
    @if(!$avarias->isEmpty())
    <div class="mt-5">
        <h5>Avarias Pendentes</h5>
        <div class="row mb-5">
            @foreach($avarias as $avaria)
            @if($avaria->ava_status == 0)
            <div class="col-md-4 mb-2">
                {{-- <div class="card" style="width: 400px; height: 400px; overflow: hidden;"> --}}
                <div class="card shadow">

                    <div class="card-header"> {{$avaria->ava_parteveiculo}} </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6">
                                <span class="card-title">Usuario</span>
                                <p class="card-text"><strong>{{ $avaria->usuario->usu_nome}} {{$avaria->usuario->usu_sobrenome}}</strong></p>
                            </div>
                            <div class="col-6">
                                <span class="card-title">Problema</span>
                                <p class="card-text"><strong>{{ $avaria->ava_tipo}} </strong></p>
                            </div>
                            {{-- <div class="col-6">
                                <span class="card-title">Status</span>
                                <p class="card-text"><strong> {{ $avaria->ava_status == 0 ? 'Defeituoso' : 'Reparado'}} </strong></p>


                        </div> --}}
                        <div class="col-6">
                            <span class="card-title">Data</span>
                            <p class="card-text"><strong>{{\Carbon\Carbon::parse($avaria->ava_data)->format('d/m/Y')}} </strong></p>

                        </div>
                        <div class="col-6">
                            <span class="card-title">Gravidade</span>
                            <p class="card-text"><strong>{{$avaria->ava_nivel}} </strong></p>

                        </div>
                        <div class="mt-2 d-flex justify-content-center">

                            <button
                                id="btn-ver-imagem"
                                data-id="{{ $avaria->ava_id }}"
                                class="btn btn-primary btn-ver-imagem mt-1">
                                Ver imagem
                            </button>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        @endif
        @endforeach
    </div>
</div>
@if ($avarias->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 {{ $avarias->onFirstPage() ? 'disabled' : '' }}">
                <a class="page-link" href="{{ $avarias->previousPageUrl()  }}" aria-label="Anterior">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
    
            {{-- Números das páginas --}}
            @for ($i = 1; $i <= $avarias->lastPage(); $i++)
                <li class="page-item {{ $i == $avarias->currentPage() ? 'active' : '' }}">
                    <a class="page-link" href="{{ $avarias->url($i) }}">{{ $i }}</a>
                </li>
            @endfor
    
            {{-- Botão "Próximo" --}}
            <li class="page-item {{ $avarias->currentPage() == $avarias->lastPage() ? 'disabled' : '' }}">
                <a class="page-link" href="{{ $avarias->nextPageUrl()  }}" aria-label="Próximo">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    
        @endif
@endif
<br>

<div class="modal fade" id="imagemModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                @if(isset($avaria) && $avaria)
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{$avaria->ava_parteveiculo}}</h5>
                    <hr>
                </div>
                <div class="row mt-3">
                    <div class="col-6">
                        <span class="card-title">Usuario</span>
                        <p class="card-text"><strong>{{ $avaria->usuario->usu_nome}} {{$avaria->usuario->usu_sobrenome}}</strong></p>
                    </div>
                    <div class="col-6">
                        <span class="card-title">Problema</span>
                        <p class="card-text"><strong>{{ $avaria->ava_tipo}} </strong></p>
                    </div>
                    <div class="col-6">
                        <span class="card-title">Data</span>
                        <p class="card-text"><strong>{{\Carbon\Carbon::parse($avaria->ava_data)->format('d/m/Y')}} </strong></p>

                    </div>
                    <div class="col-6">
                        <span class="card-title">Gravidade</span>
                        <p class="card-text"><strong>{{$avaria->ava_nivel}} </strong></p>

                    </div>
                    <div class="row">

                    </div>
                    <div class="mt-2">
                        <span class="card-title">Descrição</span>
                        <strong><p id="modalDescricao" class="text-black"></p></strong>
                    </div>
                </div>
                <img id="modalImagem" class="img-fluid" alt="Imagem da Avaria" />
                @endif
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const buttons = document.querySelectorAll('#btn-ver-imagem'); // Corrigindo a seleção pelo ID
        const modalImagem = document.getElementById('modalImagem');
        const modalDescricao = document.getElementById('modalDescricao');
        const modal = new bootstrap.Modal(document.getElementById('imagemModal'));

        buttons.forEach(button => {
            button.addEventListener('click', function() {

                const avariaId = this.getAttribute('data-id');
                const url = baseUrl.replace(':ava_id', avariaId);
                console.log('URL gerada:', url);

                // Fazendo a requisição AJAX
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            modalImagem.src = data.foto; // Configura a URL da imagem
                            modalDescricao.textContent = data.descricao || 'Sem descrição disponível'; // Adiciona a descrição
                            modal.show(); // Exibe o modal
                        } else {
                            alert('Imagem não encontrada.');
                        }
                    })
                    .catch(error => console.error('Erro ao carregar a imagem:', error));
            });
        });
    });
</script>



</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

<script>
    function atualizarCor() {
        var select = document.getElementById("car_modelo");
        var corCarro = document.getElementById("car_placa");
        var corSelecionada = select.options[select.selectedIndex].getAttribute("data-cor");
        corCarro.textContent = "Lista de avarias: " + corSelecionada;
    }

    function previewFile() {
        const file = document.querySelector('input[type=file]').files[0];
        const reader = new FileReader();
        reader.onloadend = function() {
            const fotoMiniatura = document.getElementById('fotoMiniatura');
            fotoMiniatura.src = reader.result;
            document.getElementById('fotoCapturada').style.display = 'block';
        };
        if (file) {
            reader.readAsDataURL(file);
        }
    }
</script>
@include('components.footer')