@extends('layouts.client')
@section('title', 'Dashboard')
@section('content')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
        .profile-pic {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background-color: #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            margin: auto;
        }

        .section-title {
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 1rem;
            text-transform: uppercase;
        }

        .summary-box {
            background: #f9f9f9;
            padding: 30px;
            border-radius: 6px;
            margin-bottom: 20px;
        }

        .form-check-inline {
            margin-right: 20px;
        }

        .btn-green {
            background-color: limegreen;
            color: white;
            border: none;
        }

        .btn-green:hover {
            background-color: #28a745;
        }

        input::placeholder {
            font-size: 0.9rem;
        }

        .divider-line {
            border-top: 1px solid #ccc;
            margin: 20px 0;
        }
        .profile-wrapper {
        position: relative;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        overflow: hidden;
    }

    .profile-overlay i {
        font-size: 18px;
        color: white;
        cursor: pointer;
    }

    .profile-wrapper {
        position: relative;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        overflow: hidden;
    }

    .profile-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    .profile-wrapper:hover .profile-overlay {
        opacity: 1;
    }

    .profile-wrapper img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }
    .gender-toggle {
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

.gender-option {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #999;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.gender-option input {
    display: none;
}

.gender-option i {
    color: #00cc33;
}

.gender-option.active {
    background: #1b407961;
    border: 1px solid black;
    font-weight: bold;
    color: #ebebeb;
}
.custom-btn{
    margin-top: 20px;
    width: 60%;
    border: none;
    padding: 10px;
    border-radius: inherit;
}
    </style>
@endpush
<h2>Profile</h2>
<div class="row">
<div class="col-md-4 text-center mb-4 position-relative">
    <div class="profile-wrapper mx-auto"
         style="width: 140px; height: 140px; border-radius: 50%; overflow: hidden; position: relative;">

        <img
            id="profileImage"
            src="{{ asset('storage/' . (auth()->user()->image ?? 'profile_images/profile.png')) }}"
            alt="Profile Image"
            style="width: 100%; height: 100%; object-fit: cover;">

        <div class="profile-overlay d-flex justify-content-center align-items-center">
            @if(auth()->user()->image)
                <label for="uploadProfile" class="text-white me-3 mb-0" style="cursor: pointer;">
                    <i class="fa fa-repeat fa-lg"></i>
                </label>
                <i class="fa fa-trash text-white fa-lg" style="cursor: pointer;" onclick="deleteProfileImage()"></i>
            @else
                <label for="uploadProfile" class="text-white mb-0" style="cursor: pointer;">
                    <i class="fa fa-camera fa-lg"></i>
                </label>
            @endif
        </div>

        <input type="file" id="uploadProfile" accept="image/*" style="display: none;">
    </div>

    <h5 class="mt-3">{{ auth()->user()->name }}</h5>
    <p>{{ auth()->user()->email }}</p>

</div>






   <!-- Right Form -->
    <div class="col-md-8">
        <form id="userProfileForm">
            @csrf

            <!-- Personal Data -->
            <div class="summary-box">
                <div class="section-title">Personal data</div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="">Full Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Full name" value="{{ old('name', auth()->user()->name) }}">
                    </div>
                    <div class="col-md-3">
                        <label for="">Height (cm)</label>
                        <input type="text" name="height" class="form-control" placeholder="Height (cm)" value="{{ old('height', $userInfo?->height_cm) }}">
                    </div>
                    <div class="col-md-3">
                        <label for="">Weight (kg)</label>
                        <input type="text" name="weight" class="form-control" placeholder="Weight (kg)" value="{{ old('weight', $userInfo?->weight_kg) }}">
                    </div>

                    <!-- Gender -->
                    <div class="col-md-6">
                        <label class="form-label d-block">Gender</label>
                        <div class="gender-toggle d-flex">
                            <label class="gender-option me-2 {{ old('gender', auth()->user()->gender) === 'female' ? 'active' : '' }}">
                                <input type="radio" name="gender" value="female" {{ old('gender', auth()->user()->gender) === 'female' ? 'checked' : '' }}>
                                <i class="fa fa-venus me-1"></i> Female
                            </label>
                            <label class="gender-option {{ old('gender', auth()->user()->gender) === 'male' ? 'active' : '' }}">
                                <input type="radio" name="gender" value="male" {{ old('gender', auth()->user()->gender) === 'male' ? 'checked' : '' }}>
                                <i class="fa fa-mars me-1"></i> Male
                            </label>
                        </div>
                    </div>

                    <!-- DOB -->
                    <div class="col-md-6">
                        <label class="form-label d-block">Date of Birth</label>
                        <input type="text" name="dob" id="dob" class="form-control" placeholder="Date of birth" value="{{ old('dob', auth()->user()->dob) }}">
                    </div>
                </div>
            </div>

            <!-- Contact Info -->
            <div class="summary-box mt-4">
                <div class="section-title">Contact information</div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <input type="email" name="email" class="form-control" placeholder="Email" value="{{ old('email', auth()->user()->email) }}">
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="phone" class="form-control" placeholder="Phone" value="{{ old('phone', auth()->user()->phone) }}">
                    </div>
                </div>
            </div>

            <div class="text-end mt-4">
                <button type="submit" class="btn btn-primary custom-btn">Save Changes</button>
            </div>
        </form>
    </div>

    <div class="summary-box mt-4">
    <div class="section-title">Change password</div>
    <form id="changePasswordForm">
        @csrf
        <div class="row g-3">
            <div class="col-md-6">
                <input type="password" class="form-control" name="old_password" placeholder="Old Password" required>
            </div>
            <div class="col-md-6">
                <input type="password" class="form-control" name="new_password" minlength="6" placeholder="New Password" required>
            </div>
            <div class="col-12 text-end">
                <button type="submit" class="btn btn-green">Change password</button>
            </div>
        </div>
    </form>
</div>


          
        </div>
    </div>
  
    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
     document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = this;
    const oldPassword = form.querySelector('input[name="old_password"]').value.trim();
    const newPassword = form.querySelector('input[name="new_password"]').value.trim();

    // Basic validation
    if (!oldPassword || !newPassword) {
        Swal.fire({
            icon: 'warning',
            title: 'Required fields',
            text: 'Please fill out both password fields.',
        });
        return;
    }

    if (newPassword.length < 6) {
        Swal.fire({
            icon: 'warning',
            title: 'Too short',
            text: 'New password must be at least 6 characters long.',
        });
        return;
    }

    const formData = new FormData(form);

    fetch("{{ route('client.change.password') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Password Changed',
                text: data.message,
                toast: true,
                timer: 3000,
                position: 'top-end',
                showConfirmButton: false
            });
            form.reset();
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Oops!',
                text: data.message,
            });
        }
    })
    .catch(() => {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Something went wrong. Please try again.'
        });
    });
});

