@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 ($tariffs->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 ($tariffs as $t)
                                <tr>
                                    <td>{{ $t->id }}</td>
                                    <td>{{ $t->name }}</td>
                                    <td>{{ $t->category === 'individual' ? 'Индивидуальный' : 'Групповой' }}</td>
                                    <td>{{ $t->lessons_count }}</td>
                                    <td>{{ $t->price }}</td>
                                    <td>{{ $t->duration_days }}</td>
                                    <td>
                                        <button
                                            class="btn btn-sm btn-warning editBtn"
                                            data-id="{{ $t->id }}"
                                            data-name="{{ $t->name }}"
                                            data-category="{{ $t->category }}"
                                            data-lessons="{{ $t->lessons_count }}"
                                            data-price="{{ $t->price }}"
                                            data-duration="{{ $t->duration_days }}"
                                        >Редактировать</button>

                                        <button
                                            class="btn btn-sm btn-danger deleteBtn"
                                            data-id="{{ $t->id }}"
                                            data-name="{{ $t->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_tariff.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>
            <select name="category" class="form-select @error('category') is-invalid @enderror" required>
                <option value="group" {{ old('category') === 'group' ? 'selected' : '' }}>Групповой</option>
                <option value="individual" {{ old('category') === 'individual' ? 'selected' : '' }}>Индивидуальный</option>
            </select>
            @error('category')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-2">
            <label>Количество уроков</label>
            <input type="number" name="lessons_count" class="form-control @error('lessons_count') is-invalid @enderror"
                   value="{{ old('lessons_count') }}" required>
            @error('lessons_count')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-2">
            <label>Цена</label>
            <input type="number" step="0.01" name="price" class="form-control @error('price') is-invalid @enderror"
                   value="{{ old('price') }}" required>
            @error('price')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-2">
            <label>Срок действия (дни)</label>
            <input type="number" name="duration_days" class="form-control @error('duration_days') is-invalid @enderror"
                   value="{{ old('duration_days') }}" required>
            @error('duration_days')
                <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_tariff.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>
            <select name="category" id="edit_category" class="form-select @error('category') is-invalid @enderror" required>
                <option value="group" {{ old('category') === 'group' ? 'selected' : '' }}>Групповой</option>
                <option value="individual" {{ old('category') === 'individual' ? 'selected' : '' }}>Индивидуальный</option>
            </select>
            @error('category')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-2">
            <label>Количество уроков</label>
            <input type="number" name="lessons_count" id="edit_lessons" class="form-control @error('lessons_count') is-invalid @enderror"
                   value="{{ old('lessons_count') }}" required>
            @error('lessons_count')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-2">
            <label>Цена</label>
            <input type="number" step="0.01" name="price" id="edit_price" class="form-control @error('price') is-invalid @enderror"
                   value="{{ old('price') }}" required>
            @error('price')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-2">
            <label>Срок действия (дни)</label>
            <input type="number" name="duration_days" id="edit_duration" class="form-control @error('duration_days') is-invalid @enderror"
                   value="{{ old('duration_days') }}" required>
            @error('duration_days')
                <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_tariff.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>
    </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_category').value = this.dataset.category;
        document.getElementById('edit_lessons').value = this.dataset.lessons;
        document.getElementById('edit_price').value = this.dataset.price;
        document.getElementById('edit_duration').value = this.dataset.duration;

        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