{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The user's settings: the optional wallet PIN (enable,
     change, remove) and which events go out by SMS.
=====================================================
--}}

@extends('layouts.user')

@section('title', __('front.settings.title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('front.dashboard.breadcrumb'), 'url' => route('account.dashboard')],
        ['label' => __('front.settings.breadcrumb')],
    ]" />
@endsection

@section('page')
    <div class="mb-5">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.settings.title') }}</h1>
        <p class="text-sm text-ink-muted">{{ __('front.settings.subtitle') }}</p>
    </div>

    {{-- Info box --}}
    <div class="mb-5 flex items-start gap-2.5 rounded-xl border border-primary-600/15 bg-[#f6f4fd] px-4 py-3 text-[12.5px] leading-7 text-primary-700">
        <svg class="mt-1 size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 16v-5M12 8h.01"/></svg>
        <p>{{ __('front.settings.info') }}</p>
    </div>

    <div class="flex flex-col gap-5">
        {{-- ===== PIN ===== --}}
        <div class="rounded-2xl border border-line bg-white p-6" x-data="{ mode: 'idle', busy: false }">
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div class="min-w-0">
                    <div class="flex items-center gap-2">
                        <span class="text-base font-bold">{{ __('front.settings.pin.title') }}</span>
                        @if ($user->hasPin())
                            <span class="inline-flex items-center gap-1 rounded-full bg-[#e7f7ee] px-2.5 py-1 text-[11px] font-bold text-green-600">
                                <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                {{ __('front.settings.pin.status_on') }}
                            </span>
                        @else
                            <span class="inline-flex rounded-full bg-secondary-50 px-2.5 py-1 text-[11px] font-bold text-ink-faint">{{ __('front.settings.pin.status_off') }}</span>
                        @endif
                    </div>
                    <p class="mt-1.5 max-w-xl text-[12.5px] leading-7 text-ink-faint">{{ __('front.settings.pin.desc') }}</p>
                </div>

                <div class="flex shrink-0 gap-2">
                    @if (! $user->hasPin())
                        <button type="button" x-on:click="mode = (mode === 'set' ? 'idle' : 'set')"
                                class="rounded-xl bg-primary-600 px-5 py-2.5 text-[13px] font-bold text-white transition hover:bg-primary-700">{{ __('front.settings.pin.enable') }}</button>
                    @else
                        <button type="button" x-on:click="mode = (mode === 'change' ? 'idle' : 'change')"
                                class="rounded-xl border-[1.5px] border-primary-600/30 px-4 py-2.5 text-[13px] font-bold text-primary-600 transition hover:bg-primary-50">{{ __('front.settings.pin.change') }}</button>
                        <button type="button" x-on:click="mode = (mode === 'remove' ? 'idle' : 'remove')"
                                class="rounded-xl border-[1.5px] border-secondary-500/30 px-4 py-2.5 text-[13px] font-bold text-secondary-500 transition hover:bg-secondary-50">{{ __('front.settings.pin.remove') }}</button>
                    @endif
                </div>
            </div>

            {{-- Physical-card services need the PIN turned on. --}}
            <div class="mt-4 flex items-start gap-2 rounded-xl bg-[#fff7ea] px-3.5 py-2.5 text-[12px] leading-6 text-[#946100]">
                <svg class="mt-0.5 size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="M2.5 9.5h19"/></svg>
                {{ __('front.settings.pin.card_note') }}
            </div>

            {{-- Enable --}}
            <form x-show="mode === 'set'" x-cloak x-ref="setForm" method="POST" action="{{ route('account.settings.pin') }}" class="mt-5 border-t border-[#f0eff5] pt-5">
                @csrf
                <input type="hidden" name="action" value="set">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.settings.pin.new_label') }}</label>
                        <input name="pin" inputmode="numeric" maxlength="4" dir="ltr" autocomplete="off"                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-center text-lg font-bold tracking-[0.4em] outline-none transition focus:border-primary-600 focus:bg-white">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.settings.pin.confirm_label') }}</label>
                        <input name="pin_confirmation" inputmode="numeric" maxlength="4" dir="ltr" autocomplete="off"                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-center text-lg font-bold tracking-[0.4em] outline-none transition focus:border-primary-600 focus:bg-white">
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <button type="button" x-bind:disabled="busy"
                            x-on:click="$store.confirm.ask({ message: @js(__('front.settings.pin.confirm_enable')), onConfirm: () => { busy = true; $refs.setForm.submit(); } })"
                            class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-bold text-white transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                        {{ __('front.settings.pin.enable') }}
                    </button>
                </div>
            </form>

            {{-- Change --}}
            <form x-show="mode === 'change'" x-cloak x-ref="changeForm" method="POST" action="{{ route('account.settings.pin') }}" class="mt-5 border-t border-[#f0eff5] pt-5">
                @csrf
                <input type="hidden" name="action" value="change">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.settings.pin.current_label') }}</label>
                        <input name="current_pin" inputmode="numeric" maxlength="4" dir="ltr" autocomplete="off"
                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-center text-lg font-bold tracking-[0.4em] outline-none transition focus:border-primary-600 focus:bg-white">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.settings.pin.new_label') }}</label>
                        <input name="pin" inputmode="numeric" maxlength="4" dir="ltr" autocomplete="off"
                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-center text-lg font-bold tracking-[0.4em] outline-none transition focus:border-primary-600 focus:bg-white">
                    </div>
                    <div>
                        <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.settings.pin.confirm_label') }}</label>
                        <input name="pin_confirmation" inputmode="numeric" maxlength="4" dir="ltr" autocomplete="off"
                               class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-center text-lg font-bold tracking-[0.4em] outline-none transition focus:border-primary-600 focus:bg-white">
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <button type="button" x-bind:disabled="busy"
                            x-on:click="$store.confirm.ask({ message: @js(__('front.settings.pin.confirm_change')), onConfirm: () => { busy = true; $refs.changeForm.submit(); } })"
                            class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-bold text-white transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                        {{ __('front.settings.pin.change') }}
                    </button>
                </div>
            </form>

            {{-- Remove --}}
            <form x-show="mode === 'remove'" x-cloak x-ref="removeForm" method="POST" action="{{ route('account.settings.pin') }}" class="mt-5 border-t border-[#f0eff5] pt-5">
                @csrf
                <input type="hidden" name="action" value="remove">
                <div class="max-w-xs">
                    <label class="mb-1.5 block text-[13px] font-bold">{{ __('front.settings.pin.current_label') }}</label>
                    <input name="current_pin" inputmode="numeric" maxlength="4" dir="ltr" autocomplete="off"
                           class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-center text-lg font-bold tracking-[0.4em] outline-none transition focus:border-primary-600 focus:bg-white">
                </div>
                <div class="mt-4 flex justify-end">
                    <button type="button" x-bind:disabled="busy"
                            x-on:click="$store.confirm.ask({ message: @js(__('front.settings.pin.confirm_remove')), onConfirm: () => { busy = true; $refs.removeForm.submit(); } })"
                            class="inline-flex items-center gap-2 rounded-xl bg-secondary-500 px-6 py-3 text-sm font-bold text-white transition hover:bg-secondary-600 disabled:cursor-not-allowed disabled:opacity-60">
                        <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                        {{ __('front.settings.pin.remove') }}
                    </button>
                </div>
            </form>
        </div>

        {{-- ===== Notifications ===== --}}
        <form method="POST" action="{{ route('account.settings.notifications') }}" x-data="{ busy: false }" x-ref="notifForm"
              class="rounded-2xl border border-line bg-white p-6">
            @csrf
            <div class="mb-1 text-base font-bold">{{ __('front.settings.notifications.title') }}</div>
            <p class="mb-5 max-w-2xl text-[12.5px] leading-7 text-ink-faint">{{ __('front.settings.notifications.desc') }}</p>

            <div class="flex flex-col divide-y divide-[#f0eff5]">
                @foreach ($groups as $group)
                    <label class="flex cursor-pointer items-center justify-between gap-4 py-3.5">
                        <span class="min-w-0">
                            <span class="block text-[13.5px] font-bold">{{ __('front.settings.notifications.groups.'.$group) }}</span>
                            <span class="mt-0.5 block text-[11.5px] leading-6 text-ink-faint">{{ __('front.settings.notifications.groups_hint.'.$group) }}</span>
                        </span>
                        <span class="relative inline-flex shrink-0">
                            <input type="checkbox" name="prefs[{{ $group }}]" value="1" @checked($prefs[$group] ?? true) class="peer sr-only">
                            <span class="h-6 w-11 rounded-full bg-[#d9d7e4] transition peer-checked:bg-primary-600"></span>
                            <span class="absolute top-0.5 right-0.5 size-5 rounded-full bg-white shadow transition peer-checked:-translate-x-5"></span>
                        </span>
                    </label>
                @endforeach
            </div>

            <div class="mt-5 flex justify-end">
                <button type="button" x-bind:disabled="busy"
                        x-on:click="$store.confirm.ask({ message: @js(__('front.settings.notifications.confirm_save')), onConfirm: () => { busy = true; $refs.notifForm.submit(); } })"
                        class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-7 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-60">
                    <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                    {{ __('front.settings.notifications.save') }}
                </button>
            </div>
        </form>
    </div>
@endsection