@extends('layouts.portal')

@section('title', 'Module-Wise Admin Settings — Abu Dhabi Auto Care')

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    
    <div>
        <h1 class="text-2xl font-black text-white tracking-tight">Module-Wise Workshop Settings</h1>
        <p class="text-xs text-slate-400 mt-1">Configure business parameters, service defaults, pickup rules, and bilingual settings by module.</p>
    </div>

    <!-- Module Tabs -->
    <div class="flex flex-wrap items-center gap-2 border-b border-slate-800 pb-4">
        @foreach($modules as $modKey => $modTitle)
            <a href="{{ route('admin.settings', ['tab' => $modKey]) }}"
               class="px-4 py-2 rounded-xl text-xs font-bold transition flex items-center {{ $activeTab === $modKey ? 'bg-sky-600 text-white shadow-lg shadow-sky-600/30' : 'bg-slate-900 text-slate-300 hover:bg-slate-800 hover:text-white border border-slate-800' }}">
                @if($modKey === 'general')
                    <svg class="w-4 h-4 {{ $activeTab === $modKey ? 'text-white' : 'text-sky-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                @elseif($modKey === 'services')
                    <svg class="w-4 h-4 {{ $activeTab === $modKey ? 'text-white' : 'text-purple-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
                @elseif($modKey === 'orders')
                    <svg class="w-4 h-4 {{ $activeTab === $modKey ? 'text-white' : 'text-emerald-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>
                @elseif($modKey === 'quotation')
                    <svg class="w-4 h-4 {{ $activeTab === $modKey ? 'text-white' : 'text-amber-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                @else
                    <svg class="w-4 h-4 {{ $activeTab === $modKey ? 'text-white' : 'text-cyan-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
                @endif
                <span class="ml-2">{{ $modTitle }}</span>
            </a>
        @endforeach
    </div>

    <!-- Module Settings Form -->
    <div class="p-8 rounded-3xl bg-slate-900 border border-slate-800 shadow-2xl">
        <div class="flex items-center justify-between pb-4 mb-6 border-b border-slate-800">
            <div>
                <h2 class="text-base font-bold text-white">{{ $modules[$activeTab] }} Settings</h2>
                <p class="text-xs text-slate-400">Settings changes in this module take effect immediately on public pages.</p>
            </div>
            <span class="px-2.5 py-1 rounded bg-sky-500/10 text-sky-400 text-xs font-semibold border border-sky-500/20">
                Module: {{ ucfirst($activeTab) }}
            </span>
        </div>

        <form action="{{ route('admin.settings.update') }}" method="POST" class="space-y-6 text-xs">
            @csrf
            <input type="hidden" name="module" value="{{ $activeTab }}">

            <div class="space-y-5">
                @foreach($settings as $setting)
                    <div class="p-4 rounded-2xl bg-slate-950 border border-slate-800">
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                            <div class="sm:w-1/2">
                                <label for="{{ $setting->key }}" class="block font-bold text-white text-xs mb-1">
                                    {{ $setting->label ?: ucwords(str_replace('_', ' ', $setting->key)) }}
                                </label>
                                @if($setting->description)
                                    <p class="text-[11px] text-slate-400">{{ $setting->description }}</p>
                                @endif
                                <span class="text-[10px] text-slate-600 font-mono">key: {{ $setting->key }}</span>
                            </div>

                            <div class="sm:w-1/2">
                                @if($setting->type === 'boolean')
                                    <label class="flex items-center cursor-pointer">
                                        <input type="checkbox" name="{{ $setting->key }}" id="{{ $setting->key }}" value="1" {{ $setting->value == '1' ? 'checked' : '' }} class="rounded bg-slate-900 border-slate-700 text-sky-500 focus:ring-0 mr-3">
                                        <span class="font-semibold text-slate-300">Enabled / Active</span>
                                    </label>
                                @elseif($setting->type === 'textarea')
                                    <textarea name="{{ $setting->key }}" id="{{ $setting->key }}" rows="3" class="w-full px-3.5 py-2 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">{{ $setting->value }}</textarea>
                                @else
                                    <input type="text" name="{{ $setting->key }}" id="{{ $setting->key }}" value="{{ $setting->value }}" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-white text-xs focus:outline-none focus:border-sky-500">
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="pt-4 border-t border-slate-800">
                <button type="submit" class="w-full py-3.5 rounded-xl bg-sky-600 hover:bg-sky-500 text-white font-bold text-sm shadow-xl shadow-sky-600/30 transition">
                    Save {{ $modules[$activeTab] }} Settings ➔
                </button>
            </div>
        </form>
    </div>

</div>
@endsection