@extends('layouts.admin')

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

@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.referees.index') }}" style="color:var(--text-muted); text-decoration:none;">Referees</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 Referee</h1>
    </div>
    <a href="{{ route('admin.referees.index') }}" class="btn btn-outline">
        <i class="fas fa-arrow-left"></i> Back
    </a>
</div>

<form method="POST" action="{{ route('admin.referees.update', $referee->id) }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <div class="admin-card">
        <div class="admin-card-header">
            <span class="admin-card-title"><i class="fas fa-gavel" style="color:var(--primary);margin-right:8px;"></i> Referee 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">Full Name <span style="color:var(--secondary);">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name', $referee->name) }}" required>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $referee->email) }}">
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Certification Level <span style="color:var(--secondary);">*</span></label>
                    <select name="certification_level" class="form-control" required>
                        @foreach($levels as $lvl)
                            <option value="{{ $lvl }}" {{ old('certification_level', $referee->certification_level) == $lvl ? 'selected' : '' }}>{{ $lvl }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Experience (years) <span style="color:var(--secondary);">*</span></label>
                    <input type="number" name="experience_years" class="form-control" value="{{ old('experience_years', $referee->experience_years) }}" min="0" required>
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Contact Phone</label>
                    <input type="text" name="contact_phone" class="form-control" value="{{ old('contact_phone', $referee->contact_phone) }}">
                </div>
                <div class="form-group" style="margin-bottom:0;">
                    <label class="form-label">Photo (optional)</label>
                    @if($referee->photo)
                    <div style="margin-bottom:8px;">
                        <img src="{{ asset($referee->photo) }}" alt="{{ $referee->name }}"
                             style="width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--border-color);">
                    </div>
                    @endif
                    <input type="file" name="photo" class="form-control" accept="image/*">
                </div>
                <div class="form-group" style="grid-column:1 / -1; margin-bottom:0;">
                    <label class="form-label">Bio</label>
                    <textarea name="bio" class="form-control" rows="4">{{ old('bio', $referee->bio) }}</textarea>
                </div>
            </div>

            <div style="display:flex; justify-content:flex-end; gap:8px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border-color);">
                <a href="{{ route('admin.referees.index') }}" class="btn btn-outline">Cancel</a>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </div>
    </div>
</form>
@endsection
