{% extends "base.html" %}

{% block title %}Конструктор билета — {{ event.name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>Конструктор пригласительного билета</h1>
    <a href="{{ url_for('main.admin_events') }}" class="btn btn-secondary">← К мероприятиям</a>
</div>

<div class="row">
    <div class="col-lg-5">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Настройки дизайна</h5>
                <form method="POST" id="ticket-form" enctype="multipart/form-data">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="mb-3">
                        <label for="logo_file" class="form-label">Логотип компании</label>
                        <input type="file" class="form-control" id="logo_file" name="logo_file" accept=".jpg,.jpeg,.png,.webp">
                        {% if event.logo_filename %}
                        <div class="mt-2 d-flex align-items-center gap-2">
                            <img src="{{ url_for('main.event_logo', event_id=event.id) }}" alt="Логотип" style="max-height: 60px; max-width: 200px;">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="delete_logo" name="delete_logo" value="1">
                                <label class="form-check-label" for="delete_logo">Удалить</label>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <label for="ticket_title" class="form-label">Заголовок билета</label>
                        <input type="text" class="form-control" id="ticket_title" name="ticket_title" value="{{ event.ticket_title or event.name }}">
                    </div>
                    <div class="mb-3">
                        <label for="ticket_subtitle" class="form-label">Подзаголовок</label>
                        <input type="text" class="form-control" id="ticket_subtitle" name="ticket_subtitle" value="{{ event.ticket_subtitle or '' }}">
                    </div>
                    <div class="mb-3">
                        <label for="ticket_body_text" class="form-label">Дополнительный текст</label>
                        <textarea class="form-control" id="ticket_body_text" name="ticket_body_text" rows="3">{{ event.ticket_body_text or '' }}</textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="ticket_background_color" class="form-label">Фон</label>
                            <input type="color" class="form-control form-control-color w-100" id="ticket_background_color" name="ticket_background_color" value="{{ event.ticket_background_color or '#ffffff' }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="ticket_text_color" class="form-label">Текст</label>
                            <input type="color" class="form-control form-control-color w-100" id="ticket_text_color" name="ticket_text_color" value="{{ event.ticket_text_color or '#000000' }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="ticket_accent_color" class="form-label">Акцент</label>
                            <input type="color" class="form-control form-control-color w-100" id="ticket_accent_color" name="ticket_accent_color" value="{{ event.ticket_accent_color or '#0d6efd' }}">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="ticket_layout" class="form-label">Ориентация</label>
                        <select class="form-select" id="ticket_layout" name="ticket_layout">
                            <option value="portrait" {% if (event.ticket_layout or 'portrait') == 'portrait' %}selected{% endif %}>Портретная (600×900)</option>
                            <option value="landscape" {% if (event.ticket_layout or 'portrait') == 'landscape' %}selected{% endif %}>Альбомная (900×600)</option>
                        </select>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="ticket_show_qr" name="ticket_show_qr" {% if event.ticket_show_qr %}checked{% endif %}>
                        <label class="form-check-label" for="ticket_show_qr">Показывать QR-код</label>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="ticket_show_photo" name="ticket_show_photo" {% if event.ticket_show_photo %}checked{% endif %}>
                        <label class="form-check-label" for="ticket_show_photo">Показывать фото гостя</label>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">Сохранить</button>
                        <button type="button" id="refresh-preview" class="btn btn-outline-secondary">Обновить предпросмотр</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body text-center">
                <h5 class="card-title">Предпросмотр</h5>
                <p class="text-muted">Пример билета с тестовыми данными</p>
                <img id="ticket-preview" src="{{ url_for('main.admin_event_ticket_preview', event_id=event.id) }}" data-preview-url="{{ url_for('main.admin_event_ticket_preview', event_id=event.id) }}" alt="Предпросмотр билета" class="img-fluid border shadow-sm" style="max-height: 80vh;">
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/ticket_constructor.js') }}"></script>
{% endblock %}