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

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

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.add_marketing_material }}</h3>
        <p class="text-subtitle text-muted">{{ translations.add_material_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') }}"
                                           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') }}"
                                           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') }}</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') }}"
                                           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>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="selectAllShops" checked>
                                    <label class="form-check-label" for="selectAllShops">
                                        {{ translations.check_all }}
                                    </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>



                    <!-- 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="primary_type" class="form-label required">{{ translations.type }}</label>
                                    <select class="form-select" id="primary_type" name="primary_type" required>
                                        <option value="">{{ translations.select_type }}</option>
                                        {% for type in types %}
                                            <option value="{{ type.code }}"
                                                    {{ old('primary_type') == type.code ? 'selected' : '' }}
                                            >{{ type.name }}</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"
                                           value="{{ old('publish_at') }}"
                                           name="publish_at">
                                    <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"
                                             value="{{ old('expires_at') }}"
                                           name="expires_at">
                                    <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-success" id="submitBtn">
                                        <i class="bi bi-check-circle"></i> {{ translations.create }}
                                    </button>
                                    <a href="{{ root }}/marketing-materials" 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 %}