@extends('admin.layouts.app')

@section('title', $project->exists ? 'Modifier une réalisation' : 'Nouvelle réalisation')

@section('content')
    <div class="btn-row" style="justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 class="page-title">{{ $project->exists ? $project->title : 'Nouvelle réalisation' }}</h1>
            @if ($project->exists)
                <p class="lead">Adresse : <span class="ro">/gallery/{{ $project->slug }}</span> — <a href="/gallery/{{ $project->slug }}" target="_blank" rel="noopener">aperçu</a></p>
            @else
                <p class="lead">Créez d'abord la fiche — vous ajouterez les photos juste après.</p>
            @endif
        </div>
        <a class="btn" href="{{ route('admin.projects.index') }}">← Toutes les réalisations</a>
    </div>

    <form class="card" method="POST"
          action="{{ $project->exists ? route('admin.projects.update', $project) : route('admin.projects.store') }}"
          enctype="multipart/form-data">
        @csrf
        @if ($project->exists)
            @method('PUT')
        @endif

        <div class="field {{ $errors->has('title') ? 'has-error' : '' }}">
            <label for="p_title">Titre <span style="color:#c0392b">*</span></label>
            <input type="text" id="p_title" name="title" value="{{ old('title', $project->title) }}" required>
            @error('title')<p class="field-error">{{ $message }}</p>@enderror
            <p class="help">Ex. « Hôtel particulier — Paris VIIᵉ ». L'adresse de la page se crée automatiquement.</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px;">
            <div class="field {{ $errors->has('category') ? 'has-error' : '' }}">
                <label for="p_category">Catégorie</label>
                @php($currentCategory = old('category', $project->category))
                <select id="p_category" name="category">
                    <option value="" @selected(! $currentCategory)>— Aucune —</option>
                    @foreach (\App\Models\Project::CATEGORIES as $category)
                        <option value="{{ $category }}" @selected($currentCategory === $category)>{{ $category }}</option>
                    @endforeach
                    @if ($currentCategory && ! in_array($currentCategory, \App\Models\Project::CATEGORIES, true))
                        <option value="{{ $currentCategory }}" selected>{{ $currentCategory }} (ancienne)</option>
                    @endif
                </select>
                @error('category')<p class="field-error">{{ $message }}</p>@enderror
                <p class="help">Sert de filtre sur la page Gallery (bouton « All » + catégories).</p>
            </div>
            <div class="field {{ $errors->has('location') ? 'has-error' : '' }}">
                <label for="p_location">Lieu</label>
                <input type="text" id="p_location" name="location" value="{{ old('location', $project->location) }}" placeholder="Paris, Monaco…">
                @error('location')<p class="field-error">{{ $message }}</p>@enderror
            </div>
            <div class="field {{ $errors->has('year') ? 'has-error' : '' }}">
                <label for="p_year">Année</label>
                <input type="text" id="p_year" name="year" inputmode="numeric" value="{{ old('year', $project->year) }}" placeholder="2026">
                @error('year')<p class="field-error">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="field {{ $errors->has('excerpt') ? 'has-error' : '' }}">
            <label for="p_excerpt">Texte d'introduction</label>
            <textarea id="p_excerpt" name="excerpt" placeholder="Quelques phrases qui racontent le projet…">{{ old('excerpt', $project->excerpt) }}</textarea>
            @error('excerpt')<p class="field-error">{{ $message }}</p>@enderror
            <p class="help">Affiché en tête de l'article. Facultatif mais recommandé.</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px;">
            <div class="field {{ $errors->has('tile_size') ? 'has-error' : '' }}">
                <label for="p_tile">Taille de la vignette (mosaïque)</label>
                <select id="p_tile" name="tile_size">
                    @foreach (\App\Models\Project::TILE_SIZES as $value => $label)
                        <option value="{{ $value }}" @selected(old('tile_size', $project->tile_size) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('tile_size')<p class="field-error">{{ $message }}</p>@enderror
                <p class="help">La place que prend ce projet dans la grille « Réalisations ».</p>
            </div>
            <div class="field {{ $errors->has('status') ? 'has-error' : '' }}">
                <label for="p_status">Statut</label>
                <select id="p_status" name="status">
                    <option value="draft" @selected(old('status', $project->status) === 'draft')>Brouillon — visible seulement par vous</option>
                    <option value="published" @selected(old('status', $project->status) === 'published')>Publié — visible sur le site</option>
                </select>
                @error('status')<p class="field-error">{{ $message }}</p>@enderror
            </div>
        </div>

        <h2 style="margin-top: 26px;">Présentation de l'article</h2>
        <p class="hint">Composez la page du projet — chaque réglage est sans risque, essayez et regardez l'aperçu.</p>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px;">
            <div class="field {{ $errors->has('header_style') ? 'has-error' : '' }}">
                <label for="p_header">En-tête de la page</label>
                <select id="p_header" name="header_style">
                    @foreach (\App\Models\Project::HEADER_STYLES as $value => $label)
                        <option value="{{ $value }}" @selected(old('header_style', $project->header_style ?? 'immersive') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('header_style')<p class="field-error">{{ $message }}</p>@enderror
            </div>
            <div class="field {{ $errors->has('photo_layout') ? 'has-error' : '' }}">
                <label for="p_layout">Mise en page des photos</label>
                <select id="p_layout" name="photo_layout">
                    @foreach (\App\Models\Project::PHOTO_LAYOUTS as $value => $label)
                        <option value="{{ $value }}" @selected(old('photo_layout', $project->photo_layout ?? 'mosaic') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('photo_layout')<p class="field-error">{{ $message }}</p>@enderror
            </div>
            <div class="field {{ $errors->has('cover_focus') ? 'has-error' : '' }}">
                <label for="p_focus">Cadrage de la couverture</label>
                <select id="p_focus" name="cover_focus">
                    @foreach (\App\Models\Project::COVER_FOCUS as $value => $label)
                        <option value="{{ $value }}" @selected(old('cover_focus', $project->cover_focus ?? 'center') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                @error('cover_focus')<p class="field-error">{{ $message }}</p>@enderror
                <p class="help">La partie de la photo qui reste visible quand elle est recadrée — appliqué à la vignette de la galerie ET à l'en-tête de l'article.</p>
            </div>
        </div>

        <div class="field {{ $errors->has('body') ? 'has-error' : '' }}">
            <label for="p_body">Récit du projet</label>
            <textarea id="p_body" name="body" style="min-height: 140px;" placeholder="Racontez le projet : le contexte, les matières, le travail de l'atelier… Sautez une ligne entre les paragraphes.">{{ old('body', $project->body) }}</textarea>
            @error('body')<p class="field-error">{{ $message }}</p>@enderror
            <p class="help">Affiché après l'introduction. Une ligne vide = un nouveau paragraphe. Facultatif.</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px;">
            <div class="field {{ $errors->has('quote') ? 'has-error' : '' }}">
                <label for="p_quote">Citation mise en avant</label>
                <input type="text" id="p_quote" name="quote" value="{{ old('quote', $project->quote) }}" placeholder="Une phrase marquante du projet ou du client…">
                @error('quote')<p class="field-error">{{ $message }}</p>@enderror
                <p class="help">Affichée en grand entre le récit et les photos (les guillemets sont ajoutés automatiquement). Facultatif.</p>
            </div>
            <div class="field {{ $errors->has('quote_author') ? 'has-error' : '' }}">
                <label for="p_quote_author">Auteur de la citation</label>
                <input type="text" id="p_quote_author" name="quote_author" value="{{ old('quote_author', $project->quote_author) }}" placeholder="Le client, l'architecte…">
                @error('quote_author')<p class="field-error">{{ $message }}</p>@enderror
            </div>
        </div>

        <h2 style="margin-top: 26px;">Fiche projet</h2>
        <p class="hint">Jusqu'à {{ \App\Models\Project::MAX_DETAILS }} informations clés affichées en colonnes élégantes (ex. Surface → 460 m², Matières → Soie &amp; velours, Durée → 6 mois). Laissez vide pour ne rien afficher.</p>

        @php($detailRows = old('details', $project->details ?? []))
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 16px;">
            @for ($i = 0; $i < \App\Models\Project::MAX_DETAILS; $i++)
                <div class="field" style="display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; align-items: start;">
                    <input type="text" name="details[{{ $i }}][label]" value="{{ $detailRows[$i]['label'] ?? '' }}" placeholder="Intitulé">
                    <input type="text" name="details[{{ $i }}][value]" value="{{ $detailRows[$i]['value'] ?? '' }}" placeholder="Valeur">
                    @error('details.' . $i . '.label')<p class="field-error" style="grid-column: 1 / -1;">{{ $message }}</p>@enderror
                    @error('details.' . $i . '.value')<p class="field-error" style="grid-column: 1 / -1;">{{ $message }}</p>@enderror
                </div>
            @endfor
        </div>

        <h2 style="margin-top: 26px;">Photo de couverture</h2>
        <div class="field {{ $errors->has('cover_upload') ? 'has-error' : '' }}">
            <label>Photo de couverture {{ $project->exists ? '' : '(vous pourrez aussi l\'ajouter après)' }}</label>
            @if ($project->cover)
                <img class="img-preview" src="{{ media_url($project->cover) }}" alt="Couverture actuelle">
                <p class="help">Pour remplacer cette photo, choisissez un fichier ci-dessous puis enregistrez.</p>
            @endif
            <input type="file" name="cover_upload" accept="image/jpeg,image/png,image/webp"
                   data-max-kb="{{ media_max_upload_kb() }}" data-max-label="{{ media_max_upload_label() }}" onchange="ffCheckUploadSize(this)">
            <p class="field-error ff-size-warn" style="display:none;"></p>
            @error('cover_upload')<p class="field-error">{{ $message }}</p>@enderror
            <p class="help">Cette photo sert de <strong>vignette dans la galerie</strong> et d'en-tête de l'article (sauf en-tête « Bandeau », qui n'affiche pas de photo — la vignette la garde quand même). Formats : JPG, PNG, WEBP · Taille max : {{ media_max_upload_label() }}. Pour un bel en-tête, préférez une photo large (à partir de 1200 px), mais toutes les tailles sont acceptées.</p>
        </div>

        <div class="form-actions">
            <button class="btn btn-gold" type="submit">{{ $project->exists ? 'Enregistrer' : 'Créer la réalisation' }}</button>
            <a class="btn" href="{{ route('admin.projects.index') }}">Annuler</a>
        </div>
    </form>

    @if ($project->exists)
        <div class="card">
            <h2>Photos de l'article</h2>
            <p class="hint">Ajoutez les photos du projet — vous pouvez en envoyer <strong>plusieurs à la fois</strong>. Chaque photo peut être « Standard » (deux par ligne) ou « Grande » (pleine largeur), avec une légende facultative. La taille par photo s'applique à la mise en page <strong>Mosaïque</strong> (en « Colonnes » et « Pleine largeur », toutes les photos suivent la mise en page choisie).</p>

            <form method="POST" action="{{ route('admin.projects.photos.store', $project) }}" enctype="multipart/form-data" class="btn-row" style="margin-bottom: 18px;">
                @csrf
                <input type="file" name="photos[]" multiple accept="image/jpeg,image/png,image/webp"
                       data-max-kb="{{ media_max_upload_kb() }}" data-max-label="{{ media_max_upload_label() }}" onchange="ffCheckUploadSize(this)">
                <button class="btn btn-gold btn-sm" type="submit">Ajouter les photos</button>
            </form>
            <p class="field-error ff-size-warn" style="display:none;"></p>
            @error('photos')<p class="field-error">{{ $message }}</p>@enderror
            @error('photos.*')<p class="field-error">{{ $message }}</p>@enderror

            @php($manualOrder = \App\Support\GallerySettings::isManualPhotoOrder())
            <p class="hint" style="margin: -2px 0 14px;">
                Ordre des photos : <strong>{{ \App\Support\GallerySettings::photoOrderLabel() }}</strong>.
                @if ($manualOrder)
                    Utilisez les flèches ▲▼ pour les réordonner.
                @else
                    L'ordre est automatique — <a href="{{ route('admin.projects.settings') }}">passez en organisation manuelle</a> pour les réordonner vous-même.
                @endif
            </p>

            @forelse ($project->orderedPhotos() as $photo)
                <div class="block-row">
                    @if ($manualOrder)
                    <div class="block-order">
                        <form class="inline-form" method="POST" action="{{ route('admin.projects.photos.move', [$project, $photo]) }}">
                            @csrf<input type="hidden" name="dir" value="up">
                            <button class="btn btn-sm" type="submit" @disabled($loop->first)>▲</button>
                        </form>
                        <form class="inline-form" method="POST" action="{{ route('admin.projects.photos.move', [$project, $photo]) }}">
                            @csrf<input type="hidden" name="dir" value="down">
                            <button class="btn btn-sm" type="submit" @disabled($loop->last)>▼</button>
                        </form>
                    </div>
                    @endif
                    <img src="{{ media_url($photo->image) }}" alt="" style="width: 110px; height: 74px; object-fit: cover; border-radius: 8px; border: 1px solid var(--ff-line); flex-shrink: 0;">
                    <form class="block-main btn-row" method="POST" action="{{ route('admin.projects.photos.update', [$project, $photo]) }}" style="gap: 8px;">
                        @csrf
                        @method('PUT')
                        <input type="text" name="caption" value="{{ $photo->caption }}" placeholder="Légende (facultative)"
                               style="flex: 1 1 200px; min-width: 0; padding: .45rem .6rem; border: 1px solid rgba(35,33,30,.2); border-radius: 8px; font: inherit; font-size: .85rem;">
                        <select name="size" style="padding: .45rem .5rem; border: 1px solid rgba(35,33,30,.2); border-radius: 8px; font: inherit; font-size: .82rem;">
                            @foreach (\App\Models\ProjectPhoto::SIZES as $value => $label)
                                <option value="{{ $value }}" @selected($photo->size === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                        <button class="btn btn-sm" type="submit">Enregistrer</button>
                    </form>
                    <form class="inline-form" method="POST" action="{{ route('admin.projects.photos.destroy', [$project, $photo]) }}"
                          data-confirm="Êtes-vous sûr de bien vouloir retirer cette photo de la réalisation ?"
                          data-confirm-variant="danger" data-confirm-yes="Oui, retirer">
                        @csrf
                        @method('DELETE')
                        <button class="btn btn-sm btn-danger" type="submit">Retirer</button>
                    </form>
                </div>
            @empty
                <div class="empty">Aucune photo pour l'instant — ajoutez-en ci-dessus.</div>
            @endforelse
        </div>
    @endif
@endsection