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

@section('content')
    <div class="min-h-screen  flex-1" x-data="settingsPage()">
        <div class="container w-full lg:w-5/6 mx-auto px-4 py-6">
            <!-- Toast -->
            <div x-show="toast.show" x-transition x-text="toast.message"
                :class="toast.success ? 'bg-green-600' : 'bg-red-600'"
                class="fixed top-4 right-4 px-4 py-2 rounded-lg text-white shadow-lg z-50">
            </div>

            <!-- 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-gray-200 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-gray-200">Preference</div>
                <div class="flex-1"></div>
            </div>

            <div class="text-gray-400 text-sm mb-6">
                Manage your contact info, languages, notifications, themes and more.
            </div>

            <!-- Mobile Number -->
            <div class=" rounded-xl p-4 mb-4 flex  md:flex-row justify-between items-center">
                <div class="mb-3 md:mb-0 w-1/2">
                    <div class="text-white font-semibold">Mobile Number
                        <span class="text-red-500 ml-2">Unverified</span>
                    </div>
                    <p class="text-gray-400 mt-1 text-xs">
                        Your mobile phone can be used to enable two-factor authentication, helping to secure your wallet
                        from unauthorized access, and to send bitcoin payment alerts when you receive funds.
                    </p>
                </div>
                <div>
                    <button @click="toggleForm('mobileNumber')" type="button"
                        class="bg-white text-gray-900 text-sm px-4 py-2 rounded-lg hover:bg-white transition">Add Mobile
                        Number</button>
                </div>
            </div>

            <!-- Mobile Number Form -->
            <form x-show="forms.mobileNumber" x-transition class="mb-4  rounded-xl p-4" style="display:none"
                @submit.prevent="submitForm('mobileNumber', '{{ route('user.settings.preference.logout.auto') }}')">
                @csrf
                <label class="block text-white font-semibold mb-1">Mobile Number</label>
                <input type="text" name="ps" x-model="mobileNumber" placeholder="Mobile Number"
                    class="w-full p-2 rounded-lg  border form-control form-control text-white mb-4 focus:outline-none focus:ring-2 focus:ring-biege" />

                <div class="flex space-x-2">
                    <button type="submit"
                        class="bg-primary-gradient text-white px-4 py-2 rounded-lg hover:bg-beige transition">Update</button>
                    <button type="button" @click="toggleForm('mobileNumber', true)"
                        class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition">Cancel</button>
                </div>
            </form>

            <!-- Default Coin -->
            <div class=" rounded-xl p-4 mb-4 flex  md:flex-row justify-between items-center">
                <div>
                    <div class="text-white font-semibold">Default Coin</div>
                    <p class="text-white text-sm mt-1">Select your default coin.</p>
                </div>
                <div>
                    <select x-model="cryptoCurrency"
                        @change="updatePreference('crypto', cryptoCurrency, '{{ route('user.settings.preference.currency.update', 'crypto') }}')"
                        class=" text-white p-2 rounded-lg border form-control focus:outline-none focus:ring-2 focus:ring-biege lg:w-[400px]">
                        {!! select_options('crypto', $user->cryptoCurrency) !!}
                    </select>
                </div>
            </div>

            <!-- Wallet Display Currency -->
            <div class=" rounded-xl p-4 mb-4 flex  md:flex-row justify-between items-center">
                <div>
                    <div class="text-white font-semibold">Wallet Display Currency</div>
                    <p class="text-white text-sm mt-1">Select your wallet display currency.</p>
                </div>
                <div>
                    <select x-model="fiatCurrency"
                        @change="updatePreference('fiat', fiatCurrency, '{{ route('user.settings.preference.currency.update', 'fiat') }}')"
                        class="text-white p-2 rounded-lg border form-control focus:outline-none focus:ring-2 focus:ring-biege lg:w-[400px]">
                        {!! select_options('fiat', $user->useCurrency) !!}
                    </select>
                </div>
            </div>

            <!-- Notifications -->
            <div class=" rounded-xl p-4 mb-4 flex  md:flex-row justify-between items-center">
                <div>
                    <div class="text-white font-semibold">Notifications</div>
                    <p class="text-white text-sm mt-1">Choose how to get notified when you receive crypto.</p>
                </div>
                <div class="flex space-x-4 mt-2 md:mt-0">
                    <label class="flex items-center space-x-2">
                        <input type="checkbox" x-model="emailAlert"
                            @change="updatePreference('email', emailAlert ? 'on' : 'off', '{{ route('user.settings.preference.email.update') }}')"
                            class="h-5 w-5 text-orange-500 rounded">
                        <span class="text-white">Email</span>
                    </label>
                    @if(system_settings('sms_alert') == 'on')
                        <label class="flex items-center space-x-2">
                            <input type="checkbox" x-model="smsAlert"
                                @change="updatePreference('sms', smsAlert ? 'on' : 'off', '{{ route('user.settings.preference.sms.update') }}')"
                                @if(blank($user->phone)) disabled @endif class="h-5 w-5 text-orange-500 rounded">
                            <span class="text-white">SMS</span>
                        </label>
                    @endif
                </div>
            </div>

            <!-- Auto Logout -->
            <div class=" rounded-xl p-4 mb-4 flex  md:flex-row justify-between items-center">
                <div>
                    <div class="text-white font-semibold">Auto Logout</div>
                    <p class="text-white text-sm mt-1">After a certain period of inactivity, you will be automatically
                        logged out of your wallet.</p>
                </div>
                <div class="flex flex-col  items-center space-x-4 mt-2 md:mt-0">
                    <span x-text="autoLogout + ' minutes'" class="text-white"></span>
                    <button @click="toggleForm('autoLogout')" type="button"
                        class="bg-white text-gray-900 px-4 py-2 rounded-lg hover:bg-white transition">Change</button>
                </div>
            </div>

            <!-- Auto Logout Form -->
            <form x-show="forms.autoLogout" x-transition class="mb-4  rounded-xl p-4"
                @submit.prevent="submitForm('autoLogout', '{{ route('user.settings.preference.logout.auto') }}')">
                @csrf
                <label class="block text-white font-semibold mb-1">Auto Logout (Minutes)</label>
                <input type="text" x-model="autoLogout" name="ps" placeholder="Auto Logout (Minutes)"
                    class="w-full p-2 rounded-lg bg-gray-700 border border-gray-600 text-white mb-4 focus:outline-none focus:ring-2 focus:ring-biege">

                <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">Update</button>
                    <button type="button" @click="toggleForm('autoLogout', true)"
                        class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition">Cancel</button>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('javascript')
    <script>
        function settingsPage() {
            return {
                // Data
                forms: { mobileNumber: false, autoLogout: false },
                toast: { show: false, message: '', success: true },
                mobileNumber: '{{ $user->phone }}',
                cryptoCurrency: '{{ $user->crypto_currency }}',
                fiatCurrency: '{{ $user->currency }}',
                emailAlert: {{ $user->email_notify == '1' ? 'true' : 'false' }},
                smsAlert: {{ $user->phone_notify == '1' ? 'true' : 'false' }},
                autoLogout: '{{ $user->auto_logout }}',

                // Methods
                toggleForm(form, hide = false) {
                    if (hide) this.forms[form] = false
                    else this.forms[form] = !this.forms[form]
                },

                showToast(message, success = true) {
                    this.toast.message = message
                    this.toast.success = success
                    this.toast.show = true
                    setTimeout(() => this.toast.show = false, 3000)
                },

                updatePreference(type, value, url) {
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ v: value })
                    })
                        .then(res => res.json())
                        .then(data => {
                            fireNotification({
                                type: data.type || 'success',
                                message: data.message
                            })
                        }).catch(() => {
                                fireNotification({
                                    type: 'error',
                                    message: 'An error occurred while updating.'
                                });
                            });
                        },

                            submitForm(form, url) {
                                let payload = {}
                if(form=== 'mobileNumber') payload.ps = this.mobileNumber
                    if (form === 'autoLogout') payload.ps = this.autoLogout

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(payload)
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.status) {
                                if (form === 'autoLogout') this.autoLogout = data.v
                                if (form === 'mobileNumber') this.mobileNumber = data.v
                                this.toggleForm(form, true)
                            }
                            fireNotification({
                                type: data.type || 'success',
                                message: data.message
                            })
                        }).catch(() => {
                                fireNotification({
                                    type: 'error',
                                    message: 'An error occurred while updating.'
                                });
                            });
                }
            }
        }
    </script>
@endpush