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

    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <form class="md-form" method="POST" enctype="multipart/form-data"
                              action="{{ route('profile.update') }}">
                            @csrf
                            <div class="row">
                                <input type="hidden" name="id" value="{{$user->id}}"/>
                                <div class="col-md-3 border-right">
                                    <div class="d-flex flex-column align-items-center text-center p-3 py-lg-5 py-md-5">
                                        @if(!empty($user->image))
                                            <img class="rounded-circle mt-lg-5 mt-md-5" id="image" width="150px"
                                                 height="150px" src="{{ asset('storage/'. $user->image) }}">
                                        @else
                                            <img class="rounded-circle mt-lg-5 mt-md-5" id="image" width="150px"
                                                 height="150px"
                                                 src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg">
                                        @endif
                                        <div class="file-field1">
                                            <a class="btn-floating peach-gradient mt-0 float-left">
                                                <i class="fa fa-camera camera" aria-hidden="true"></i>
                                                <input type="file" class="camera_input" id="photo_file" name="image"
                                                       onchange="photo_upload()">
                                            </a>
                                        </div>
                                        <span class="font-weight-bold">{{ old('name', $user->name) }}</span><span
                                            class="text-black-50">{{ old('name', $user->email) }}</span><span> </span>
                                    </div>
                                    <div class="text-center">
                                        <button class="hedlogbtn border-0">Upload Image</button>
                                    </div>
                                </div>
                                <div class="col-md-9 border-right">
                                    <div class="p-3 py-3">
                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                            <h4 class="text-right">PROFILE</h4>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6 col-md-12 mb-4">
                                                <label for="name">Name</label>
                                                <input type="text" class="form-control"
                                                       name="name"
                                                       placeholder="first name"
                                                       value="{{ !empty($user->name)?$user->name : "" }}">
                                                @error('name')
                                                <span class="mt-2 text-danger d-inline-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-md-12 mb-4">
                                            <label for="email">Email</label>
                                                <input type="email" class="form-control"
                                                       name="email"
                                                       placeholder="Email id"
                                                       value="{{ empty($user->email)? '' : $user->email }}">
                                                @error('email')
                                                <span class="mt-2 text-danger d-inline-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-lg-6 col-md-12 mb-4">
                                            <label for="phone">Phone</label>
                                                <input type="text" class="form-control"
                                                       name="phone"
                                                       placeholder="Phone number"
                                                       value="{{ !empty($user->phone)?$user->phone : "" }}">
                                                @error('phone')
                                                <span class="mt-2 text-danger d-inline-block">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="col-lg-6 col-md-12 mb-4">
                                            <label for="password">Password</label>
                                                <input type="text" class="form-control"
                                                       name="password"
                                                       placeholder="Leave blank if no change"
                                                       value="">
                                                @error('password')
                                                <span class="mt-2 text-danger d-inline-block">{{ $message }}</span>
                                                @enderror
                                            </div>

                                        </div>
                                        <div class="text-center">
                                            <button class="hedlogbtn border-0" type="submit">Save Profile</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        function photo_upload() {
            const fileInput = document.getElementById('photo_file');
            var file = fileInput.files;
            console.log(file);
            document.getElementById('image').src = URL.createObjectURL(file[0]);

        }

    </script>

@endsection