@extends('user.layouts.main')


@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="settings">
            <div class="card border-0">
                <div class="card-header bg-white">
                    <div class="">
                        <h4 class="my-2 page_title">Change details</h4>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('user.profile.update') }}" method="post" class="mb-5"
                          enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-6">
                                <img src="{{ getAvatar($user->image) }}" alt="User Image"
                                     srcset="{{ getAvatar($user->image) }}" style="width: 100px; height: 100px;"
                                     class="img-thumbnail avatar_img shadow-none mb-3" id="image-preview">
                                <div class="col-12 mb-3">
                                    <label for="image" class="form-label">Profile Photo <span class="text-success">Prefer Size (100x100)px</span></label>
                                    <input type="file" name="image" id="image" class="form-control shadow-none">
                                </div>
                            </div>
                            <div class="col-6">
                                <img src="{{ getAvatar($user->cover_image) }}" alt="User Image"
                                     srcset="{{ getAvatar($user->cover_image) }}" style="width: 100px; height: 100px;"
                                     class="img-thumbnail avatar_img shadow-none mb-3" id="cover-preview">
                                <div class="col-12 mb-3">
                                    <label for="cover" class="form-label">Cover Photo <span class="text-success">Prefer Size (300x250)px</span></label>
                                    <input type="file" name="cover_image" id="cover_image" class="form-control shadow-none">
                                </div>
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="name" value="{{$user->name}}"
                                       class="form-control shadow-none @error('field_name') border-danger @enderror"
                                       placeholder="Name" required>
                                @error('name')
                                <span class="text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="email" value="{{$user->email}}"
                                       class="form-control shadow-none @error('email') border-danger @enderror"
                                       placeholder="Email" required>
                                @error('email')
                                <span class="text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                                <input type="text" name="phone" id="phone" value="{{$user->phone}}"
                                       class="form-control shadow-none @error('phone') border-danger @enderror"
                                       placeholder="Enter Your Phone" required>
                                @error('phone')
                                <span class="text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="address" class="form-label">Full Address <span class="text-danger">*</span></label>
                                <input type="text" name="address" id="address" value="{{$user->address}}"
                                       class="form-control shadow-none @error('address') border-danger @enderror"
                                       placeholder="Example : Opp. NCS, American House Junction,East Legon,Accra,Kenya" required>
                                @error('address')
                                <span class="text-danger">{{$message}}</span>
                                @enderror
                            </div>
                            <div>
                                <button type="submit" class="btn btn-sm btn-primary py-21">Update Details</button>
                            </div>
                        </div>
                    </form>
                    <div class="mb-4">
                        <h4 class="page_title">Change password</h4>
                    </div>
                    <form action="{{route('user.password.update')}}" method="post">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <label class="form-label d-block w-100">
                                    Password <span class="text-danger">*</span>
                                </label>
                                <div class="input-group input-group-flat">
                                    <input type="password" name="password" id="password-field"
                                           class="form-control shadow-none @error('password') border-danger @enderror"
                                           placeholder="Password (at least 6 characters)" autocomplete="off"
                                           required>

                                    <span class="input-group-text bg-transparent">
                                        <a href="javascript:void(0)"
                                           class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                           toggle="#password-field">
                                        </a>
                                    </span>
                                </div>
                                    @error('password')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                            </div>
                            <div class="mb-3 col-md-6">
                                <label class="form-label d-block w-100">
                                    Confirm Password <span class="text-danger">*</span>
                                </label>
                                <div class="input-group input-group-flat">
                                    <input type="password" name="password_confirmation" id="confirm-toggle-password"
                                           class="form-control shadow-none @error('password_confirmation') border-danger @enderror"
                                           placeholder="Confirm password" autocomplete="off"
                                           required>

                                    <span class="input-group-text bg-transparent">
                                        <a href="javascript:void(0)"
                                           class="link-secondary fa fa-fw fa-eye field-icon toggle-password"
                                           toggle="#confirm-toggle-password">
                                        </a>
                                    </span>
                                </div>
                                    @error('password_confirmation')
                                    <span class="text-danger">{{$message}}</span>
                                    @enderror
                            </div>
                            <div>
                                <button type="submit" class="btn btn-secondary btn-sm py-21">Change password</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function () {
            // Listen for changes in the file input
            $("#image").change(function () {
                let appendElement=$("#image-preview");
                readURL(this,appendElement);
            });
            $("#cover").change(function () {
                let appendElement=$("#cover-preview");
                readURL(this,appendElement);
            });
        });

        // Function to display the selected image in the preview container
        function readURL(input,appendElement) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    console.log(e.target.result)
                    appendElement.attr("src", e.target.result);
                    appendElement.attr("srcset", e.target.result);
                };

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