@extends('layouts.admin')

@section('title', 'Edit Achievement')

@section('content')
<div class="dashboard-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <nav style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px;">
            <a href="{{ route('admin.achievements.index') }}" style="color:var(--text-muted); text-decoration:none;">Achievements</a>
            <span style="margin:0 6px;">/</span>
            <span style="color:var(--primary); font-weight:600;">Edit</span>
        </nav>
        <h1 style="font-family:'Oswald',sans-serif; font-size:2rem; color:var(--primary); margin:0;">Edit Achievement</h1>
    </div>
    <a href="{{ route('admin.achievements.index') }}" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

<form method="POST" action="{{ route('admin.achievements.update', $achievement->id) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <div style="display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start;">

        <!-- Left: Main Details -->
        <div class="admin-card" style="margin-bottom:0;">
            <div class="admin-card-header">
                <span class="admin-card-title"><i class="fas fa-trophy" style="color:#d4a017;margin-right:8px;"></i> Achievement Details</span>
            </div>
            <div class="admin-card-body">
                <div style="display:grid; grid-template-columns:1fr 1fr; gap:20px;">
                    <div class="form-group" style="margin-bottom:0;">
                        <label class="form-label">Title <span style="color:var(--secondary);">*</span></label>
                        <input type="text" name="title" class="form-control" value="{{ old('title', $achievement->title) }}" required>
                    </div>
                    <div class="form-group" style="margin-bottom:0;">
                        <label class="form-label">Player Name <span style="color:var(--secondary);">*</span></label>
                        <input type="text" name="player_name" class="form-control" value="{{ old('player_name', $achievement->player_name) }}" required>
                    </div>
                    <div class="form-group" style="margin-bottom:0;">
                        <label class="form-label">Achievement Date <span style="color:var(--secondary);">*</span></label>
                        <input type="date" name="achievement_date" class="form-control" value="{{ old('achievement_date', $achievement->achievement_date?->format('Y-m-d')) }}" required>
                    </div>
                    <div class="form-group" style="margin-bottom:0;">
                        <label class="form-label">Type <span style="color:var(--secondary);">*</span></label>
                        <select name="type" class="form-control" required>
                            <option value="national" {{ old('type', $achievement->type) == 'national' ? 'selected' : '' }}>National</option>
                            <option value="international" {{ old('type', $achievement->type) == 'international' ? 'selected' : '' }}>International</option>
                        </select>
                    </div>
                    <div class="form-group" style="grid-column:1 / -1; margin-bottom:0;">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control" rows="5">{{ old('description', $achievement->description) }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right: Medal & Photo -->
        <div style="display:flex; flex-direction:column; gap:24px;">

            <div class="admin-card" style="margin-bottom:0;">
                <div class="admin-card-header">
                    <span class="admin-card-title"><i class="fas fa-medal" style="color:#d4a017;margin-right:8px;"></i> Medal & Photo</span>
                </div>
                <div class="admin-card-body">
                    <div class="form-group">
                        <label class="form-label">Medal Type</label>
                        <select name="medal_type" class="form-control">
                            <option value="none" {{ old('medal_type', $achievement->medal_type) == 'none' ? 'selected' : '' }}>None</option>
                            <option value="gold" {{ old('medal_type', $achievement->medal_type) == 'gold' ? 'selected' : '' }}>🥇 Gold</option>
                            <option value="silver" {{ old('medal_type', $achievement->medal_type) == 'silver' ? 'selected' : '' }}>🥈 Silver</option>
                            <option value="bronze" {{ old('medal_type', $achievement->medal_type) == 'bronze' ? 'selected' : '' }}>🥉 Bronze</option>
                        </select>
                    </div>

                    @if($achievement->photo)
                    <div class="form-group">
                        <label class="form-label">Current Photo</label>
                        <img src="{{ asset($achievement->photo) }}" alt="{{ $achievement->title }}"
                             style="width:100%; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--border-color);">
                    </div>
                    @endif

                    <div class="form-group" style="margin-bottom:0;">
                        <label class="form-label">{{ $achievement->photo ? 'Replace Photo' : 'Upload Photo' }} (optional)</label>
                        <input type="file" name="photo" class="form-control" accept="image/*">
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="admin-card" style="margin-bottom:0;">
                <div class="admin-card-body">
                    <button type="submit" class="btn btn-primary" style="width:100%; justify-content:center; padding:12px; margin-bottom:12px;">
                        <i class="fas fa-save"></i> Save Changes
                    </button>
                    <a href="{{ route('admin.achievements.index') }}" class="btn btn-outline" style="width:100%; justify-content:center; padding:12px;">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection
