<div class="max-w-3xl mx-auto bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-6">Nova Ordem Judicial</h3>



    <!-- Quill Styles -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <form action="/admin/orders/store" method="POST" enctype="multipart/form-data" class="space-y-6" id="orderForm">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Título / Identificação da Ordem</label>
                <input type="text" name="title" required placeholder="Ex: Processo nº 123456 - Bloqueio Jogos"
                    oninvalid="this.setCustomValidity('Por favor, preencha o título da ordem.')"
                    oninput="this.setCustomValidity('')"
                    class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo da Ordem</label>
                <select name="type" required oninvalid="this.setCustomValidity('Por favor, selecione o tipo da ordem.')"
                    oninput="this.setCustomValidity('')"
                    class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none">
                    <option value="block">Bloqueio</option>
                    <option value="unblock">Desbloqueio</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Data de Recebimento</label>
                <input type="date" name="received_at"
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                    required oninvalid="this.setCustomValidity('Por favor, informe a data de recebimento.')"
                    oninput="this.setCustomValidity('')">
            </div>

            <div class="col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Conteúdo do Email / Descrição</label>
                <div id="editor" class="bg-white" style="height: 200px;"></div>
                <input type="hidden" name="content" id="content">
            </div>

            <div class="col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">Arquivo de Domínios (.csv, .txt)</label>
                <div x-data="{ fileName: '' }" class="mt-1">
                    <label
                        class="flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:border-primary-500 transition-colors bg-white">
                        <div class="space-y-1 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none"
                                viewBox="0 0 48 48" aria-hidden="true">
                                <path
                                    d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <div class="flex text-sm text-gray-600 justify-center">
                                <span class="font-medium text-primary-600 hover:text-primary-500">Upload um
                                    arquivo</span>
                                <p class="pl-1">ou arraste e solte</p>
                            </div>
                            <p class="text-xs text-gray-500">CSV ou TXT até 10MB</p>
                            <p class="text-sm font-semibold text-gray-800 mt-2"
                                x-text="fileName ? 'Selecionado: ' + fileName : ''"></p>
                        </div>
                        <input type="file" name="csv_file" class="sr-only" accept=".csv,.txt"
                            @change="fileName = $event.target.files[0].name" required
                            oninvalid="this.setCustomValidity('Por favor, selecione um arquivo CSV ou TXT.')"
                            oninput="this.setCustomValidity('')">
                    </label>
                </div>
            </div>
        </div>

        <div class="flex justify-end space-x-3 pt-4 border-t border-gray-100">
            <a href="/admin/orders"
                class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">Cancelar</a>
            <button type="submit"
                class="px-4 py-2 text-white bg-primary-600 rounded-lg hover:bg-primary-700 transition-colors">Salvar e
                Processar</button>
        </div>
    </form>
</div>

<!-- Quill Script -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
    var quill = new Quill('#editor', {
        theme: 'snow',
        placeholder: 'Cole o conteúdo do email ou descreva a ordem aqui...',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['clean'],
                ['link']
            ]
        }
    });

    var form = document.getElementById('orderForm');
    form.onsubmit = function () {
        var content = document.querySelector('input[name=content]');
        content.value = quill.root.innerHTML;
    };
</script>