@extends('layouts.admin')

@section('title', $isEdit ? 'Modifier le niveau' : 'Nouveau niveau de fidélité')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">{{ $isEdit ? 'Modifier le niveau' : 'Nouveau niveau de fidélité' }}</h1>
        <a href="{{ route('admin.loyalty.levels') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i> Retour
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form action="{{ $isEdit ? route('admin.loyalty.levels.update', $level->id) : route('admin.loyalty.levels.store') }}" 
                  method="POST">
                @csrf
                @if($isEdit)
                    @method('PUT')
                @endif

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="name" class="form-label">Nom du niveau <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" 
                                   value="{{ old('name', $level->name ?? '') }}" 
                                   placeholder="Ex: Bronze, Argent, Or..." required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="min_points" class="form-label">Points requis <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('min_points') is-invalid @enderror" 
                                   id="min_points" name="min_points" min="0"
                                   value="{{ old('min_points', $level->min_points ?? 0) }}" required>
                            @error('min_points')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Nombre minimum de points pour atteindre ce niveau</div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="discount_percent" class="form-label">Réduction (%) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control @error('discount_percent') is-invalid @enderror" 
                                       id="discount_percent" name="discount_percent" min="0" max="100" step="0.5"
                                       value="{{ old('discount_percent', $level->discount_percent ?? 0) }}" required>
                                <span class="input-group-text">%</span>
                            </div>
                            @error('discount_percent')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="icon" class="form-label">Icône (emoji)</label>
                            <input type="text" class="form-control @error('icon') is-invalid @enderror" 
                                   id="icon" name="icon" maxlength="10"
                                   value="{{ old('icon', $level->icon ?? '⭐') }}" 
                                   placeholder="⭐">
                            @error('icon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Emoji ou symbole (ex: ⭐ 🥉 🥈 🥇 🏆 💎)</div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="color" class="form-label">Couleur</label>
                            <div class="input-group">
                                <input type="color" class="form-control form-control-color" 
                                       id="color_picker" 
                                       value="{{ old('color', $level->color ?? '#9CA3AF') }}"
                                       onchange="document.getElementById('color').value = this.value">
                                <input type="text" class="form-control @error('color') is-invalid @enderror" 
                                       id="color" name="color" maxlength="20"
                                       value="{{ old('color', $level->color ?? '#9CA3AF') }}" 
                                       placeholder="#FFD700"
                                       onchange="document.getElementById('color_picker').value = this.value">
                            </div>
                            @error('color')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="sort_order" class="form-label">Ordre d'affichage</label>
                            <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                                   id="sort_order" name="sort_order" min="0"
                                   value="{{ old('sort_order', $level->sort_order ?? 0) }}">
                            @error('sort_order')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="mb-3">
                            <label class="form-label">Statut</label>
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" id="is_active" name="is_active" 
                                       {{ old('is_active', $level->is_active ?? true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">Niveau actif</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="benefits" class="form-label">Avantages (optionnel)</label>
                    <textarea class="form-control @error('benefits') is-invalid @enderror" 
                              id="benefits" name="benefits" rows="3"
                              placeholder="Un avantage par ligne...">{{ old('benefits', is_array($level->benefits ?? null) ? implode("\n", $level->benefits) : ($level->benefits ?? '')) }}</textarea>
                    @error('benefits')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-text">Listez les avantages du niveau, un par ligne</div>
                </div>

                <div class="card bg-light mb-3">
                    <div class="card-body">
                        <h6 class="mb-3">Aperçu</h6>
                        <div class="d-flex align-items-center gap-3 p-3 bg-white rounded border">
                            <span id="preview_icon" class="fs-3">{{ $level->icon ?? '⭐' }}</span>
                            <div class="flex-fill">
                                <div id="preview_name" class="fw-bold" style="color: {{ $level->color ?? '#9CA3AF' }}">
                                    {{ $level->name ?? 'Nom du niveau' }}
                                </div>
                                <div class="text-muted small">
                                    <span id="preview_points">{{ number_format($level->min_points ?? 0) }}</span>+ points
                                </div>
                            </div>
                            <span class="badge bg-success" id="preview_discount">{{ $level->discount_percent ?? 0 }}%</span>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg me-1"></i>
                        {{ $isEdit ? 'Mettre à jour' : 'Créer le niveau' }}
                    </button>
                    <a href="{{ route('admin.loyalty.levels') }}" class="btn btn-outline-secondary">Annuler</a>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const nameInput = document.getElementById('name');
    const pointsInput = document.getElementById('min_points');
    const discountInput = document.getElementById('discount_percent');
    const iconInput = document.getElementById('icon');
    const colorInput = document.getElementById('color');
    
    const previewName = document.getElementById('preview_name');
    const previewPoints = document.getElementById('preview_points');
    const previewDiscount = document.getElementById('preview_discount');
    const previewIcon = document.getElementById('preview_icon');
    
    function updatePreview() {
        previewName.textContent = nameInput.value || 'Nom du niveau';
        previewName.style.color = colorInput.value;
        previewPoints.textContent = parseInt(pointsInput.value || 0).toLocaleString();
        previewDiscount.textContent = discountInput.value + '%';
        previewIcon.textContent = iconInput.value || '⭐';
    }
    
    nameInput.addEventListener('input', updatePreview);
    pointsInput.addEventListener('input', updatePreview);
    discountInput.addEventListener('input', updatePreview);
    iconInput.addEventListener('input', updatePreview);
    colorInput.addEventListener('input', updatePreview);
});
</script>
@endpush
@endsection
