@extends('layouts.app')

@section('title', 'Fotografie progressi · FranCoach')

@section('content')
@php
    $prefix = $isCoach ? 'coach' : 'athlete';
    $poses = \App\Enums\PhotoAngle::cases();
@endphp

<x-breadcrumbs :items="[['label' => 'Dashboard', 'url' => route($prefix.'.dashboard')], ['label' => 'Fotografie']]" />

<div class="mb-4">
    <h1 class="h3 mb-1">{{ $isCoach ? 'Fotografie di '.$athlete->displayName() : 'Le mie fotografie' }}</h1>
    <p class="text-body-secondary mb-0">Archivio privato per osservare i cambiamenti nel tempo.</p>
</div>

<div class="alert alert-light border d-flex gap-2" role="note">
    <i class="bi bi-shield-lock" aria-hidden="true"></i>
    <div><strong>Archivio privato.</strong> Le immagini sono accessibili esclusivamente all’atleta interessato e a FranCoach e non dispongono di URL pubblici permanenti.</div>
</div>

<section class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white"><h2 class="h5 mb-0">Carica fotografia</h2></div>
    <div class="card-body">
        <form method="POST" action="{{ route($prefix.'.photos.store') }}" enctype="multipart/form-data" class="row g-3">
            @csrf
            <div class="col-12 col-lg-4">
                <label class="form-label" for="progress-photo">Fotografia</label>
                <input class="form-control" id="progress-photo" name="photo" type="file" accept="image/jpeg,image/png,image/webp{{ $heicSupported ? ',image/heic,image/heif' : '' }}" required>
                <div class="form-text">JPG, PNG o WebP, massimo 10 MB.{{ $heicSupported ? ' HEIC supportato.' : '' }}</div>
            </div>
            <div class="col-6 col-lg-2">
                <label class="form-label" for="photo-date">Data</label>
                <input class="form-control" id="photo-date" name="photo_date" type="date" max="{{ today()->toDateString() }}" value="{{ old('photo_date', today()->toDateString()) }}" required>
            </div>
            <div class="col-6 col-lg-2">
                <label class="form-label" for="pose-type">Posa</label>
                <select class="form-select" id="pose-type" name="pose_type" required>
                    @foreach ($poses as $pose)<option value="{{ $pose->value }}" @selected(old('pose_type') === $pose->value)>{{ $pose->label() }}</option>@endforeach
                </select>
            </div>
            <div class="col-6 col-lg-2">
                <label class="form-label" for="photo-weight">Peso (kg)</label>
                <input class="form-control" id="photo-weight" name="weight" type="number" min=".01" max="500" step=".01" value="{{ old('weight') }}">
            </div>
            <div class="col-12 col-lg-6">
                <label class="form-label" for="athlete-photo-notes">Note atleta</label>
                <textarea class="form-control" id="athlete-photo-notes" name="athlete_notes" rows="2" maxlength="2000">{{ old('athlete_notes') }}</textarea>
            </div>
            @if ($isCoach)
                <div class="col-12 col-lg-6">
                    <label class="form-label" for="coach-photo-notes">Note coach</label>
                    <textarea class="form-control" id="coach-photo-notes" name="coach_notes" rows="2" maxlength="2000">{{ old('coach_notes') }}</textarea>
                </div>
            @endif
            <div class="col-12"><button class="btn btn-primary"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i> Carica in archivio privato</button></div>
        </form>
    </div>
</section>

