@extends('layouts.main')
@push('title')
    <title>Fit Sport Hub - My Profile</title>
@endpush
@section('main-section')

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8 md:py-12">
        <div class="flex flex-col lg:flex-row gap-8">

            <!-- Left Sidebar -->
            <aside class="w-full lg:w-1/4">
                <div class="bg-white p-4 rounded-2xl shadow-xl border border-slate-200">
                <nav class="space-y-2">
                    <a href="{{ route('users.edits') }}" class="sidebar-link active">
                        <i class="fas fa-user mr-3"></i>
                        <span>My Profile</span>
                    </a>
                    <a href="{{ route('order.index') }}" class="sidebar-link">
                        <i class="fas fa-list mr-3"></i>
                        <span>My Orders</span>
                    </a>
                    <a href="/wishlist" class="sidebar-link">
                        <i class="fas fa-heart mr-3"></i>
                        <span>My Wish List</span>
                        @if($wishlistCount > 0)
                            <span class="ml-auto bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">
                                {{ $wishlistCount }}
                            </span>
                        @endif
                    </a>
                    <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="sidebar-link">
                        <i class="fas fa-sign-out-alt mr-3"></i>
                        <span>Log Out</span>
                    </a>
                </nav>

                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
                    @csrf
                </form>

                </div>
            </aside>

            <!-- Right Content -->
            <div class="w-full lg:w-3/4">
                <div class="bg-white p-6 md:p-8 rounded-2xl shadow-xl border border-slate-200">
                <form method="POST" action="{{ route('users.updates') }}" class="space-y-6">
                @method('patch')
                @csrf
    
    <!-- Personal Info Section -->
    <div>
        <h1 class="text-2xl font-bold mb-6">Personal Info</h1>
        
        <!-- Name -->
        <div class="mb-4">
            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
            <input type="text" id="name" name="name" 
                   class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   value="{{ old('name', $user->name) }}"
                   placeholder="Enter your name">
        </div>
        
        <!-- Email -->
        <div class="mb-4">
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label>
            <input type="email" id="email" name="email" 
                   class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   value="{{ old('email', $user->email) }}"
                   placeholder="Enter your email">
        </div>
        
        <!-- Mobile -->
        <div class="mb-4">
            <label for="mobile" class="block text-sm font-medium text-gray-700 mb-1">Mobile</label>
            <input type="tel" id="mobile" name="mobile" 
                   class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   value="{{ old('mobile', $user->mobile) }}"
                   placeholder="+919594293937"
                   pattern="\+[0-9]{1,15}"
                   maxlength="25">
        </div>
        
        <!-- Phone -->
        <div class="mb-6">
            <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
            <input type="tel" id="phone" name="phone" 
                   class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   value="{{ old('phone', $user->phone) }}"
                   placeholder="9845123650"
                   pattern="[1-9]{1}[0-9]{9}"
                   maxlength="10">
        </div>
    </div>
    
    <!-- Address Section -->
    <div>
        <h2 class="text-2xl font-bold mb-6">Address</h2>
        
        <!-- Additional Address -->
        <div class="mb-4">
            <label for="additional-address" class="block text-sm font-medium text-gray-700 mb-1">Additional Address Line</label>
            <input type="text" id="additional-address" name="additional_address"
                   class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   value="{{ old('additional_address', $user->additional_address) }}"
                   placeholder="Street address">
        </div>
        
        <!-- Street -->
        <div class="mb-4">
            <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Street</label>
            <input type="text" id="address" name="address"
                   class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   value="{{ old('address', $user->address) }}"
                   placeholder="Street name and number">
        </div>
        
        <!-- ZIP/PIN CODE -->
        <div class="mb-4">
            <label for="postal_code" class="block text-sm font-medium text-gray-700 mb-1">ZIP/PIN CODE</label>
            <input type="text" id="postal_code" name="postal_code"
                   class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   value="{{ old('postal_code', $user->postal_code) }}"
                   placeholder="Postal code">
        </div>
        
        <!-- Country -->
        <div class="mb-4">
            <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country</label>
            <select class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent appearance-none"
                   name="country" id="country" onchange="getstates(this.value)" required>
                <option value="" disabled selected>Select Country</option>
                            </select>
        </div>
        
        <!-- State -->
        <div class="mb-4">
            <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State</label>
            <select class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent appearance-none"
                   name="state" onchange="getcity(this.value)" id="state" required>
                                    <option value="">Select State</option>
                            </select>
        </div>
        
        <!-- City -->
        <div class="mb-6">
            <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>
            <input type="text" class="w-full px-4 py-3 border-b border-gray-300 focus:outline-none focus:border-blue-500 bg-transparent"
                   name="city" id="city"
                   value="{{ $profile_details != null && $profile_details->city != null ? $profile_details->city : '' }}"
                   placeholder="City name">
        </div>
    </div>
    
    <!-- Save Button -->
    <div class="pt-4">
        <button type="submit" class="w-full bg-blue-600 text-white font-medium py-3 px-6 rounded hover:bg-blue-700 transition">
            Save Changes
        </button>
    </div>
</form>
                </div>
            </div>

        </div>
    </main>

    @endsection


    @section('extrascripts')
    <script>
        // Ajax For States According to Country
        function getstates(val) {
            $.ajax({
                type: "POST",
                url: "/get-state",
                data: {
                    country_id: val,
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {
                    $("#state").html(data);
                }
            });
        }
    
        // Ajax For City According to States
        function getcity(val) {
            $.ajax({
                type: "POST",
                url: "/get-city",
                data: {
                    state_id: val,
                    _token: "{{ csrf_token() }}"
                },
                success: function(data) {
                    $("#city").html(data);
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
        const wishlistBadge = document.querySelector('.badge');

        function updateWishlistBadge(newCount) {
            if (wishlistBadge) {
                wishlistBadge.textContent = newCount;
                wishlistBadge.style.display = newCount > 0 ? 'inline-block' : 'none';
            }
        }

        // Function to handle adding to wishlist
        function addToWishlist(productId) {
            fetch('/wishlist/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({ product_id: productId }),
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert(data.message); // Optional: Show success message
                        updateWishlistBadge(data.wishlistCount); // Update badge count
                    } else {
                        alert(data.message); // Optional: Show error message
                    }
                })
                .catch(error => console.error('Error:', error));
        }

        // Example usage: Adding a product with ID 1
        document.getElementById('add-to-wishlist-btn').addEventListener('click', function () {
            const productId = this.dataset.productId; // Replace with the actual product ID
            addToWishlist(productId);
        });
    });
    </script>
    @endsection