@extends('layouts.app')
@section('content')

    <div class="profile-data">
        <div class="inner">
            <div class="top">

                @include('layouts.form.validation.errors')
                @include('layouts.alerts.session')

                <form method="post" action="{{ route('profile') }}" enctype="multipart/form-data" id="FrmProfilePicture">

                    {{ csrf_field() }}
                    {{ method_field('PUT') }}

                    <label for="profileimg" class="figure">
                        <input type="file" id="profileimg" hidden name="profileimg">
                        <img onerror="this.src='{{ asset('imgsys/avatar.png') }}'" style="width: 120px; height: 120px;" src="{{ $userProfilePicture['original']['profile_picture'] }}" alt="{{ session()->get('user')->c_id  }}" id="userProfilePicture">
                    </label>

                </form>

                <p style="text-align: center;">120x120</p>

            </div>

            <ul class="profile-meta">
                <li>
                    <label>Nombre</label>
                    <p>{{ $user->c_nombre }}</p>
                </li>

                <li>
                    <label>Correo</label>
                    <p>{{ $user->c_correo }}</p>
                </li>

                <li>
                    <label>Telefono</label>
                    <p>{{ $user->c_telefono }}</p>
                </li>
            </ul>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        
        $(function () {

            $(document).on('change', '#profileimg', function () {
                console.log("[change] profileimg");
                startLoading();
                $('#FrmProfilePicture').submit();
            });
            
        })
    </script>
    @endpush