@php
// $caminho = "../";
$titulo = "BDT - ENCERRAR";
// verificar os dados do usuario na api
// $bdt = api_request('get_bdt', 'GET', ['bdt_id' => $bdt_id])['data']['results'][0];
@endphp
<style>
    .bdt-info {
        border: 2px solid #4CAF50; 
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        background-color: #f9f9f9;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
    }

    .bdt-info p {
        margin: 5px 0;
        font-size: 16px;
    }

    .bdt-info p strong {
        font-weight: bold;
    }
</style>
{{-- <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: #333;
        /* Cor de fundo padrão para outros botões */
    }
</style> --}}

@include('components.head')

<div class="container">
    <h2 class="mt-2">Finalizar BDT</h2>
    <div class="bdt-info border border-solid p-3 mb-3">
    <div><span>Carro: </span><strong> {{ $bdt->car_modelo }}        </strong></div>
    <div><span>Destino: </span><strong>{{ $bdt->bdt_destino }}      </strong></div>
    <div><span>KM de Saída: </span><strong>{{ $bdt->bdt_km_saida }}</strong></div>
    {{-- <p><strong>Avaria: {{ $bdt->bdt_avaria_saida }} </strong></p>
    @if ($bdt->bdt_descricao_saida)
        <p>Descrição da Avaria: {{ $bdt->bdt_descricao_saida }}</p>
    @endif --}}
    <div><span>Data e Hora de Saída: </span><strong>{{ Carbon\Carbon::createFromFormat('Y-m-d',$bdt->bdt_data_saida)->format('d/m/Y') }} às {{ $bdt->bdt_hora_saida }}</strong></div>
    
    @if (session('msg_error') && session('msg_error') != '0')
        <div class="alert alert-danger p-2 text-center">
            {{ session('msg_error') }}
        </div>
    @endif
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <form action="{{ route('bdt.retorno.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="bdt_id" value="{{ $bdt->bdt_id }}">
        
                    
        <div class="form-group">
            <label for="bdt_km_retorno">KM final:</label>
            <input type="number" name="bdt_km_retorno" class="form-control" required>
        </div>

        {{-- <div class="form-group">
            <label for="bdt_avaria_retorno">Avaria:</label>
            <select name="bdt_avaria_retorno" class="form-control" id="opcao" onchange="mostrarCampos()">
                <option value="NÃO">Não</option>
                <option value="SIM">Sim</option>
            </select>
        </div> --}}

        <div id="camposExtras" class="hidden">
            <div class="form-group">
                <label for="bdt_descricao_retorno">Descrição da avaria:</label>
                <textarea name="bdt_descricao_retorno" class="form-control"></textarea>
            </div>

            <div class="form-group">
                {{-- <label for="via_imagem">Imagem da avaria:</label>
                <input type="file" name="via_imagem" class="form-control"> --}}
                <label for="via_imagem" class="btn btn-primary">Imagem da avaria</label>
                <input type="file" name="via_imagem" id="via_imagem" class="form-control-file" style="display:none" onchange="previewFile()">
            </div>
            <div id="fotoCapturada" style="display:none;" class="bdt-info border border-solid">
                <h4>Imagem carregada:</h4>
                <img id="fotoMiniatura" src="" alt="Foto capturada" style="width: 100%; max-width: 320px;">
            </div>
            <hr>
        </div>

        <a href="{{ route('bdt.avaria', ['bdt_id' => $bdt->bdt_id]) }}" class="btn btn-danger mb-5 mt-5 mr-3">Cancelar</a>
        <button type="submit" class="btn btn-success mb-5 mt-5">Finalizar BDT</button>
        
    </form>
</div>

<script>
    function mostrarCampos() {
        var opcao = document.getElementById('opcao');
        var camposExtras = document.getElementById('camposExtras');

        if (opcao.value === 'SIM') {
            camposExtras.classList.remove('hidden');
        } else {
            camposExtras.classList.add('hidden');
        }
    }
</script>
<script>
    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')