@extends('layouts.dashboard')

@section('page_title', 'PREFERENCES')

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center gap-3">
        <h5 class="m-0 fw-bold"><i class="fa-solid fa-gear text-accent me-2"></i>Preferences</h5>
    </div>
</div>

@if (session('settings_status'))
    <div class="alert alert-success">{{ session('settings_status') }}</div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0 ps-3">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="row justify-content-center">
    <div class="col-xxl-10">
        <div class="ff-settings-card">
            <ul class="nav nav-tabs ff-settings-tabs" role="tablist">
                @foreach ([
                    'account' => 'Account',
                    'address' => 'Address',
                    'general' => 'Settings',
                    'functionality' => 'Functionality',
                    'notes' => 'Notes',
                    'terms' => 'Terms & Conditions',
                    'ifta' => 'IFTA',
                    'restrictions' => 'Restrictions',
                ] as $key => $label)
                    <li class="nav-item">
                        <button class="nav-link {{ $activeTab === $key ? 'active' : '' }}"
                                data-bs-toggle="tab"
                                data-bs-target="#settings-{{ $key }}"
                                type="button">{{ $label }}</button>
                    </li>
                @endforeach
            </ul>

            <div class="tab-content pt-4">
                @include('settings.partials.account')
                @include('settings.partials.address')
                @include('settings.partials.general')
                @include('settings.partials.functionality')
                @include('settings.partials.notes')
                @include('settings.partials.terms')
                @include('settings.partials.ifta')
                @include('settings.partials.restrictions')
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .ff-settings-card { background: var(--card-bg, #fff); border: 1px solid var(--border-color); border-radius: 14px; padding: 22px 26px; }
    [data-theme="dark"] .ff-settings-card { background: var(--surface-2, #1b1f27); }
    .ff-settings-tabs .nav-link { color: var(--text-muted); font-weight: 700; border: none; border-bottom: 2px solid transparent; padding: 10px 14px; }
    .ff-settings-tabs .nav-link.active { color: var(--accent-color); background: transparent; border-bottom-color: var(--accent-color); }
    .ff-settings-note { color: #e0532f; font-size: 0.85rem; margin-bottom: 18px; }
    .ff-settings-row { display: grid; grid-template-columns: minmax(180px, 28%) 1fr; gap: 12px 18px; align-items: center; margin-bottom: 12px; }
    .ff-settings-row > label { font-weight: 700; margin: 0; }
    .ff-settings-row .form-check { margin: 0; }
    .ff-settings-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); }
    .ff-settings-notes-accordion { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
    .ff-settings-notes-item { border: none; border-bottom: 1px solid var(--border-color); background: transparent; }
    .ff-settings-notes-item:last-child { border-bottom: none; }
    .ff-settings-notes-toggle {
        background: var(--card-bg, #fff);
        color: var(--text-main);
        font-weight: 700;
        box-shadow: none;
        padding: 14px 16px;
    }
    .ff-settings-notes-toggle:not(.collapsed) {
        color: var(--accent-color);
        background: color-mix(in srgb, var(--accent-color) 8%, var(--card-bg, #fff));
        box-shadow: inset 0 -1px 0 var(--border-color);
    }
    .ff-settings-notes-toggle:focus { box-shadow: none; border-color: transparent; }
    .ff-settings-notes-toggle::after { filter: none; }
    .ff-settings-notes-title { margin-right: 8px; }
    .ff-settings-notes-subtitle { color: var(--text-muted); font-weight: 500; font-size: 0.85rem; }
    .ff-settings-notes-item .accordion-body { padding: 0 16px 16px; background: var(--card-bg, #fff); }
    [data-theme="dark"] .ff-settings-notes-toggle,
    [data-theme="dark"] .ff-settings-notes-item .accordion-body { background: var(--surface-2, #1b1f27); }
    [data-theme="dark"] .ff-settings-notes-toggle:not(.collapsed) {
        background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-2, #1b1f27));
    }
    @media (max-width: 768px) {
        .ff-settings-row { grid-template-columns: 1fr; }
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tab = @json($activeTab);
    const trigger = document.querySelector('[data-bs-target="#settings-' + tab + '"]');
    if (trigger) {
        bootstrap.Tab.getOrCreateInstance(trigger).show();
    }
});
</script>
@endpush