@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="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 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>{{ $i->cost_coins }}</td>
                                    <td>
                                        @if ($i->active)
                                            <span class="badge bg-success">Активен</span>
                                        @else
                                            <span class="badge bg-secondary">Отключён</span>
                                        @endif
                                    </td>
                                    <td>{{ $i->unlock_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-cost="{{ $i->cost_coins }}"
                                            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_shop_item.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">{{ old('description') }}</textarea>
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Цена (монет)</label>
            <input type="number" name="cost_coins" class="form-control @error('cost_coins') is-invalid @enderror"
                   value="{{ old('cost_coins') }}" min="1" required>
            @error('cost_coins')<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_shop_item.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">{{ old('description') }}</textarea>
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-2">
            <label>Цена (монет)</label>
            <input type="number" name="cost_coins" id="edit_cost" class="form-control @error('cost_coins') is-invalid @enderror"
                   value="{{ old('cost_coins') }}" min="1" required>
            @error('cost_coins')<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_shop_item.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_cost').value = this.dataset.cost;
        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