@extends('layouts/horizontalLayout')

@section('content')
<div class="container">
    <h2>Find My Event Photos</h2>
    <p>Event: <strong>{{ $event->name }}</strong></p>
    <form action="{{ route('wizard-example.find-photos-by-selfie', $event->id) }}" method="POST" enctype="multipart/form-data" class="mb-4">
        @csrf
        <div class="mb-3">
            <label for="selfie" class="form-label">Upload a Selfie</label>
            <input type="file" class="form-control" id="selfie" name="selfie" accept="image/*" required>
        </div>
        <button type="submit" class="btn btn-primary">Find My Photos</button>
    </form>
    @if($error)
        <div class="alert alert-danger mt-3">
            {{ $error }}
        </div>
    @endif

    @if($photos->count())
        <h3 class="mt-4">Matching Photos ({{ $photos->count() }})</h3>
        <div class="row">
            @foreach($photos as $photo)
                <div class="col-md-3 mb-3">
                    <img src="{{ $photo->url }}" alt="Event Photo" class="img-fluid rounded" />
                </div>
            @endforeach
        </div>
    @elseif(request()->isMethod('post') && !$error)
        <div class="alert alert-warning mt-4">No matching faces found in this event.</div>
    @endif
</div>
@endsection