@extends('sistema.layout')
@section('titulo', 'Editar registo')

@section('conteudo')
    <div class="row">

    <div class="col-lg-12 mb-2">
        <div class="pagetitle">
            <h1 class="fw-bold text-dark mb-1">Editar registo</h1>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="card p-4">
            <div class="card-body">

                <form action="{{ route('museu.update', $museu->id) }}"
                      method="POST"
                      enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    {{-- ================= CATEGORIA ================= --}}
                    <div class="row">

                        <div class="col-md-4 mb-3">
                            <label>Categoria</label>
                            <select id="categoria" name="categoria" class="form-control" required>
                                @php
                                    $categorias = [
                                        "Documentos históricos",
                                        "Objectos institucionais",
                                        "Trajes e insígnias judiciais",
                                        "Mobiliário histórico",
                                        "Fotografias e registos visuais",
                                        "Objectos relacionados com processos históricos",
                                        "Elementos arquitetónicos"
                                    ];
                                @endphp

                                @foreach($categorias as $cat)
                                    <option value="{{ $cat }}"
                                        {{ $museu->categoria == $cat ? 'selected' : '' }}>
                                        {{ $cat }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Subcategoria</label>
                            <select id="item" name="subcategoria" class="form-control" required>
                                <option value="{{ $museu->subcategoria }}" selected>
                                    {{ $museu->subcategoria }}
                                </option>
                            </select>
                        </div>

                        <div class="col-md-4 mb-3">
                            <label>Localização</label>
                            <input type="text"
                                   name="localizacao"
                                   class="form-control"
                                   value="{{ $museu->localizacao }}">
                        </div>

                    </div>

                    {{-- ================= DESCRIÇÃO ================= --}}
                    <div class="mb-3">
                        <label>Descrição</label>
                        <div class="editor" data-input="descricao">
                            {!! $museu->descricao !!}
                        </div>
                        <input type="hidden" name="descricao" id="descricao">
                    </div>

                    {{-- ================= IMAGENS EXISTENTES ================= --}}
                    <div class="mb-3">
                        <label>Fotos existentes</label>

                        <div class="row g-2">
                            @foreach($museu->fotos as $foto)
                                <div class="col-3">
                                    <img src="{{ asset('storage/museu/' . $foto->ficheiro) }}"
                                         class="img-fluid rounded shadow-sm"
                                         style="height:100px; object-fit:cover;">
                                </div>
                            @endforeach
                        </div>
                    </div>

                    {{-- ================= NOVAS FOTOS ================= --}}
                    <div class="mb-3">
                        <label>Adicionar novas fotos</label>
                        <div class="upload-box" id="upload-box-multiple">
                            <p>🖼 Clique ou arraste imagens</p>
                            <input type="file" name="fotos[]" id="fotos" hidden multiple>
                        </div>
                        <div id="preview-multiple" class="preview-grid"></div>
                    </div>

                    {{-- ================= FICHEIROS ================= --}}
                    <div class="mb-3">
                        <label>Documentos (PDF)</label>
                        <div class="upload-box">
                            <p>📄 Clique ou arraste ficheiros</p>
                            <input type="file" name="ficheiros[]" id="ficheiros" hidden multiple>
                        </div>
                        <div id="preview-ficheiros" class="preview-grid"></div>
                    </div>

                    {{-- ================= BOTÃO ================= --}}
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-success">
                            Atualizar
                        </button>
                    </div>

                </form>

            </div>
        </div>
    </div>

</div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {


            const formMagistrado = document.getElementById('form-magistrado');
            const formOutro = document.getElementById('form-outro');

            const foto = document.getElementById('foto');
            const fotos = document.getElementById('fotos');


            function toggleBySubcategoria() {
                const subcategoria = document.getElementById('item').value;

                if (subcategoria === 'Fotografias de magistrados') {

                    formMagistrado.style.display = 'block';
                    formOutro.style.display = 'none';

                    foto.setAttribute('required', true);
                    if (fotos) fotos.removeAttribute('required');

                } else if (subcategoria) {

                    formMagistrado.style.display = 'none';
                    formOutro.style.display = 'block';

                    fotos.setAttribute('required', true);
                    if (foto) foto.removeAttribute('required');

                } else {
                    formMagistrado.style.display = 'none';
                    formOutro.style.display = 'none';
                }
            }

            // Select dependente
            const dados = {
                "Documentos históricos": [
                    "Sentenças antigas",
                    "Processos judiciais históricos",
                    "Decretos e leis antigas",
                    "Registos de julgamentos importantes"
                ],

                "Objectos institucionais": [
                    "Carimbos oficiais",
                    "Selos do tribunal",
                    "Máquinas de escrever antigas",
                    "Equipamentos de arquivo e registo"
                ],

                "Trajes e insígnias judiciais": [
                    "Togas de juízes",
                    "Medalhas institucionais",
                    "Insígnias do tribunal"
                ],

                "Mobiliário histórico": [
                    "Mesas de julgamento",
                    "Cadeiras de juízes",
                    "Tribunas de tribunal"
                ],

                "Fotografias e registos visuais": [
                    "Fotografias de magistrados",
                    "Imagens de edifícios",
                    "Registos de eventos"
                ],

                "Objectos relacionados com processos históricos": [
                    "Provas de casos famosos",
                    "Objectos de julgamentos marcantes",
                    "Instrumentos de investigação"
                ],

                "Elementos arquitetónicos": [
                    "Placas inaugurais",
                    "Elementos antigos do edifício",
                    "Esculturas da justiça"
                ]
            };

            const categoria = document.getElementById('categoria');
            const item = document.getElementById('item');

            categoria.addEventListener('change', function() {

                item.innerHTML = '<option value="">Selecione</option>';

                if (dados[this.value]) {
                    dados[this.value].forEach(valor => {
                        const option = document.createElement('option');
                        option.value = valor;
                        option.textContent = valor;
                        item.appendChild(option);
                    });
                }

                toggleBySubcategoria(); // reset ao mudar categoria
            });

            item.addEventListener('change', toggleBySubcategoria);

            toggleBySubcategoria();


            // ================= UPLOAD =================
            function setupUpload(boxId, inputId, previewId, multiple = false) {

                const box = document.getElementById(boxId);
                const input = document.getElementById(inputId);
                const preview = document.getElementById(previewId);

                let filesList = [];

                box.addEventListener('click', () => input.click());

                box.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    box.classList.add('dragover');
                });

                box.addEventListener('dragleave', () => {
                    box.classList.remove('dragover');
                });

                box.addEventListener('drop', (e) => {
                    e.preventDefault();
                    box.classList.remove('dragover');
                    handleFiles(e.dataTransfer.files);
                });

                input.addEventListener('change', () => {
                    handleFiles(input.files);
                });

                function handleFiles(files) {
                    if (!multiple) {
                        filesList = [];
                        preview.innerHTML = '';
                    }

                    Array.from(files).forEach(file => {
                        filesList.push(file);

                        const reader = new FileReader();

                        reader.onload = function(e) {
                            const div = document.createElement('div');
                            div.classList.add('preview-item');

                            const img = document.createElement('img');
                            img.src = e.target.result;

                            const btn = document.createElement('button');
                            btn.innerHTML = '×';
                            btn.classList.add('remove-btn');

                            btn.onclick = () => {
                                div.remove();
                                filesList = filesList.filter(f => f !== file);
                                updateInput();
                            };

                            div.appendChild(img);
                            div.appendChild(btn);
                            preview.appendChild(div);
                        };

                        reader.readAsDataURL(file);
                    });

                    updateInput();
                }

                function updateInput() {
                    const dataTransfer = new DataTransfer();
                    filesList.forEach(file => dataTransfer.items.add(file));
                    input.files = dataTransfer.files;
                }
            }

            setupUpload('upload-box-single', 'foto', 'preview-single', false);
            setupUpload('upload-box-multiple', 'fotos', 'preview-multiple', true);

            const input = document.getElementById('ficheiros');
            const preview = document.getElementById('preview-ficheiros');
            const textArea = document.querySelector('label[for="ficheiros"] + p');

            let filesList = [];

            // Clique no texto ou preview abre seletor
            [preview, textArea].forEach(el => {
                el.addEventListener('click', () => input.click());

                el.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    el.classList.add('dragover');
                });

                el.addEventListener('dragleave', () => {
                    el.classList.remove('dragover');
                });

                el.addEventListener('drop', (e) => {
                    e.preventDefault();
                    el.classList.remove('dragover');
                    handleFiles(e.dataTransfer.files);
                });
            });

            // Quando seleciona ficheiros
            input.addEventListener('change', () => {
                handleFiles(input.files);
            });

            function handleFiles(files) {
                Array.from(files).forEach(file => {
                    filesList.push(file);

                    const div = document.createElement('div');
                    div.classList.add('preview-item');

                    const name = document.createElement('span');
                    name.textContent = "📄 " + file.name;

                    const btn = document.createElement('button');
                    btn.innerHTML = '×';
                    btn.classList.add('remove-btn');

                    btn.onclick = () => {
                        div.remove();
                        filesList = filesList.filter(f => f !== file);
                        updateInput();
                    };

                    div.appendChild(name);
                    div.appendChild(btn);
                    preview.appendChild(div);
                });

                updateInput();
            }

            function updateInput() {
                const dataTransfer = new DataTransfer();
                filesList.forEach(file => dataTransfer.items.add(file));
                input.files = dataTransfer.files;
            }

            
        });
    </script>
@endsection