@extends('layouts.app')

@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <h3>Удаление данных</h3>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    Выберите год для удаления
                </div>
                <div class="card-body">
                    @if(count($years) > 0)
                        <div class="mb-3">
                            <label for="year" class="form-label">Год</label>
                            <select class="form-select" id="year" name="year">
                                <option value="">-- Выберите год --</option>
                                @foreach($years as $year)
                                    <option value="{{ $year }}">{{ $year }}</option>
                                @endforeach
                            </select>
                        </div>

                        <button type="button" class="btn btn-primary" id="btnGetStats" disabled>
                            Показать статистику
                        </button>
                    @else
                        <div class="alert alert-info">
                            Нет данных для удаления
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-6" id="statsBlock" style="display: none;">
            <div class="card">
                <div class="card-header">
                    Статистика удаляемых данных за <span id="statsYear"></span> год
                </div>
                <div class="card-body">
                    <table class="table table-sm table-striped" id="statsTable">
                        <thead>
                            <tr>
                                <th>Сущность</th>
                                <th class="text-end">Количество</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                        <tfoot>
                            <tr class="table-dark">
                                <th>Итого</th>
                                <th class="text-end" id="statsTotal"></th>
                            </tr>
                        </tfoot>
                    </table>

                    <div class="alert alert-danger">
                        <strong>Внимание!</strong> Это действие необратимо. Все данные за выбранный год будут удалены безвозвратно.
                    </div>

                    <button type="button" class="btn btn-danger" id="btnDelete">
                        Удалить данные
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Модальное окно подтверждения -->
    <div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">Подтверждение удаления</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                </div>
                <div class="modal-body">
                    <p>Вы уверены, что хотите удалить <strong>все данные</strong> за <strong id="confirmYear"></strong> год?</p>
                    <p>Будет удалено записей: <strong id="confirmTotal"></strong></p>
                    <p class="text-danger mb-0">Это действие <strong>необратимо</strong>!</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                    <form action="{{ route('clear-data.destroy') }}" method="post" id="deleteForm">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" name="year" id="deleteYear">
                        <button type="submit" class="btn btn-danger">Удалить</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script type="module">
    $(document).ready(function() {
        let selectedYear = null;
        let totalRecords = 0;

        $('#year').on('change', function() {
            selectedYear = $(this).val();
            $('#btnGetStats').prop('disabled', !selectedYear);
            $('#statsBlock').hide();
        });

        $('#btnGetStats').on('click', function() {
            if (!selectedYear) return;

            const btn = $(this);
            btn.prop('disabled', true).text('Загрузка...');

            $.ajax({
                url: '{{ route('clear-data.stats') }}',
                method: 'GET',
                data: { year: selectedYear },
                success: function(response) {
                    $('#statsYear').text(response.year);
                    $('#statsTotal').text(response.total);

                    const tbody = $('#statsTable tbody');
                    tbody.empty();

                    for (const [entity, count] of Object.entries(response.stats)) {
                        tbody.append(`<tr><td>${entity}</td><td class="text-end">${count}</td></tr>`);
                    }

                    totalRecords = response.total;
                    $('#statsBlock').show();
                },
                error: function(xhr) {
                    alert('Ошибка получения статистики: ' + (xhr.responseJSON?.error || 'Неизвестная ошибка'));
                },
                complete: function() {
                    btn.prop('disabled', false).text('Показать статистику');
                }
            });
        });

        $('#btnDelete').on('click', function() {
            $('#confirmYear').text(selectedYear);
            $('#confirmTotal').text(totalRecords);
            $('#deleteYear').val(selectedYear);
            let confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'), {});
            confirmModal.show();
        });
    });
</script>
@endpush