@extends('layouts.publicador.novo_padrao')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="card shadow-sm">
        <div class="card-body">
            <h3 class="card-title mb-4 text-center">
                {{ isset($contrato) ? 'Editar Contrato de Suporte' : 'Cadastrar Novo Contrato de Suporte' }}
            </h3>

            <form
                action="{{ isset($contrato) ? route('publicador.contratos_suporte.update', $contrato->id) : route('publicador.contratos_suporte.store') }}"
                method="POST" enctype="multipart/form-data" id="contratoForm">
                @csrf

                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="titulo" class="form-label">Objeto *</label>
                        <input type="text" class="form-control @error('titulo') is-invalid @enderror" id="titulo"
                            name="titulo" value="{{ old('titulo', $contrato->titulo ?? '') }}" required maxlength="25">
                        @error('titulo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-4">
                        <label for="contrato" class="form-label">Contrato *</label>
                        <input type="text" class="form-control @error('contrato') is-invalid @enderror" id="contrato"
                            name="contrato" value="{{ old('contrato', $contrato->contrato ?? '') }}" maxlength="20">
                        @error('contrato')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-4">
                        <label for="condicao" class="form-label">Condição do Contrato</label>
                        <input type="text" class="form-control @error('condicao_contrato') is-invalid @enderror"
                            id="condicao_contrato" name="condicao_contrato"
                            value="{{ old('condicao_contrato', $contrato->condicao_contrato ?? '') }}" maxlength="20">
                        @error('condicao_contrato')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label for="contatos" class="form-label">Contatos</label>
                        <input type="text" class="form-control @error('contatos') is-invalid @enderror" id="contatos"
                            name="contatos" value="{{ old('contatos', $contrato->contatos ?? '') }}" maxlength="255">
                        @error('contatos')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                            name="email" value="{{ old('email', $contrato->email ?? '') }}" maxlength="255">
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="telefone" class="form-label">Telefone</label>
                        <input type="text" class="form-control @error('telefone') is-invalid @enderror" id="telefone"
                            name="telefone" value="{{ old('telefone', $contrato->telefone ?? '') }}" maxlength="20">
                        @error('telefone')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="responsavel" class="form-label">Responsável</label>
                        <input type="text" class="form-control @error('responsavel') is-invalid @enderror"
                            id="responsavel" name="responsavel"
                            value="{{ old('responsavel', $contrato->responsavel ?? '') }}" maxlength="25">
                        @error('responsavel')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="data_inicio" class="form-label">Data de Início</label>
                        <input type="date" class="form-control @error('data_inicio') is-invalid @enderror"
                            id="data_inicio" name="data_inicio"
                            value="{{ old('data_inicio', isset($contrato->data_inicio) ? $contrato->data_inicio->format('Y-m-d') : '') }}">
                        @error('data_inicio')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6">
                        <label for="data_fim" class="form-label">Data de Fim</label>
                        <input type="date" class="form-control @error('data_fim') is-invalid @enderror" id="data_fim"
                            name="data_fim"
                            value="{{ old('data_fim', isset($contrato->data_fim) ? $contrato->data_fim->format('Y-m-d') : '') }}">
                        @error('data_fim')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>


                    <div class="col-md-12 mb-3">
                        <label for="anexos" class="form-label">Anexos</label>
                        <div id="dropArea" class="drop-area">
                            <p>Arraste e solte arquivos aqui ou</p>
                            <input type="file" id="fileElem" multiple
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png" style="display:none">
                            <button type="button" id="fileSelect" class="btn btn-outline-primary">Selecione os
                                arquivos</button>
                        </div>
                        <small class="form-text text-muted">Tamanho máximo: 100MB. Formatos aceitos: PDF, DOC, DOCX,
                            XLS, XLSX, JPG, JPEG, PNG. Máximo 5 arquivos.</small>
                        <div id="fileList" class="mt-3">
                            <div id="newFileSection" style="display: none;">
                                <h5>Arquivos para upload:</h5>
                                <div id="newFileList"></div>
                            </div>
                            <div id="existingFileSection" style="display: none;">
                                <h5 class="mt-3">Arquivos existentes:</h5>
                                <div id="existingFileList"></div>
                            </div>
                        </div>
                    </div>


                    <div class="col-12">
                        <label for="obs" class="form-label">Observações</label>
                        <textarea class="form-control @error('obs') is-invalid @enderror" id="obs" name="obs" rows="3">{{ old('obs', $contrato->obs ?? '') }}</textarea>
                        @error('obs')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="mt-4 text-center">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas {{ isset($contrato) ? 'fa-save' : 'fa-plus-circle' }} me-2"></i>
                        {{ isset($contrato) ? 'Atualizar' : 'Cadastrar' }}
                    </button>
                    <a href="{{ route('publicador.contratos_suporte.index') }}" class="btn btn-secondary ms-2">
                        <i class="fas fa-times-circle me-2"></i>Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>

    <style>
        i.fas.fa-times-circle.me-2 {
            padding-right: 5px;
        }

        .drop-area {
            border: 2px dashed #007bff;
            border-radius: 8px;
            background: #f8f9fa;
            min-height: 150px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .drop-area.drag-over {
            background-color: #e9ecef;
        }

        .file-preview {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }

        .file-preview .file-icon {
            font-size: 24px;
            margin-right: 10px;
        }

        .file-preview .file-name {
            flex-grow: 1;
        }

        .file-preview .file-actions {
            display: flex;
            align-items: center;
        }

        .file-preview .file-actions button {
            margin-left: 5px;
        }

        .drop-area {
            border: 2px dashed #007bff;
            border-radius: 8px;
            background: #f8f9fa;
            min-height: 150px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .drop-area.drag-over {
            background-color: #e9ecef;
        }

        .file-preview {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }

        .file-preview .file-icon {
            font-size: 24px;
            margin-right: 10px;
        }

        .file-preview .file-name {
            flex-grow: 1;
        }

        .file-preview .file-actions {
            display: flex;
            align-items: center;
        }

        .file-preview .file-actions button {
            margin-left: 5px;
        }

        .file-preview.file-not-found {
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
        }

        .custom-file-upload {
            /* display: inline-block; */
            cursor: pointer;
        }

        .file-preview {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }

        .file-preview .file-icon {
            font-size: 24px;
            margin-right: 10px;
        }

        .file-preview .file-name {
            flex-grow: 1;
        }

        .file-preview .remove-file {
            cursor: pointer;
            color: #dc3545;
        }

        .card {
            border-radius: 15px;
        }

        .form-control,
        .btn {
            border-radius: 8px;
        }

        .dropzone {
            border: 2px dashed #007bff;
            border-radius: 8px;
            background: #f8f9fa;
        }

        button.btn.btn-sm.btn-outline-danger.remove-file:hover {
            color: white;
        }

        .btn-primary,
        .btn-secondary {
            padding: 8px 20px;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const dataInicio = document.getElementById('data_inicio');
            const dataFim = document.getElementById('data_fim');

            function validarDatas(campoAlterado) {
                if (dataInicio.value && dataFim.value) {
                    const inicio = new Date(dataInicio.value);
                    const fim = new Date(dataFim.value);

                    if (inicio > fim) {
                        Swal.fire({
                            title: 'Data Inválida',
                            text: campoAlterado === 'inicio' ?
                                'A data de início não pode ser posterior à data de fim.' :
                                'A data de fim não pode ser anterior à data de início.',
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        });
                        // Limpa o campo que foi alterado
                        campoAlterado === 'inicio' ? dataInicio.value = '' : dataFim.value = '';
                        return false;
                    }
                }
                return true;
            }

            dataInicio.addEventListener('change', function() {
                validarDatas('inicio');
            });

            dataFim.addEventListener('change', function() {
                validarDatas('fim');
            });

            // Validação no envio do formulário
            document.getElementById('contratoForm').addEventListener('submit', function(e) {
                if (!validarDatas('submit')) {
                    e.preventDefault(); // Impede o envio do formulário se as datas forem inválidas
                }
            });
        });

        $(document).ready(function() {
            var SPMaskBehavior = function(val) {
                    return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
                },
                spOptions = {
                    onKeyPress: function(val, e, field, options) {
                        field.mask(SPMaskBehavior.apply({}, arguments), options);
                    }
                };

            $('#telefone').mask(SPMaskBehavior, spOptions);
        });

        document.addEventListener('DOMContentLoaded', function() {
            var fileElem = document.getElementById("fileElem");
            var fileSelect = document.getElementById("fileSelect");
            var dropArea = document.getElementById("dropArea");
            var newFileList = document.getElementById("newFileList");
            var existingFileList = document.getElementById("existingFileList");
            var newFileSection = document.getElementById("newFileSection");
            var existingFileSection = document.getElementById("existingFileSection");
            var maxFiles = 5;
            var maxFileSize = 100 * 1024 * 1024; // 100MB
            var maxTotalSize = 100 * 1024 * 1024; // 100MB
            var selectedFiles = [];
            var totalSize = 0;

            fileSelect.addEventListener("click", function(e) {
                if (fileElem) {
                    fileElem.click();
                }
            });

            fileElem.addEventListener("change", handleFiles);

            dropArea.addEventListener("dragover", function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropArea.classList.add('drag-over');
            });

            dropArea.addEventListener("dragleave", function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropArea.classList.remove('drag-over');
            });

            dropArea.addEventListener("drop", function(e) {
                e.preventDefault();
                e.stopPropagation();
                dropArea.classList.remove('drag-over');
                var dt = e.dataTransfer;
                var files = dt.files;
                handleFiles(files);
            });

            function handleFiles(files) {
                files = files.length ? files : this.files;
                ([...files]).forEach(previewFile);
                updateNewFileList();
            }

            function previewFile(file) {
                if (file.size > maxFileSize || totalSize + file.size > maxTotalSize || selectedFiles.length >=
                    maxFiles) {
                    alert("Arquivo muito grande ou limite de arquivos atingido.");
                    return;
                }
                if (!selectedFiles.some(f => f.name === file.name)) {
                    selectedFiles.push(file);
                    totalSize += file.size;
                }
            }

            function updateNewFileList() {
                newFileList.innerHTML = '';
                selectedFiles.forEach(function(file, index) {
                    var filePreview = createFilePreview(file.name, formatFileSize(file.size), index, 'new');
                    newFileList.appendChild(filePreview);
                });

                var totalSizeDisplay = document.createElement('div');
                totalSizeDisplay.className = 'total-size mt-2';
                totalSizeDisplay.textContent = `Tamanho total: ${formatFileSize(totalSize)}`;
                newFileList.appendChild(totalSizeDisplay);

                newFileSection.style.display = selectedFiles.length > 0 ? 'block' : 'none';

                updateHiddenInput();
            }

            function createFilePreview(name, size, index, type) {
                var filePreview = document.createElement('div');
                filePreview.className = 'file-preview d-flex align-items-center bg-light p-2 mb-2 rounded';
                filePreview.innerHTML = `
                    <span class="fa fa-file mr-2"></span>
                    <span class="file-name flex-grow-1">${name} ${size ? `(${size})` : ''}</span>
                    <div class="file-actions">
                        ${type === 'new' || type === 'existing' ? `
                                                <button type="button" class="btn btn-sm btn-outline-info view-file"
                                                    onclick="viewFile('${type}', ${index})" title="Visualizar">
                                                    <i class="fa fa-eye"></i>
                                                </button>` : ''}

                            <button class="btn btn-sm btn-outline-danger remove-file"
                                onclick="removeFile('${type}', ${index}, event)" title="Excluir">
                                <i class="fa fa-trash"></i>
                            </button>
                    </div>
                `;
                return filePreview;
            }

            window.removeFile = function(type, index, event) {
                // Previne o comportamento padrão do botão
                event.preventDefault();

                if (type === 'new') {
                    totalSize -= selectedFiles[index].size;
                    selectedFiles.splice(index, 1);
                    updateNewFileList();
                } else if (type === 'existing') {
                    Swal.fire({
                        title: 'Tem certeza?',
                        text: "Você não poderá reverter isso!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Sim, exclua!',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            var filePreview = existingFileList.children[index];
                            var filePath = filePreview.dataset.filepath;
                            var contratoId = {{ $contrato->id ?? 'null' }};

                            fetch('{{ route('publicador.contratos_suporte.destroy_anexo', ['id' => ':id']) }}'
                                    .replace(':id', contratoId), {
                                        method: 'DELETE',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': document.querySelector(
                                                'meta[name="csrf-token"]').getAttribute('content')
                                        },
                                        body: JSON.stringify({
                                            anexo_path: filePath,
                                            contrato_id: contratoId
                                        })
                                    })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        Swal.fire(
                                            'Excluído!',
                                            data.message,
                                            'success'
                                        );
                                        existingFileList.removeChild(filePreview);
                                        if (existingFileList.children.length === 0) {
                                            existingFileSection.style.display = 'none';
                                        }
                                    } else {
                                        Swal.fire(
                                            'Erro!',
                                            data.message,
                                            'error'
                                        );
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    Swal.fire(
                                        'Erro!',
                                        'Ocorreu um erro ao excluir o arquivo.',
                                        'error'
                                    );
                                });
                        }
                    });
                }
            };

            window.viewFile = function(type, index) {
                if (type === 'new') {
                    var file = selectedFiles[index];
                    var fileURL = URL.createObjectURL(file);
                    window.open(fileURL, '_blank');
                } else if (type === 'existing') {
                    var filePath = existingFileList.children[index].dataset.filepath;
                    window.open(`{{ url('storage') }}/${filePath}`, '_blank');
                }
            };

            function formatFileSize(bytes) {
                if (bytes === 0) return '0 Bytes';
                var k = 1024;
                var sizes = ['Bytes', 'KB', 'MB', 'GB'];
                var i = Math.floor(Math.log(bytes) / Math.log(k));
                return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
            }

            function updateHiddenInput() {
                // Remover inputs hidden anteriores
                document.querySelectorAll('input[name^="anexos["]').forEach(el => el.remove());

                // Criar novos inputs hidden para cada arquivo
                selectedFiles.forEach(function(file, index) {
                    var input = document.createElement('input');
                    input.type = 'file';
                    input.name = `anexos[${index}]`;
                    input.style.display = 'none';

                    // Criar um novo objeto FileList contendo apenas este arquivo
                    var dataTransfer = new DataTransfer();
                    dataTransfer.items.add(file);
                    input.files = dataTransfer.files;

                    document.getElementById('contratoForm').appendChild(input);
                });
            }

            // Carregar anexos existentes
            @if (isset($contrato) && $contrato->anexos)
                @foreach ($contrato->anexos as $index => $anexo)
                    var filePreview = createFilePreview('{{ basename($anexo) }}', '', {{ $index }},
                        'existing');
                    filePreview.dataset.filepath = '{{ $anexo }}';
                    existingFileList.appendChild(filePreview);
                @endforeach
                existingFileSection.style.display = '{{ count($contrato->anexos) > 0 ? 'block' : 'none' }}';
            @endif
        });
    </script>
@endsection