@extends('adminlte::page')

@section('title', 'Perfil')

@section('content_header')
    <h1>Dashboard</h1>
@endsection


@section('content')
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-md-3">
                {{-- Image and the button for change data --}}
                <div class="text-center">
                    @if (file_exists('uploads/profile/' . Auth::guard('admin')->user()->profile_image) ==
                            Auth::guard('admin')->user()->profile_image)
                        <img src="{{ asset('uploads/profile/' . $admin->profile_image) }}" alt="Perfil"
                            class="img-fluid mb-3">
                    @else
                        <img src="{{ Asset('assets/carrito.png') }}" alt="Perfil" class="img-fluid mb-3" alt="Sin imagen">
                    @endif
                    <button class="btn btn-primary toogleForm mb-5">Modificar Datos</button>
                </div>
            </div>
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <h2>{{ $admin->display_name }}</h2>
                    </div>
                    <div class="card-body">
                        {{-- Information from the profile --}}
                        <p><strong>Nombre:</strong> {{ $admin->first_name }} {{ $admin->last_name }}</p>
                        <p><strong>Correo:</strong> {{ $admin->email }}</p>
                        <p><strong>Verificado el:</strong> {{ $admin->email_verified_at }}</p>
                        @if ($admin->status == 1)
                            <p><strong>Estado de la cuenta:</strong> Activo</p>
                        @else
                            <p><strong>Estado de la cuenta:</strong> Desactivado</p>
                        @endif
                        @php
                            $role = $roles->where('id', $admin->iam_roles_id)->first();
                        @endphp
                        <p><strong>Rol en la aplicación:</strong> {{ $role->role_name }}</p>
                    </div>
                </div>
                @if ($errors)
                    <span class="text-danger">{{ $errors->first() }}</span>
                @endif
            </div>
        </div>

        {{-- Hidden forms --}}
        <div class="row">
            <div class="col mt-5 mb-5" id="form-user" style="display: none;">
                {{-- Edition form --}}
                <form autocomplete="off" method="post" action="{{ Route('changeProfile') }}" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="idAdmin" value='{{ $admin->id }}'>
                    <div class="form-group">
                        <label for="name">Nombre de usuario</label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name"
                            name="name" placeholder="Ingresa el nombre" value="{{ $admin->display_name }}"
                            minlength="4" maxlength="50" pattern="^\S.*" required>
                        <span id="error-name" class="text-danger"></span>
                        @if ($errors->has('name'))
                            <span class="text-danger">{{ $errors->first('name') }}</span>
                        @endif
                    </div>

                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="firstName">Nombre</label>
                                <input type="text" class="form-control @error('firstName') is-invalid @enderror"
                                    id="firstName" name="firstName" placeholder="Ingresa el nombre"
                                    value="{{ $admin->first_name }}" minlength="4" maxlength="25" pattern="^\S.*"
                                    required>
                                <span id="error-firstName" class="text-danger"></span>
                                @if ($errors->has('firstName'))
                                    <span class="text-danger">{{ $errors->first('firstName') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="lastName">Apellidos</label>
                                <input type="text" class="form-control @error('lastName') is-invalid @enderror"
                                    id="lastName" name="lastName" placeholder="Ingresa el nombre"
                                    value="{{ $admin->last_name }}" minlength="5" maxlength="25" pattern="^\S.*" required>
                                <span id="error-lastName" class="text-danger"></span>
                                @if ($errors->has('lastName'))
                                    <span class="text-danger">{{ $errors->first('lastName') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="formFile" class="form-label">Foto de Perfil: (opcional)</label>
                        <input type="file" class="form-control" id="profileImage" name="profileImage" accept="image/*">
                        <small>Tipo de archivo: imagen | Extensiones permitidas: jpeg, png, jpg, gif | max:2MB</small>
                        <span id="error-image" class="text-danger"></span>
                        @if ($errors->has('profileImage'))
                            <span class="text-danger">{{ $errors->first('profileImage') }}</span>
                        @endif
                    </div>

                    <div class="card-footer">
                        <input id="submitUser" type="submit" class="btn btn-success" value="Guardar Cambios">
                        <button id="passForm" class="btn btn-warning">Cambiar contraseña?</button>
                    </div>
                </form>
            </div>


            <div class="col mt-5 mb-5" id="form-pass" style="display: none;">
                {{-- Change pass form --}}
                <form autocomplete="off" method="post" action="{{ Route('changePass') }}">
                    @csrf
                    <input type="hidden" name="idAdmin" value='{{ $admin->id }}'>
                    <div class="form-group">
                        <label for="oldPass">Contraseña actual</label>
                        <input type="password" class="form-control @error('oldPass') is-invalid @enderror" id="oldPass"
                            name="oldPass" placeholder="Ingresa la contraseña" minlength="8" required>
                        @if ($errors->has('oldPass'))
                            <span class="text-danger">{{ $errors->first('oldPass') }}</span>
                        @endif
                    </div>
                    <div class="form-group">
                        <label for="password">Nueva contraseña</label>
                        <input type="password" class="form-control @error('password') is-invalid @enderror"
                            id="password" name="password" placeholder="Ingresa la contraseña" minlength="8" required>
                        @if ($errors->has('password'))
                            <span class="text-danger">{{ $errors->first('password') }}</span>
                        @endif
                    </div>
                    <div class="form-group">
                        <label for="password_confirmation">Repita la contraseña</label>
                        <input type="password" class="form-control" id="password_confirmation"
                            name="password_confirmation" placeholder="Ingrese la contraseña" required>
                        <span id="error-pass" class="text-danger"></span>
                    </div>
                    <div class="card-footer">
                        <input type="submit" class="btn btn-success" id="submitPass" value="Cambiar contraseña">
                        <button class="btn btn-warning toogleForm">Volver a cambiar datos</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @vite('resources/js/users/validations.js')
    @vite('resources/js/users/showProfile.js')
@endsection