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

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

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

{% block content %}
    <div class="row">
        <div class="col-12">
            <form id="materialForm" 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">
                                <!-- 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>

                                <!-- Slug (auto-generated) -->
                                <div class="mb-3">
                                    <label for="slug" class="form-label">{{ translations.slug }}</label>
                                    <input type="text"
                                           class="form-control"
                                           id="slug"
                                           name="slug"
                                           readonly
                                           value="{{ old('slug', row.slug) }}"
                                           placeholder="{{ translations.generated_automatically }}">
                                    <div class="form-text">{{ translations.slug_info }}</div>
                                </div>

                                <!-- Opis -->
                                <div class="mb-3">
                                    <label for="summary" class="form-label">{{ translations.summary }}</label>
                                    <textarea class="form-control"
                                              id="summary"
                                              name="summary"
                                              rows="3"
                                              maxlength="500"
                                              placeholder="{{ translations.enter_summary }}">{{ old('summary', row.summary) }}</textarea>
                                    <div class="form-text">
                                        <span id="summaryCounter">0</span>/500 {{ translations.characters }}
                                    </div>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <!-- URL materiału -->
                                <div class="mb-3">
                                    <label for="url" class="form-label">{{ translations.material_url }}</label>
                                    <input type="url"
                                           class="form-control"
                                           id="url"
                                           name="url"
                                           value="{{ old('url', row.url) }}"
                                           placeholder="https://example.com/material">
                                    <div class="form-text">{{ translations.url_info }}</div>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <!-- 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>
                                {% 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="selectAllShops" {% if selectAllChecked %}checked{% endif %}>
                                    <label class="form-check-label" for="selectAllShops">
                                        {{ translations.check_all }}
                                    </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 %}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>


                    <!-- Ustawienia -->
                    <div class="col-xl-4">
                        <div class="card mb-4">
                            <div class="card-header">
                                <h5 class="mb-0">{{ translations.settings }}</h5>
                            </div>
                            <div class="card-body">
                                <!-- Typ materiału -->
                                <div class="mb-3">
                                    <label for="id_category" class="form-label required">{{ translations.category }}</label>
                                    <select class="form-select" id="id_category" name="id_category" required>
                                        <option value="">{{ translations.select_category }}</option>
                                        {% for category in categories %}
                                            <option value="{{ category.getId() }}"
                                                    {{ old('id_category', row.getIdCategory()) == category.getId() ? 'selected' : '' }}
                                            >{{ category.getName() }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

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

                                <!-- Data wygaśnięcia -->
                                <div class="mb-3">
                                    <label for="expiresAt" class="form-label">{{ translations.expires_at }}</label>
                                    <input type="datetime-local"
                                           class="form-control"
                                           id="expiresAt"
                                           name="expires_at"
                                           value="{{ old('expires_at', row.expiresAt|date('Y-m-d\\TH:i')) }}">
                                    <div class="form-text">{{ translations.expires_at_info }}</div>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Przyciski akcji -->
                        <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 }}/knowledge-base/resources" class="btn btn-outline-secondary">
                                        <i class="bi bi-arrow-left"></i> {{ translations.back_to_list }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('materialForm');
            const titleInput = document.getElementById('title');
            const slugInput = document.getElementById('slug');
            const summaryTextarea = document.getElementById('summary');
            const summaryCounter = document.getElementById('summaryCounter');
            const selectAllShops = document.getElementById('selectAllShops');
            const shopCheckboxes = document.querySelectorAll('.shop-checkbox');

            // Auto-generowanie slug z tytułu
            titleInput.addEventListener('input', function() {
                const title = this.value;
                slugInput.value = generateSlug(title);
            });

            // Licznik znaków dla opisu
            summaryTextarea.addEventListener('input', function() {
                summaryCounter.textContent = this.value.length;
            });

            // Zaznaczanie/odznaczanie wszystkich checkboxów sklepów
            selectAllShops.addEventListener('change', function() {
                const isChecked = this.checked;
                shopCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            });

            // Aktualizacja stanu "wybierz wszystkie" na podstawie indywidualnych checkboxów
            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;
                });
            });


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

                if (validateForm()) {
                    // Wyślij formularz
                    this.submit();
                }
            });

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

                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 URL
                const urlInput = document.getElementById('url');
                if (urlInput.value && !isValidUrl(urlInput.value)) {
                    urlInput.classList.add('is-invalid');
                    isValid = false;
                } else if (urlInput.value) {
                    urlInput.classList.remove('is-invalid');
                    urlInput.classList.add('is-valid');
                }

                // Walidacja dat
                const publishAt = document.getElementById('publishAt').value;
                const expiresAt = document.getElementById('expiresAt').value;

                if (publishAt && expiresAt && new Date(publishAt) >= new Date(expiresAt)) {
                    document.getElementById('expiresAt').classList.add('is-invalid');
                    isValid = false;
                }

                return isValid;
            }

            function isValidUrl(string) {
                try {
                    new URL(string);
                    return true;
                } catch (_) {
                    return false;
                }
            }

            function generateSlug(text) {
                return text
                    .toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '') // Usuwa znaki specjalne
                    .replace(/\s+/g, '-') // Zamienia spacje na myślniki
                    .replace(/-+/g, '-') // Usuwa podwójne myślniki
                    .trim()
                    .replace(/^-+|-+$/g, ''); // Usuwa myślniki z początku i końca
            }
        });
    </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 %}