<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Reportar falla</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-light">
    <main class="container py-5" style="max-width: 760px;">
        <div class="card shadow-sm border-0">
            <div class="card-body p-4 p-md-5">
                <h1 class="h3 mb-3">Reportar falla</h1>
                <p class="text-muted mb-4">Describí brevemente el problema que encontraste. El reporte se guarda para su revisión.</p>

                @if(session('bug_success'))
                    <div class="alert alert-success" role="alert">
                        {{ session('bug_success') }}
                    </div>
                @endif

                @if($errors->any())
                    <div class="alert alert-danger" role="alert">
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="/reportar-falla" method="POST" enctype="multipart/form-data" class="row g-3">
                    @csrf
                    <input type="hidden" name="origen" value="{{ old('origen', $origen ?? '') }}">
                    <input type="hidden" name="captura_pantalla" id="captura_pantalla_input">

                    <div class="col-12">
                        <label for="titulo" class="form-label">Título</label>
                        <input type="text" id="titulo" name="titulo" class="form-control" value="{{ old('titulo') }}" maxlength="255" required>
                    </div>

                    <div class="col-12">
                        <label for="descripcion" class="form-label">Descripción</label>
                        <textarea id="descripcion" name="descripcion" class="form-control" rows="6" maxlength="4500" placeholder="Describa paso por paso lo que ocurrió, nos ayudará a resolver el problema." required>{{ old('descripcion') }}</textarea>
                    </div>

                    <div class="col-12" id="captura-preview-container" style="display:none;">
                        <label class="form-label">Captura de pantalla adjunta automáticamente</label>
                        <div class="border rounded p-2 bg-white d-flex align-items-start gap-3">
                            <img id="captura-preview" src="" alt="Captura de pantalla" class="img-fluid rounded" style="max-height: 180px; object-fit: contain; border: 1px solid #dee2e6;">
                            <button type="button" id="captura-quitar" class="btn btn-sm btn-outline-secondary">Quitar captura</button>
                        </div>
                    </div>

                    <div class="col-12">
                        <label for="foto" class="form-label">Foto adicional <span class="text-muted">(opcional)</span></label>
                        <input type="file" id="foto" name="foto" class="form-control @error('foto') is-invalid @enderror" accept="image/jpeg,image/png,image/webp">
                        @error('foto')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">Podés adjuntar una captura o foto adicional del problema.</div>
                    </div>

                    @if(($origen ?? '') !== '')
                        <div class="col-12">
                            <label class="form-label">Página desde donde se reportó</label>
                            <input type="text" class="form-control" value="{{ $origen }}" readonly>
                        </div>
                    @endif

                    <div class="col-12 d-flex justify-content-between gap-2 flex-wrap">
                        <a href="{{ ($origen ?? '') !== '' ? $origen : '/' }}" class="btn btn-outline-secondary">Volver</a>
                        <button type="submit" class="btn btn-danger">Enviar reporte</button>
                    </div>
                </form>
            </div>
        </div>
    </main>
    <script>
        (function () {
            const captura = sessionStorage.getItem('bug_captura');
            if (!captura) return;

            const input = document.getElementById('captura_pantalla_input');
            const preview = document.getElementById('captura-preview');
            const container = document.getElementById('captura-preview-container');
            const quitar = document.getElementById('captura-quitar');

            if (input) input.value = captura;
            if (preview) preview.src = captura;
            if (container) container.style.display = '';

            if (quitar) {
                quitar.addEventListener('click', function () {
                    sessionStorage.removeItem('bug_captura');
                    if (input) input.value = '';
                    if (container) container.style.display = 'none';
                });
            }

            // Limpiar sessionStorage al enviar el formulario.
            const form = document.querySelector('form[action="/reportar-falla"]');
            if (form) {
                form.addEventListener('submit', function () {
                    sessionStorage.removeItem('bug_captura');
                });
            }
        })();
    </script>
</body>
</html>