{% 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/store') }}" 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" 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 }}">{{ 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"></div>
                    <textarea name="notes_content" id="notes_content" style="display:none"></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="#ffffff">
                            <div class="color-picker-btn active" style="background-color: #ffffff;" onclick="setColor('#ffffff', this)"></div>
                            <div class="color-picker-btn" style="background-color: #fff9c4;" onclick="setColor('#fff9c4', this)"></div>
                            <div class="color-picker-btn" style="background-color: #c8e6c9;" onclick="setColor('#c8e6c9', this)"></div>
                            <div class="color-picker-btn" style="background-color: #bbdefb;" onclick="setColor('#bbdefb', this)"></div>
                            <div class="color-picker-btn" style="background-color: #f8bbd0;" onclick="setColor('#f8bbd0', this)"></div>
                            <div class="color-picker-btn" style="background-color: #e1bee7;" onclick="setColor('#e1bee7', this)"></div>
                        </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">
                            <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>
                        <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>
                        <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 %}