@extends('layouts.app')

@section('title', 'Достижения')

@php
    $conditionLabels = [
        'first_lesson' => 'Первый урок',
        'attendance_streak' => 'Посещения подряд (дней)',
        'dz_streak' => 'ДЗ подряд (дней)',
        'first_kr' => 'Первый срез',
        'perfect_kr' => 'Балл за срез не ниже',
        'active_days' => 'Дней в системе',
        'total_attendance' => 'Всего посещений',
        'level_reached' => 'Достигнут уровень',
    ];
@endphp

@section('content')
    <div class="container mt-4">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3>Достижения</h3>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
                + Добавить достижение
            </button>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">

                @if ($items->isNotEmpty())
                    <div class="table-responsive">
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Иконка</th>
                                    <th>Название</th>
                                    <th>Условие</th>
                                    <th>Награда</th>
                                    <th>Статус</th>
                                    <th>Получено</th>
                                    <th width="180">Действия</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ($items as $i)
                                <tr>
                                    <td>{{ $i->id }}</td>
                                    <td style="font-size:20px;">{{ $i->icon }}</td>
                                    <td>{{ $i->name }}</td>
                                    <td>{{ $conditionLabels[$i->condition_type] ?? $i->condition_type }}: {{ (int) $i->condition_value }}</td>
                                    <td>{{ (int) $i->coin_reward }} &#129689;</td>
                                    <td>
                                        @if ($i->active)
                                            <span class="badge bg-success">Активно</span>
                                        @else
                                            <span class="badge bg-secondary">Отключено</span>
                                        @endif
                                    </td>
                                    <td>{{ (int) $i->claim_count }}</td>
                                    <td>
                                        <button
                                            class="btn btn-sm btn-warning editBtn"
                                            data-id="{{ $i->id }}"
                                            data-name="{{ $i->name }}"
                                            data-icon="{{ $i->icon }}"
                                            data-description="{{ $i->description }}"
                                            data-condition-type="{{ $i->condition_type }}"
                                            data-condition-value="{{ (int) $i->condition_value }}"
                                            data-coin-reward="{{ (int) $i->coin_reward }}"
                                            data-active="{{ $i->active ? 1 : 0 }}"
                                        >Редактировать</button>

                                        <button
                                            class="btn btn-sm btn-danger deleteBtn"
                                            data-id="{{ $i->id }}"
                                            data-name="{{ $i->name }}"
                                        >Удалить</button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="text-muted">Достижений пока нет.</p>
                @endif

            </div>
        </div>
    </div>

    <!-- ================== ADD MODAL ================== -->
    <div class="modal fade" id="addModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <form action="/admin/save_achievement.php" method="POST">
    @csrf
    <div class="modal-header">
        <h5 class="modal-title">Добавить достижение</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">

        <input type="hidden" name="id" value="{{ old('id') }}">

        <div class="mb-2">
            <label>Название</label>
            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                   value="{{ old('name') }}" required>
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Иконка (эмодзи)</label>
            <input type="text" name="icon" class="form-control @error('icon') is-invalid @enderror"
                   value="{{ old('icon') }}" maxlength="16" required>
            @error('icon')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Описание</label>
            <textarea name="description" class="form-control @error('description') is-invalid @enderror"
                      maxlength="500" required>{{ old('description') }}</textarea>
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Условие</label>
            <select name="condition_type" class="form-select @error('condition_type') is-invalid @enderror" required>
                @foreach ($conditionLabels as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
            @error('condition_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Значение условия</label>
            <input type="number" name="condition_value" class="form-control @error('condition_value') is-invalid @enderror"
                   value="{{ old('condition_value') }}" min="1" required>
            @error('condition_value')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Награда (монет)</label>
            <input type="number" name="coin_reward" class="form-control @error('coin_reward') is-invalid @enderror"
                   value="{{ old('coin_reward') }}" min="0" required>
            @error('coin_reward')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="form-check">
            <input type="checkbox" name="active" value="1" class="form-check-input" id="add_active" checked>
            <label class="form-check-label" for="add_active">Активно</label>
        </div>

    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Сохранить</button>
    </div>
    </form>
    </div>
    </div>
    </div>

    <!-- ================== EDIT MODAL ================== -->
    <div class="modal fade" id="editModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <form action="/admin/save_achievement.php" method="POST">
    @csrf
    <div class="modal-header">
        <h5 class="modal-title">Редактировать достижение</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
    <div class="modal-body">

        <input type="hidden" name="id" id="edit_id" value="{{ old('id') }}">

        <div class="mb-2">
            <label>Название</label>
            <input type="text" name="name" id="edit_name" class="form-control @error('name') is-invalid @enderror"
                   value="{{ old('name') }}" required>
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Иконка (эмодзи)</label>
            <input type="text" name="icon" id="edit_icon" class="form-control @error('icon') is-invalid @enderror"
                   value="{{ old('icon') }}" maxlength="16" required>
            @error('icon')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Описание</label>
            <textarea name="description" id="edit_description" class="form-control @error('description') is-invalid @enderror"
                      maxlength="500" required>{{ old('description') }}</textarea>
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Условие</label>
            <select name="condition_type" id="edit_condition_type" class="form-select @error('condition_type') is-invalid @enderror" required>
                @foreach ($conditionLabels as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>
            @error('condition_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Значение условия</label>
            <input type="number" name="condition_value" id="edit_condition_value" class="form-control @error('condition_value') is-invalid @enderror"
                   value="{{ old('condition_value') }}" min="1" required>
            @error('condition_value')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Награда (монет)</label>
            <input type="number" name="coin_reward" id="edit_coin_reward" class="form-control @error('coin_reward') is-invalid @enderror"
                   value="{{ old('coin_reward') }}" min="0" required>
            @error('coin_reward')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="form-check">
            <input type="checkbox" name="active" value="1" class="form-check-input" id="edit_active">
            <label class="form-check-label" for="edit_active">Активно</label>
        </div>

    </div>
    <div class="modal-footer">
        <button type="submit" class="btn btn-warning">Сохранить изменения</button>
    </div>
    </form>
    </div>
    </div>
    </div>

    <!-- ================== DELETE MODAL ================== -->
    <div class="modal fade" id="deleteModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <form action="/admin/delete_achievement.php" method="POST">
    @csrf
    <div class="modal-header">
        <h5 class="modal-title text-danger">Удалить достижение</h5>
    </div>
    <div class="modal-body">
        <input type="hidden" name="id" id="delete_id">
        <p>Вы уверены, что хотите удалить достижение <strong id="delete_name"></strong>?</p>
        <p class="text-muted small">Если у учеников уже есть прогресс по этому достижению, удаление будет отклонено — используйте деактивацию вместо этого.</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
        <button type="submit" class="btn btn-danger">Удалить</button>
    </div>
    </form>
    </div>
    </div>
    </div>
@endsection

@push('scripts')
<script>
@if ($errors->any())
new bootstrap.Modal(document.getElementById('{{ old('id') ? 'editModal' : 'addModal' }}')).show();
@endif

// EDIT
document.querySelectorAll('.editBtn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.getElementById('edit_id').value = this.dataset.id;
        document.getElementById('edit_name').value = this.dataset.name;
        document.getElementById('edit_icon').value = this.dataset.icon;
        document.getElementById('edit_description').value = this.dataset.description;
        document.getElementById('edit_condition_type').value = this.dataset.conditionType;
        document.getElementById('edit_condition_value').value = this.dataset.conditionValue;
        document.getElementById('edit_coin_reward').value = this.dataset.coinReward;
        document.getElementById('edit_active').checked = this.dataset.active === '1';

        new bootstrap.Modal(document.getElementById('editModal')).show();
    });
});

// DELETE
document.querySelectorAll('.deleteBtn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.getElementById('delete_id').value = this.dataset.id;
        document.getElementById('delete_name').innerText = this.dataset.name;

        new bootstrap.Modal(document.getElementById('deleteModal')).show();
    });
});
</script>
@endpush