{% extends "layouts/base.twig" %}

{% block title %}{{ translations.edit_notification }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.edit_notification }}</h3>
        <p class="text-subtitle text-muted">{{ translations.edit_notification_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-12">
            <form id="notificationForm" method="POST" novalidate>
                <div class="row">
                    <!-- Główne informacje -->
                    <div class="col-xl-8">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">{{ translations.basic_information }}</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-12">
                                        <!-- Tytuł -->
                                        <div class="mb-3">
                                            <label for="title" class="form-label required">{{ translations.title }}</label>
                                            <input type="text"
                                                   class="form-control"
                                                   id="title"
                                                   name="title"
                                                   required
                                                   maxlength="255"
                                                   value="{{ old('title', row.title) }}"
                                                   placeholder="{{ translations.enter_title }}">
                                            <div class="invalid-feedback"></div>
                                        </div>

                                        <!-- Treść powiadomienia -->
                                        <div class="mb-3 mt-5">
                                            <label for="message" class="form-label required">{{ translations.message }}</label>
                                            <textarea class="form-control"
                                                      id="message"
                                                      name="message"
                                                      rows="4"
                                                      maxlength="1000"
                                                      required
                                                      placeholder="{{ translations.enter_message }}">{{ old('message', row.message) }}</textarea>
                                            <div class="form-text">
                                                <span id="messageCounter">{{ row.message|length }}</span>/1000 {{ translations.characters }}
                                            </div>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>

                                    <div class="col-4 mt-5">
                                        <!-- Priorytet -->
                                        <div class="mb-3">
                                            <label for="priority" class="form-label required">{{ translations.priority }}</label>
                                            <select class="form-select" id="priority" name="priority" required>
                                                <option value="">{{ translations.select_priority }}</option>
                                                <option value="info" {{ old('priority', row.priority) == 'info' ? 'selected' : '' }}>{{ translations.priority_info }}</option>
                                                <option value="warning" {{ old('priority', row.priority) == 'warning' ? 'selected' : '' }}>{{ translations.priority_warning }}</option>
                                                <option value="urgent" {{ old('priority', row.priority) == 'urgent' ? 'selected' : '' }}>{{ translations.priority_urgent }}</option>
                                            </select>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>

                                    <div class="col-4 mt-5">
                                        <!-- Typ powiadomienia -->
                                        <div class="mb-3">
                                            <label for="type" class="form-label required">{{ translations.type }}</label>
                                            <select class="form-select" id="type" name="type" required>
                                                <option value="">{{ translations.select_type }}</option>
                                                <option value="once" {{ old('type', row.type) == 'once' ? 'selected' : '' }}>{{ translations.type_once }}</option>
                                                <option value="daily" {{ old('type', row.type) == 'daily' ? 'selected' : '' }}>{{ translations.type_daily }}</option>
                                                <option value="weekly" {{ old('type', row.type) == 'weekly' ? 'selected' : '' }}>{{ translations.type_weekly }}</option>
                                                <option value="cyclic" {{ old('type', row.type) == 'cyclic' ? 'selected' : '' }}>{{ translations.type_cyclic }}</option>
                                            </select>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>

                                    <div class="col-4 mt-5">
                                        <!-- Status -->
                                        <div class="mb-3">
                                            <label for="status" class="form-label required">{{ translations.status }}</label>
                                            <select class="form-select" id="status" name="status" required>
                                                <option value="">{{ translations.select_status }}</option>
                                                <option value="published" {{ old('status', row.status) == 'published' ? 'selected' : '' }}>{{ translations.status_published }}</option>
                                                <option value="expired" {{ old('status', row.status) == 'expired' ? 'selected' : '' }}>{{ translations.status_expired }}</option>
                                            </select>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Harmonogram -->
                    <div class="col-xl-4">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">{{ translations.schedule }}</h5>
                            </div>
                            <div class="card-body">
                                <!-- Widoczne od -->
                                <div class="mb-3">
                                    <label for="visible_from" class="form-label">{{ translations.visible_from }}</label>
                                    <input type="datetime-local"
                                           class="form-control"
                                           id="visible_from"
                                           name="visible_from"
                                           value="{{ old('visible_from', row.visibleFrom|date('Y-m-d\\TH:i')) }}">
                                    <div class="form-text">{{ translations.visible_from_info }}</div>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <!-- Widoczne do -->
                                <div class="mb-3">
                                    <label for="visible_to" class="form-label">{{ translations.visible_to }}</label>
                                    <input type="datetime-local"
                                           class="form-control"
                                           id="visible_to"
                                           name="visible_to"
                                           value="{{ old('visible_to', row.visibleTo|date('Y-m-d\\TH:i')) }}">
                                    <div class="form-text">{{ translations.visible_to_info }}</div>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <!-- Dzień tygodnia -->
                                <div class="mb-3">
                                    <label for="day_of_week" class="form-label">{{ translations.day_of_week }}</label>
                                    <select class="form-select" id="day_of_week" name="day_of_week">
                                        <option value="">{{ translations.select_day_of_week }}</option>
                                        {% for i, day in {
                                            1: translations.monday,
                                            2: translations.tuesday,
                                            3: translations.wednesday,
                                            4: translations.thursday,
                                            5: translations.friday,
                                            6: translations.saturday,
                                            7: translations.sunday
                                        } %}
                                            <option value="{{ i }}" {{ old('day_of_week', row.dayOfWeek) == i ? 'selected' : '' }}>{{ day }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text">{{ translations.day_of_week_info }}</div>
                                </div>

                                <!-- Interwał powtarzania -->
                                <div class="mb-3">
                                    <label for="repeat_interval" class="form-label">{{ translations.repeat_interval }}</label>
                                    <input type="number"
                                           min="0"
                                           class="form-control"
                                           id="repeat_interval"
                                           name="repeat_interval"
                                           value="{{ old('repeat_interval', row.repeatInterval) }}"
                                           placeholder="{{ translations.enter_repeat_interval }}">
                                    <div class="form-text">{{ translations.repeat_interval_info }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sklepy -->
                    <div class="col-xl-8">
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">{{ translations.shops }}</h5>
                                {% set oldShops = old('shops', selectedShops) %}
                                {% set selectAllChecked = oldShops|length == shops|length %}
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_global" name="is_global" value="1" {% if row.getIsGlobal() %}checked{% endif %}>
                                    <label class="form-check-label" for="is_global">{{ translations.is_global }}</label>
                                </div>
                            </div>
                            <div class="card-body">
                                {% if shops %}
                                    <div class="row">
                                        {% for shop in shops %}
                                            <div class="col-6 mb-3">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input shop-checkbox"
                                                           type="checkbox"
                                                           id="shop_{{ shop.id }}"
                                                           name="shops[]"
                                                           value="{{ shop.id }}"
                                                           {% if (shop.id in oldShops) or (row.getIsGlobal()) %}checked{% endif %}
                                                    <label class="form-check-label" for="shop_{{ shop.id }}">
                                                        <span class="fw-bold">{{ shop.representativeName }}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% else %}
                                    <div class="alert alert-info">
                                        <i class="bi bi-info-circle"></i> {{ translations.no_shops_available }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Przyciski akcji -->
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-warning" id="submitBtn">
                                        <i class="bi bi-check-circle"></i> {{ translations.edit }}
                                    </button>
                                    <a href="{{ root }}/notifications" class="btn btn-outline-secondary">
                                        <i class="bi bi-arrow-left"></i> {{ translations.back }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('notificationForm');
            const messageTextarea = document.getElementById('message');
            const messageCounter = document.getElementById('messageCounter');
            const shopCheckboxes = document.querySelectorAll('.shop-checkbox');
            const selectAllShops = document.getElementById('is_global');
            const typeSelect = document.getElementById('type');
            const dayOfWeekSelect = document.getElementById('day_of_week');
            const repeatIntervalInput = document.getElementById('repeat_interval');

            // Licznik znaków
            messageTextarea.addEventListener('input', () => {
                messageCounter.textContent = messageTextarea.value.length;
            });

            // Zaznacz wszystkie sklepy
            selectAllShops.addEventListener('change', function() {
                shopCheckboxes.forEach(cb => cb.checked = this.checked);
            });

            shopCheckboxes.forEach(cb => cb.addEventListener('change', () => {
                const allChecked = Array.from(shopCheckboxes).every(cb => cb.checked);
                const someChecked = Array.from(shopCheckboxes).some(cb => cb.checked);
                selectAllShops.checked = allChecked;
                selectAllShops.indeterminate = someChecked && !allChecked;
            }));

            // Walidacja
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                if (validateForm()) this.submit();
            });

            function validateForm() {
                let isValid = true;
                const requiredFields = form.querySelectorAll('[required]');

                // ✅ Podstawowa walidacja pól wymaganych
                requiredFields.forEach(field => {
                    if (!field.value.trim()) {
                        field.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        field.classList.remove('is-invalid');
                        field.classList.add('is-valid');
                    }
                });

                // ✅ Walidacja logiczna typu powiadomienia
                const type = document.getElementById('type').value;
                const dayOfWeek = document.getElementById('day_of_week');
                const repeatInterval = document.getElementById('repeat_interval');

                // Resetuj poprzedni stan
                dayOfWeek.classList.remove('is-invalid', 'is-valid');
                repeatInterval.classList.remove('is-invalid', 'is-valid');

                if (type === 'weekly') {
                    // Wymagany tylko dzień tygodnia
                    if (!dayOfWeek.value) {
                        dayOfWeek.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        dayOfWeek.classList.add('is-valid');
                    }
                } else if (type === 'cyclic') {
                    // Wymagane oba pola
                    if (!dayOfWeek.value) {
                        dayOfWeek.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        dayOfWeek.classList.add('is-valid');
                    }

                    if (!repeatInterval.value || repeatInterval.value <= 0) {
                        repeatInterval.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        repeatInterval.classList.add('is-valid');
                    }
                }

                // ✅ Walidacja zakresu widoczności
                const visibleFrom = document.getElementById('visible_from').value;
                const visibleTo = document.getElementById('visible_to').value;

                if (visibleFrom && visibleTo && new Date(visibleFrom) >= new Date(visibleTo)) {
                    document.getElementById('visible_to').classList.add('is-invalid');
                    isValid = false;
                } else {
                    document.getElementById('visible_to').classList.remove('is-invalid');
                    if (visibleTo) {
                        document.getElementById('visible_to').classList.add('is-valid');
                    }
                }

                return isValid;
            }

            // Blokowanie pól cyklicznych przy "once"
            function updateScheduleFields() {
                const type = typeSelect.value;

                const isOnce = type === 'once';
                const isDaily = type === 'daily';
                const isWeekly = type === 'weekly';
                const isCyclic = type === 'cyclic';

                // Resetuj wartości, jeśli pola są blokowane
                if (isOnce || isDaily) {
                    dayOfWeekSelect.value = '';
                    repeatIntervalInput.value = '';
                } else if (isWeekly) {
                    repeatIntervalInput.value = '';
                }

                // Ustal stany pól
                dayOfWeekSelect.disabled = isOnce || isDaily;
                repeatIntervalInput.disabled = !(isCyclic);

                // Styl wizualny
                dayOfWeekSelect.classList.toggle('bg-light', dayOfWeekSelect.disabled);
                repeatIntervalInput.classList.toggle('bg-light', repeatIntervalInput.disabled);
            }

            updateScheduleFields();
            typeSelect.addEventListener('change', updateScheduleFields);
        });
    </script>

    <style>
        .required::after { content: " *"; color: #dc3545; }
        .card-header h5 { color: #495057; font-weight: 600; }
        .form-text { font-size: 0.875rem; color: #6c757d; }
        .form-control:focus, .form-select:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }
        .is-valid { border-color: #198754; }
        .is-invalid { border-color: #dc3545; }
    </style>
{% endblock %}