@extends('layouts.app')

@section('title', 'Уровни героя')

@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="ax-card">

            @if ($items->isNotEmpty())
                <div class="table-responsive">
                    <table class="table table-bordered align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Уровень</th>
                                <th>Название</th>
                                <th>Опыт для уровня</th>
                                <th>Награда за уровень</th>
                                <th width="180">Действия</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach ($items as $i)
                            <tr>
                                <td>{{ $i->level_number }}</td>
                                <td>{{ $i->name }}</td>
                                <td>{{ $i->xp_required }}</td>
                                <td>{{ $i->coin_reward }} &#x1FA99;</td>
                                <td>
                                    <button
                                        class="btn btn-sm btn-warning editBtn"
                                        data-id="{{ $i->level_number }}"
                                        data-level="{{ $i->level_number }}"
                                        data-name="{{ $i->name }}"
                                        data-xp="{{ $i->xp_required }}"
                                        data-coin="{{ $i->coin_reward }}"
                                    >Редактировать</button>

                                    <button
                                        class="btn btn-sm btn-danger deleteBtn"
                                        data-id="{{ $i->level_number }}"
                                        data-name="{{ $i->name }}"
                                    >Удалить</button>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="ax-empty-state">
                        <i class="bi bi-bar-chart-steps ax-empty-icon"></i>
                        Уровней пока нет.
                    </div>
            @endif

        </div>
    </div>

    <!-- ================== ADD MODAL ================== -->
    <div class="modal fade" id="addModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <form action="/admin/save_hero_level.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="number" name="level_number" class="form-control @error('level_number') is-invalid @enderror"
                   value="{{ old('level_number') }}" min="1" required>
            @error('level_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <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="number" name="xp_required" class="form-control @error('xp_required') is-invalid @enderror"
                   value="{{ old('xp_required') }}" min="0" required>
            @error('xp_required')<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>
    <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_hero_level.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="number" name="level_number" id="edit_level" class="form-control @error('level_number') is-invalid @enderror"
                   value="{{ old('level_number') }}" min="1" required>
            @error('level_number')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <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="number" name="xp_required" id="edit_xp" class="form-control @error('xp_required') is-invalid @enderror"
                   value="{{ old('xp_required') }}" min="0" required>
            @error('xp_required')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Награда за достижение уровня (монет)</label>
            <input type="number" name="coin_reward" id="edit_coin" 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>
    <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_hero_level.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_level').value = this.dataset.level;
        document.getElementById('edit_name').value = this.dataset.name;
        document.getElementById('edit_xp').value = this.dataset.xp;
        document.getElementById('edit_coin').value = this.dataset.coin;

        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