{% extends 'admin/base.html.twig' %}
{% block admin_title %}{{ photo ? 'Modifier' : 'Ajouter' }} une photo{% endblock %}
{% block admin_title_display %}{{ photo ? 'Modifier' : 'Ajouter' }} une photo{% endblock %}
{% block admin_content %}

<form method="post" enctype="multipart/form-data" class="admin-form">

    {% if not photo %}
    <div class="form-group">
        <label>Photos <span class="required">*</span> (sélection multiple)</label>
        <div class="drop-zone" id="dropZone">
            <input type="file" name="photo_file[]" id="fileInput"
                   accept="image/jpeg,image/png,image/webp" multiple required>
            <div class="drop-icon">📷</div>
            <p>Glissez vos photos ici<br>ou <strong>cliquez pour parcourir</strong></p>
            <span class="muted">JPG, PNG, WEBP · max 10 Mo par fichier</span>
        </div>
        <div id="previewGrid" class="preview-grid"></div>
    </div>
    {% else %}
    <div class="form-group">
        <label>Remplacer la photo (optionnel)</label>
        <input type="file" name="photo_file" accept="image/jpeg,image/png,image/webp">
        <img src="{{ asset('uploads/photos/' ~ photo.filename) }}"
             alt="{{ photo.title }}" class="current-preview">
    </div>
    {% endif %}

    <div class="form-row-2">
        <div class="form-group">
            <label>Titre</label>
            <input type="text" name="title" value="{{ photo ? photo.title : '' }}"
                   placeholder="Titre de la photo">
        </div>
        <div class="form-group">
            <label>Galerie <span class="required">*</span></label>
            <select name="gallery_id" required>
                {% for gallery in galleries %}
                    <option value="{{ gallery.id }}"
                        {{ photo and photo.gallery.id == gallery.id ? 'selected' : '' }}>
                        {{ gallery.name }}
                    </option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label>Description</label>
        <textarea name="description" rows="3" placeholder="Description optionnelle…">{{ photo ? photo.description : '' }}</textarea>
    </div>

    <details class="exif-details">
        <summary>Données EXIF (optionnel)</summary>
        <div class="form-row-4">
            <div class="form-group">
                <label>Appareil photo</label>
                <input type="text" name="camera" value="{{ photo ? photo.camera : '' }}" placeholder="Canon EOS R5">
            </div>
            <div class="form-group">
                <label>Ouverture</label>
                <input type="text" name="aperture" value="{{ photo ? photo.aperture : '' }}" placeholder="f/2.8">
            </div>
            <div class="form-group">
                <label>Vitesse</label>
                <input type="text" name="shutter_speed" value="{{ photo ? photo.shutterSpeed : '' }}" placeholder="1/500s">
            </div>
            <div class="form-group">
                <label>ISO</label>
                <input type="text" name="iso" value="{{ photo ? photo.iso : '' }}" placeholder="400">
            </div>
        </div>
    </details>

    <div class="form-checkboxes">
        <label class="checkbox-label">
            <input type="checkbox" name="visible" value="1"
                   {{ not photo or photo.visible ? 'checked' : '' }}>
            Visible sur le site
        </label>
        <label class="checkbox-label">
            <input type="checkbox" name="featured" value="1"
                   {{ photo and photo.featured ? 'checked' : '' }}>
            Photo à la une
        </label>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn-primary">
            {{ photo ? 'Enregistrer les modifications' : 'Ajouter la photo' }}
        </button>
        <a href="{{ path('app_admin_photos_list') }}" class="btn-secondary">Annuler</a>
    </div>
</form>

<script>
const dz = document.getElementById('dropZone');
const fi = document.getElementById('fileInput');
const pg = document.getElementById('previewGrid');
if (dz && fi) {
    dz.addEventListener('click', () => fi.click());
    dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('dragover'); });
    dz.addEventListener('dragleave', () => dz.classList.remove('dragover'));
    dz.addEventListener('drop', e => {
        e.preventDefault();
        dz.classList.remove('dragover');
        showPreviews(e.dataTransfer.files);
    });
    fi.addEventListener('change', e => showPreviews(e.target.files));
}
function showPreviews(files) {
    if (!pg) return;
    pg.innerHTML = '';
    Array.from(files).forEach(f => {
        const r = new FileReader();
        r.onload = e => {
            const wrap = document.createElement('div');
            wrap.className = 'preview-item';
            const img = document.createElement('img');
            img.src = e.target.result;
            img.className = 'preview-img';
            const name = document.createElement('span');
            name.textContent = f.name;
            wrap.appendChild(img);
            wrap.appendChild(name);
            pg.appendChild(wrap);
        };
        r.readAsDataURL(f);
    });
}
</script>
{% endblock %}