@extends('layouts.app')

@section('title', 'Settings')

@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Settings' => null]])
@endsection

@section('content')
<div x-data="{ tab: 'general' }">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Settings</h1>
        <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Manage your application preferences</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {{-- Sidebar Nav --}}
        <div class="lg:col-span-1">
            <x-card :padding="false">
                <nav class="p-2 space-y-1">
                    @foreach([
                        ['id' => 'general', 'label' => 'General', 'icon' => 'settings'],
                        ['id' => 'company', 'label' => 'Company', 'icon' => 'building-2'],
                        ['id' => 'users', 'label' => 'Users & Roles', 'icon' => 'users'],
                        ['id' => 'tax', 'label' => 'Tax & Currency', 'icon' => 'circle-dollar-sign'],
                        ['id' => 'notifications', 'label' => 'Notifications', 'icon' => 'bell'],
                        ['id' => 'backup', 'label' => 'Backup & Data', 'icon' => 'database'],
                    ] as $item)
                        <button @click="tab = '{{ $item['id'] }}'"
                            :class="tab === '{{ $item['id'] }}' ? 'bg-primary-50 dark:bg-primary-500/10 text-primary-700 dark:text-primary-300' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800'"
                            class="w-full flex items-center gap-3 px-3 py-2.5 text-sm font-semibold rounded-xl transition">
                            <i data-lucide="{{ $item['icon'] }}" class="w-4 h-4"></i>
                            {{ $item['label'] }}
                        </button>
                    @endforeach
                </nav>
            </x-card>
        </div>

        {{-- Content --}}
        <div class="lg:col-span-3 space-y-6">
            <div x-show="tab === 'general'">
                <x-card title="General Settings" icon="settings">
                    <div class="space-y-4">
                        <x-form-input name="app_name" label="Application Name" icon="hexagon" value="ABC YARN HOUSE ERP" />
                        <x-form-input name="timezone" label="Timezone" type="select" icon="clock" :options="['asia_dhaka' => 'Asia/Dhaka (UTC+6)', 'utc' => 'UTC']" />
                        <x-form-input name="date_format" label="Date Format" type="select" icon="calendar" :options="['Y-m-d' => '2026-07-03', 'd/m/Y' => '03/07/2026', 'd-M-Y' => '03-Jul-2026']" />
                        <x-form-input name="currency" label="Currency Symbol" icon="circle-dollar-sign" value="৳" />
                    </div>
                </x-card>
            </div>

            <div x-show="tab === 'company'" x-cloak>
                <x-card title="Company Information" icon="building-2">
                    <div class="space-y-4">
                        <x-form-input name="company_name" label="Company Name" icon="building" value="ABC Yarn House" />
                        <x-form-input name="address" label="Address" type="textarea" icon="map-pin" value="12 Industrial Area, Dhaka, Bangladesh" />
                        <div class="grid grid-cols-2 gap-4">
                            <x-form-input name="phone" label="Phone" icon="phone" value="+880 1700-000000" />
                            <x-form-input name="email" label="Email" type="email" icon="mail" value="info@abcyarn.com" />
                        </div>
                    </div>
                </x-card>
            </div>

            <div x-show="tab === 'users'" x-cloak>
                <x-card title="User Management" icon="users">
                    <x-button variant="primary" icon="user-plus" class="mb-4">Add User</x-button>
                    <div class="space-y-2">
                        @foreach([
                            ['name' => 'Admin User', 'email' => 'admin@abcyarn.com', 'role' => 'Super Admin', 'status' => 'Active'],
                            ['name' => 'Manager', 'email' => 'manager@abcyarn.com', 'role' => 'Manager', 'status' => 'Active'],
                            ['name' => 'Accountant', 'email' => 'accounts@abcyarn.com', 'role' => 'Accountant', 'status' => 'Active'],
                        ] as $u)
                            <div class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 dark:border-slate-800">
                                <div class="w-10 h-10 rounded-lg bg-primary-100 dark:bg-primary-500/15 flex items-center justify-center font-bold text-primary-700">
                                    {{ substr($u['name'], 0, 1) }}
                                </div>
                                <div class="flex-1">
                                    <p class="text-sm font-semibold">{{ $u['name'] }}</p>
                                    <p class="text-xs text-slate-500">{{ $u['email'] }} • {{ $u['role'] }}</p>
                                </div>
                                <x-badge variant="success">{{ $u['status'] }}</x-badge>
                                <button class="w-8 h-8 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 flex items-center justify-center">
                                    <i data-lucide="more-vertical" class="w-4 h-4"></i>
                                </button>
                            </div>
                        @endforeach
                    </div>
                </x-card>
            </div>

            <div class="flex justify-end">
                <x-button variant="primary" icon="save">Save Settings</x-button>
            </div>
        </div>
    </div>
</div>
@endsection
