@extends('layouts.admin.theme')

@section('title', env('APP_NAME') . ' :: Cadastro - Identificador de Usuários')

@section('content')
    <div class="card border-0 shadow-sm" id="gerador-create">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="my-3"><i class="fas fa-id-card me-2"></i>Cadastro de Identificador de Usuários</h5>
        </div>

        <div class="row">
            <div class="my-4" style="padding-left: 2rem;">
                <button onclick="window.location.href='{{ route('admin.gerador-id.index') }}'" class="btn btn-secondary">
                    <i class="fa-solid fa-reply me-1"></i> Voltar
                </button>
            </div>
        </div>

        <form action="{{ route('admin.gerador-id.store') }}" method="POST" enctype="multipart/form-data"
            class="needs-validation" novalidate>
            <div class="card-body">
                @include('errors.messageFlash')
                @csrf

                <div class="mb-4">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-primary rounded-circle py-1 px-2 me-3">
                            <i class="fas fa-user text-white"></i>
                        </div>
                        <h5 class="mb-0 text-primary">Identificação</h5>
                    </div>
                    <hr class="mt-0 mb-4">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-floating">
                                <input type="text" class="form-control @error('nome_completo') is-invalid @enderror"
                                    name="nome_completo" id="nome_completo" value="{{ old('nome_completo') }}"
                                    placeholder=" " required>
                                <label for="nome_completo" class="fw-semibold small">
                                    <i class="fas fa-user me-1 text-muted"></i> Nome Completo <span
                                        class="text-danger">*</span>
                                </label>
                                @error('nome_completo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <div class="form-floating">
                                <input type="text" class="form-control @error('cpf') is-invalid @enderror" name="cpf"
                                    id="cpf" value="{{ old('cpf') }}" placeholder="" oninput="javascript:aplicarMascaraCPF(this)"
                                   autocomplete="off" required>
                                <label for="cpf" class="fw-semibold small">
                                    <i class="fas fa-id-card me-1 text-muted"></i> CPF <span class="text-danger">*</span>
                                </label>
                                @error('cpf')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <div class="form-floating">
                                <input type="text" class="form-control @error('doc_sei') is-invalid @enderror"
                                    name="doc_sei" id="doc_sei" value="{{ old('doc_sei') }}" placeholder=" " required>
                                <label for="doc_sei" class="fw-semibold small">
                                    <i class="fas fa-file-alt me-1 text-muted"></i> N° Documento SEI <span
                                        class="text-danger">*</span>
                                </label>
                                @error('doc_sei')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                    </div>

                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control @error('ramal') is-invalid @enderror"
                                    name="ramal" id="ramal" value="{{ old('ramal') }}" placeholder=" ">
                                <label for="ramal" class="fw-semibold small">
                                    <i class="fas fa-phone-office me-1 text-muted"></i> Ramal
                                </label>
                                @error('ramal')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control @error('telefone') is-invalid @enderror"
                                    name="telefone" id="telefone" value="{{ old('telefone') }}" placeholder=" ">
                                <label for="telefone" class="fw-semibold small">
                                    <i class="fas fa-mobile-alt me-1 text-muted"></i> Telefone
                                </label>
                                @error('telefone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12 mt-3">
                            <div class="form-floating">
                                <input type="text" class="form-control @error('link') is-invalid @enderror"
                                    name="link" id="link" value="{{ old('link') }}" placeholder=" ">
                                <label for="telefone" class="fw-semibold small">
                                    <i class="fa-solid fa-link"></i> Link
                                </label>
                                @error('link')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-white border-top-0 py-3">
                    <div class="d-flex justify-content-between">
                        <button type="reset" class="btn btn-outline-secondary">
                            <i class="fas fa-eraser me-1"></i> Limpar
                        </button>
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fas fa-save me-1"></i> Cadastrar Identificação
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <script>
        $(document).ready(function() {
            $('#cpf').mask('000.000.000-00', {
                reverse: false
            });

            $('#telefone').mask('(00) 0000-00009').on('keyup', function() {
                if ($(this).val().replace(/\D/g, '').length === 11) {
                    $(this).mask('(00) 00000-0009');
                } else {
                    $(this).mask('(00) 0000-00009');
                }
            });
        });
    </script>

@endsection