@extends('layouts.signed')
@section('title', 'Editar usuarios')
@section('content')

<div class="row d-flex justify-content-center mt-5">
    <div class="col-md-4 col-sm-6">
        @foreach($users as $user)
        <form method="POST" action="{{ route('updateUsers', $user->id) }}">
            @csrf
            
            <!-- CardID -->
            @if($user->document_type == 'id card')
            <div class="mt-4">
                <input autofocus id="card_id" onkeypress="onlyNumber(event)" class="form-control" type="tel" require value="{{$user->card_id}}" maxlength="11" placeholder="Ingrese la cédula"/>
            </div>
            @elseif($user->document_type == 'passport')
            <!-- Passport -->
            <div class="mt-4">
                <input autofocus id="passport" onkeypress="alphanumeric(event)" class="form-control" type="text" require value="{{$user->card_id}}" placeholder="Ingrese el pasaporte"/>
            </div>
            @endif
            <!-- Name -->
            <div class="mt-3">
                <input value="{{ $user->first_name }}" id="name" class="form-control" type=" text" name="first_name" placeholder="Nombre/s" required autofocus />
            </div>

            <!-- Last name -->
            <div class="mt-3">
                <input value="{{ $user->last_name }}" id="last_name" class="form-control" type=" text" name="last_name" placeholder="Apellido/s" required autofocus />
            </div>

            <div class="mt-3">
                <select style="color: gray;" name="profile_id" class="form-select">
                    <option selected hidden disabled>Escoja un perfil</option>
                    @foreach($profiles as $profile)
                    <option @if($user->profile_id == $profile->id) ? selected : '' @endif value="{{ $profile->id }}">{{ $profile->name }}</option>
                    @endforeach
                </select>
            </div>
            @if($user->center_id)
            <div class="mt-3">
                <select style="color: gray;" name="center_id" class="form-select">
                    <option selected hidden disabled>Escoja un centro (Opcional)</option>
                    @foreach($centers as $center)
                    <option @if($user->center_id == $center->id) ? selected : '' @endif value="{{ $center->id }}">{{ $center->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            @if($user->gender)
            <!-- Gender -->
            <div class="mt-3">
                <span class="text-gray-700">Género</span>
                <div class="mt-2">
                    <label for="male" class="inline-flex items-center">
                        <input @if($user->gender) ? checked : '' @endif 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 @if($user->gender) ? checked : '' @endif 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 @if($user->gender) ? checked : '' @endif type="radio" name="gender" id="other" value="other">
                        <span class="ml-2">Otro</span>
                    </label>
                </div>
            </div>
            @endif
            <!-- Phone number -->
            <div class="mt-3">
                <input value="{{ $user->phone }}" type="tel" onkeypress="onlyNumber(event)" class="form-control"" name=" phone" id="" maxlength="10" placeholder="Número de contacto" />
            </div>

            <!-- State -->
            <div class="mt-3">
                <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 @if($user->state_id == $state->id) ? selected : '' @endif value="{{ $state->id }}">{{ $state->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Email Address -->
            <div class="mt-3">
                <input value="{{ $user->email }}" id="email" class="form-control"" type=" email" name="email" placeholder="Email" required />
            </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>
        @endforeach
        @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');

    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