@extends('layouts._includes.admin.Header')
@section('title', 'Editar Coordenador')
@section('content')
<div class="container">
    <h1>Editar Coordenador</h1>
    <form action="{{ route('admin.coordenadores.update', $coordenador->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label>Nome *</label>
            <input type="text" name="vc_nome" class="form-control" required value="{{ old('vc_nome', $coordenador->vc_nome) }}">
        </div>
        
        <div class="form-group">
            <label>Imagem {{ $coordenador->vc_imagem ? '(atual)' : '' }}</label>
            @if($coordenador->vc_imagem)
                <img src="{{ asset('storage/' . $coordenador->vc_imagem) }}" width="60" height="60" style="object-fit:cover;">
            @endif
            <input type="file" name="vc_imagem" class="form-control" accept="image/*">
        </div>
        <div class="form-group">
            <label>Descrição</label>
            <textarea name="txt_descricao" class="form-control">{{ old('txt_descricao', $coordenador->txt_descricao) }}</textarea>
        </div>
        <hr>
        <h4>Experiências Profissionais</h4>
        <div id="experiencias">
            @foreach($coordenador->experienciasProfissionais as $idx => $exp)
                <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 value='{{ $exp->vc_cargo }}'>
                    <input type='text' name='experiencias_profissionais[{{ $idx }}][vc_instituicao]' class='form-control mb-1' placeholder='Instituição' required value='{{ $exp->vc_instituicao }}'>
                    <input type='date' name='experiencias_profissionais[{{ $idx }}][dt_inicio]' class='form-control mb-1' placeholder='Início' required value='{{ $exp->dt_inicio }}'>
                    <input type='date' name='experiencias_profissionais[{{ $idx }}][dt_fim]' class='form-control mb-1' placeholder='Fim' value='{{ $exp->dt_fim }}'>
                    <input type='text' name='experiencias_profissionais[{{ $idx }}][vc_localizacao]' class='form-control mb-1' placeholder='Localização' value='{{ $exp->vc_localizacao }}'>
                    <button type='button' class='btn btn-danger btn-sm' onclick='this.parentNode.remove()'>Remover</button>
                </div>
            @endforeach
        </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">
            @foreach($coordenador->formacoesAcademicas as $idx => $form)
                <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 value='{{ $form->vc_instituicao }}'>
                    <input type='text' name='formacoes_academicas[{{ $idx }}][vc_curso]' class='form-control mb-1' placeholder='Curso' required value='{{ $form->vc_curso }}'>
                    <input type='text' name='formacoes_academicas[{{ $idx }}][vc_grau]' class='form-control mb-1' placeholder='Grau' required value='{{ $form->vc_grau }}'>
                    <input type='text' name='formacoes_academicas[{{ $idx }}][vc_pais]' class='form-control mb-1' placeholder='País' required value='{{ $form->vc_pais }}'>
                    <input type='text' name='formacoes_academicas[{{ $idx }}][vc_cidade]' class='form-control mb-1' placeholder='Cidade' required value='{{ $form->vc_cidade }}'>
                    <input type='date' name='formacoes_academicas[{{ $idx }}][dt_inicio]' class='form-control mb-1' placeholder='Início' required value='{{ $form->dt_inicio }}'>
                    <input type='date' name='formacoes_academicas[{{ $idx }}][dt_fim]' class='form-control mb-1' placeholder='Fim' value='{{ $form->dt_fim }}'>
                    <button type='button' class='btn btn-danger btn-sm' onclick='this.parentNode.remove()'>Remover</button>
                </div>
            @endforeach
        </div>
        <button type="button" class="btn btn-secondary mb-2" onclick="addFormacao()">Adicionar Formação</button>
        <hr>
        <h4>Campos Profissionais</h4>
        <div id="campos">
            @foreach($coordenador->camposProfissionais as $idx => $campo)
                <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 value='{{ $campo->vc_area }}'>
                    <button type='button' class='btn btn-danger btn-sm' onclick='this.parentNode.remove()'>Remover</button>
                </div>
            @endforeach
        </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