@extends('layouts.pmar.app')

@section('title', 'Cadastro de Músico - Credenciamento de Músicos')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title text-center">Cadastro de Músico</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('paginas.credenciamento-musico.cadastroMusicoStore') }}" enctype="multipart/form-data">
                        @csrf
                        
                        <!-- Dados Pessoais -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">Dados Pessoais</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="nome_completo">Nome Completo *</label>
                                            <input type="text" name="nome_completo" id="nome_completo" class="form-control @error('nome_completo') is-invalid @enderror" 
                                                   value="{{ old('nome_completo') }}" required>
                                            @error('nome_completo')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="nome_artistico">Nome Artístico</label>
                                            <input type="text" name="nome_artistico" id="nome_artistico" class="form-control @error('nome_artistico') is-invalid @enderror" 
                                                   value="{{ old('nome_artistico') }}">
                                            @error('nome_artistico')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="nome_mae">Nome da Mãe *</label>
                                            <input type="text" name="nome_mae" id="nome_mae" class="form-control @error('nome_mae') is-invalid @enderror" 
                                                   value="{{ old('nome_mae') }}" required>
                                            @error('nome_mae')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="nome_pai">Nome do Pai</label>
                                            <input type="text" name="nome_pai" id="nome_pai" class="form-control @error('nome_pai') is-invalid @enderror" 
                                                   value="{{ old('nome_pai') }}">
                                            @error('nome_pai')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="dt_nascimento">Data de Nascimento *</label>
                                            <input type="date" name="dt_nascimento" id="dt_nascimento" class="form-control @error('dt_nascimento') is-invalid @enderror" 
                                                   value="{{ old('dt_nascimento') }}" required>
                                            @error('dt_nascimento')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="rg">RG *</label>
                                            <input type="text" name="rg" id="rg" class="form-control @error('rg') is-invalid @enderror" 
                                                   value="{{ old('rg') }}" required>
                                            @error('rg')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <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>
                                </div>
                            </div>
                        </div>

                        <!-- Dados de Contato -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">Dados de Contato</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="telefone_contato">Telefone de Contato *</label>
                                            <input type="text" name="telefone_contato" id="telefone_contato" class="form-control @error('telefone_contato') is-invalid @enderror" 
                                                   placeholder="(00) 00000-0000" value="{{ old('telefone_contato') }}" required>
                                            @error('telefone_contato')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email_contato">E-mail de Contato *</label>
                                            <input type="email" name="email_contato" id="email_contato" class="form-control @error('email_contato') is-invalid @enderror" 
                                                   value="{{ old('email_contato') }}" required>
                                            @error('email_contato')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="endereco_residencial">Endereço Residencial *</label>
                                            <input type="text" name="endereco_residencial" id="endereco_residencial" class="form-control @error('endereco_residencial') is-invalid @enderror" 
                                                   value="{{ old('endereco_residencial') }}" required>
                                            @error('endereco_residencial')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="bairro">Bairro *</label>
                                            <input type="text" name="bairro" id="bairro" class="form-control @error('bairro') is-invalid @enderror" 
                                                   value="{{ old('bairro') }}" required>
                                            @error('bairro')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="cidade">Cidade *</label>
                                            <input type="text" name="cidade" id="cidade" class="form-control @error('cidade') is-invalid @enderror" 
                                                   value="{{ old('cidade') }}" required>
                                            @error('cidade')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="uf">UF *</label>
                                            <select name="uf" id="uf" class="form-control @error('uf') is-invalid @enderror" required>
                                                <option value="">Selecione...</option>
                                                <option value="RJ" {{ old('uf') == 'RJ' ? 'selected' : '' }}>RJ</option>
                                                <option value="SP" {{ old('uf') == 'SP' ? 'selected' : '' }}>SP</option>
                                                <option value="MG" {{ old('uf') == 'MG' ? 'selected' : '' }}>MG</option>
                                            </select>
                                            @error('uf')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="cep">CEP *</label>
                                            <input type="text" name="cep" id="cep" class="form-control @error('cep') is-invalid @enderror" 
                                                   placeholder="00000-000" value="{{ old('cep') }}" required>
                                            @error('cep')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Dados Musicais -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">Dados Musicais</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="instrumentos_musicais">Instrumentos Musicais *</label>
                                            <textarea name="instrumentos_musicais" id="instrumentos_musicais" class="form-control @error('instrumentos_musicais') is-invalid @enderror" 
                                                      rows="3" required>{{ old('instrumentos_musicais') }}</textarea>
                                            @error('instrumentos_musicais')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="experiencia_profissional">Experiência Profissional *</label>
                                            <textarea name="experiencia_profissional" id="experiencia_profissional" class="form-control @error('experiencia_profissional') is-invalid @enderror" 
                                                      rows="4" required>{{ old('experiencia_profissional') }}</textarea>
                                            @error('experiencia_profissional')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="portfolio_url">URL do Portfólio</label>
                                            <input type="url" name="portfolio_url" id="portfolio_url" class="form-control @error('portfolio_url') is-invalid @enderror" 
                                                   value="{{ old('portfolio_url') }}">
                                            @error('portfolio_url')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="redes_sociais">Redes Sociais</label>
                                            <input type="text" name="redes_sociais" id="redes_sociais" class="form-control @error('redes_sociais') is-invalid @enderror" 
                                                   value="{{ old('redes_sociais') }}">
                                            @error('redes_sociais')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="observacoes">Observações</label>
                                            <textarea name="observacoes" id="observacoes" class="form-control @error('observacoes') is-invalid @enderror" 
                                                      rows="3">{{ old('observacoes') }}</textarea>
                                            @error('observacoes')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Dados do Usuário -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">Dados do Usuário</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="phoneNumber">Telefone *</label>
                                            <input type="text" name="phoneNumber" id="phoneNumber" class="form-control @error('phoneNumber') is-invalid @enderror" 
                                                   placeholder="(00) 00000-0000" value="{{ old('phoneNumber') }}" required>
                                            @error('phoneNumber')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email">E-mail *</label>
                                            <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" 
                                                   value="{{ old('email') }}" required>
                                            @error('email')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="password">Senha *</label>
                                            <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" 
                                                   required>
                                            @error('password')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="password_confirmation">Confirmar Senha *</label>
                                            <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Documentos -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">Documentos</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="fileFoto">Foto 3x4 *</label>
                                            <input type="file" name="fileFoto" id="fileFoto" class="form-control @error('fileFoto') is-invalid @enderror" 
                                                   accept="image/jpeg,image/png" required>
                                            @error('fileFoto')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="fileRG">Cópia do RG *</label>
                                            <input type="file" name="fileRG" id="fileRG" class="form-control @error('fileRG') is-invalid @enderror" 
                                                   accept=".pdf,.jpeg,.jpg,.png" required>
                                            @error('fileRG')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="fileCPF">Cópia do CPF *</label>
                                            <input type="file" name="fileCPF" id="fileCPF" class="form-control @error('fileCPF') is-invalid @enderror" 
                                                   accept=".pdf,.jpeg,.jpg,.png" required>
                                            @error('fileCPF')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="fileComprovanteResidencia">Comprovante de Residência *</label>
                                            <input type="file" name="fileComprovanteResidencia" id="fileComprovanteResidencia" class="form-control @error('fileComprovanteResidencia') is-invalid @enderror" 
                                                   accept=".pdf,.jpeg,.jpg,.png" required>
                                            @error('fileComprovanteResidencia')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="filePortfolio">Portfólio</label>
                                            <input type="file" name="filePortfolio" id="filePortfolio" class="form-control @error('filePortfolio') is-invalid @enderror" 
                                                   accept=".pdf,.jpeg,.jpg,.png">
                                            @error('filePortfolio')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Endereço -->
                        <div class="card mb-3">
                            <div class="card-header">
                                <h5 class="card-title">Endereço</h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="domicilio">Tipo de Domicílio *</label>
                                            <select name="domicilio" id="domicilio" class="form-control @error('domicilio') is-invalid @enderror" required>
                                                <option value="">Selecione...</option>
                                                <option value="Casa" {{ old('domicilio') == 'Casa' ? 'selected' : '' }}>Casa</option>
                                                <option value="Apartamento" {{ old('domicilio') == 'Apartamento' ? 'selected' : '' }}>Apartamento</option>
                                                <option value="Comercial" {{ old('domicilio') == 'Comercial' ? 'selected' : '' }}>Comercial</option>
                                            </select>
                                            @error('domicilio')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="logradouro">Logradouro *</label>
                                            <input type="text" name="logradouro" id="logradouro" class="form-control @error('logradouro') is-invalid @enderror" 
                                                   value="{{ old('logradouro') }}" required>
                                            @error('logradouro')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="numero">Número</label>
                                            <input type="text" name="numero" id="numero" class="form-control @error('numero') is-invalid @enderror" 
                                                   value="{{ old('numero') }}">
                                            @error('numero')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="complemento">Complemento</label>
                                            <input type="text" name="complemento" id="complemento" class="form-control @error('complemento') is-invalid @enderror" 
                                                   value="{{ old('complemento') }}">
                                            @error('complemento')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="latitude">Latitude</label>
                                            <input type="number" step="any" name="latitude" id="latitude" class="form-control @error('latitude') is-invalid @enderror" 
                                                   value="{{ old('latitude') }}">
                                            @error('latitude')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="longitude">Longitude</label>
                                            <input type="number" step="any" name="longitude" id="longitude" class="form-control @error('longitude') is-invalid @enderror" 
                                                   value="{{ old('longitude') }}">
                                            @error('longitude')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="fixed">Endereço Fixo *</label>
                                            <select name="fixed" id="fixed" class="form-control @error('fixed') is-invalid @enderror" required>
                                                <option value="">Selecione...</option>
                                                <option value="1" {{ old('fixed') == '1' ? 'selected' : '' }}>Sim</option>
                                                <option value="0" {{ old('fixed') == '0' ? 'selected' : '' }}>Não</option>
                                            </select>
                                            @error('fixed')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="comprovante">Comprovante de Residência</label>
                                            <input type="file" name="comprovante" id="comprovante" class="form-control @error('comprovante') is-invalid @enderror" 
                                                   accept=".pdf,.jpeg,.jpg,.png">
                                            @error('comprovante')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-success btn-block">
                                <i class="fas fa-save"></i> Cadastrar
                            </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;
    });

    // Máscara para telefone
    const phoneInputs = document.querySelectorAll('#phoneNumber, #telefone_contato');
    phoneInputs.forEach(input => {
        input.addEventListener('input', function(e) {
            let value = e.target.value.replace(/\D/g, '');
            value = value.replace(/(\d{2})(\d)/, '($1) $2');
            value = value.replace(/(\d{5})(\d)/, '$1-$2');
            e.target.value = value;
        });
    });

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