<section class="card border-0 shadow-sm mb-4" aria-labelledby="compare-title">
    <div class="card-header bg-white"><h2 class="h5 mb-0" id="compare-title">Confronto prima e dopo</h2></div>
    <div class="card-body">
        <form method="GET" class="row g-3 mb-4">
            <div class="col-12 col-md-4">
                <label class="form-label" for="compare-pose">Posa</label>
                <select class="form-select" id="compare-pose" name="pose_type">
                    <option value="">Tutte le pose</option>
                    @foreach ($poses as $pose)<option value="{{ $pose->value }}" @selected(request('pose_type') === $pose->value)>{{ $pose->label() }}</option>@endforeach
                </select>
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label" for="compare-first">Prima fotografia</label>
                <select class="form-select" id="compare-first" name="first">
                    <option value="">Prima disponibile</option>
                    @foreach ($comparison['options'] as $option)<option value="{{ $option->id }}" @selected((string) request('first') === (string) $option->id)>{{ $option->photo_date->format('d/m/Y') }} · {{ $option->pose_type->label() }}</option>@endforeach
                </select>
            </div>
            <div class="col-6 col-md-3">
                <label class="form-label" for="compare-second">Seconda fotografia</label>
                <select class="form-select" id="compare-second" name="second">
                    <option value="">Ultima disponibile</option>
                    @foreach ($comparison['options'] as $option)<option value="{{ $option->id }}" @selected((string) request('second') === (string) $option->id)>{{ $option->photo_date->format('d/m/Y') }} · {{ $option->pose_type->label() }}</option>@endforeach
                </select>
            </div>
            <div class="col-12 col-md-2 d-flex align-items-end"><button class="btn btn-dark w-100">Confronta</button></div>
        </form>

        @if ($comparison['first'] && $comparison['second'])
            <div class="photo-comparison" data-photo-comparison>
                <div class="photo-comparison__stage">
                    <img src="{{ route($prefix.'.photos.media', [$comparison['first'], 'processed']) }}" alt="Fotografia prima, {{ $comparison['first']->pose_type->label() }}, {{ $comparison['first']->photo_date->format('d/m/Y') }}">
                    <div class="photo-comparison__after" data-photo-after>
                        <img src="{{ route($prefix.'.photos.media', [$comparison['second'], 'processed']) }}" alt="Fotografia dopo, {{ $comparison['second']->pose_type->label() }}, {{ $comparison['second']->photo_date->format('d/m/Y') }}">
                    </div>
                    <span class="photo-comparison__label photo-comparison__label--before">Prima</span>
                    <span class="photo-comparison__label photo-comparison__label--after">Dopo</span>
                </div>
                <label class="form-label mt-3" for="photo-compare-slider">Sposta il divisore prima/dopo</label>
                <input class="form-range" id="photo-compare-slider" type="range" min="0" max="100" value="50" data-photo-slider>
            </div>
            <div class="row g-3 mt-2">
                @foreach ([$comparison['first'], $comparison['second']] as $index => $item)
                    <div class="col-6">
                        <strong>{{ $index === 0 ? 'Prima' : 'Dopo' }}: {{ $item->photo_date->format('d/m/Y') }}</strong>
                        <div>Peso: {{ $item->weight !== null ? $item->weight.' kg' : '—' }}</div>
                        @if ($item->athlete_notes)<div class="small mt-1">Atleta: {{ $item->athlete_notes }}</div>@endif
                        @if ($item->coach_notes)<div class="small mt-1">Coach: {{ $item->coach_notes }}</div>@endif
                    </div>
                @endforeach
                <div class="col-12"><strong>Variazione peso:</strong> {{ $comparison['weightVariation'] !== null ? ($comparison['weightVariation'] > 0 ? '+' : '').$comparison['weightVariation'].' kg' : 'non disponibile' }}</div>
            </div>
        @else
            <x-empty-state icon="bi-layout-split" title="Confronto non disponibile" message="Servono almeno due fotografie compatibili con il filtro selezionato." />
        @endif
    </div>
</section>

<section aria-labelledby="photo-gallery-title">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <h2 class="h4 mb-0" id="photo-gallery-title">Archivio</h2>
        @if (request('pose_type'))<a class="btn btn-sm btn-link" href="{{ route($prefix.'.photos.index') }}">Mostra tutte</a>@endif
    </div>
    @if ($photos->isEmpty())
        <x-empty-state icon="bi-camera" title="Nessuna fotografia" message="Carica la prima fotografia dei progressi." />
    @else
        <div class="row g-4">
            @foreach ($photos as $photo)
                <div class="col-12 col-sm-6 col-xl-4">
                    <article class="card border-0 shadow-sm h-100">
                        <img src="{{ route($prefix.'.photos.media', [$photo, 'thumbnail']) }}" alt="{{ $photo->pose_type->label() }} del {{ $photo->photo_date->format('d/m/Y') }}" class="card-img-top progress-photo-thumbnail" loading="lazy">
                        <div class="card-body">
                            <span class="badge text-bg-light">{{ $photo->pose_type->label() }}</span>
                            <h3 class="h5 mt-2">{{ $photo->photo_date->format('d/m/Y') }}</h3>
                            <p class="mb-1">Peso: {{ $photo->weight !== null ? $photo->weight.' kg' : '—' }}</p>
                            @if ($photo->athlete_notes)<p class="small mb-1"><strong>Atleta:</strong> {{ $photo->athlete_notes }}</p>@endif
                            @if ($photo->coach_notes)<p class="small mb-1"><strong>Coach:</strong> {{ $photo->coach_notes }}</p>@endif
                            <div class="small text-body-secondary">Caricata da {{ $photo->uploadedBy?->displayName() ?? '—' }}</div>
                        </div>
                        <div class="card-footer d-flex gap-2">
                            <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#photo-notes-{{ $photo->id }}" aria-expanded="false" aria-controls="photo-notes-{{ $photo->id }}">Modifica note</button>
                            <form method="POST" action="{{ route($prefix.'.photos.destroy', $photo) }}" data-confirm-form data-confirm-title="Elimina fotografia" data-confirm-message="La fotografia e tutte le copie elaborate verranno eliminate definitivamente.">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger">Elimina</button>
                            </form>
                        </div>
                        <div class="collapse" id="photo-notes-{{ $photo->id }}">
                            <form method="POST" action="{{ route($prefix.'.photos.update', $photo) }}" class="card-body border-top">
                                @csrf @method('PUT')
                                <label class="form-label" for="athlete-notes-{{ $photo->id }}">Note atleta</label>
                                <textarea class="form-control mb-2" id="athlete-notes-{{ $photo->id }}" name="athlete_notes" rows="2" maxlength="2000">{{ $photo->athlete_notes }}</textarea>
                                @if ($isCoach)
                                    <label class="form-label" for="coach-notes-{{ $photo->id }}">Note coach</label>
                                    <textarea class="form-control mb-2" id="coach-notes-{{ $photo->id }}" name="coach_notes" rows="2" maxlength="2000">{{ $photo->coach_notes }}</textarea>
                                @endif
                                <button class="btn btn-sm btn-primary">Salva note</button>
                            </form>
                        </div>
                    </article>
                </div>
            @endforeach
        </div>
        @if ($photos->hasPages())<div class="mt-4">{{ $photos->links() }}</div>@endif
    @endif
</section>
@endsection