@extends('astrologer.layouts.app')

@section('title', 'Account Settings')

@section('content')
    <div class="max-w-4xl mx-auto">
        <!-- Messages -->
        <div class="space-y-4 mb-6">
            @if(session('success'))
                <div
                    class="bg-emerald-500/5 border border-emerald-500/10 text-emerald-500 px-5 py-3 rounded-xl flex items-center gap-3 text-sm">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    <span class="font-medium">{{ session('success') }}</span>
                </div>
            @endif

            @if($errors->any())
                <div class="bg-red-500/5 border border-red-500/10 text-red-500 px-5 py-3 rounded-xl text-sm">
                    <ul class="list-disc list-inside space-y-0.5">
                        @foreach($errors->all() as $error)
                            <li class="font-medium">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Sidebar Info -->
            <div class="md:col-span-1 space-y-6">
                <div class="glass-card p-6 rounded-2xl border border-white/5">
                    <div class="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
                        <i data-lucide="lock" class="text-blue-500 w-5 h-5"></i>
                    </div>
                    <h3 class="text-base font-bold text-white mb-2">Security</h3>
                    <p class="text-slate-500 text-xs leading-relaxed">Keep your account secure by using a strong password.
                        We recommend changing it periodically.</p>
                </div>

                <div class="glass-card p-6 rounded-2xl border border-white/5 bg-yellow-500/[0.01]">
                    <h4 class="text-yellow-500 font-bold text-[10px] uppercase tracking-[0.2em] mb-4 opacity-70">Password
                        Requirements</h4>
                    <ul class="space-y-2.5">
                        <li class="flex items-start gap-2 text-[11px] text-slate-400">
                            <i data-lucide="check" class="w-3 h-3 text-yellow-500/50 mt-0.5"></i>
                            Minimum 8 characters
                        </li>
                        <li class="flex items-start gap-2 text-[11px] text-slate-400">
                            <i data-lucide="check" class="w-3 h-3 text-yellow-500/50 mt-0.5"></i>
                            Numbers & symbols
                        </li>
                        <li class="flex items-start gap-2 text-[11px] text-slate-400">
                            <i data-lucide="check" class="w-3 h-3 text-yellow-500/50 mt-0.5"></i>
                            Uppercase & Lowercase
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Form -->
            <div class="md:col-span-2 space-y-6">
                <div class="glass-card rounded-2xl overflow-hidden">
                    <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5">
                        <h3 class="text-base font-bold text-white">Change Password</h3>
                    </div>
                    <div class="p-8">
                        <form action="{{ route('astrologer.settings.password.update') }}" method="POST" class="space-y-4"
                            x-data="{ 
                                            password: '',
                                            strength: 0,
                                            getStrength() {
                                                let s = 0;
                                                if (this.password.length >= 8) s++;
                                                if (/[A-Z]/.test(this.password)) s++;
                                                if (/[0-9]/.test(this.password)) s++;
                                                if (/[^A-Za-z0-9]/.test(this.password)) s++;
                                                this.strength = s;
                                                return s;
                                            },
                                            getStrengthColor() {
                                                if (this.strength <= 1) return 'bg-red-500/50';
                                                if (this.strength === 2) return 'bg-orange-500/50';
                                                if (this.strength === 3) return 'bg-yellow-500/50';
                                                return 'bg-emerald-500/50';
                                            },
                                            getStrengthText() {
                                                if (this.strength === 0) return '';
                                                if (this.strength === 1) return 'Weak';
                                                if (this.strength === 2) return 'Fair';
                                                if (this.strength === 3) return 'Strong';
                                                return 'Very Strong';
                                            }
                                        }">
                            @csrf
                            <div>
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Current
                                    Password</label>
                                <input type="password" name="current_password" required
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                            </div>

                            <div class="space-y-2">
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">New
                                    Password</label>
                                <input type="password" name="password" x-model="password" @input="getStrength()" required
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">

                                <!-- Strength Indicator -->
                                <div class="flex items-center gap-2 mt-2" x-show="password.length > 0">
                                    <div class="flex-1 h-1 bg-slate-800 rounded-full overflow-hidden">
                                        <div class="h-full transition-all duration-500" :class="getStrengthColor()"
                                            :style="'width: ' + (strength * 25) + '%'"></div>
                                    </div>
                                    <span
                                        class="text-[9px] font-bold uppercase tracking-widest min-w-[70px] text-right text-slate-500"
                                        x-text="getStrengthText()"></span>
                                </div>
                            </div>

                            <div>
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Confirm
                                    New Password</label>
                                <input type="password" name="password_confirmation" required
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm">
                            </div>

                            <div class="pt-4">
                                <button type="submit"
                                    class="w-full bg-yellow-500 hover:bg-yellow-400 text-slate-950 font-black py-3.5 rounded-lg shadow-lg shadow-yellow-500/10 transition-all uppercase tracking-[0.2em] text-[10px]">
                                    Update Password
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="glass-card rounded-2xl overflow-hidden mt-6">
                    <div class="bg-white/[0.02] px-8 py-5 border-b border-white/5 flex items-center justify-between">
                        <h3 class="text-base font-bold text-white">Settlement Configuration</h3>
                        @if($isLocked)
                            <span
                                class="flex items-center gap-1.5 text-[10px] font-bold text-red-500 uppercase tracking-widest bg-red-500/10 px-2 py-1 rounded-lg">
                                <i data-lucide="lock" class="w-3 h-3"></i>
                                Locked
                            </span>
                        @endif
                    </div>
                    <div class="p-8">
                        <form action="{{ route('astrologer.settings.settlement.update') }}" method="POST" class="space-y-4">
                            @csrf
                            <div class="relative">
                                <label
                                    class="block text-[10px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Payment
                                    Settlement Cycle</label>
                                <select name="settlement_period" required {{ $isLocked ? 'disabled' : '' }}
                                    class="w-full bg-slate-900/50 border border-white/5 rounded-lg px-4 py-2.5 text-slate-100 outline-none focus:border-yellow-500/30 transition-all font-medium text-sm {{ $isLocked ? 'opacity-50 cursor-not-allowed' : '' }}">
                                    <option value="7" {{ (auth()->user()->astrologerDetail->settlement_period ?? 7) == 7 ? 'selected' : '' }}>7 Days (8% Commission)</option>
                                    <option value="14" {{ (auth()->user()->astrologerDetail->settlement_period ?? 7) == 14 ? 'selected' : '' }}>14 Days (5% Commission)</option>
                                    <option value="21" {{ (auth()->user()->astrologerDetail->settlement_period ?? 7) == 21 ? 'selected' : '' }}>21 Days (3% Commission)</option>
                                </select>
                            </div>

                            @if($isLocked)
                                <p class="text-[11px] text-red-400 flex items-center gap-2">
                                    <i data-lucide="alert-triangle" class="w-3 h-3"></i>
                                    You cannot change your cycle while you have active unsettling earnings.
                                </p>
                            @else
                                <p class="text-[11px] text-slate-500">Choosing a longer settlement cycle reduces the commission
                                    deducted from your earnings.</p>
                            @endif

                            <div class="pt-4">
                                <button type="submit" {{ $isLocked ? 'disabled' : '' }}
                                    class="w-full border border-yellow-500/20 bg-yellow-500/10 hover:bg-yellow-500 text-yellow-500 hover:text-slate-950 font-black py-3.5 rounded-lg transition-all uppercase tracking-[0.2em] text-[10px] {{ $isLocked ? 'opacity-50 cursor-not-allowed' : '' }}">
                                    Update Settlement Cycle
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="bg-blue-500/5 border border-blue-500/10 rounded-2xl p-6 flex items-start gap-4 mt-6">
                    <i data-lucide="info" class="text-blue-500 w-4 h-4 mt-0.5"></i>
                    <div>
                        <h5 class="text-white text-xs font-bold mb-1">Session Management</h5>
                        <p class="text-slate-500 text-[11px] leading-relaxed">Updating your password will keep you logged in
                            on this device but may require re-authentication on others.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection