@extends('portal.layouts.app')
@section('content')

    <div class="main-containerd editProfile">
        <div class="container-fluid">
            <div class="card profileBg">

                <div class="headingSet">
                    <h2 class="heading mb-4">Your Profile</h2>
                </div>
                <div>
                    <form class="form-box" action="{{ route('edit.profile.submit',$user->id) }}" method="Post" enctype="multipart/form-data">
                        @csrf
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <figure>
                                <img id="profileImage" src="{{ asset('profile-image/'.($user->userDetail->image ?? 'leadrboard4.png')) }}" class="img-fluid" alt="img" width="300">
                                <span>
{{--                                            <input name="image" type="file">--}}
                                            <i class="fas fa-camera"></i>
                                        </span>
                            </figure>
                            <div>
                                <a href="#" class="themeBtn">Upload Photo <input name="image" type="file"></a>
                                <a href="#" class="themeBtn" id="removePhotoButton">Remove Photo <input type="hidden" name="remove_id" value="{{$user->userDetail->id ?? ''}}"></a>
                            </div>
                        </div>
                        @php
                            $fullName = $user->name;
                            $nameParts = explode(' ', $fullName, 2);

                            $firstName = $nameParts[0];
                            $lastName = isset($nameParts[1]) ? $nameParts[1] : ''; // In case last name is not present

                            // Now you can use $firstName and $lastName as needed
                        @endphp
                        <div class="row">
                            <div class="col-md-3">
                                <label for="">First Name <span class="text-danger">*</span></label>
                                <input type="text" name="first_name" class="form-control" placeholder="SKB" value="{{$firstName ?? ''}}">
                            </div>
                            <div class="col-md-3">
                                <label for="">Last Name</label>
                                <input type="text" name="last_name" class="form-control" placeholder="Enterprises Llc" value="{{$lastName ?? ''}}">
                            </div>
                            <div class="col-md-3">
                                <label for="">Email Address<span class="text-danger">*</span></label>
                                <input type="email" name="email" class="form-control"
                                       placeholder="skbtravel@yahoo.com" value="{{$user->email ?? ''}}">
                            </div>
                            <div class="col-md-3">
                                <label for="">Phone<span class="text-danger">*</span></label>
                                <input type="text" name="phone" class="form-control" placeholder="(804) 356-0577" value="{{$user->userDetail->phone ?? ''}}">
                            </div>
                            <div class="col-md-3">
                                <label for="">Country<span class="text-danger">*</span></label>
                                <input type="text" name="country" class="form-control" placeholder="SKB" value="{{$user->userDetail->country ?? ''}}">
                            </div>
                            <div class="col-md-9">
                                <label for="">Address <span class="text-danger">*</span></label>
                                <input type="text" name="address" class="form-control" placeholder="----------------" value="{{$user->userDetail->address ?? ''}}">
                            </div>
                            <div class="col-md-4">
                                <label for="">City <span class="text-danger">*</span></label>
                                <input type="text" name="city" class="form-control" placeholder="Usa" value="{{$user->userDetail->city ?? ''}}">
                            </div>
                            <div class="col-md-4">
                                <label for="">State <span class="text-danger">*</span></label>
                                <input type="text" name="state" class="form-control" placeholder="State" value="{{$user->userDetail->state ?? ''}}">
{{--                                <select name="state" class="form-control">--}}
{{--                                    <option></option>--}}
{{--                                </select>--}}
                            </div>
                            <div class="col-md-4">
                                <label for="">Zipcode <span class="text-danger">*</span></label>
                                <input type="text" name="zipcode" class="form-control" placeholder="23236" value="{{$user->userDetail->zipcode ?? ''}}">
                            </div>
                            <div class="col-md-12">
                                <h2 class="heading mb-4">Additional Fields</h2>
                            </div>
                            <div class="col-md-12">
                                <label for="">Alternate Phone (if applicable) <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="alternate_phone" class="form-control" placeholder="----------------" value="{{$user->userDetail->alternate_phone ?? ''}}">
                            </div>
                            <div class="col-12">
                                <button class="themeBtn" type="submit">Save Changes</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card avatar">
                <form class="form-box" action="{{ route('upload.avatar') }}" method="Post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <h2 class="heading mb-4">Upload Avatar</h2>
                        </div>
                        <div class="col-md-12">
                            <img id="profileImage" src="{{ asset('profile-image/'.($user->userDetail->avatar ?? '')) }}" class="img-fluid" alt="img" width="200">
                            <br>
                            <label for="">Image (must be a jpg)</label>
                            <input type="file" name="avatar_image" accept="image/jpeg" />
                            <p>Drop Image Here Or Click Here to Upload</p>
                            <button class="themeBtn" type="submit">Upload Photo</button>
                        </div>

                    </div>
                </form>
            </div>

            <div class="card">
                <form class="form-box" action="{{route('password.change.submit')}}" method="Post">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <h2 class="heading mb-4">Change Password</h2>
                        </div>
                        <div class="col-md-6">
                            <label for="">Old Password</label>
                            <input type="password" class="form-control" name="old_password" placeholder="----------------">
                        </div>
                        <div class="col-md-6">
                            <label for="">New Password</label>
                            <input type="password" class="form-control" name="new_password" placeholder="----------------">

                        </div>
                        <div class="col-md-12">
                            <button class="themeBtn" type="submit">Change Password</button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Function to handle click event on "Remove Photo" button
        document.getElementById('removePhotoButton').addEventListener('click', function(event) {
            event.preventDefault(); // Prevent the default action (e.g., following the link)

            // Get the remove_id value
            var removeId = document.querySelector('input[name="remove_id"]').value;

            // Make an AJAX request to remove the photo
            fetch('{{ route("remove.profile.image") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    remove_id: removeId // Include the remove_id value
                })
            })
                .then(response => response.json())
                .then(data => {

                    if (data.success) {

                        document.getElementById('profileImage').src = '{{ asset('profile-image/leadrboard4.png') }}'; // Replace with default image URL
                    }
                })
                .catch(error => console.error('Error:', error));
        });
    });


</script>
@endsection