@extends('admin.master')

@section('content')
<!-- Initialize Alpine.js with the active tab from session, defaulting to 'profile' -->
<div class="container mx-auto px-4 py-6" x-data="{ activeTab: '{{ session('activeTab', 'profile') }}' }">
    
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-1">Profile Settings</h2>
        <p class="text-sm text-gray-500">Manage your profile, password, and security settings</p>
    </div>

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">{{ session('success') }}</div>
    @endif
    
    @if ($errors->any())
        <div class="bg-red-100 text-red-700 px-4 py-3 rounded mb-4 border border-red-400">
            <ul class="list-disc pl-5">@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
        </div>
    @endif

    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
        
        <!-- Tab Navigation -->
        <div class="px-6 pt-4 border-b border-gray-200 flex gap-6">
            <button @click="activeTab = 'profile'" 
                    :class="activeTab === 'profile' ? 'bg-green-600 text-white rounded-t-md px-4 py-2 font-bold flex items-center gap-2' : 'text-gray-500 hover:text-gray-700 px-4 py-2 font-semibold flex items-center gap-2'">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                Profile
            </button>
            
            <button @click="activeTab = 'password'" 
                    :class="activeTab === 'password' ? 'bg-green-600 text-white rounded-t-md px-4 py-2 font-bold flex items-center gap-2' : 'text-gray-500 hover:text-gray-700 px-4 py-2 font-semibold flex items-center gap-2'">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path></svg>
                Password
            </button>

            <button @click="activeTab = 'security'" 
                    :class="activeTab === 'security' ? 'bg-green-600 text-white rounded-t-md px-4 py-2 font-bold flex items-center gap-2' : 'text-gray-500 hover:text-gray-700 px-4 py-2 font-semibold flex items-center gap-2'">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                Security
            </button>
        </div>

        <!-- Tab Contents -->
        <div class="p-6">
            
            <!-- Profile Tab Content -->
            <div x-show="activeTab === 'profile'" style="display: none;">
                <h3 class="font-bold text-gray-800 mb-6 border-b pb-4">Update Profile</h3>
                <form action="{{ route('admin.profile.update-info') }}" method="POST">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Email <span class="text-red-500">*</span></label>
                            <input type="email" name="email" value="{{ old('email', $user->email) }}" class="w-full border border-gray-300 rounded px-4 py-2 outline-none focus:border-green-500 text-gray-700" required>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Order Email <span class="text-gray-400 font-normal">(order notifications sent here)</span></label>
                            <input type="email" name="order_email" value="{{ old('order_email', $user->order_email) }}" class="w-full border border-gray-300 rounded px-4 py-2 outline-none focus:border-green-500 text-gray-700">
                        </div>
                    </div>
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded shadow flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Update Profile
                    </button>
                </form>
            </div>

            <!-- Password Tab Content -->
            <div x-show="activeTab === 'password'" style="display: none;">
                <h3 class="font-bold text-gray-800 mb-6 border-b pb-4">Change Password</h3>
                <form action="{{ route('admin.profile.update-password') }}" method="POST">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">Current Password</label>
                            <input type="password" name="current_password" class="w-full border border-gray-300 rounded px-4 py-2 outline-none focus:border-green-500 text-gray-700" required>
                        </div>
                        <div>
                            <label class="block text-sm font-bold text-gray-700 mb-2">New Password</label>
                            <input type="password" name="new_password" class="w-full border border-gray-300 rounded px-4 py-2 outline-none focus:border-green-500 text-gray-700" required>
                        </div>
                    </div>
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded shadow flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> Update Password
                    </button>
                </form>
            </div>

            <!-- Security Tab Content -->
            <div x-show="activeTab === 'security'" style="display: none;">
                <h3 class="font-bold text-gray-800 mb-6 border-b pb-4">Security Settings</h3>
                
                <div class="flex flex-col gap-8">
                    <!-- Two Factor Authentication -->
                    <div>
                        <h4 class="text-lg font-bold text-gray-700 mb-2">Two-Factor Authentication (2FA)</h4>
                        <p class="text-sm text-gray-500 mb-4">Add additional security to your account using two-factor authentication.</p>
                        
                        <div class="{{ $user->two_factor_enabled ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200' }} border rounded-lg p-5 flex items-center justify-between md:w-2/3 lg:w-1/2">
                            <div>
                                <p class="font-bold text-gray-700">Status</p>
                                <p class="text-xs font-semibold {{ $user->two_factor_enabled ? 'text-green-600' : 'text-gray-500' }}">
                                    {{ $user->two_factor_enabled ? 'Enabled' : 'Disabled' }}
                                </p>
                            </div>
                            <form action="{{ route('admin.profile.toggle-2fa') }}" method="POST">
                                @csrf
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" onChange="this.form.submit()" class="sr-only peer" {{ $user->two_factor_enabled ? 'checked' : '' }}>
                                    <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-green-600"></div>
                                </label>
                            </form>
                        </div>
                    </div>

                    <!-- Browser Sessions -->
                    <div>
                        <h4 class="text-lg font-bold text-gray-700 mb-2">Browser Sessions</h4>
                        <p class="text-sm text-gray-500 mb-4">Manage and log out your active sessions on other browsers and devices.</p>
                        
                        <form action="{{ route('admin.profile.logout-other-devices') }}" method="POST" class="bg-gray-50 border border-gray-200 rounded-lg p-5 md:w-2/3 lg:w-1/2 flex flex-col gap-4">
                            @csrf
                            <p class="text-sm text-gray-600">If necessary, you may log out of all of your other browser sessions across all of your devices. Please enter your password to confirm.</p>
                            
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">Current Password</label>
                                <input type="password" name="password" placeholder="Enter password to confirm" class="w-full border border-gray-300 rounded px-4 py-2 outline-none focus:border-green-500 text-gray-700" required>
                            </div>
                            
                            <div>
                                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded shadow flex items-center gap-2 transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg> Log Out Other Browser Sessions
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

<!-- Ensure Alpine.js is included -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endsection