@extends('layouts._includes.admin.Header')
@section('title', 'Novo Coordenador')
@section('content')
<div class="container">
    <h1>Novo Coordenador</h1>
    <form action="{{ route('admin.coordenadores.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="form-group">
            <label>Nome *</label>
            <input type="text" name="vc_nome" class="form-control" required value="{{ old('vc_nome') }}">
        </div>
        
        <div class="form-group">
            <label>Imagem *</label>
            <input type="file" name="vc_imagem" class="form-control" required accept="image/*">
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea name="txt_descricao" class="form-control">{{ old('txt_descricao') }}</textarea>
        </div>
        <hr>
        <h4>Experiências Profissionais</h4>
        <div id="experiencias">
            <!-- Campos dinâmicos JS -->
        </div>
        <button type="button" class="btn btn-secondary mb-2" onclick="addExperiencia()">Adicionar Experiência</button>
        <hr>
        <h4>Formações Acadêmicas</h4>
        <div id="formacoes">
            <!-- Campos dinâmicos JS -->
        </div>
        <button type="button" class="btn btn-secondary mb-2" onclick="addFormacao()">Adicionar Formação</button>
        <hr>
        <h4>Campos Profissionais</h4>
        <div id="campos">
            <!-- Campos dinâmicos JS -->
        </div>
        <button type="button" class="btn btn-secondary mb-2" onclick="addCampo()">Adicionar Campo Profissional</button>
        <hr>
        <button type="submit" class="btn btn-success">Salvar</button>
        <a href="{{ route('admin.coordenadores.index') }}" class="btn btn-light">Cancelar</a>
    </form>
</div>
<script>
function addExperiencia() {
    let idx = document.querySelectorAll('#experiencias .exp-item').length;
    let html = `<div class='exp-item border p-2 mb-2'>
        <input type='text' name='experiencias_profissionais[${idx}][vc_cargo]' class='form-control mb-1' placeholder='Cargo' required>
        <input type='text' name='experiencias_profissionais[${idx}][vc_instituicao]' class='form-control mb-1' placeholder='Instituição' required>
        <input type='date' name='experiencias_profissionais[${idx}][dt_inicio]' class='form-control mb-1' placeholder='Início' required>
        <input type='date' name='experiencias_profissionais[${idx}][dt_fim]' class='form-control mb-1' placeholder='Fim'>
        <input type='text' name='experiencias_profissionais[${idx}][vc_localizacao]' class='form-control mb-1' placeholder='Localização'>
        <button type='button' class='btn btn-danger btn-sm' onclick='this.parentNode.remove()'>Remover</button>
    </div>`;
    document.getElementById('experiencias').insertAdjacentHTML('beforeend', html);
}
function addFormacao() {
    let idx = document.querySelectorAll('#formacoes .form-item').length;
    let html = `<div class='form-item border p-2 mb-2'>
        <input type='text' name='formacoes_academicas[${idx}][vc_instituicao]' class='form-control mb-1' placeholder='Instituição' required>
        <input type='text' name='formacoes_academicas[${idx}][vc_curso]' class='form-control mb-1' placeholder='Curso' required>
        <input type='text' name='formacoes_academicas[${idx}][vc_grau]' class='form-control mb-1' placeholder='Grau' required>
        <input type='text' name='formacoes_academicas[${idx}][vc_pais]' class='form-control mb-1' placeholder='País' required>
        <input type='text' name='formacoes_academicas[${idx}][vc_cidade]' class='form-control mb-1' placeholder='Cidade' required>
        <input type='date' name='formacoes_academicas[${idx}][dt_inicio]' class='form-control mb-1' placeholder='Início' required>
        <input type='date' name='formacoes_academicas[${idx}][dt_fim]' class='form-control mb-1' placeholder='Fim'>
        <button type='button' class='btn btn-danger btn-sm' onclick='this.parentNode.remove()'>Remover</button>
    </div>`;
    document.getElementById('formacoes').insertAdjacentHTML('beforeend', html);
}
function addCampo() {
    let idx = document.querySelectorAll('#campos .campo-item').length;
    let html = `<div class='campo-item border p-2 mb-2'>
        <input type='text' name='campos_profissionais[${idx}][vc_area]' class='form-control mb-1' placeholder='Área Profissional' required>
        <button type='button' class='btn btn-danger btn-sm' onclick='this.parentNode.remove()'>Remover</button>
    </div>`;
    document.getElementById('campos').insertAdjacentHTML('beforeend', html);
}
</script>
@endsection