@extends('layouts.app')

@section('title', 'Settings')

@push('styles')
<style>
    .settings-page h1 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .settings-page h1 i { color: var(--accent); }

    .settings-section {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .settings-section-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-size: 0.95rem;
        font-weight: 600;
    }

    .settings-section-header i { color: var(--accent); }

    .settings-section-body {
        padding: 1.5rem;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group:last-child {
        margin-bottom: 0;
    }

    .form-label {
        display: block;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
    }

    .form-input,
    .form-select {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
        transition: border-color var(--transition);
    }

    .form-input:focus,
    .form-select:focus { border-color: var(--accent); }

    .form-error {
        display: block;
        font-size: 0.75rem;
        color: var(--danger);
        margin-top: 0.375rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Avatar Upload */
    .avatar-upload {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .avatar-preview {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--accent-light);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 1.5rem;
        font-weight: 700;
        overflow: hidden;
        border: 3px solid var(--border);
    }

    .avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar-upload-info {
        flex: 1;
    }

    .avatar-upload-info p {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.375rem;
    }

    /* Toggle Switch */
    .notification-toggles {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border);
    }

    .toggle-row:last-child { border-bottom: none; }

    .toggle-info {
        flex: 1;
    }

    .toggle-label {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--text-primary);
    }

    .toggle-desc {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.125rem;
    }

    .toggle-switch {
        position: relative;
        width: 48px;
        height: 26px;
        flex-shrink: 0;
    }

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-slider {
        position: absolute;
        cursor: pointer;
        inset: 0;
        background: var(--border);
        border-radius: 26px;
        transition: 0.3s;
    }

    .toggle-slider::before {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: 0.3s;
    }

    .toggle-switch input:checked + .toggle-slider {
        background: var(--accent);
    }

    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(22px);
    }

    /* Action Buttons */
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }

    /* Alert */
    .alert-success {
        background: var(--success-light);
        border: 1px solid rgba(0, 212, 170, 0.3);
        border-radius: var(--radius-md);
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
        color: var(--success);
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    @media (max-width: 640px) {
        .form-row { grid-template-columns: 1fr; }
        .avatar-upload { flex-direction: column; text-align: center; }
    }
</style>
@endpush

@section('content')
    <div class="settings-page">
        <h1><i class="fas fa-cog"></i> Settings</h1>

        @if(session('success'))
            <div class="alert-success">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        {{-- Profile Section --}}
        <div class="settings-section">
            <div class="settings-section-header">
                <i class="fas fa-user"></i> Profile Information
            </div>
            <div class="settings-section-body">
                <form method="POST" action="{{ route('escrow.settings.profile.update') }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="avatar-upload">
                        <div class="avatar-preview" id="avatarPreview">
                            @if(auth()->user()->avatar_url)
                                <img src="{{ auth()->user()->avatar_url }}" alt="Avatar"
                                     onerror="this.outerHTML='{{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) }}'">
                            @else
                                {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) }}
                            @endif
                        </div>
                        <div class="avatar-upload-info">
                            <label class="btn btn-sm btn-secondary" for="avatarInput" style="cursor: pointer;">
                                <i class="fas fa-camera"></i> Change Photo
                            </label>
                            <input type="file" id="avatarInput" name="avatar" accept="image/*" style="display: none;" onchange="previewAvatar(this)">
                            <p>JPG, PNG. Max 2MB.</p>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label" for="first_name">First Name</label>
                            <input type="text" class="form-input" id="first_name" name="first_name" value="{{ old('first_name', auth()->user()->first_name) }}">
                            @error('first_name')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="last_name">Last Name</label>
                            <input type="text" class="form-input" id="last_name" name="last_name" value="{{ old('last_name', auth()->user()->last_name) }}">
                            @error('last_name')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="email">Email Address</label>
                        <input type="email" class="form-input" id="email" value="{{ auth()->user()->email }}" disabled style="opacity: 0.6;">
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="phone">Phone Number</label>
                        <input type="tel" class="form-input" id="phone" name="phone" value="{{ old('phone', auth()->user()->phone) }}" placeholder="+234 800 000 0000">
                        @error('phone')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="currency">Preferred Currency</label>
                        <select class="form-input" id="currency" name="currency" style="cursor:pointer;">
                            @php
                                $currencies = [
                                    'NGN' => 'Nigerian Naira (₦)',
                                    'USD' => 'US Dollar ($)',
                                    'GBP' => 'British Pound (£)',
                                    'EUR' => 'Euro (€)',
                                    'GHS' => 'Ghanaian Cedi (GH₵)',
                                    'KES' => 'Kenyan Shilling (KSh)',
                                    'ZAR' => 'South African Rand (R)',
                                ];
                                $userCurrency = old('currency', auth()->user()->currency ?? 'NGN');
                            @endphp
                            @foreach($currencies as $code => $label)
                                <option value="{{ $code }}" {{ $userCurrency === $code ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('currency')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Changes</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Security Section --}}
        <div class="settings-section">
            <div class="settings-section-header">
                <i class="fas fa-shield-halved"></i> Security
            </div>
            <div class="settings-section-body">
                <form method="POST" action="{{ route('escrow.settings.password.update') }}">
                    @csrf
                    @method('PUT')

                    <div class="form-group">
                        <label class="form-label" for="current_password">Current Password</label>
                        <input type="password" class="form-input" id="current_password" name="current_password" required>
                        @error('current_password')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label" for="new_password">New Password</label>
                            <input type="password" class="form-input" id="new_password" name="password" required>
                            @error('password')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="password_confirmation">Confirm New Password</label>
                            <input type="password" class="form-input" id="password_confirmation" name="password_confirmation" required>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-key"></i> Update Password</button>
                    </div>
                </form>

                <hr style="border: none; border-top: 1px solid var(--border); margin: 1.5rem 0;">

                {{-- PIN Setup --}}
                <form method="POST" action="{{ route('escrow.settings.pin.update') }}">
                    @csrf
                    @method('PUT')

                    <h4 style="font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem;">Transaction PIN</h4>

                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label" for="pin">{{ auth()->user()->has_pin ? 'New PIN' : 'Set PIN' }}</label>
                            <input type="password" class="form-input" id="pin" name="pin" maxlength="6" placeholder="Enter 4-6 digit PIN" required>
                            @error('pin')
                                <span class="form-error">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label" for="pin_confirmation">Confirm PIN</label>
                            <input type="password" class="form-input" id="pin_confirmation" name="pin_confirmation" maxlength="6" placeholder="Confirm PIN" required>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-lock"></i> {{ auth()->user()->has_pin ? 'Update PIN' : 'Set PIN' }}</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Payment Methods Section --}}
        <div class="settings-section">
            <div class="settings-section-header">
                <i class="fas fa-credit-card"></i> Payment Methods
            </div>
            <div class="settings-section-body">
                @forelse($paymentMethods ?? [] as $method)
                    <div style="display: flex; align-items: center; justify-content: space-between; padding: 0.875rem 0; border-bottom: 1px solid var(--border);">
                        <div style="display: flex; align-items: center; gap: 0.875rem;">
                            <div style="width: 40px; height: 40px; background: var(--bg-secondary); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted);">
                                <i class="fas {{ $method->type === 'card' ? 'fa-credit-card' : 'fa-university' }}"></i>
                            </div>
                            <div>
                                <div style="font-size: 0.9rem; font-weight: 500;">{{ $method->label }}</div>
                                <div style="font-size: 0.8rem; color: var(--text-muted);">
                                    **** {{ $method->last_four }}
                                    @if($method->is_default)
                                        <span style="background: var(--accent-light); color: var(--accent); font-size: 0.65rem; padding: 0.125rem 0.375rem; border-radius: 4px; margin-left: 0.5rem; font-weight: 600;">DEFAULT</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('escrow.payment-methods.index') }}" class="btn btn-sm btn-secondary">Manage</a>
                    </div>
                @empty
                    <div style="text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.85rem;">
                        <i class="fas fa-credit-card" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block; opacity: 0.4;"></i>
                        No payment methods saved.
                    </div>
                @endforelse

                <div style="margin-top: 1rem;">
                    <a href="{{ route('escrow.payment-methods.index') }}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-plus"></i> Manage Payment Methods
                    </a>
                </div>
            </div>
        </div>

        {{-- Notification Preferences --}}
        <div class="settings-section">
            <div class="settings-section-header">
                <i class="fas fa-bell"></i> Notification Preferences
            </div>
            <div class="settings-section-body">
                <form method="POST" action="{{ route('escrow.settings.notifications.update') }}">
                    @csrf
                    @method('PUT')

                    <div class="notification-toggles">
                        @php
                            $prefs = auth()->user()->notification_preferences ?? [];
                            $toggles = [
                                ['name' => 'transaction_updates', 'label' => 'Transaction Updates', 'desc' => 'Escrow status changes, payments, deliveries'],
                                ['name' => 'payment_alerts', 'label' => 'Payment Alerts', 'desc' => 'Deposits, withdrawals, and refunds'],
                                ['name' => 'security_alerts', 'label' => 'Security Alerts', 'desc' => 'Login attempts, password changes'],
                                ['name' => 'message_notifications', 'label' => 'Message Notifications', 'desc' => 'New messages from counterparties'],
                                ['name' => 'system_updates', 'label' => 'System Updates', 'desc' => 'Platform announcements and updates'],
                            ];
                        @endphp

                        @foreach($toggles as $toggle)
                            <div class="toggle-row">
                                <div class="toggle-info">
                                    <div class="toggle-label">{{ $toggle['label'] }}</div>
                                    <div class="toggle-desc">{{ $toggle['desc'] }}</div>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" name="notifications[{{ $toggle['name'] }}]" value="1"
                                        {{ ($prefs[$toggle['name']] ?? true) ? 'checked' : '' }}>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        @endforeach
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Preferences</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    function previewAvatar(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('avatarPreview');
                preview.innerHTML = `<img src="${e.target.result}" alt="Avatar">`;
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endpush