@extends('portal.user.layouts.app')

@section('content')
    <style>
        #image-preview {
            width: 200px; /* Set the desired width */
            height: 200px; /* Set the desired height */
            max-width: 100%;
            max-height: 100%;
        }
    </style>
        <div id="content-wrapper" class="d-flex flex-column">
            <div id="content">
{{--                <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">--}}
{{--                    <!-- <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">--}}
{{--							<i class="fa fa-bars"></i>--}}
{{--						</button> -->--}}
{{--                    <h2>User Profile</h2>--}}
{{--                    <ul class="navbar-nav rghtbl ml-auto">--}}


{{--                        <li class="nav-item dropdown no-arrow">--}}
{{--                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"--}}
{{--                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">--}}
{{--                                <img src="../../dashboard/images/usrimg.png" class="img-fluid" alt="img" />--}}
{{--                                <span class="d-none d-lg-inline text-gray-600 small"><b>John Smith</b><small>User--}}
{{--                                    </small></span>--}}
{{--                            </a>--}}
{{--                            <div class="dropdown-menu dropdown-menu shadow animated--grow-in"--}}
{{--                                aria-labelledby="userDropdown">--}}
{{--                                <a class="dropdown-item" href="#"> <i--}}
{{--                                        class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Account </a>--}}
{{--                                <a class="dropdown-item" href="#"> <i--}}
{{--                                        class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Setting </a>--}}
{{--                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal"> <i--}}
{{--                                        class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Login </a>--}}
{{--                            </div>--}}
{{--                        </li>--}}
{{--                    </ul>--}}
{{--                </nav>--}}
                <!-- <div class="cartSec">
                    <div class="container-fluid">
                        <div class="main-padingbdy">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="inspectionBox">
                                        <figure><img src="../../dashboard/images/totalicon.png" class="img-fluid"
                                                alt="img"></figure>
                                        <div>
                                            <h2>0</h2>
                                            <h6>TOTAL<br>
                                                INSPECTIONS</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="inspectionBox">
                                        <figure><img src="../../dashboard/images/inprogresicon.png" class="img-fluid"
                                                alt="img">
                                        </figure>
                                        <div>
                                            <h2>0</h2>
                                            <h6>IN PROGRESS<br>
                                                INSPECTIONS</h6>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="inspectionBox">
                                        <figure><img src="../../dashboard/images/complticon.png" class="img-fluid"
                                                alt="img">
                                        </figure>
                                        <div>
                                            <h2>0</h2>
                                            <h6>COMPLETED<br>
                                                INSPECTIONS</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->

                <div class="main-container margin">
                    <div class="container-fluid">
                        <div class="card bg-transparent">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h2 class="heading m-0">User Profile</h2>
{{--                                <button class="btn btn-danger">Edit</button>--}}
                            </div>
                            <div>
                                <form class="form-box" action="{{route('user.profile.form')}}" method="Post" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="image-upload">Profile Image<span class="text-danger">*</span></label>
                                            <input type="file" id="image-upload" class="form-control" name="image" onchange="previewImage(event)">
                                        </div>
                                        <div class="col-md-12">
                                            <img id="image-preview" src="{{asset('front/user-profile/' .$user->image)}}"  width="150" alt="Image Preview">
                                        </div>
                                        <br>
                                        <div class="col-md-4">
                                            <label for="">First Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="John" name="username" value="{{$user->name}}">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="">Middle Name</label>
                                            <input type="text" class="form-control" placeholder="----" name="userMiddelName">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="">Last Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Smith" name="userLastName">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="">Email <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="info@yourmail.com" name="userEmail" value="{{$user->email}}">
                                        </div>
                                        <div class="col-md-6">
                                            <label for="">Phone Number <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="123 Dummy Street 45 Building United States" name="userPhoneNumber" value="{{$user->phone}}">
                                        </div>
                                        <div class="col-md-12">
                                            <label for="">Address <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="+1(123) 456 7890" name="userAddress" value="{{$user->address}}">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="">City <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Usa" name="userCity" value="{{$user->city}}">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="">State <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="----" name="userState" value="{{$user->state}}">
                                        </div>
                                        <div class="col-md-4">
                                            <label for="">Zipcode <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="75800" name="userZipCode" value="{{$user->zip}}">
                                        </div>
                                        <div class="col-12">
                                            <button class="btn btn-primary py-4">Save info</button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <script>
                function previewImage(event) {
                    var input = event.target;
                    var reader = new FileReader();

                    reader.onload = function(){
                        var imagePreview = document.getElementById('image-preview');
                        imagePreview.src = reader.result;
                    };

                    reader.readAsDataURL(input.files[0]);
                }
            </script>
@endsection