@extends('layouts.app')

@section('content')
@include('layouts.title-header', [
    'title' => 'Subir Nueva Imagen', 
    'breadcrumbs' => [
        ['text' => Auth::user()->isAdmin() ? 'App' : 'Cuenta', 'url' => Auth::user()->isAdmin() ? route('feed.index') : null],
        ['text' => 'Galería de Imágenes de Citas', 'url' => route('cita-imagenes.index')],
        ['text' => 'Subir Imagen']
    ]
])
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4>Subir Nueva Imagen</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('cita-imagenes.store') }}" enctype="multipart/form-data" id="citaImagenCreateForm">
                        @csrf
                        <p class="text-muted small">El texto que verán en el feed es el de <strong>«publicación»</strong> de esa cita (Mis citas en la app), no un título por imagen.</p>
                        <div class="mb-3">
                            <label for="cita_id" class="form-label">Cita asociada</label>
                            <select class="form-select @error('cita_id') is-invalid @enderror" id="cita_id" name="cita_id" required>
                                <option value="">Selecciona una cita completada</option>
                                @foreach($citas as $cita)
                                    <option value="{{ $cita->id }}" 
                                        {{ (old('cita_id') == $cita->id || (isset($citaSeleccionada) && $citaSeleccionada && $citaSeleccionada->id == $cita->id)) ? 'selected' : '' }}>
                                        {{ $cita->servicio }} - {{ $cita->fecha_hora->format('d/m/Y H:i') }} ({{ $cita->getClienteNombreAttribute() }})
                                    </option>
                                @endforeach
                            </select>
                            @error('cita_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="imagen" class="form-label">Imagen</label>
                            <input type="file" class="form-control @error('imagen') is-invalid @enderror" id="imagen" name="imagen" required>
                            @error('imagen')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text" id="autoUploadHint">Al seleccionar una foto, se subirá automáticamente.</div>
                            <div class="small text-muted mt-2" id="autoUploadStatus" style="display:none;"></div>
                        </div>
                        <p class="text-muted small">Las fotos se publican como <strong>públicas</strong> en el feed y en tu perfil.</p>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="es_destacada" name="es_destacada" value="1" {{ old('es_destacada') ? 'checked' : '' }}>
                            <label class="form-check-label" for="es_destacada">Marcar como destacada</label>
                        </div>
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn violet-red--btn tra-black--hover">Subir Imagen</button>
                            <a href="{{ route('cita-imagenes.index') }}" class="btn violet-red--btn tra-black--hover">Cancelar</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('citaImagenCreateForm');
    const input = document.getElementById('imagen');
    const statusEl = document.getElementById('autoUploadStatus');
    if (!form || !input || !statusEl) return;

    let uploading = false;

    function setStatus(text, type) {
        statusEl.style.display = 'block';
        statusEl.className = 'small mt-2 ' + (type === 'error' ? 'text-danger' : 'text-success');
        statusEl.textContent = text;
    }

    input.addEventListener('change', async function () {
        if (uploading) return;
        if (!input.files || !input.files[0]) return;

        const citaId = document.getElementById('cita_id')?.value;
        if (!citaId) {
            setStatus('Selecciona primero una cita asociada.', 'error');
            return;
        }

        uploading = true;
        setStatus('Subiendo imagen…', 'success');

        try {
            const fd = new FormData(form);
            // Asegurar que la imagen seleccionada está incluida
            fd.set('imagen', input.files[0]);

            const resp = await fetch(form.action, {
                method: 'POST',
                body: fd,
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                credentials: 'same-origin'
            });

            const ct = resp.headers.get('content-type') || '';
            const data = ct.includes('application/json') ? await resp.json().catch(() => null) : null;

            if (resp.ok) {
                setStatus((data && (data.message || data.success)) ? (data.message || 'Imagen subida correctamente.') : 'Imagen subida correctamente.', 'success');
                // Si backend devuelve redirect (no JSON), refrescar página para que el usuario vea la galería.
                if (!data) {
                    window.location.href = '{{ route('cita-imagenes.index') }}';
                    return;
                }
            } else {
                let msg = (data && (data.message || data.error)) ? (data.message || data.error) : 'No se pudo subir la imagen.';
                if (data && data.errors) {
                    msg = Object.keys(data.errors).map(k => (data.errors[k] || []).join(' ')).join(' ') || msg;
                }
                setStatus(msg, 'error');
            }
        } catch (e) {
            setStatus('Error de red al subir la imagen.', 'error');
        } finally {
            uploading = false;
        }
    });
});
</script>
@endsection