@extends('layout.app')
@section('contents')
    <div class=" text-center col-md-6 mt-5 offset-md-3" >
       <h3>Edit Profile</h3>
        <hr/>
    </div>
    <div class="alert alert-danger col-md-6 mt-5 offset-md-3" role="alert">
        <form class="theme-form" method="post"  action="{{route('user.update-bio-data')}}" enctype="multipart/form-data">
            @csrf
            <div class="col-md-12">
                <label for="nickname">Nickname:</label>
                <input type="text" name="name" value="{{Auth::user()->name}}" class="form-control" id="fname" disabled
                       required="">
            </div>
            <div class="col-md-12">
                <label for="review">Email</label>
                <input name="email" type="email" value="{{Auth::user()->email}}" class="form-control" id="lname"   required="">
            </div>
            <div class="col-md-6">
                <label for="review">Resend Confirmation Email</label>
                <a href="{{route('user.confirmation')}}" style="padding: 10px 22px" class="form-control btn btn-success"><span class="text-lowercase">Send Confirmation Email</span></a>
            </div>
            <div class="col-md-6">
                <label for="review">Change Password</label>
                <a data-toggle="modal" data-target="#exampleModal" style="padding: 10px 22px" class="form-control btn btn-outline-primary"><span class="text-lowercase">Change Password</span></a>
            </div>
            <div class="col-md-12">
                <label for="review">Profile Image</label>
                <input name="image" type="file" class="form-control" id="lname" placeholder="change profile image"
                       >
            </div>
            <div class="col-md-12">
                <label for="review">About you:</label>
                <textarea name="about_me"  class="form-control" id="exampleFormControlTextarea1" rows="3">{{Auth::user()->about_me}}</textarea>
            </div>
            <div class="col-md-12 mt-3  row">
                <div class="col-md-6">
                    <button type="submit" style="padding: 10px 22px; width:203px; margin-bottom: 10px;" class=" btn btn-outline-success"><span class="text-lowercase">Update Details</span></button>
                </div>
            </div>
        </form>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{route('change-password')}}" method="post">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Change Password</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="col-md-12">
                            <label for="review">Initial Password</label>
                            <input name="previous_password" type="password" class="form-control" id="review"
                                   placeholder="Enter Initial Password" required="">
                        </div>
                        <div class="col-md-12">
                            <label for="review">New Password</label>
                            <input name="password" type="password" class="form-control" id="review"
                                   placeholder="Enter your new Password" required="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection