@extends('layouts.user_dashboard_main')
@section('content')
    <div class="content-heading1">
        <h3>Profile</h3>
    </div>
    <div class="auth-sec">
        @if (session('error'))
            <div class="alert alert-danger errorMsg">
                {{ session('error') }}
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <form class="m-form m-form--state" name="frm-profile" id="frm-profile" method="post"
            action="{{ route('user-profile-update') }}" enctype="multipart/form-data">
            {{ csrf_field() }}
            <figure class="user_profile_image_edit">

                <img class="image rounded-circle" id="profile_image_view"
                    src="{{ asset('storage/profile_images/' . Auth::user()->profile_image) }}" alt="profile_image">

                <figcaption>
                    <img src="{{ asset('frontend/assets/images/camera-icon.svg') }}">
                    <input type="file" id="profile_image"
                        onchange="document.getElementById('profile_image_view').src = window.URL.createObjectURL(this.files[0])"
                        name="profile_image">
                </figcaption>
            </figure>
            <div class="auth-from-box">
                <button type="button" class="edit-btn d-none"><img
                        src="{{ asset('frontend/assets/images/ic_outline-edit.svg') }}"></button>
                <div class="row fix-row">
                    <div class="col-12 col-md-12 fix-col">
                        <div class="custom-form-group-s1">
                            <div class="left-center-icon-with-right-input">
                                <div class="left-center-icon">
                                    <img src="{{ asset('frontend/assets/images/user-circle-icon.svg') }}">
                                </div>
                                <div class="right-input">
                                    <label>Full Name</label>
                                    <input type="text" class="form-control-s1" name="name"
                                        placeholder="Enter Full Name" value="{{ Auth::user()->name }}" required>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-12 col-md-12 fix-col">
                        <div class="custom-form-group-s1">
                            <div class="left-center-icon-with-right-input">
                                <div class="left-center-icon">
                                    <img src="{{ asset('frontend/assets/images/mail-icon.svg') }}">
                                </div>
                                <div class="right-input">
                                    <label>Email Address</label>
                                    <input type="text" class="form-control-s1" placeholder="Enter Email Address"
                                        value="{{ Auth::user()->email }}" disabled>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-12 col-md-12 fix-col">
                        <div class="custom-form-group-s1">
                            <div class="left-center-icon-with-right-input">
                                <div class="left-center-icon">
                                    <img src="{{ asset('frontend/assets/images/phone-icon.svg') }}">
                                </div>
                                <div class="right-input">
                                    <label>Mobile Number</label>

                                    <div class="input-with-left-prefix">
                                        <span class="prefix left-prefix" disabled>{{ Auth::user()->country_code }}</span>
                                        <input type="tel" class="form-control-s1" placeholder="Enter Mobile Number"
                                            value="{{ Auth::user()->phone }}" disabled>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-12 fix-col">
                            <div class="custom-actions-group-s1">
                                <button type="submit"  class="theme-solid-btn submit-btn">Update changes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
        </form>
    </div>
    <div class="loadingScreen">
        <div class="loaderBox"></div>
    </div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#frm-profile").on("submit", function() {
            $(".loadingScreen").addClass('show');
        }); //submit
    }); //document ready
</script>