@extends('layouts.pmar.app')

@section('title', 'Verificar CPF - Credenciamento de Músicos')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title text-center">Verificar CPF</h3>
                </div>
                <div class="card-body">
                    <p class="text-center mb-4">Digite seu CPF para verificar se já possui cadastro ou para iniciar um novo cadastro.</p>
                    
                    <form method="POST" action="{{ route('paginas.credenciamento-musico.verified') }}">
                        @csrf
                        
                        <div class="form-group">
                            <label for="cpf">CPF *</label>
                            <input type="text" name="cpf" id="cpf" class="form-control @error('cpf') is-invalid @enderror" 
                                   placeholder="000.000.000-00" value="{{ old('cpf') }}" required>
                            @error('cpf')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block">
                                <i class="fas fa-search"></i> Verificar
                            </button>
                        </div>
                        
                        <div class="text-center">
                            <a href="{{ route('paginas.credenciamento-musico.login') }}" class="btn btn-link">
                                Já tenho cadastro - Fazer Login
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Máscara para CPF
    const cpfInput = document.getElementById('cpf');
    cpfInput.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        value = value.replace(/(\d{3})(\d)/, '$1.$2');
        value = value.replace(/(\d{3})(\d)/, '$1.$2');
        value = value.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
        e.target.value = value;
    });
});
</script>
@endsection