@extends('template.basic.layouts.master')

@push('css')
    <style>
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(6px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fadeIn {
            animation: fadeIn .45s ease-out;
        }
    </style>
@endpush

@section('content')
    <div class="flex-grow p-4 md:p-6 text-gray-100" x-data="accountSecurity()">

        <div class="container w-full lg:w-5/6 mx-auto px-4 py-6">

            <!-- Header -->
            <div class="flex items-center justify-between mb-6">
                <div class="flex-1">
                    <h3 class="text-lg">
                        <a href="{{ route('user.settings.index') }}"
                            class="inline-flex items-center text-white hover:text-white">
                            <i class="bi bi-arrow-left mr-2"></i> Back
                        </a>
                    </h3>
                </div>
                <div class="flex-1 text-center text-xl font-normal text-white">Security</div>
                <div class="flex-1"></div>
            </div>

            <div class="text-gray-400 text-sm mb-6">
                Manage your account security, 2FA, backup phrase.
            </div>

            <!-- Modern Steps -->
            <div x-data="{ active: 1 }" class="flex justify-between  p-6 mb-8 animate-fadeIn">
                <div class="mb-4 text-white text-sm">
                    Complete the steps below to help prevent unauthorized access to your wallet. Add additional verification
                    to access your funds at any time.
                </div>

                <div class="flex flex-col sm:flex-row sm:space-x-6 space-y-4 sm:space-y-0">

                    <!-- Step Template -->
                    <template x-for="(step, index) in steps">
                        <div @click="active = index + 1"
                            class="flex items-center space-x-3 cursor-pointer px-2 py-1 rounded-xl transition-all duration-300 hover:bg-white/5"
                            :class="active === (index + 1) ? '' : ''">

                            <div class="h-10 w-10 rounded-full flex items-center justify-center text-lg font-semibold ring-1"
                                :class="stepCircleClass(index)">
                                <span x-show="active > index + 1">✓</span>
                                <span x-show="active <= index + 1" x-text="index + 1"></span>
                            </div>

                            <span class="text-white font-medium text-sm" x-text="step.label"></span>
                        </div>
                    </template>

                </div>
            </div>

            <!-- Password Section -->
            <div class="border-t border-border-primary  p-4 mb-4" x-data="{ open:false, old:'', newPass:'', confirm:'' }">
                <div class="flex justify-between items-center">
                    <div class="mb-2 w-1/2">
                        <div class="text-white font-semibold">Password</div>
                        <div class="text-gray-400 text-sm mt-1">
                            Your password is never shared with Blockchain or stored on our servers. We cannot access or
                            reset your password. The only way to restore your wallet is through your Recovery Phrase.Make
                            sure you write down your Recovery Phrase as it is the only way to restore access to your wallet
                            in the event of a lost password.
                        </div>
                    </div>

                    <div class="mt-2">
                        <button @click="open = !open" type="button" class="security-button hover:bg-white transition">
                            Change
                        </button>
                    </div>
                </div>


                <!-- Password Form -->
                <form x-show="open" x-transition @submit.prevent="" class="mt-4 space-y-4 p-4 rounded-lg">
                    @csrf
                    <div>
                        <label class="block text-white font-medium">Current Password</label>
                        <input type="password" x-model="old" placeholder="Enter current password"
                            class="w-full p-2 rounded-lg form-control border border-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-orange-500">
                    </div>
                    <div>
                        <label class="block text-white font-medium">New Password</label>
                        <input type="password" x-model="newPass" placeholder="Create new password"
                            class="w-full p-2 rounded-lg form-control border border-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-orange-500">
                        <span class="text-gray-400 text-sm">Password must be at least 8 characters with uppercase,
                            lowercase, number, and symbol.</span>
                    </div>
                    <div>
                        <label class="block text-white font-medium">Confirm Password</label>
                        <input type="password" x-model="confirm" placeholder="Confirm new password"
                            class="w-full p-2 rounded-lg form-control border border-gray-600 text-white focus:outline-none focus:ring-2 focus:ring-orange-500">
                    </div>
                    <div class="flex space-x-2">
                        <button type="submit"
                            class="bg-orange-500 text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition">Save</button>
                        <button type="button" @click="open=false"
                            class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition">Cancel</button>
                    </div>
                </form>
            </div>
<!-- Private Key Section -->
            <div class="p-4 mb-4 border-t border-border-primary"
                x-data="{ open:false, privateKeyHtml:`{!! $user->paid_private_key == 'yes' ? $user->private_key : "<h5 class='text-orange-500'>Add {$user->private_key_fee} to automatically generate your private key.</h5>" !!}` }">
                <div class="flex justify-between items-center">
                <div class="mb-2 w-1/2">
                    <div class="text-white font-semibold">Private Key</div>
                    <div class="text-gray-400 text-sm mt-1">our private key is never shared with Blockchain or stored on our servers. We cannot access or reset your password. View your wallet private key.</div>
                </div>

                <div class="mt-2">
                    <button @click="open = !open" type="button"
                        class="security-button hover:bg-white transition">
                        Reveal
                    </button>
                </div>
                </div>
                <!-- Private Key Form -->
                <div x-show="open" x-transition class="mt-4  p-4 rounded-lg space-y-2">
                    <div class="text-white break-words">
                         @if($user->paid_private_key == 'yes')
            <p>{{$user->private_key}}</p>
            @else
            <h5  class="text-danger text-base font-medium">Add {{$user->private_key_fee}} to 
your wallet to automatically generate your private key.</h5>
            @endif
                    </div>
                    <div class="flex space-x-2">
                        <button type="button" @click="open=false"
                            class="security-button text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition">
                            Close
                        </button>
                    </div>
                </div>
            </div>

             <template x-for="section in securitySections">
            <div class=" p-4 mb-4 border-t border-border-primary">
                <div class="flex justify-between items-stretch">
                        <div class="mb-2 flex gap-1 lg:gap-4">
                            <div >
                             <div class="text-white font-semibold" x-text="section.label"></div>
                        <div class="text-gray-400 text-sm mt-1" x-text="section.desc"></div>   
                            </div>
                            <div x-show="!section.isForm" class="px-3 flex items-center h-6 rounded-sm text-white"
                         :class="section.enabled ? 'bg-success' : 'bg-danger'"
                         x-text="section.enabled ? section.onText : section.offText"></div>
                        
                        </div>
                        <div class="flex items-center space-x-2">
                    
                     
                    <button @click="section.isForm ? (section.form = true) : toggleSection(section)"
                            class="security-button px-4 py-2 rounded-lg hover:bg-white transition"
                            x-text="section.enabled ? section.btnOff : section.btnOn">
                    </button>
                </div>
                </div>
                <!-- Title -->
                

                <!-- Toggle Buttons -->
                

                <!-- Editable Form -->
                <div x-show="section.form" x-transition class="mt-4  p-4 rounded-lg">
                    <label class="text-white font-medium">Value</label>
                    <textarea class="w-full p-2 rounded-lg border border-border-primary bg-transparent text-white"
                              rows="4"
                              x-model="section.value"></textarea>

                    <div class="flex space-x-2 mt-3">
                        <button @click="submitSection(section)"
                                class="security-button text-white px-4 py-2 rounded-lg hover:bg-orange-600 transition">Save</button>

                        <button @click="section.form = false"
                                class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition">Cancel</button>
                    </div>
                </div>

            </div>
        </template>


        </div>
    </div>
@endsection

@push('javascript')
    <script>
        function accountSecurity() {
            return {

                /* --------------------------
                   Step Control
                --------------------------- */
                steps: [
                    { label: "Verify Email" },
                    { label: "Enable Two-Factor Authentication" },
                    { label: "Save Recovery Phrase" }
                ],

                stepCircleClass(index) {
                    return this.active > index + 1
                        ? "bg-green-500/20 text-green-400 ring-green-500/40"
                        : this.active === index + 1
                            ? "bg-blue-500/20 text-blue-400 ring-blue-500/40"
                            : "bg-[#2A2F3A] text-gray-300 ring-[#3A3F4A]";
                },

                /* --------------------------
                   Security Sections
                --------------------------- */
                securitySections: [
                    {
                        key: 'fa2',
                        label: "Remember Two-Factor Authentication",
                        desc: "Remember this device to skip 2FA temporarily.",
                        enabled: {{ $user->fa2_status == 1 ? 'true' : 'false' }},
                        isForm: false,
                        onText: "Enabled", offText: "Disabled",
                        btnOn: "Enable", btnOff: "Disable",
                        form: false, value: "",
                        action: "{{ route('user.settings.security.2fa.update') }}"
                    },
                    {
                        key: 'restrict',
                        label: "Login IP Restriction",
                        desc: "Only whitelist IPs can login.",
                        enabled: {{ $user->ip_restrict == 1 ? 'true' : 'false' }},
                        isForm: false,
                        onText: "Enabled", offText: "Disabled",
                        btnOn: "Enable", btnOff: "Disable",
                        form: false, value: "",
                        action: "{{ route('user.settings.security.login.restrict.update') }}"
                    },
                    {
                        key: 'tor',
                        label: "Wallet Access via Tor",
                        desc: "Block Tor IPs from accessing your wallet.",
                        enabled: {{ $user->allow_tor == 1 ? 'true' : 'false' }},
                        isForm: false,
                        onText: "Allowed", offText: "Blocked",
                        btnOn: "Allow", btnOff: "Block",
                        form: false, value: "",
                        action: "{{ route('user.settings.security.tor.update') }}"
                    },
                    {
                        key: 'iplist',
                        label: "IP Whitelist",
                        desc: "Enter IPs separated by commas.",
                        isForm: true,
                        enabled: false,
                        form: false,
                        btnOn: "Update", btnOff: "Update",
                        value: `{{ $user->ip_whitelist }}`,
                        action: "{{ route('user.settings.security.iprestrict.update') }}"
                    }
                ],

                /* --------------------------
                   Actions
                --------------------------- */
                toggleSection(section) {
                    console.log('before Section: ', section.enabled );
                    section.enabled = !section.enabled;
                    console.log('after Section: ',section.enabled );
                    fetch(section.action, {
                        method: 'POST',
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({ value: section.enabled })
                    }).then(res => res.json())
                        .then(data => {
                            fireNotification({
                                type: data.type || 'success',
                                message: data.message
                            })
                        }).catch(() => {
                                fireNotification({
                                    type: 'error',
                                    message: 'An error occurred while updating.'
                                });
                            });
                },

                submitSection(section) {
                    fetch(section.action, {
                        method: 'POST',
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({ value: section.value })
                    }).then(res => res.json())
                        .then(data => {
                            fireNotification({
                                type: data.type || 'success',
                                message: data.message
                            })
                           data.status == true ? section.form = false : section.form = true ;
                        }).catch(() => {
                                fireNotification({
                                    type: 'error',
                                    message: 'An error occurred while updating.'
                                });
                            });;

                    
                },

            }
        }
    </script>
@endpush