@extends('layouts.signed')
@section('title', 'Crear usuarios')
@section('content')
<div class="row d-flex justify-content-center mt-5">
    <div class="col-md-4 col-sm-6">
        <form method="POST" action="{{ route('storeUsers') }}">
            @csrf

            <!-- Document type -->

            <select style="color: gray;" onchange="changeIdentification()" name="document_type" id="document_type" class="form-select">
                <option selected disabled hidden>Seleccione el tipo de documento</option>
                <option value="id card">Cédula</option>
                <option value="passport">Pasaporte</option>
            </select>

            <!-- CardID -->
            <div class="mt-4">
                <x-input autofocus id="card_id" onkeypress="onlyNumber(event)" class="form-control" type="tel" require :value="old('card_id')" maxlength="11" placeholder="Ingrese la cédula"></x-input>
            </div>

            <!-- Passport -->
            <div class="mt-4">
                <x-input autofocus id="passport" onkeypress="alphanumeric(event)" class="form-control" type="text" require :value="old('card_id')" placeholder="Ingrese el pasaporte"></x-input>
            </div>

            <!-- Name -->
            <div class="mt-4">
                <input id="name" class="form-control" type=" text" name="first_name" :value="old('first_name')" placeholder="Nombre/s" required autofocus />
            </div>

            <!-- Last name -->
            <div class="mt-4">
                <input id="last_name" class="form-control" type=" text" name="last_name" :value="old('last_name')" placeholder="Apellido/s" required autofocus />
            </div>

            <div class="mt-4">
                <select style="color: gray;" name="profile_id" class="form-select">
                    <option selected hidden disabled>Escoja un perfil</option>
                    @foreach($profiles as $profile)
                    <option value="{{ $profile->id }}">{{ $profile->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="mt-4">
                <select style="color: gray;" name="center_id" class="form-select">
                    <option selected hidden disabled>Escoja un centro (Opcional)</option>
                    @foreach($centers as $center)
                    <option value="{{ $center->id }}">{{ $center->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Gender -->
            <div class="mt-4">
                <span class="text-gray-700">Género</span>
                <div class="mt-2">
                    <label for="male" class="inline-flex items-center">
                        <input type="radio" name="gender" id="male" value="masculino">
                        <span class="ml-2">Masculino</span>
                    </label>
                    <label for="feminine" class="inline-flex items-center ml-2">
                        <input type="radio" name="gender" id="female" value="femenino">
                        <span class="ml-2">Femenino</span>
                    </label>
                    <label for="other" class="inline-flex items-center ml-2">
                        <input type="radio" name="gender" id="other" value="other">
                        <span class="ml-2">Otro</span>
                    </label>
                </div>
            </div>

            <!-- Phone number -->
            <div class="mt-4">
                <input type="tel" onkeypress="onlyNumber(event)" class="form-control"" name=" phone" id="" maxlength="10" placeholder="Número de contacto" />
            </div>

            <!-- State -->
            <div class="mt-4">
                <select style="color: gray;" name="state_id" class="form-select" id="grid-state">
                    <option disabled selected hidden>Elija su provincia</option>
                    @foreach($states as $state)
                    <option value="{{ $state->id }}">{{ $state->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Email Address -->
            <div class="mt-4">
                <input id="email" class="form-control" type=" email" name="email" :value="old('email')" placeholder="Email" required />
            </div>

            <!-- Password -->
            <div class="mt-4">
                <input type="password" id="password" class="form-control" name="password" required autocomplete="new-password" placeholder="Password" />
            </div>

            <!-- Confirm Password -->
            <div class="mt-4">
                <input type="password" id="password_confirmation" class="form-control" name="password_confirmation" required placeholder="Confirm password" />
            </div>

            <div class="d-flex btn-group container text-center mt-3">
                <button type="submit" class="btn btn-pink">Actualizar</button>
                <a href="{{ route('showUsers') }}" class="btn btn-pink">Cancelar</a>
            </div>
        </form>
        @if($errors->any())
        <div class="alert alert-warning mt-2" role="alert">
            <p>Por favor, corriga estos errores: </p>
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection
@section('script')
<script>
    
    let cardId = document.getElementById('card_id');
    let passport = document.getElementById('passport');

    cardId.style.display = "none";
    passport.style.display = 'none';

    function changeIdentification() {
        let documentType = document.getElementById('document_type').value;

        console.log(documentType);

        if (documentType == 'id card') {

            cardId.style.display = "block";
            cardId.name = "card_id";
            passport.style.display = 'none';
            passport.name = "";

        } else if (documentType == 'passport') {
            passport.style.display = 'block';
            passport.name = "card_id";
            cardId.style.display = "none";
            cardId.name = "";
        }
    }

    function onlyNumber(event) {
        let character = String.fromCharCode(event.which);

        if (!(/[0-9]/.test(character))) {
            event.preventDefault();
        }
    }

    function alphanumeric(event) {
        let character = String.fromCharCode(event.which);

        if (!(/[A-Za-z0-9]/.test(character))) {
            event.preventDefault();
        }
    }
    
</script>
@endsection