@extends('layouts.app')

@push('styles')

    <style>
        [data-title]:hover:after {
            opacity: 1;
            transition: all 0.1s ease 0.5s;
            visibility: visible;
        }
        [data-title]:after {
            content: attr(data-title);
            background-color: #333;
            color: #fff;
            font-size: 14px;
            /*font-family: Raleway;*/
            position: absolute;
            padding: 3px 20px;
            bottom: -1.6em;
            left: 100%;
            white-space: nowrap;
            box-shadow: 1px 1px 3px #222222;
            opacity: 0;
            border: 1px solid #111111;
            z-index: 99999;
            visibility: hidden;
            border-radius: 6px;
        }
        [data-title] {
            position: relative;
        }
        .color-degrate-button-soleado {
            background: linear-gradient(180deg, #FEE140 3.81%, #FA709A 96.85%)!important;
        }
    </style>
    <link href="{{asset('assets/css/rol_gerente/login.css')}}" rel="stylesheet" type="text/css"/>
    <style>
        .rounded-full {
            border-radius: 9999px;
        }

        .w-16 {
            width: 4rem;
        }

        .h-16 {
            height: 4rem;
        }
    </style>
@endpush

@section('content')

    <div class="container-fluid mt-2 mb-2">

        <!-- Begin page -->
        <div class="wrapper">

            @include('partials.detached-left-sidebar-login')

            <div class="content-page">


                <div class="content">


                    <div class="container">


                        <div class="row justify-content-center">

                            <div class="col-lg-5 mt-3">

                                <div class="row">
                                    <div class="card">
                                        <div class="card-body">
                                            {{--                                        <div class="row justify-content-center">
                                                                                        <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 36px;line-height: 100%;text-align: center;color: #001C8F;" class="mt-0" title="Number of Customers">Inicio de Sesion</h2>
                                                                                    </div>--}}
                                            <div class="row justify-content-center">
                                                <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 18px;line-height: 100%;text-align: left;color: #001C8F;"
                                                    class="mt-0">Información de Perfil</h2>
                                            </div>

                                            <div class="row justify-content-center">
                                                <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 14px;line-height: 100%;color:  #94969A;text-align: left"
                                                    class="mt-0">{{--Update your account's profile information and email
                                                    address.--}}Actualicé su imágen y nombre de perfil ó dirección de correo electrónico de su cuenta.</h2>
                                            </div>

                                            <form id="formEditFotoNombreCorreo">
                                                @csrf

                                                <div class="row mb-3">

                                                    <div class="col-md-12">

                                                        <div class="text-center">
                                                            {{--<img class="h-16 w-16 rounded-full object-cover  mt-1"
                                                                 height="300" width="300"
                                                                 --}}{{--src="http://127.0.0.1:3030/images/avatar-1.jpg">--}}{{--
                                                                 src="{{asset('img/users/'.\Illuminate\Support\Facades\Auth::user()->photo)}}">--}}
                                                            <img class="h-16 w-16 rounded-full object-cover  mt-1"
                                                                 id="imageUserEditProfile"
                                                                 height="300" width="300" src="{{ is_null(\Illuminate\Support\Facades\Auth::user()->photo)  ? asset('assets/images/users/avatar-1.jpg') : asset('img/users/'.\Illuminate\Support\Facades\Auth::user()->photo) }}" alt="user-image" class="rounded-circle">
                                                            <span class="mdi mdi-information-outline font-24 text-info" style="position: relative; left: 0%; top: 0%;" data-title="Selecciona un archivo para actualizar tu imágen de perfil"></span>
                                                            <br>
                                                            {{--<input type="file" class="mt-2 inline-flex items-center px-2 py-1 bg-gray-400 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-500 active:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition ease-in-out duration-150" style="border-radius: 50px!important;">--}}


                                                            <div class="row m-0 p-0" data-title="Selecciona un archivo para actualizar tu imágen de perfil" title="">
                                                                <input style="border-radius: 50px!important; padding-right: 1.5rem" type="file"
                                                                   class="mt-2 form-control @error('email') is-invalid @enderror"
                                                                   {{--value="{{ old('email') }}"--}}
                                                                   autocomplete="foto" autofocus name="foto">
                                                            </div>

                                                        </div>

                                                        {{--<input style="border-radius: 50px!important;" placeholder="Correo electronico" id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>--}}

                                                            @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 style="border-radius: 50px!important;"
                                                               placeholder="{{\Illuminate\Support\Facades\Auth::user()->name}}"  id="name" type="text"
                                                               class="form-control @error('email') is-invalid @enderror"
                                                               name="name" value="{{ old('name') }}"
                                                               autocomplete="name" autofocus>

                                                        @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 style="border-radius: 50px!important;"
                                                               placeholder="{{\Illuminate\Support\Facades\Auth::user()->email}}" id="email" type="Email"
                                                               class="form-control @error('password') is-invalid @enderror"
                                                               name="email" autocomplete="email">

                                                        @error('password')
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $message }}</strong>
                                                        </span>
                                                        @enderror
                                                    </div>
                                                </div>


                                                <div class="row mb-1">
                                                    <div class="col-md-12">
                                                        <button type="submit"
                                                                id="buttonFormEditFotoNombreCorreo"
                                                                class="btn button-selector-column-filter-graphic">
                                                            {{ __('Actualizar') }}
                                                        </button>
                                                    </div>
                                                    <small id="AlertSucessFormEditFotoNombreCorreo" class="text-success font-14 text-center pt-2" style="display: none">Actualizado Correctamente</small>
                                                </div>




                                            </form>



                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="card">
                                        <div class="card-body">
                                            {{--                                        <div class="row justify-content-center">
                                                                                        <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 36px;line-height: 100%;text-align: center;color: #001C8F;" class="mt-0" title="Number of Customers">Inicio de Sesion</h2>
                                                                                    </div>--}}

                                            <div class="row justify-content-center">
                                                <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 18px;line-height: 100%;text-align: left;color: #001C8F;"
                                                    class="mt-0" title="Number of Customers">Actualizar Contraseña</h2>
                                            </div>

                                            <div class="row justify-content-center">
                                                <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 14px;line-height: 100%;text-align: left;color:  #94969A;"
                                                    class="mt-0" title="Number of Customers">{{--Ensure your account is
                                                    using a long, random password to stay secure.--}} Asegúrese de que su cuenta esté usando una contraseña larga y aleatoria para mantenerse seguro.</h2>
                                            </div>

                                            <form id="formEditPassword">
                                                @csrf

                                                <div class="row mb-3">

                                                    <div class="col-md-12">
                                                        <input style="border-radius: 50px!important;"
                                                               placeholder="Contraseña actual" id="current-password" type="password"
                                                               class="form-control @error('email') is-invalid @enderror"
                                                               name="current-password" {{--value="{{ old('email') }}"--}} required
                                                               autocomplete="current-password" autofocus>

                                                        @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 style="border-radius: 50px!important;"
                                                               placeholder="Nueva Contraseña" id="new-password" type="password"
                                                               class="form-control @error('password') is-invalid @enderror"
                                                               name="new-password" required autocomplete="new-password">

                                                        @error('password')
                                                        <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <div class="col-md-12">
                                                        <input style="border-radius: 50px!important;"
                                                               placeholder="Confirmar Contraseña" id="password_confirmation"
                                                               type="password"
                                                               class="form-control @error('password') is-invalid @enderror"
                                                               name="password_confirmation" required autocomplete="current-password">

                                                        @error('password')
                                                        <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <button type="submit"
                                                                class="btn button-selector-column-filter-graphic">
                                                            {{ __('Actualizar') }}
                                                        </button>
                                                    </div>
                                                    <small id="AlertSucessFormEditPassword" class="text-success font-14 text-center pt-2" style="display: none">Actualizado Correctamente</small>
                                                </div>
                                            </form>

                                        </div>
                                    </div>
                                </div>

                                {{--<div class="row">
                                    <div class="card">
                                        <div class="card-body">
                                            --}}{{--                                        <div class="row justify-content-center">
                                                                                        <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 36px;line-height: 100%;text-align: center;color: #001C8F;" class="mt-0" title="Number of Customers">Inicio de Sesion</h2>
                                                                                    </div>--}}{{--

                                            <div class="row justify-content-center">
                                                <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 18px;line-height: 100%;text-align: left;color: #001C8F;"
                                                    class="mt-0" title="Number of Customers">Delete Account</h2>
                                            </div>

                                            <div class="row justify-content-center">
                                                <h2 style="width: 100%;font-style: normal;font-weight: 700;font-size: 14px;line-height: 100%;text-align: left;color:  #94969A;"
                                                    class="mt-0" title="Number of Customers">Once your account is
                                                    deleted, all of its resources and data will be permanently deleted.
                                                    Before deleting your account, please download any data or
                                                    information that you wish to retain.</h2>
                                            </div>


                                        </div>
                                    </div>
                                </div>--}}


                            </div>

                            <div class="col-lg-7 mt-5">
                                <div class="row justify-content-center ">
                                    <b
                                        style="width: 100%;font-style: normal;font-weight: 700;font-size: 45px;line-height: 100%;text-align: center;color: #ffffff;"
                                        class="mt-0" title="Inicio de Sesion">Edición de Perfil



                                    </b>

                                    <div class="col-md-7 mt-4">
                                        <a href="/"
                                           id="buttonFormEditFotoNombreCorreo"
                                           class="btn button-selector-column-filter-graphic color-degrate-button-soleado">

                                            {{ __('Regresar') }}
                                        </a>
                                    </div>

                                </div>
                                <br>
                                <br>
                                <div class="row justify-content-center mt-5">
                                    <lottie-player src="{{asset('assets/lottie/kangoobot.json')}}"
                                                   background="transparent" speed="1" style="width: 100%" loop
                                                   autoplay></lottie-player>
                                </div>

                            </div>


                        </div>

                    </div>

                </div>
                <!-- End Content -->

            </div>
            <!-- content-page -->

        </div> <!-- end wrapper-->
    </div>
    <!-- END Container -->
@endsection

@push('scripts')
    <!-- lottie-player.js -->
    <script src="{{asset('assets/lottie/lottie-player.js')}}"></script>
    <!-- lottie-player.js-->

    <!-- index Kangoobot -->
    <script src="{{asset('/js/kangoobot/Profile/index.js')}}" type="module"></script>
    <!-- index Kangoobot end -->
@endpush