document.getElementById('userProfileForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);

    fetch("{{ route('client.profile.update') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': formData.get('_token'),
        },
        body: formData
    })
    .then(res => res.json())
    .then(response => {
        if (response.success) {
            Swal.fire({
                icon: 'success',
                title: 'Saved!',
                text: 'Your profile has been updated.',
                timer: 2000,
                showConfirmButton: false
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: response.message || 'Something went wrong.',
            });
        }
    })
    .catch(error => {
        console.error(error);
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'An unexpected error occurred.',
        });
    });
});
</script>
<script>
    flatpickr("#dob", {
        dateFormat: "d.m.Y"
    });
</script>
    <script>
    const input = document.getElementById('profile-upload');
    const profilePic = document.querySelector('.profile-pic');

    input.addEventListener('change', function () {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                profilePic.style.backgroundImage = `url(${e.target.result})`;
                profilePic.innerHTML = ''; // Remove the icon
            };
            reader.readAsDataURL(file);
        }
    });
</script>
<script>
document.getElementById('uploadProfile').addEventListener('change', function () {
    const file = this.files[0];
    if (!file || !file.type.startsWith('image/')) {
        alert('Please select a valid image.');
        return;
    }

    const formData = new FormData();
    formData.append('image', file);

    fetch("{{ route('client.profile.upload') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            document.getElementById('profileImage').src = data.image_url;
        } else {
            alert('Upload failed!');
        }
    })
    .catch(() => alert('An error occurred during upload.'));
});

function deleteProfileImage() {
    if (!confirm("Are you sure you want to delete your profile picture?")) return;

    fetch("{{ route('client.profile.delete') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({})
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            document.getElementById('profileImage').src = '{{ asset("storage/profile_images/profile.png") }}';
        }
    });
}
</script>
<script>
    document.querySelectorAll('.gender-option').forEach(option => {
        option.addEventListener('click', function () {
            document.querySelectorAll('.gender-option').forEach(opt => opt.classList.remove('active'));
            this.classList.add('active');
            this.querySelector('input[type="radio"]').checked = true;
        });
    });
</script>

@endpush
    @endsection