@extends('user.layouts.app')

@section('content')
    <div class="max-w-4xl mx-auto space-y-8">

        <!-- Header -->
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-800">Settings</h1>
                <p class="text-slate-500 text-sm mt-1">Manage your account preferences and payment methods.</p>
            </div>
        </div>

        @if(session('success'))
            <div class="bg-green-100 border border-green-200 text-green-700 px-4 py-3 rounded-xl flex items-center gap-2">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

            <!-- Payment Methods Section -->
            <div class="space-y-6">
                <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8">
                    <h2 class="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
                        <i data-lucide="credit-card" class="w-5 h-5 text-slate-400"></i>
                        Payment Methods
                    </h2>

                    <!-- List Existing Methods -->
                    <div class="space-y-4 mb-8">
                        @forelse($user->paymentMethods as $method)
                            <div
                                class="border border-slate-200 rounded-xl p-4 flex items-center justify-between group hover:border-yellow-500 transition-colors {{ $method->is_default ? 'bg-yellow-50 border-yellow-200' : 'bg-slate-50' }}">
                                <div>
                                    <div class="flex items-center gap-2">
                                        <span
                                            class="text-sm font-bold text-slate-800 uppercase">{{ str_replace('_', ' ', $method->type) }}</span>
                                        @if($method->is_default)
                                            <span
                                                class="bg-yellow-500 text-slate-900 text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-wider">Default</span>
                                        @endif
                                    </div>
                                    <p class="text-xs text-slate-500 mt-1">
                                        @if($method->type == 'bank_transfer')
                                            {{ $method->bank_name }} - {{ $method->account_number }}
                                        @else
                                            {{ $method->upi_id }}
                                        @endif
                                    </p>
                                </div>
                                <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                    @if(!$method->is_default)
                                        <form action="{{ route('user.payment-methods.default', $method->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="text-slate-400 hover:text-yellow-600 p-1"
                                                title="Set as Default">
                                                <i data-lucide="star" class="w-4 h-4"></i>
                                            </button>
                                        </form>
                                    @endif
                                    <form action="{{ route('user.payment-methods.destroy', $method->id) }}" method="POST"
                                        onsubmit="return confirm('Delete this payment method?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-slate-400 hover:text-red-500 p-1" title="Delete">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-6 bg-slate-50 rounded-xl border border-dashed border-slate-200">
                                <p class="text-sm text-slate-400">No payment methods added yet.</p>
                            </div>
                        @endforelse
                    </div>

                    <!-- Add New Method Form -->
                    <div x-data="{ type: 'bank_transfer' }">
                        <h3 class="text-sm font-bold text-slate-800 mb-4">Add New Method</h3>
                        <form action="{{ route('user.payment-methods.store') }}" method="POST" class="space-y-4">
                            @csrf

                            <div class="grid grid-cols-2 gap-4">
                                <label class="cursor-pointer">
                                    <input type="radio" name="type" value="bank_transfer" class="peer sr-only"
                                        x-model="type">
                                    <div
                                        class="text-center p-3 rounded-xl border border-slate-200 peer-checked:border-yellow-500 peer-checked:bg-yellow-50 transition-all">
                                        <span class="text-xs font-bold text-slate-600 peer-checked:text-slate-900">Bank
                                            Transfer</span>
                                    </div>
                                </label>
                                <label class="cursor-pointer">
                                    <input type="radio" name="type" value="upi" class="peer sr-only" x-model="type">
                                    <div
                                        class="text-center p-3 rounded-xl border border-slate-200 peer-checked:border-yellow-500 peer-checked:bg-yellow-50 transition-all">
                                        <span class="text-xs font-bold text-slate-600 peer-checked:text-slate-900">UPI
                                            ID</span>
                                    </div>
                                </label>
                            </div>

                            <div x-show="type === 'bank_transfer'" class="space-y-3">
                                <input type="text" name="bank_name" placeholder="Bank Name"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm focus:border-yellow-500 outline-none">
                                <input type="text" name="account_number" placeholder="Account Number"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm focus:border-yellow-500 outline-none">
                                <div class="grid grid-cols-2 gap-3">
                                    <input type="text" name="ifsc_code" placeholder="IFSC Code"
                                        class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm focus:border-yellow-500 outline-none">
                                    <input type="text" name="branch" placeholder="Branch"
                                        class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm focus:border-yellow-500 outline-none">
                                </div>
                            </div>

                            <div x-show="type === 'upi'" style="display: none;">
                                <input type="text" name="upi_id" placeholder="Enter UPI ID (e.g. name@okhdfcbank)"
                                    class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-2 text-sm focus:border-yellow-500 outline-none">
                            </div>

                            <button type="submit"
                                class="w-full bg-slate-900 hover:bg-slate-800 text-white font-bold py-3 rounded-xl mt-4 transition-colors text-sm">
                                Save Payment Method
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Change Password Section -->
            <div class="space-y-6">
                <div class="bg-white rounded-3xl shadow-sm border border-slate-100 p-8">
                    <h2 class="text-lg font-bold text-slate-800 mb-6 flex items-center gap-2">
                        <i data-lucide="lock" class="w-5 h-5 text-slate-400"></i>
                        Change Password
                    </h2>

                    <form action="{{ route('user.update-password') }}" method="POST" class="space-y-5" x-data="{ 
                            password: '',
                            strength: 0,
                            checks: {
                                length: false,
                                case: false,
                                number: false,
                                symbol: false
                            },
                            checkStrength() {
                                this.checks.length = this.password.length >= 8;
                                this.checks.case = /[a-z]/.test(this.password) && /[A-Z]/.test(this.password);
                                this.checks.number = /\d/.test(this.password);
                                this.checks.symbol = /[^A-Za-z0-9]/.test(this.password);

                                let score = 0;
                                if(this.checks.length) score++;
                                if(this.checks.case) score++;
                                if(this.checks.number) score++;
                                if(this.checks.symbol) score++;
                                this.strength = score;
                            }
                        }">
                        @csrf

                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Current
                                Password</label>
                            <input type="password" name="current_password"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                                required>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">New
                                Password</label>
                            <input type="password" name="password" x-model="password" @input="checkStrength()"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                                required>

                            <!-- Password Strength Indicator -->
                            <div class="mt-3 space-y-2">
                                <div class="flex gap-1 h-1">
                                    <div class="flex-1 rounded-full transition-colors duration-300"
                                        :class="strength >= 1 ? 'bg-red-500' : 'bg-slate-200'"></div>
                                    <div class="flex-1 rounded-full transition-colors duration-300"
                                        :class="strength >= 2 ? 'bg-orange-500' : 'bg-slate-200'"></div>
                                    <div class="flex-1 rounded-full transition-colors duration-300"
                                        :class="strength >= 3 ? 'bg-yellow-500' : 'bg-slate-200'"></div>
                                    <div class="flex-1 rounded-full transition-colors duration-300"
                                        :class="strength >= 4 ? 'bg-green-500' : 'bg-slate-200'"></div>
                                </div>
                                <ul class="text-[10px] text-slate-400 space-y-1">
                                    <li class="flex items-center gap-2" :class="checks.length ? 'text-green-600' : ''">
                                        <i data-lucide="check" class="w-3 h-3" x-show="checks.length"></i>
                                        <span x-show="!checks.length"
                                            class="w-3 h-3 block rounded-full bg-slate-200"></span>
                                        At least 8 characters
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div>
                            <label class="block text-xs font-bold text-slate-500 uppercase tracking-wider mb-2">Confirm New
                                Password</label>
                            <input type="password" name="password_confirmation"
                                class="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-slate-800 focus:border-yellow-500 outline-none"
                                required>
                        </div>

                        <div class="pt-4 border-t border-slate-100">
                            <button type="submit"
                                class="w-full bg-yellow-500 hover:bg-yellow-600 text-slate-900 font-bold py-4 rounded-xl shadow-lg shadow-yellow-500/20 transition-all uppercase tracking-wider">
                                Update Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
@endsection