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

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

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.add_notification }}</h3>
        <p class="text-subtitle text-muted">{{ translations.add_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') }}"
                                                   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') }}</textarea>
                                            <div class="form-text">
                                                <span id="messageCounter">0</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') == 'info' ? 'selected' : '' }}>{{ translations.priority_info }}</option>
                                                <option value="warning" {{ old('priority') == 'warning' ? 'selected' : '' }}>{{ translations.priority_warning }}</option>
                                                <option value="urgent" {{ old('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') == 'once' ? 'selected' : '' }}>{{ translations.type_once }}</option>
                                                <option value="daily" {{ old('type') == 'daily' ? 'selected' : '' }}>{{ translations.type_daily }}</option>
                                                <option value="weekly" {{ old('type') == 'weekly' ? 'selected' : '' }}>{{ translations.type_weekly }}</option>
                                                <option value="cyclic" {{ old('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') == 'published' ? 'selected' : '' }}>{{ translations.status_published }}</option>
                                                <option value="expired" {{ old('status') == 'expired' ? 'selected' : '' }}>{{ translations.status_expired }}</option>
                                            </select>
                                            <div class="invalid-feedback"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                    <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') }}">
                                    <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') }}">
                                    <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>
                                        <option value="1" {{ old('day_of_week') == '1' ? 'selected' : '' }}>{{ translations.monday }}</option>
                                        <option value="2" {{ old('day_of_week') == '2' ? 'selected' : '' }}>{{ translations.tuesday }}</option>
                                        <option value="3" {{ old('day_of_week') == '3' ? 'selected' : '' }}>{{ translations.wednesday }}</option>
                                        <option value="4" {{ old('day_of_week') == '4' ? 'selected' : '' }}>{{ translations.thursday }}</option>
                                        <option value="5" {{ old('day_of_week') == '5' ? 'selected' : '' }}>{{ translations.friday }}</option>
                                        <option value="6" {{ old('day_of_week') == '6' ? 'selected' : '' }}>{{ translations.saturday }}</option>
                                        <option value="7" {{ old('day_of_week') == '7' ? 'selected' : '' }}>{{ translations.sunday }}</option>
                                    </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') }}"
                                           placeholder="{{ translations.enter_repeat_interval }}">
                                    <div class="form-text">{{ translations.repeat_interval_info }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-8">
                        <!-- Sklepy -->
                        <div class="card mb-4">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">{{ translations.shops }}</h5>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="is_global" name="is_global" {{ old('is_global') ? 'checked' : '' }} checked value="1">
                                    <label class="form-check-label" for="is_global">
                                        {{ translations.is_global }}
                                    </label>
                                </div>
                            </div>
                            <div class="card-body">
                                {% if shops %}
                                    <div class="row">
                                        {% set oldShops = old('shops', []) %}
                                        {% set selectAllInitially = oldShops is empty %}
                                        {% 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 selectAllInitially or shop.id in oldShops %}checked{% endif %}>
                                                    <label class="form-check-label" for="shop_{{ shop.id }}">
                                                        <div class="d-flex flex-column">
                                                            <span class="fw-bold">{{ shop.representativeName }}</span>
                                                        </div>
                                                    </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>

                    <div class="col-xl-4">
                        <!-- Przyciski akcji -->
                        <div class="card">
                            <div class="card-body">
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-success" id="submitBtn">
                                        <i class="bi bi-check-circle"></i> {{ translations.create }}
                                    </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');

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

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

            selectAllShops.addEventListener('change', function() {
                const isChecked = this.checked;
                shopCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            });

            shopCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    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;
                });
            });

            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;
            }


            const typeSelect = document.getElementById('type');
            const dayOfWeekSelect = document.getElementById('day_of_week');
            const repeatIntervalInput = document.getElementById('repeat_interval');

            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);
            }

// Zainicjalizuj przy starcie (jeśli formularz ma już wybraną wartość)
            updateScheduleFields();

// Nasłuchuj zmiany typu
            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 %}