@extends('template')

@section('conteudo')

    {{-- Breadcrumb --}}
    <nav class="mb-3" style="font-size:0.82rem;">
        <span class="text-muted" style="cursor:pointer;" onclick="carregarConteudo('{{ route('colaboradores.list') }}')">Colaboradores</span>
        <span class="text-muted mx-1">/</span>
        <span style="color:var(--primary); font-weight:600;">Novo Colaborador</span>
    </nav>

    {{-- Cabecalho --}}
    <div class="d-flex align-items-start justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-person-plus-fill" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Novo Colaborador</h4>
                <span class="text-muted" style="font-size:0.82rem;">Preencha os dados do colaborador</span>
            </div>
        </div>
        <button type="button" class="btn btn-sm rounded-3 btn-outline-castelo"
                onclick="carregarConteudo('{{ route('colaboradores.list') }}')">
            <i class="bi bi-arrow-left me-1"></i> Voltar
        </button>
    </div>

    <form id="form-novo-colaborador" novalidate>
        @csrf

        {{-- Formulario --}}
        <div class="form-container">

            {{-- Secao: Dados do Colaborador --}}
            <div class="form-secao">
                <div class="form-secao-titulo">
                    <i class="bi bi-person me-2"></i>Dados do Colaborador
                </div>

                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Codigo</label>
                        <input type="text" class="form-control form-control-sm rounded-3 bg-light"
                               name="dados[codigo]" value="{{ $proximoCodigo }}" readonly>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">
                            Nome <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[nome]" required
                               placeholder="Nome completo">
                        <div class="invalid-feedback">Informe o nome.</div>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">
                            Cargo
                        </label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[cargo]" value="Educador(a)"
                               placeholder="Educador(a)">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">
                            CPF <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[cpf]" required
                               data-mascara="cpf"
                               placeholder="000.000.000-00" maxlength="14">
                        <div class="invalid-feedback">Informe o CPF.</div>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">CNPJ</label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[cnpj]"
                               data-mascara="cnpj"
                               placeholder="00.000.000/0000-00" maxlength="18">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Telefone</label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[telefone]"
                               data-mascara="telefone"
                               placeholder="(00) 00000-0000" maxlength="16">
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">
                            Status <span class="text-danger">*</span>
                        </label>
                        <select class="form-select form-select-sm rounded-3" name="dados[status]" required>
                            <option value="ativo" selected>Ativo</option>
                            <option value="inativo">Inativo</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">E-mail</label>
                        <input type="email" class="form-control form-control-sm rounded-3"
                               name="dados[email]"
                               placeholder="colaborador@email.com">
                        <div class="invalid-feedback">Informe um e-mail valido.</div>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold" style="font-size:0.82rem;">Chave PIX</label>
                        <input type="text" class="form-control form-control-sm rounded-3"
                               name="dados[chave_pix]"
                               placeholder="CPF, e-mail, celular ou chave aleatoria">
                    </div>
                </div>
            </div>

        </div>{{-- /.form-container --}}

        {{-- Acoes --}}
        <div class="d-flex justify-content-end gap-2">
            <button type="button" class="btn btn-sm btn-outline-secondary rounded-3"
                    onclick="carregarConteudo('{{ route('colaboradores.list') }}')">
                <i class="bi bi-x-circle me-1"></i> Cancelar
            </button>
            <button type="button" id="btn-salvar-colaborador" class="btn btn-sm rounded-3 text-white"
                    style="background:var(--primary);"
                    onclick="submeterForm('/colaboradores/salvar', 'form-novo-colaborador', 'btn-salvar-colaborador')">
                <i class="bi bi-floppy me-1"></i> Salvar
            </button>
        </div>

    </form>

    <script src="{{ asset('js/colaboradores.js') }}"></script>

@endsection