@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span class="fw-bold">Nuevo Cliente</span>
            <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-sm">
                <i class="bi bi-arrow-left"></i> Regresar
            </a>
        </div>
        <div class="card-body">

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Por favor corrige los siguientes errores:</strong>
                    <ul class="mb-0 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form action="{{ route('clientes.store') }}" method="POST" id="formCliente">
                @csrf

                <div class="row g-3">

                    <div class="col-12"><h6 class="text-secondary border-bottom pb-1">Datos Fiscales</h6></div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">*RFC</label>
                        <input type="text" name="rfc" value="{{ old('rfc') }}"
                            class="form-control @error('rfc') is-invalid @enderror"
                            maxlength="30" style="text-transform:uppercase;" required>
                        @error('rfc')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-5">
                        <label class="form-label fw-bold">*Razón Social</label>
                        <input type="text" name="razon_social" value="{{ old('razon_social') }}"
                            class="form-control @error('razon_social') is-invalid @enderror"
                            maxlength="80" style="text-transform:uppercase;" required>
                        @error('razon_social')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold">*Régimen</label>
                        <select name="regimen" class="form-select @error('regimen') is-invalid @enderror" required>
                            <option value="">- Seleccionar -</option>
                            @foreach([
                                '601' => '601 - General de Ley Personas Morales',
                                '603' => '603 - Personas Morales con Fines no Lucrativos',
                                '610' => '610 - Residentes en el Extranjero sin Establecimiento Permanente en México',
                                '620' => '620 - Sociedades Cooperativas de Producción que optan por diferir sus ingresos',
                                '622' => '622 - Actividades Agrícolas, Ganaderas, Silvicolas y Pesqueras',
                                '623' => '623 - Opcional para Grupos de Sociedades',
                                '624' => '624 - Coordinados',
                                '626' => '626 - Régimen Simplificado de Confianza',
                            ] as $clave => $etiqueta)
                                <option value="{{ $clave }}" {{ old('regimen') == $clave ? 'selected' : '' }}>{{ $etiqueta }}</option>
                            @endforeach
                        </select>
                        @error('regimen')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Dirección</h6></div>

                    <div class="col-md-6">
                        <label class="form-label fw-bold">Calle</label>
                        <input type="text" name="calle" value="{{ old('calle') }}"
                            class="form-control @error('calle') is-invalid @enderror"
                            maxlength="100" style="text-transform:uppercase;">
                        @error('calle')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-2">
                        <label class="form-label fw-bold">Número</label>
                        <input type="text" name="numero" value="{{ old('numero') }}"
                            class="form-control @error('numero') is-invalid @enderror"
                            maxlength="5" style="text-transform:uppercase;">
                        @error('numero')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">Colonia</label>
                        <input type="text" name="colonia" value="{{ old('colonia') }}"
                            class="form-control @error('colonia') is-invalid @enderror"
                            maxlength="20" style="text-transform:uppercase;">
                        @error('colonia')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-2">
                        <label class="form-label fw-bold">*C.P.</label>
                        <input type="text" name="cp" value="{{ old('cp') }}"
                            class="form-control @error('cp') is-invalid @enderror"
                            maxlength="7" style="text-transform:uppercase;" required>
                        @error('cp')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto 1</h6></div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold">Nombre</label>
                        <input type="text" name="contacto1" value="{{ old('contacto1') }}"
                            class="form-control @error('contacto1') is-invalid @enderror"
                            maxlength="80" style="text-transform:uppercase;">
                        @error('contacto1')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">Teléfono</label>
                        <input type="text" name="contacto1_tel" value="{{ old('contacto1_tel') }}"
                            class="form-control @error('contacto1_tel') is-invalid @enderror"
                            maxlength="12" style="text-transform:uppercase;">
                        @error('contacto1_tel')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold">Email</label>
                        <input type="email" name="contacto1_email" value="{{ old('contacto1_email') }}"
                            class="form-control @error('contacto1_email') is-invalid @enderror"
                            maxlength="22" style="text-transform:lowercase;">
                        @error('contacto1_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12"><h6 class="text-secondary border-bottom pb-1 mt-2">Contacto 2</h6></div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold">Nombre</label>
                        <input type="text" name="contacto2" value="{{ old('contacto2') }}"
                            class="form-control @error('contacto2') is-invalid @enderror"
                            maxlength="80" style="text-transform:uppercase;">
                        @error('contacto2')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label fw-bold">Teléfono</label>
                        <input type="text" name="contacto2_tel" value="{{ old('contacto2_tel') }}"
                            class="form-control @error('contacto2_tel') is-invalid @enderror"
                            maxlength="12" style="text-transform:uppercase;">
                        @error('contacto2_tel')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-md-4">
                        <label class="form-label fw-bold">Email</label>
                        <input type="email" name="contacto2_email" value="{{ old('contacto2_email') }}"
                            class="form-control @error('contacto2_email') is-invalid @enderror"
                            maxlength="22" style="text-transform:lowercase;">
                        @error('contacto2_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                </div>

                <div class="row mt-4">
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
                        <a href="{{ route('clientes.index') }}" class="btn btn-secondary btn-sm">Cancelar</a>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
document.getElementById('formCliente').addEventListener('submit', function () {
    this.querySelectorAll('input[style*="uppercase"]').forEach(function (el) {
        el.value = el.value.toUpperCase();
    });
    this.querySelectorAll('input[style*="lowercase"]').forEach(function (el) {
        el.value = el.value.toLowerCase();
    });
});
</script>

@endsection

@extends('../layouts/partials/footer')