@extends('layouts.tabler')
@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
<style>
.iti {
    width: 100%;
    display: block;
}
</style>

@endsection
@section('content')
    <div class="page-wrapper">

        <div class="d-flex justify-content-center mt-5">
            <div class="card card-md" style="border-radius:30px;border-color: #3478f6;width: 80%;max-width: 25rem;">

                <div class="card-body">

                    <h3><strong>Editar Perfil</strong></h3>
                    <form method="POST" action="{{ route('users.store') }}">
                        @csrf
                        <input type="hidden" name="id" value="{{$user->id}}">
                        <div class="row mb-3">
                            <span class="avatar avatar-xl rounded-circle"
                                style="background-image: url({{ asset('img/perfil.png') }})"></span>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="first_name" type="text"
                                    class="form-control @error('first_name') is-invalid @enderror rounded-4"
                                    name="first_name" value="{{$user->first_name}}" required
                                    autocomplete="first_name" autofocus
                                    placeholder="Nombre" style="border-color: #3478f6;">

                                @error('first_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="last_name" type="text"
                                    class="form-control @error('last_name') is-invalid @enderror rounded-4"
                                    name="last_name" value="{{$user->last_name}}" required
                                    autocomplete="last_name" autofocus placeholder="Apellido" style="border-color: #3478f6;">

                                @error('last_name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="email" type="hidden"
                                    class="form-control @error('email') is-invalid @enderror rounded-4" name="email"
                                    value="{{$user->email}}" required autocomplete="email"
                                    placeholder="Correo Electrónico">
                                <input type="email"
                                    class="form-control @error('email') is-invalid @enderror rounded-4" name="email"
                                    value="{{$user->email}}" placeholder="Correo Electrónico" disabled style="border-color: #3478f6;">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="phone_number" type="text"
                                    class="form-control @error('phone_number') is-invalid @enderror rounded-4"
                                    name="phone_number" value="{{$user->phone_number}}" required
                                    autocomplete="phone_number" autofocus
                                    placeholder="Teléfono" style="border-color: #3478f6;">

                                @error('phone_number')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="neighborhood" type="text"
                                    class="form-control @error('neighborhood') is-invalid @enderror rounded-4"
                                    name="neighborhood" value="{{$user->neighborhood}}" required
                                    autocomplete="neighborhood" autofocus
                                    placeholder="Barrio" style="border-color: #3478f6;">

                                @error('neighborhood')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="dni" type="text"
                                    class="form-control @error('dni') is-invalid @enderror rounded-4" name="dni"
                                    value="{{$user->dni}}" required autocomplete="dni"
                                    autofocus  placeholder="DNI/CUIT" style="border-color: #3478f6;">

                                @error('dni')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <input id="address" type="text"
                                    class="form-control @error('address') is-invalid @enderror rounded-4"
                                    name="address" value="{{$user->address}}" required
                                    autocomplete="address" autofocus
                                    placeholder="Dirección" style="border-color: #3478f6;">

                                @error('address')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-0">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary rounded-4"
                                    style="width:100%;border-color: #3478f6;">
                                    GUARDAR CAMBIOS
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $("#btn-editar").click(function() {
            alert("The paragraph was clicked.");
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
    <script>
        const input = document.querySelector("#phone_number");
        window.intlTelInput(input, {
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
            autoInsertDialCode: true,
            nationalMode : false,
            initialCountry: "AR"
        });
    </script>
@endsection