@extends('layouts.app')
@section('title', 'Settings')
@section('page-title', 'Settings')

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Modules --}}
    <div class="lg:col-span-2 card">
        <h2 class="text-base font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Module Management</h2>
        <p class="text-sm text-gray-500 mb-4">Enable or disable features for your workspace.</p>

        <form method="POST" action="{{ route('settings.modules') }}">
            @csrf
            <div class="space-y-3">
                @foreach($modules as $key => $config)
                <div class="flex items-center justify-between p-3 border border-gray-100 rounded-lg hover:bg-gray-50">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 bg-indigo-50 rounded-lg flex items-center justify-center">
                            <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"/>
                            </svg>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-800">{{ $config['name'] }}</p>
                            <p class="text-xs text-gray-400">{{ $config['description'] }}</p>
                            <span class="text-xs text-indigo-500">Phase {{ $config['phase'] }}</span>
                        </div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="modules[]" value="{{ $key }}"
                               {{ ($tenantModules[$key]?->is_enabled ?? false) ? 'checked' : '' }}
                               class="sr-only peer">
                        <div class="w-10 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                    </label>
                </div>
                @endforeach
            </div>
            <div class="mt-5 flex justify-end">
                <button type="submit" class="btn-primary">Save Module Settings</button>
            </div>
        </form>
    </div>

    {{-- Right column --}}
    <div class="space-y-6">
        {{-- Update Password --}}
        <div class="card">
            <h2 class="text-sm font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-100">Change Password</h2>
            <form method="POST" action="{{ route('settings.password') }}" class="space-y-3">
                @csrf
                <div>
                    <label class="form-label">Current Password</label>
                    <input type="password" name="current_password" class="form-input text-sm" required>
                    @error('current_password')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">New Password</label>
                    <input type="password" name="password" class="form-input text-sm" required>
                    @error('password')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="form-label">Confirm New Password</label>
                    <input type="password" name="password_confirmation" class="form-input text-sm" required>
                </div>
                <button type="submit" class="btn-primary w-full justify-center text-sm">Update Password</button>
            </form>
        </div>

        {{-- Workspace info --}}
        <div class="card bg-gray-50">
            <h2 class="text-sm font-semibold text-gray-800 mb-3">Workspace Info</h2>
            <div class="space-y-1.5 text-xs text-gray-600">
                <div class="flex justify-between"><span>Plan</span><span class="font-semibold capitalize">{{ auth()->user()->tenant->plan }}</span></div>
                <div class="flex justify-between"><span>Status</span><span class="badge-green capitalize">{{ auth()->user()->tenant->status }}</span></div>
                <div class="flex justify-between"><span>Trial Ends</span><span>{{ auth()->user()->tenant->trial_ends_at?->format('d M Y') ?? '—' }}</span></div>
                <div class="flex justify-between"><span>ERP Version</span><span>{{ config('erp.version') }}</span></div>
            </div>
        </div>
    </div>
</div>
@endsection