@section('title', 'Registrarse')
<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo class=" fill-current text-gray-500" />
            </a>
        </x-slot>

        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />

        <form method="POST" class="flex px-5 max-w-lg flex-wrap mx-3 p-5 my-4 justify-center rounded-lg border-gray-100 border-2"
            action="{{ route('register') }}">
            @csrf

            <!-- Profile ID -->

            <input type="hidden" name="profile_id" value="3">

            <!-- Document type -->

            <select onchange="changeIdentification()" name="document_type" id="document_type"
                class="block appearance-none w-full border  border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                <option selected disabled hidden>Seleccione el tipo de documento</option>
                <option value="id card">Cédula</option>
                <option value="passport">Pasaporte</option>
            </select>

            <!-- CardID / Passport -->
            <div class="mt-4 flex w-full flex-wrap set-wrap  justify-center">
                <x-input autofocus id="card_id" onkeypress="onlyNumber(event)"
                    class="block mt-1 w-full md:max-2xl:w-1/2" type="tel" require :value="old('card_id')" maxlength="11"
                    placeholder="Cédula"></x-input>
                <x-input autofocus id="passport" onkeypress="alphanumeric(event)"
                    class="block mt-1 w-full md:max-2xl:w-1/2" type="text" require :value="old('card_id')"
                    placeholder="Pasaporte"></x-input>
            </div>


            <!-- Name -->
            <div class="flex w-full  gap-x-4 flex-wrap set-wrap  justify-center">
                <x-input id="name" class="block mt-1 w-full md:max-2xl:w-1/2" type="text" name="first_name"
                    :value="old('first_name')" placeholder="Nombre/s" required />
                <x-input id="last_name" class="block mt-1 w-full md:max-2xl:w-1/2" type="text" name="last_name"
                    :value="old('last_name')" placeholder="Apellido/s" required />
            </div>

            <!-- Blood type -->
            <!-- <div class="block mt-4">
                <select style="color:gray;" class="w-full h-10 pl-3 pr-6 text-base border rounded-lg appearance-none focus:shadow-outline" name="blood_type" id="" placeholder="Tipo de sangre">
                    <option selected hidden>Tipo de sangre</option>
                    <option value="O-">O negativo</option>
                    <option value="O+">O positivo</option>
                    <option value="A-">A negativo</option>
                    <option value="A+">A positivo</option>
                    <option value="B-">B negativo</option>
                    <option value="B+">B positivo</option>
                    <option value="AB-">AB negativo</option>
                    <option value="AB+">AB positivo</option>
                </select>
            </div> -->

            <!-- Phone number -->
            <div class=" flex gap-x-4 mt-1 w-full flex-wrap  set-wrap justify-center">
                <x-input type="tel" onkeypress="onlyNumber(event)" class="block mt-1 w-full md:max-2xl:w-1/2"
                    name="phone" id="" maxlength="11" placeholder="Número de contacto" />
                <select name="state_id"
                    class="px-3 py-2 w-full mt-1 md:max-2xl:w-1/2 text-gray-400 rounded-lg border-2 border-gray-200 focus:ring-none focus:outline-red-300"
                    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=" gap-x-4 mt-1 w-full flex flex-wrap set-wrap justify-center">
                <x-input id="email" class="block mt-1 w-full md:max-2xl:w-1/2" type="email" name="email"
                    :value="old('email')" placeholder="Email" required />
                <x-input id="password" class="block mt-1 w-full md:max-2xl:w-1/2" type="password" name="password"
                    required autocomplete="new-password" placeholder="Password" />
            </div>

            <!-- Confirm Password -->
            <div class=" mt-1 flex w-full flex-wrap set-wrap justify-center">
                <x-input id="password_confirmation" class="block mt-1 w-full " type="password"
                    name="password_confirmation" required placeholder="Confirm password" />
            </div>
            <!-- Gender -->
            <div class=" w-full flex-nowrap set-wrap ">
                <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>

            <div class="flex items-center justify-end  mt-4 ">
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                    {{ __('¿Ya tienes una cuenta?') }}
                </a>

                <x-button class="ml-4">
                    {{ __('Registrarse') }}
                </x-button>
            </div>
        </form>
    </x-auth-card>
</x-guest-layout>
<script>
    // document.addEventListener("DOMContentLoaded", function() {

    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>