@extends('layouts.dashboardnew')

@section('content')

<div class="col-md-12">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-info text-white py-3">
            <h5 class="card-title mb-0 d-flex align-items-center">
                <i class="bi bi-bank me-2"></i> Confirmación de Transferencia
            </h5>
        </div>
        
        <div class="card-body p-4">
            
            <form action="{{route('carrito-transferencia-save')}}" method="POST" enctype="multipart/form-data">
                {{ csrf_field() }}
            
            <input type="hidden" name="id" value="{{ $pagocarrito->id }}">
            
            <!-- Datos Bancarios -->
            <div class="alert alert-light border mb-4">
                <div class="d-flex align-items-start">
                    <i class="bi bi-info-circle-fill text-primary me-3 fs-4"></i>
                    <div>
                        <p class="text-muted small mb-1 text-uppercase fw-bold">Realiza tu pago a:</p>
                        <div class="text-dark">
                            @if($bancaria != null)
                                {!! $bancaria->contenido !!}
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            
            <div class="upload-section text-center">
                <div id="preview-container" class="mb-3 d-none">
                    <div class="position-relative d-inline-block">
                        <img id="img-preview" src="#" alt="Vista previa" class="img-thumbnail shadow-sm" style="max-height: 250px;">
                        <button type="button" id="remove-preview" class="btn btn-danger btn-sm position-absolute top-0 end-0 m-2 shadow">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                    <div id="file-name-display" class="mt-2 small text-muted fw-bold"></div>
                </div>

                <div id="input-wrapper">
                    <label for="archivo" class="form-label fw-bold d-block text-start">Subir comprobante</label>
                    <div class="input-group mb-2">
                        <span class="input-group-text bg-white"><i class="bi bi-file-earmark-arrow-up"></i></span>
                        <input class="form-control" type="file" name="archivo" id="archivo" accept="image/*">
                    </div>
                    <p class="text-muted small text-start">Formatos: JPG, PNG o PDF (Máx 10MB)</p>
                </div>

                
                <div id="action-button-container" class="d-none mt-4 animate__animated animate__fadeIn">
                    <button type="submit" class="btn btn-info w-25 shadow-sm fw-bold">
                        <i class="bi bi-check-circle me-2"></i> CONFIRMAR Y ENVIAR PAGO
                    </button>
                </div>
            </div>
            
            </form>
            
        </div>
    </div>
</div>

@endsection

@push('script')
<script type="text/javascript">
document.getElementById('archivo').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const previewContainer = document.getElementById('preview-container');
    const previewImage = document.getElementById('img-preview');
    const buttonContainer = document.getElementById('action-button-container');
    const fileNameDisplay = document.getElementById('file-name-display');
    const inputWrapper = document.getElementById('input-wrapper');

    if (file) {
        
        buttonContainer.classList.remove('d-none');
        
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                previewContainer.classList.remove('d-none');
                fileNameDisplay.textContent = ""; 
            }
            reader.readAsDataURL(file);
        } else {
            // Es un PDF u otro formato permitido
            previewContainer.classList.remove('d-none');
            previewImage.src = "https://flaticon.com"; 
            fileNameDisplay.textContent = file.name;
        }
        // Opcional: ocultar el input original para limpiar la vista
        inputWrapper.classList.add('d-none');
    }
});

document.getElementById('remove-preview').addEventListener('click', function() {
    const input = document.getElementById('archivo');
    const previewContainer = document.getElementById('preview-container');
    const buttonContainer = document.getElementById('action-button-container');
    const inputWrapper = document.getElementById('input-wrapper');
    
    input.value = ""; 
    previewContainer.classList.add('d-none');
    buttonContainer.classList.add('d-none');
    inputWrapper.classList.remove('d-none');
});

</script>
@endpush