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

{% block title %}{{ title }} - {{ platformName }}{% endblock %}

{% block head %}
<style>
    #quill-editor {
        height: 300px;
        background: #fff;
    }
    .color-picker-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 2px solid #ddd;
        display: inline-block;
        cursor: pointer;
        margin-right: 5px;
    }
    .color-picker-btn.active {
        border-color: #000;
        transform: scale(1.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{{ title }}</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="{{ url('/admin/dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ url('/admin/notes') }}">{{ __('notes.title') }}</a></li>
        <li class="breadcrumb-item active">{{ title }}</li>
    </ol>

    <div class="card mb-4">
        <div class="card-body">
            <form id="noteForm" action="{{ url('/admin/notes/update/' ~ note.notes_id) }}" method="POST" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-8 mb-3">
                        <label for="notes_title" class="form-label fw-bold">{{ __('notes.note_title') }}</label>
                        <input type="text" class="form-control" id="notes_title" name="notes_title" value="{{ note.notes_title }}" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label for="notes_subject_id" class="form-label fw-bold">{{ __('notes.note_subject') }}</label>
                        <select class="form-select" id="notes_subject_id" name="notes_subject_id">
                            <option value="">{{ __('notes.select_subject') }}</option>
                            {% for subject in subjects %}
                                <option value="{{ subject.subjects_id }}" {{ note.notes_subject_id == subject.subjects_id ? 'selected' : '' }}>{{ subject.subjects_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">{{ __('notes.note_content') }}</label>
                    <div id="quill-editor" data-target="notes_content">{{ note.notes_content|raw }}</div>
                    <textarea name="notes_content" id="notes_content" style="display:none">{{ note.notes_content }}</textarea>
                </div>

                <div class="row align-items-center mb-4">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold d-block">{{ __('notes.note_color') }}</label>
                        <div class="d-flex flex-wrap gap-2">
                            <input type="hidden" name="notes_color" id="notes_color" value="{{ note.notes_color }}">
                            {% set colors = ['#ffffff', '#fff9c4', '#c8e6c9', '#bbdefb', '#f8bbd0', '#e1bee7'] %}
                            {% for color in colors %}
                                <div class="color-picker-btn {{ note.notes_color == color ? 'active' : '' }}" 
                                     style="background-color: {{ color }};" 
                                     onclick="setColor('{{ color }}', this)"></div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="form-check form-switch mt-md-4">
                            <input class="form-check-input" type="checkbox" id="notes_is_pinned" name="notes_is_pinned" value="1" {{ note.notes_is_pinned ? 'checked' : '' }}>
                            <label class="form-check-label" for="notes_is_pinned">{{ __('notes.is_pinned') }}</label>
                        </div>
                    </div>
                </div>

                <div class="row mb-4">
                    <div class="col-md-6 mb-3">
                        <label for="notes_image" class="form-label fw-bold">{{ __('notes.note_image')|default('Imagem') }}</label>
                        {% if note.notes_image %}
                            <div class="mb-2">
                                <img src="/storage/uploads/notes/{{ note.notes_image }}" class="img-thumbnail" style="max-height: 100px;">
                            </div>
                        {% endif %}
                        <input type="file" class="form-control" id="notes_image" name="notes_image" accept="image/*">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="notes_file" class="form-label fw-bold">{{ __('notes.note_file')|default('Arquivo') }}</label>
                        {% if note.notes_file %}
                            <div class="mb-2">
                                <a href="/storage/uploads/notes/{{ note.notes_file }}" target="_blank" class="btn btn-sm btn-outline-info">
                                    <i class="fas fa-paperclip"></i> {{ __('notes.view_file')|default('Ver arquivo') }}
                                </a>
                            </div>
                        {% endif %}
                        <input type="file" class="form-control" id="notes_file" name="notes_file">
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ url('/admin/notes') }}" class="btn btn-secondary">{{ __('notes.cancel') }}</a>
                    <button type="submit" class="btn btn-primary">{{ __('notes.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function setColor(color, element) {
        document.getElementById('notes_color').value = color;
        document.querySelectorAll('.color-picker-btn').forEach(btn => btn.classList.remove('active'));
        element.classList.add('active');
    }
</script>
{% endblock %}