@extends('portal.layouts.master')
@section('title', 'Account Settings')
@section('page-title', 'Account Settings')

@section('extra-css')
.account-tabs {
    display: flex; gap: 0; margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}
.account-tab {
    padding: .7rem 1.25rem; cursor: pointer;
    background: none; border: none; outline: none;
    color: var(--text-secondary); font-size: .85rem; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all .15s;
}
.account-tab:hover { color: var(--text-primary); }
.account-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.account-tab i { margin-right: .4rem; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.notif-grid { display: grid; gap: 0; }
.notif-row {
    display: grid; grid-template-columns: 1fr repeat(3, 80px);
    align-items: center; padding: .75rem 0;
    border-bottom: 1px solid var(--border);
}
.notif-row.header { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.notif-label { font-size: .85rem; font-weight: 500; }
.notif-label small { display: block; font-size: .72rem; color: var(--text-muted); font-weight: 400; margin-top: .1rem; }
.notif-check { text-align: center; }
.notif-check input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer;
}
@endsection

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-7 col-md-9">

        {{-- Tabs --}}
        <div class="account-tabs">
            <button class="account-tab active" onclick="switchTab('personal', this)">
                <i class="fas fa-user"></i> Personal Info
            </button>
            <button class="account-tab" onclick="switchTab('password', this)">
                <i class="fas fa-lock"></i> Password
            </button>
            <button class="account-tab" onclick="switchTab('notifications', this)">
                <i class="fas fa-bell"></i> Notifications
            </button>
        </div>

        {{-- ═══ Personal Info Tab ═══ --}}
        <div class="tab-panel active" id="tab-personal">
            <div class="card border-0 shadow-sm" style="border-radius:12px">
                <div class="card-body">
                    <h6 class="fw-semibold mb-1">Personal Information</h6>
                    <p class="text-muted mb-3" style="font-size:.82rem">Update your contact details and address</p>

                    <form method="POST" action="{{ route('portal.account.profile') }}">
                        @csrf

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label" style="font-size:.85rem;font-weight:500">First Name</label>
                                <input type="text" class="form-control" value="{{ $client->fname }}" disabled
                                    style="opacity:.6;cursor:not-allowed">
                                <div class="form-text" style="font-size:.7rem">Contact support to change your name</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label" style="font-size:.85rem;font-weight:500">Last Name</label>
                                <input type="text" class="form-control" value="{{ $client->lname }}" disabled
                                    style="opacity:.6;cursor:not-allowed">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" style="font-size:.85rem;font-weight:500">Email</label>
                            <input type="email" name="email" class="form-control" required
                                value="{{ old('email', $client->email) }}">
                            @error('email')
                                <div class="text-danger mt-1" style="font-size:.75rem">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label" style="font-size:.85rem;font-weight:500">Phone Number</label>
                            <input type="text" name="phone" class="form-control"
                                value="{{ old('phone', $client->phone) }}" placeholder="+1234567890">
                            @error('phone')
                                <div class="text-danger mt-1" style="font-size:.75rem">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label class="form-label" style="font-size:.85rem;font-weight:500">Address</label>
                            <textarea name="address" class="form-control" rows="3"
                                placeholder="Street, City, State, Zip, Country">{{ old('address', $client->address) }}</textarea>
                            @error('address')
                                <div class="text-danger mt-1" style="font-size:.75rem">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3" style="font-size:.9rem">
                            <span class="text-muted">KYC Status:</span>
                            @php
                                $ks = $client->kyc_status;
                                $kc = ['not_submitted'=>'secondary','pending'=>'warning','under_review'=>'info','approved'=>'success','rejected'=>'danger'];
                            @endphp
                            <span class="badge bg-{{ $kc[$ks] ?? 'secondary' }} ms-2">{{ ucwords(str_replace('_',' ',$ks)) }}</span>
                        </div>

                        <button type="submit" class="btn btn-accent w-100" style="padding:.6rem">
                            <i class="fas fa-save me-1"></i> Save Changes
                        </button>
                    </form>
                </div>
            </div>
        </div>

        {{-- ═══ Password Tab ═══ --}}
        <div class="tab-panel" id="tab-password">
            <div class="card border-0 shadow-sm" style="border-radius:12px">
                <div class="card-body">
                    <h6 class="fw-semibold mb-1">Change Password</h6>
                    <p class="text-muted mb-3" style="font-size:.82rem">Update your portal login password</p>

                    @if($errors->has('current_password'))
                    <div class="alert alert-danger py-2 mb-3" style="font-size:.82rem">{{ $errors->first('current_password') }}</div>
                    @endif

                    <form method="POST" action="{{ route('portal.account.password') }}">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.85rem;font-weight:500">Current Password</label>
                            <input type="password" name="current_password" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label" style="font-size:.85rem;font-weight:500">New Password</label>
                            <input type="password" name="password" class="form-control" required minlength="8">
                            <div class="form-text" style="font-size:.72rem">Minimum 8 characters</div>
                        </div>
                        <div class="mb-4">
                            <label class="form-label" style="font-size:.85rem;font-weight:500">Confirm New Password</label>
                            <input type="password" name="password_confirmation" class="form-control" required minlength="8">
                        </div>
                        <button type="submit" class="btn btn-accent w-100" style="padding:.6rem">
                            <i class="fas fa-key me-1"></i> Update Password
                        </button>
                    </form>
                </div>
            </div>

            <div class="card border-0 shadow-sm mt-3" style="border-radius:12px">
                <div class="card-body">
                    <h6 class="fw-semibold mb-1">Passkeys</h6>
                    <p class="text-muted mb-3" style="font-size:.82rem">Sign in with your fingerprint, Face ID, or device PIN. Add this device as a passkey (you can have more than one).</p>
                    <p class="mb-2" style="font-size:.85rem">Registered on this account: <strong>{{ $client->web_authn_credentials_count }}</strong></p>
                    <button type="button" class="btn w-100" id="btnAddPasskey" style="padding:.6rem;border:1px solid var(--border);color:var(--text-primary);font-weight:600">
                        <i class="fas fa-fingerprint me-1"></i> Add a passkey on this device
                    </button>
                    <p class="text-muted mt-2 mb-0" style="font-size:.72rem">Requires a device or browser with WebAuthn (most modern phones and desktop browsers).</p>
                </div>
            </div>
        </div>

        {{-- ═══ Notifications Tab ═══ --}}
        <div class="tab-panel" id="tab-notifications">
            <div class="card border-0 shadow-sm" style="border-radius:12px">
                <div class="card-body">
                    <h6 class="fw-semibold mb-1">Notification Preferences</h6>
                    <p class="text-muted mb-3" style="font-size:.82rem">Choose how you'd like to receive notifications for each category</p>

                    @php
                        $prefs = $client->notification_prefs ?? [];
                    @endphp

                    <form method="POST" action="{{ route('portal.account.notifications') }}">
                        @csrf

                        <div class="notif-grid">
                            {{-- Header --}}
                            <div class="notif-row header">
                                <div>Category</div>
                                <div style="text-align:center"><i class="fas fa-envelope me-1"></i> Email</div>
                                <div style="text-align:center"><i class="fas fa-sms me-1"></i> SMS</div>
                                <div style="text-align:center"><i class="fas fa-desktop me-1"></i> Desktop</div>
                            </div>

                            {{-- Marketing --}}
                            <div class="notif-row">
                                <div class="notif-label">
                                    Marketing
                                    <small>Promotions, offers, and company news</small>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="marketing[]" value="email"
                                        {{ in_array('email', $prefs['marketing'] ?? []) ? 'checked' : '' }}>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="marketing[]" value="sms"
                                        {{ in_array('sms', $prefs['marketing'] ?? []) ? 'checked' : '' }}>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="marketing[]" value="desktop"
                                        {{ in_array('desktop', $prefs['marketing'] ?? []) ? 'checked' : '' }}>
                                </div>
                            </div>

                            {{-- Trading Analysis --}}
                            <div class="notif-row">
                                <div class="notif-label">
                                    Trading Analysis
                                    <small>Market reports, signals, and expert insights</small>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="trading_analysis[]" value="email"
                                        {{ in_array('email', $prefs['trading_analysis'] ?? []) ? 'checked' : '' }}>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="trading_analysis[]" value="sms"
                                        {{ in_array('sms', $prefs['trading_analysis'] ?? []) ? 'checked' : '' }}>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="trading_analysis[]" value="desktop"
                                        {{ in_array('desktop', $prefs['trading_analysis'] ?? []) ? 'checked' : '' }}>
                                </div>
                            </div>

                            {{-- Price Alert --}}
                            <div class="notif-row">
                                <div class="notif-label">
                                    Price Alert
                                    <small>Notifications when instruments hit your target price</small>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="price_alert[]" value="email"
                                        {{ in_array('email', $prefs['price_alert'] ?? []) ? 'checked' : '' }}>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="price_alert[]" value="sms"
                                        {{ in_array('sms', $prefs['price_alert'] ?? []) ? 'checked' : '' }}>
                                </div>
                                <div class="notif-check">
                                    <input type="checkbox" name="price_alert[]" value="desktop"
                                        {{ in_array('desktop', $prefs['price_alert'] ?? []) ? 'checked' : '' }}>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-accent w-100 mt-4" style="padding:.6rem">
                            <i class="fas fa-save me-1"></i> Save Preferences
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('page-js')
<script>
function switchTab(tab, btn) {
    document.querySelectorAll('.account-tab').forEach(function(t) { t.classList.remove('active'); });
    btn.classList.add('active');
    document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
    var panel = document.getElementById('tab-' + tab);
    if (panel) panel.classList.add('active');
}

// Auto-switch to password tab if there are password errors
@if($errors->has('current_password') || $errors->has('password'))
document.addEventListener('DOMContentLoaded', function() {
    var btn = document.querySelectorAll('.account-tab')[1];
    switchTab('password', btn);
});
@endif
</script>
<script src="https://cdn.jsdelivr.net/npm/@laragear/webpass@2/dist/webpass.js"></script>
<script>
document.getElementById('btnAddPasskey') && document.getElementById('btnAddPasskey').addEventListener('click', async function() {
    if (typeof Webpass === 'undefined' || !Webpass.isSupported()) {
        if (window.showPortalToast) {
            showPortalToast('This browser does not support passkeys.', 'error', { duration: 6000 });
        } else { alert('This browser does not support passkeys.'); }
        return;
    }
    const btn = this;
    const prev = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Follow the prompts on your device…';
    try {
        const w = Webpass.create({
            findCsrfToken: true,
            credentials: 'same-origin',
            routes: {
                attestOptions: @json(route('portal.webauthn.register.options', [], true)),
                attest: @json(route('portal.webauthn.register', [], true)),
            },
        });
        const out = await w.attest();
        if (out.success) {
            if (window.showPortalToast) {
                showPortalToast('Passkey added. You can use it to sign in from the login page.', 'success', { duration: 2800 });
                setTimeout(function () { window.location.reload(); }, 2800);
            } else {
                alert('Passkey added. You can use it to sign in from the login page.');
                window.location.reload();
            }
        } else {
            const m = (out.error && out.error.message) || 'Passkey was not added.';
            if (window.showPortalToast) {
                showPortalToast(m, 'error', { duration: 8000 });
            } else { alert(m); }
        }
    } catch (e) {
        console.error(e);
        if (window.showPortalToast) {
            showPortalToast('Could not add passkey. Try again or use another browser.', 'error', { duration: 6000 });
        } else { alert('Could not add passkey. Try again or use another browser.'); }
    } finally {
        btn.innerHTML = prev;
        btn.disabled = false;
    }
});
</script>
@endsection