@extends('entidade.admin.layouts.layout')

@section('content')
<!-- jQuery UI e SweetAlert -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<main class="content">
    <div class="container-fluid p-0">
        <h1 class="h3 mb-3">Novo Protocolo</h1>
        <div class="card shadow-sm">
            <div class="card-header text-end">
                <a href="{{ route('protocolos.index', $tenant_id) }}" class="btn btn-outline-primary btn-sm w-100">Ver todos os Protocolos</a>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('protocolos.store', $tenant_id) }}" enctype="multipart/form-data" id="form-protocolo">
                    @csrf
                    <h5 class="bg-light p-2 border-start border-4 border-info mb-4">Dados Iniciais</h5>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label">Funcionário Responsável</label>
                            <input type="text" class="form-control" value="{{ Auth::user()->name }}" readonly style="background-color: #f9f9f9">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Setor de Origem</label>
                            <input type="text" class="form-control" value="{{ $usuario->setor->descricao }}" readonly style="background-color: #f9f9f9">
                        </div>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label for="referencia" class="form-label">Nº do Processo/Referência <span class="text-danger">*</span></label>
                            <input type="text" name="referencia" id="referencia" class="form-control @error('referencia') is-invalid @enderror" value="{{ old('referencia') }}" autocomplete="off">
                            @error('referencia') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="protocolo_tipo_id" class="form-label">Tipo do Protocolo <span class="text-danger">*</span></label>
                            <select class="form-select @error('protocolo_tipo_id') is-invalid @enderror" name="protocolo_tipo_id">
                                <option value="">Selecione...</option>
                                @foreach ($protocolotipos as $protocolotipo)
                                    <option value="{{ $protocolotipo->id }}" {{ old('protocolo_tipo_id') == $protocolotipo->id ? 'selected' : '' }}>
                                        {{ $protocolotipo->descricao }}
                                    </option>
                                @endforeach
                            </select>
                            @error('protocolo_tipo_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="conteudo" class="form-label">Conteúdo/Descrição <span class="text-danger">*</span></label>
                        <textarea name="conteudo" id="conteudo" rows="4" class="form-control @error('conteudo') is-invalid @enderror">{{ old('conteudo') }}</textarea>
                        @error('conteudo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <h5 class="bg-light p-2 border-start border-4 border-info mb-4">Primeira Tramitação</h5>
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Funcionário (Opcional)</label>
                            <input type="text" name="funcionario_tramitacao" id="funcionario_tramitacao" class="form-control" autocomplete="off">
                            <input type="hidden" name="funcionario_tramitacao_id" id="funcionario_tramitacao_id">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Setor</label>
                            <input type="text" class="form-control" id="funcionario_tramitacao_setor" disabled style="background-color: #f9f9f9">
                            <input type="hidden" name="funcionario_tramitacao_setor_id" id="funcionario_tramitacao_setor_id">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">E-mail</label>
                            <input type="email" class="form-control" id="funcionario_tramitacao_email" disabled style="background-color: #f9f9f9">
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="mensagem" class="form-label">Mensagem (Opcional)</label>
                        <textarea name="mensagem" id="mensagem" rows="3" class="form-control">{{ old('mensagem') }}</textarea>
                    </div>
                    <h5 class="bg-light p-2 border-start border-4 border-info mb-3">Anexos</h5>
                    <div class="mb-3">
                        <label class="form-label">Arquivos (máx 10Mb por arquivo)</label>
                        <input type="file" name="arquivos[]" id="arquivos" class="form-control" multiple>
                        <small class="text-muted">Formatos permitidos: pdf, doc, docx, ppt, pptx, xls, xlsx, png, jpg, jpeg, rtf</small>
                        @if ($errors->has('arquivos.*'))
                            <div class="alert alert-warning mt-2">{{ $errors->first('arquivos.*') }}</div>
                        @endif
                    </div>
                    <button type="submit" class="btn btn-success w-100">Gravar Protocolo</button>
                </form>
            </div>
        </div>
    </div>
</main>
<script>
    $(function() {
        // Número automático do processo
        const gerarNumeroProcesso = () => {
            const hoje = new Date();
            const data = hoje.getFullYear() + String(hoje.getMonth()+1).padStart(2, '0') + String(hoje.getDate()).padStart(2, '0');
            const aleatorio = Math.floor(10000 + Math.random() * 90000);
            return data + aleatorio;
        };
        const referenciaInput = $('#referencia');
        if (!referenciaInput.val()) referenciaInput.val(gerarNumeroProcesso());

        // Autocomplete de Funcionário
        $("#funcionario_tramitacao").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '{{ route('buscarFuncionarios', $tenant_id) }}',
                    type: 'GET',
                    data: { search: request.term },
                    success: function(res) {
                        const funcionarios = res.data.map(f => ({
                            label: f.name,
                            value: f.name,
                            id: f.id,
                            setor: f.setor.descricao,
                            setor_id: f.setor.id,
                            email: f.email
                        }));
                        response(funcionarios);
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                $("#funcionario_tramitacao_id").val(ui.item.id);
                $("#funcionario_tramitacao_setor").val(ui.item.setor);
                $("#funcionario_tramitacao_setor_id").val(ui.item.setor_id);
                $("#funcionario_tramitacao_email").val(ui.item.email);
            }
        });

        // SweetAlert no envio do formulário
        $("#form-protocolo").on("submit", function(e) {
            e.preventDefault();
            Swal.fire({
                title: 'Salvando...',
                text: 'Por favor, aguarde enquanto o protocolo é cadastrado.',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
            setTimeout(() => this.submit(), 400);
        });
    });
</script>
@endsection