@extends('profile.profile')

@section('profile_content')
    <div class="profile-form">
        <p class='font-bold'>Datos personales</p>
        <form method="POST" action="{{ route('profile.updatePersonalData', $user->id) }}">
            @csrf
            @method('PUT')
            <div class="form-group">
                <div class='form-label'>
                    <span>C.I.</span>
                </div>
                <div class='form-input'>
                    <input
                        name="ci"
                        type="text"
                        placeholder="C.I."
                        class=""
                        value="{{ $user->ci }}"
                        minlength="7"
                        maxlength="20"
                        autocomplete="off"
                        required>

                    @error('ci')
                        <div class="form-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <div class='form-label'>
                    <span>Nombre</span>
                </div>
                <div class='form-input'>
                    <input
                        name="name"
                        type="text"
                        placeholder="Nombre(s)"
                        class=""
                        value="{{ $user->name }}"
                        minlength="3"
                        maxlength="32"
                        autocomplete="off"
                        required>

                    @error('name')
                        <div class="form-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <div class='form-label'>
                    <span>Apellido</span>
                </div>
                <div class='form-input'>
                    <input
                        name="surname"
                        type="text"
                        placeholder="Apellido(s)"
                        class=""
                        value="{{ $user->surname }}" 
                        minlength="3"
                        maxlength="32"
                        autocomplete="off"
                        required>

                    @error('surname')
                        <div class="form-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <div class='form-label'>
                    <span>Fecha de nacimiento</span>
                </div>
                <div class='form-input'>
                    <input
                        name="birthdate"
                        id="datepicker"
                        type="text"
                        placeholder="Fecha de nacimiento"
                        class=""
                        value="{{ $user->birthdate ? $user->birthdate->format('d/m/Y') : null }}"
                        minlength="3"
                        maxlength="10"
                        autocomplete="off">

                    @error('birthdate')
                        <div class="form-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <div class='form-label'>
                    <span>Formación académica</span>
                </div>
                <div class='form-input'>
                    <input
                        name="academic_formation"
                        type="text"
                        placeholder="Formación académica"
                        class=""
                        value="{{ $user->academic_formation }}"
                        maxlength="100"
                        autocomplete="off">

                    @error('academic_formation')
                        <div class="form-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <div class='form-label'>
                    <span>Teléfono de contacto</span>
                </div>
                <div class='form-input'>
                    <input
                        name="phone"
                        type="text"
                        placeholder="Teléfono de contacto"
                        class=""
                        value="{{ $user->phone }}"
                        maxlength="100"
                        autocomplete="off">

                    @error('phone')
                        <div class="form-error">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
            </div>

            <div class="form-group">
                <div class="form-label">
                </div>
                <div class="form-input">
                    <button type="submit" class="btn btn-primary btn-submit">
                        Guardar
                    </button>
                </div>
            </div>
        </form>
    </div>
    <script defer>
        window.onload = () => {
            const element = document.getElementById('datepicker');
            const dp = new Datepicker(element, { buttonClass: 'btn', language: 'es' }); 
        }
    </script>
@endsection