@extends('layouts.admin')

@section('title', 'System Settings')

@section('page-title', 'System Settings')

@section('breadcrumbs')
    <a href="{{ route('admin.settings.index') }}" class="hover:text-primary">Settings</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">System</span>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <!-- Tabs Navigation -->
    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] mb-6">
        <div class="border-b border-[#e5e7eb]">
            <nav class="flex -mb-px overflow-x-auto">
                <a href="{{ route('admin.settings.system', ['tab' => 'roles']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ $tab === 'roles' ? 'border-primary text-primary' : 'border-transparent text-[#617589] hover:text-primary hover:border-gray-300' }} transition-colors">
                    Roles & Permissions
                </a>
                <a href="{{ route('admin.settings.system', ['tab' => 'email']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ $tab === 'email' ? 'border-primary text-primary' : 'border-transparent text-[#617589] hover:text-primary hover:border-gray-300' }} transition-colors">
                    Email Settings
                </a>
                <a href="{{ route('admin.settings.system', ['tab' => 'sms']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ $tab === 'sms' ? 'border-primary text-primary' : 'border-transparent text-[#617589] hover:text-primary hover:border-gray-300' }} transition-colors">
                    SMS Settings
                </a>
                <a href="{{ route('admin.settings.system', ['tab' => 'whatsapp']) }}" class="px-6 py-4 text-sm font-medium border-b-2 whitespace-nowrap {{ $tab === 'whatsapp' ? 'border-primary text-primary' : 'border-transparent text-[#617589] hover:text-primary hover:border-gray-300' }} transition-colors">
                    WhatsApp Settings
                </a>
            </nav>
        </div>

        <div class="p-6">
            @if($tab === 'roles')
                <!-- Roles & Permissions Tab -->
                <div class="space-y-6">
                    <!-- Users Section -->
                    <div>
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-bold text-[#111418] text-gray-900">Users</h3>
                            <a href="{{ route('admin.settings.users.create') }}" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">Add User</a>
                        </div>
                        <div class="bg-background-light rounded-lg border border-[#e5e7eb] overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="w-full text-left">
                                    <thead class="bg-white border-b border-[#e5e7eb]">
                                        <tr>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Name</th>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Email</th>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Role</th>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase text-right">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-[#e5e7eb]">
                                        @forelse($users as $user)
                                            <tr>
                                                <td class="py-4 px-4 text-sm text-[#111418] text-gray-900">{{ $user->name }}</td>
                                                <td class="py-4 px-4 text-sm text-[#617589]">{{ $user->email }}</td>
                                                <td class="py-4 px-4 text-sm text-[#617589]">{{ $user->role->name ?? 'No Role' }}</td>
                                                <td class="py-4 px-4 text-right">
                                                    <div class="flex items-center justify-end gap-2">
                                                        <button class="text-primary hover:underline text-sm">Edit</button>
                                                        <button class="text-red-600 hover:underline text-sm">Delete</button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="py-8 px-4 text-center text-[#617589]">No users found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                            @if($users->hasPages())
                                <div class="p-4 border-t border-[#e5e7eb]">
                                    {{ $users->links() }}
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Roles Section -->
                    <div>
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-bold text-[#111418] text-gray-900">Roles & Permissions</h3>
                            <button onclick="document.getElementById('add-role-modal').classList.remove('hidden')" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">Add Role</button>
                        </div>
                        <div class="bg-background-light rounded-lg border border-[#e5e7eb] overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="w-full text-left">
                                    <thead class="bg-white border-b border-[#e5e7eb]">
                                        <tr>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Name</th>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Slug</th>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase">Users</th>
                                            <th class="py-3 px-4 text-xs font-semibold text-[#617589] uppercase text-right">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-[#e5e7eb]">
                                        @forelse($roles as $role)
                                            <tr>
                                                <td class="py-4 px-4 text-sm text-[#111418] text-gray-900">{{ $role->name }}</td>
                                                <td class="py-4 px-4 text-sm text-[#617589]">{{ $role->slug }}</td>
                                                <td class="py-4 px-4 text-sm text-[#617589]">{{ $role->users->count() }}</td>
                                                <td class="py-4 px-4 text-right">
                                                    <div class="flex items-center justify-end gap-2">
                                                        <button class="text-primary hover:underline text-sm">Edit</button>
                                                        <button class="text-red-600 hover:underline text-sm">Delete</button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="4" class="py-8 px-4 text-center text-[#617589]">No roles found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                            @if($roles->hasPages())
                                <div class="p-4 border-t border-[#e5e7eb]">
                                    {{ $roles->links() }}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @elseif($tab === 'email')
                <!-- Email Settings Tab -->
                <div class="space-y-6">
                    <!-- Card 1: Provider Selection -->
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                        <div class="px-6 py-5 border-b border-slate-100/50">
                            <h2 class="text-lg font-bold text-slate-900 text-gray-900 flex items-center gap-2">
                                <span class="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary text-xs font-bold">1</span>
                                Email Provider
                            </h2>
                        </div>
                        <div class="p-6">
                            <p class="text-sm text-slate-500 mb-4">Select which service you want to use for delivering outgoing emails.</p>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                <label class="cursor-pointer relative group">
                                    <input checked name="provider" type="radio" value="smtp" class="peer sr-only"/>
                                    <div class="flex flex-col items-center justify-center p-4 rounded-lg border-2 border-primary bg-primary/5 transition-all">
                                        <span class="material-symbols-outlined text-primary mb-2 text-3xl">dns</span>
                                        <span class="font-semibold text-primary text-sm">SMTP</span>
                                        <div class="absolute top-2 right-2 text-primary">
                                            <span class="material-symbols-outlined text-[18px]">check_circle</span>
                                        </div>
                                    </div>
                                </label>
                                <label class="cursor-pointer relative group">
                                    <input name="provider" type="radio" value="mailgun" class="peer sr-only"/>
                                    <div class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50/5 transition-all peer-checked:border-primary peer-checked:bg-primary/5 peer-checked:text-primary">
                                        <span class="material-symbols-outlined text-slate-400 group-hover:text-slate-600 mb-2 text-3xl">send</span>
                                        <span class="font-medium text-slate-600 text-sm group-hover:text-slate-900">Mailgun</span>
                                    </div>
                                </label>
                                <label class="cursor-pointer relative group">
                                    <input name="provider" type="radio" value="sendgrid" class="peer sr-only"/>
                                    <div class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50/5 transition-all peer-checked:border-primary peer-checked:bg-primary/5 peer-checked:text-primary">
                                        <span class="material-symbols-outlined text-slate-400 group-hover:text-slate-600 mb-2 text-3xl">mail</span>
                                        <span class="font-medium text-slate-600 text-sm group-hover:text-slate-900">SendGrid</span>
                                    </div>
                                </label>
                                <label class="cursor-pointer relative group">
                                    <input name="provider" type="radio" value="ses" class="peer sr-only"/>
                                    <div class="flex flex-col items-center justify-center p-4 rounded-lg border border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50/5 transition-all peer-checked:border-primary peer-checked:bg-primary/5 peer-checked:text-primary">
                                        <span class="material-symbols-outlined text-slate-400 group-hover:text-slate-600 mb-2 text-3xl">cloud_queue</span>
                                        <span class="font-medium text-slate-600 text-sm group-hover:text-slate-900">Amazon SES</span>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- Card 2: Configuration Form -->
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
                        <div class="px-6 py-5 border-b border-slate-100/50 flex justify-between items-center">
                            <h2 class="text-lg font-bold text-slate-900 text-gray-900 flex items-center gap-2">
                                <span class="flex items-center justify-center w-6 h-6 rounded-full bg-primary/10 text-primary text-xs font-bold">2</span>
                                SMTP Configuration
                            </h2>
                            <button type="button" class="text-sm font-medium text-primary hover:text-blue-600 flex items-center gap-1 transition-colors">
                                <span class="material-symbols-outlined text-[18px]">bolt</span>
                                Test Connection
                            </button>
                        </div>
                        <div class="p-6">
                            <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="col-span-1">
                                    <label class="block text-sm font-medium text-slate-700 mb-1" for="host">Host <span class="text-red-500">*</span></label>
                                    <input name="host" id="host" value="{{ $emailConfig->host ?? '' }}" required class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-slate-900 text-gray-900 placeholder-slate-400 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="smtp.example.com" type="text"/>
                                </div>
                                <div class="col-span-1">
                                    <label class="block text-sm font-medium text-slate-700 mb-1" for="port">Port <span class="text-red-500">*</span></label>
                                    <input name="port" id="port" value="{{ $emailConfig->port ?? '' }}" required class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-slate-900 text-gray-900 placeholder-slate-400 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="587" type="number"/>
                                </div>
                                <div class="col-span-1">
                                    <label class="block text-sm font-medium text-slate-700 mb-1" for="username">Username <span class="text-red-500">*</span></label>
                                    <div class="relative group">
                                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400 group-focus-within:text-primary transition-colors pointer-events-none">
                                            <span class="material-symbols-outlined text-[20px]">person</span>
                                        </span>
                                        <input name="username" id="username" value="{{ $emailConfig->username ?? '' }}" required class="w-full rounded-lg border border-slate-300 bg-white pl-10 pr-3 py-2.5 text-slate-900 text-gray-900 placeholder-slate-400 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="email@example.com" type="text"/>
                                    </div>
                                </div>
                                <div class="col-span-1">
                                    <label class="block text-sm font-medium text-slate-700 mb-1" for="password">Password <span class="text-red-500">*</span></label>
                                    <div class="relative group">
                                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-400 group-focus-within:text-primary transition-colors pointer-events-none">
                                            <span class="material-symbols-outlined text-[20px]">lock</span>
                                        </span>
                                        <input name="password" id="password" required class="w-full rounded-lg border border-slate-300 bg-white pl-10 pr-10 py-2.5 text-slate-900 text-gray-900 placeholder-slate-400 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="••••••••••••" type="password"/>
                                        <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-400 hover:text-slate-600 cursor-pointer">
                                            <span class="material-symbols-outlined text-[20px]">visibility</span>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-span-1 md:col-span-2">
                                    <label class="block text-sm font-medium text-slate-700 mb-1" for="encryption">Encryption</label>
                                    <div class="relative">
                                        <select name="encryption" id="encryption" class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-slate-900 text-gray-900 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all appearance-none">
                                            <option value="tls" {{ ($emailConfig->encryption ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS (Recommended)</option>
                                            <option value="ssl" {{ ($emailConfig->encryption ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                                            <option value="none" {{ ($emailConfig->encryption ?? '') === 'none' ? 'selected' : '' }}>None</option>
                                        </select>
                                        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none text-slate-500">
                                            <span class="material-symbols-outlined">expand_more</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-span-1 md:col-span-2 border-t border-slate-100/50 my-2"></div>
                                <div class="col-span-1">
                                    <label class="block text-sm font-medium text-slate-700 mb-1" for="from_name">From Name <span class="text-red-500">*</span></label>
                                    <input name="from_name" id="from_name" value="{{ $emailConfig->from_name ?? '' }}" required class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-slate-900 text-gray-900 placeholder-slate-400 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="Acme Support" type="text"/>
                                    <p class="mt-1 text-xs text-slate-500">The name recipients will see.</p>
                                </div>
                                <div class="col-span-1">
                                    <label class="block text-sm font-medium text-slate-700 mb-1" for="from_email">From Email <span class="text-red-500">*</span></label>
                                    <input name="from_email" id="from_email" value="{{ $emailConfig->from_address ?? '' }}" required class="w-full rounded-lg border border-slate-300 bg-white px-3 py-2.5 text-slate-900 text-gray-900 placeholder-slate-400 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all" placeholder="support@acme.com" type="email"/>
                                    <p class="mt-1 text-xs text-slate-500">Must be a verified sender domain.</p>
                                </div>
                            </form>
                                </div>
                            </div>
                    <!-- Sticky Footer Action Bar -->
                    <div class="sticky bottom-0 left-0 w-full bg-white/80/90 backdrop-blur-md border-t border-slate-200 p-4 z-10 -mx-6 -mb-6">
                        <div class="max-w-4xl mx-auto flex items-center justify-between">
                            <p class="text-sm text-slate-500 hidden md:block">
                                <span class="material-symbols-outlined align-middle text-lg mr-1">info</span>
                                Unsaved changes will be lost.
                            </p>
                            <div class="flex gap-3 w-full md:w-auto justify-end">
                                <button type="button" class="px-5 py-2.5 rounded-lg border border-slate-300 text-slate-700 font-medium text-sm hover:bg-slate-50800 transition-colors">Cancel</button>
                                <button type="submit" class="px-5 py-2.5 rounded-lg bg-primary text-white font-medium text-sm hover:bg-blue-700 shadow-md shadow-primary/20 transition-all flex items-center gap-2">
                                    <span class="material-symbols-outlined text-[18px]">save</span>
                                    Save Changes
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Email Templates -->
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col">
                        <!-- Toolbar -->
                        <div class="p-4 border-b border-slate-100 flex flex-col sm:flex-row gap-4 justify-between items-center bg-white">
                            <div class="relative w-full sm:max-w-md">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 material-symbols-outlined text-[20px]">search</span>
                                <input class="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all text-gray-900" placeholder="Search templates..." type="text"/>
                            </div>
                            <div class="flex items-center gap-3 w-full sm:w-auto">
                                <button class="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition-all shadow-sm">
                                    <span class="material-symbols-outlined text-[20px]">filter_list</span>
                                    <span>Filter</span>
                                </button>
                                <button class="flex items-center gap-2 px-4 py-2.5 bg-primary text-white rounded-lg text-sm font-bold hover:bg-blue-600 transition-all shadow-sm active:scale-95 w-full sm:w-auto justify-center">
                                    <span class="material-symbols-outlined text-[20px]">add</span>
                                    <span>New Template</span>
                                </button>
                            </div>
                        </div>
                        <!-- Table -->
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse">
                                <thead>
                                    <tr class="bg-slate-50 border-b border-slate-200 text-xs uppercase text-slate-500 font-semibold tracking-wider">
                                        <th class="px-6 py-4">Template Name</th>
                                        <th class="px-6 py-4">Type</th>
                                        <th class="px-6 py-4 w-1/3">Subject</th>
                                        <th class="px-6 py-4">Status</th>
                                        <th class="px-6 py-4 text-right">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 text-sm">
                                    @forelse($emailTemplates ?? [] as $template)
                                        <tr class="group hover:bg-slate-50 transition-colors800/50">
                                            <td class="px-6 py-4">
                                                <div class="flex flex-col">
                                                    <span class="font-semibold text-slate-900 text-gray-900">{{ $template->name ?? 'Template Name' }}</span>
                                                    <span class="text-xs text-slate-400">ID: {{ $template->id ?? 'TMP-001' }}</span>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4">
                                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-50 text-blue-700 border border-blue-100">
                                                    <span class="material-symbols-outlined text-[14px]">mail</span>
                                                    Email
                                                </span>
                                            </td>
                                            <td class="px-6 py-4 text-slate-600 truncate max-w-xs">{{ $template->subject ?? 'Template Subject' }}</td>
                                            <td class="px-6 py-4">
                                                <label class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in cursor-pointer">
                                                    <input type="checkbox" {{ ($template->is_active ?? true) ? 'checked' : '' }} class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer checked:right-0 checked:border-primary transition-all duration-300"/>
                                                    <span class="toggle-label block overflow-hidden h-5 rounded-full bg-gray-300 cursor-pointer transition-colors duration-300 {{ ($template->is_active ?? true) ? 'bg-primary' : '' }}"></span>
                                                </label>
                                            </td>
                                            <td class="px-6 py-4 text-right">
                                                <div class="flex items-center justify-end gap-2 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity">
                                                    <button class="p-2 text-slate-400 hover:text-primary hover:bg-blue-50 rounded-lg transition-colors700" title="Edit">
                                                        <span class="material-symbols-outlined text-[20px]">edit</span>
                                                    </button>
                                                    <button class="p-2 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors900/20" title="Delete">
                                                        <span class="material-symbols-outlined text-[20px]">delete</span>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="py-8 px-4 text-center text-slate-500">No templates found</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        <!-- Pagination -->
                        <div class="p-4 border-t border-slate-200 flex items-center justify-between bg-white">
                            <span class="text-sm text-slate-500">Showing <span class="font-semibold text-slate-700 text-gray-900">1-3</span> of <span class="font-semibold text-slate-700 text-gray-900">12</span> templates</span>
                            <div class="flex gap-2">
                                <button class="px-3 py-1.5 border border-slate-200 rounded text-sm text-slate-500 hover:bg-slate-50 disabled:opacity-50" disabled>Previous</button>
                                <button class="px-3 py-1.5 border border-slate-200 rounded text-sm text-slate-700 hover:bg-slate-50">Next</button>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif($tab === 'sms')
                <!-- SMS Settings Tab -->
                <div class="space-y-6">
                    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6">
                        <h3 class="text-lg font-bold text-[#111418] text-gray-900 mb-4">SMS Configuration</h3>
                        <form class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">SMS Provider</label>
                                    <select class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                                        <option value="twilio">Twilio</option>
                                        <option value="nexmo">Vonage (Nexmo)</option>
                                        <option value="aws">AWS SNS</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">API Key</label>
                                    <input type="text" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="Enter API Key"/>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">API Secret</label>
                                    <input type="password" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="Enter API Secret"/>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">From Number</label>
                                    <input type="text" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="+1234567890"/>
                                </div>
                            </div>
                            <div class="flex justify-end">
                                <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">Save Configuration</button>
                            </div>
                        </form>
                    </div>
                </div>
            @elseif($tab === 'whatsapp')
                <!-- WhatsApp Settings Tab -->
                <div class="space-y-6">
                    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6">
                        <h3 class="text-lg font-bold text-[#111418] text-gray-900 mb-4">WhatsApp Configuration</h3>
                        <form class="space-y-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">WhatsApp Business API</label>
                                    <select class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                                        <option value="twilio">Twilio</option>
                                        <option value="meta">Meta WhatsApp Business</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Account SID</label>
                                    <input type="text" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="Enter Account SID"/>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Auth Token</label>
                                    <input type="password" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="Enter Auth Token"/>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">From Number</label>
                                    <input type="text" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900" placeholder="whatsapp:+1234567890"/>
                                </div>
                            </div>
                            <div class="flex justify-end">
                                <button type="submit" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors">Save Configuration</button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Add Role Modal -->
<div id="add-role-modal" data-admin-modal class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-slate-900/40 backdrop-blur-sm" onclick="document.getElementById('add-role-modal').classList.add('hidden')"></div>
        <div class="inline-block align-bottom bg-white rounded-xl text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-[1000px] sm:w-full">
            <form method="POST" action="#">
                @csrf
                <div class="bg-white">
                    <div class="p-6 md:p-8 border-b border-[#f0f2f4]">
                        <h3 class="text-[#111418] text-gray-900 text-lg font-bold mb-6">Role Details</h3>
                        <div class="flex flex-col gap-6 max-w-[600px]">
                            <label class="flex flex-col gap-2">
                                <span class="text-[#111418] text-sm font-medium">Role Name <span class="text-red-500">*</span></span>
                                <input name="name" required class="form-input w-full rounded-lg border-gray-300 bg-white text-[#111418] text-gray-900 focus:border-primary focus:ring-primary h-11 px-4 text-sm shadow-sm" placeholder="e.g., Senior Accountant" type="text"/>
                            </label>
                            <label class="flex flex-col gap-2">
                                <span class="text-[#111418] text-sm font-medium">Description</span>
                                <textarea name="description" class="form-textarea w-full rounded-lg border-gray-300 bg-white text-[#111418] text-gray-900 focus:border-primary focus:ring-primary min-h-[100px] p-4 text-sm shadow-sm resize-none" placeholder="Briefly describe the responsibilities and access level..."></textarea>
                                <p class="text-[#617589] text-xs">Help other admins understand what this role is for.</p>
                            </label>
                        </div>
                    </div>
                    <div class="p-6 md:p-8 bg-gray-50/50">
                        <div class="flex items-center justify-between mb-6">
                            <div>
                                <h3 class="text-[#111418] text-gray-900 text-lg font-bold">Permissions</h3>
                                <p class="text-[#617589] text-sm mt-1">Manage access levels for different modules.</p>
                            </div>
                            <div class="flex items-center gap-2">
                                <label class="inline-flex items-center cursor-pointer">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary"/>
                                    <span class="ml-2 text-sm font-medium text-primary">Select All Permissions</span>
                                </label>
                            </div>
                        </div>
                        <div class="flex flex-col gap-4">
                            <!-- Invoicing Permission Group -->
                            <div class="bg-white rounded-lg border border-[#e5e7eb] p-5 shadow-sm">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                    <div class="flex items-center gap-3 min-w-[200px]">
                                        <div class="p-2 bg-blue-50 rounded-lg text-primary">
                                            <span class="material-symbols-outlined">description</span>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-[#111418] text-gray-900">Invoicing</h4>
                                            <p class="text-xs text-[#617589]">Manage sales invoices</p>
                                        </div>
                                    </div>
                                    <div class="flex flex-wrap gap-x-6 gap-y-3 flex-1 justify-end">
                                        <label class="inline-flex items-center gap-2 cursor-pointer group">
                                            <input checked type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary h-4 w-4"/>
                                            <span class="text-sm text-[#111418] group-hover:text-primary transition-colors">View</span>
                                        </label>
                                        <label class="inline-flex items-center gap-2 cursor-pointer group">
                                            <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary h-4 w-4"/>
                                            <span class="text-sm text-[#111418] group-hover:text-primary transition-colors">Create</span>
                                        </label>
                                        <label class="inline-flex items-center gap-2 cursor-pointer group">
                                            <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary h-4 w-4"/>
                                            <span class="text-sm text-[#111418] group-hover:text-primary transition-colors">Edit</span>
                                        </label>
                                        <label class="inline-flex items-center gap-2 cursor-pointer group">
                                            <input type="checkbox" class="rounded border-gray-300 text-primary focus:ring-primary h-4 w-4"/>
                                            <span class="text-sm text-[#111418] group-hover:text-primary transition-colors">Delete</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p-6 md:px-8 md:py-6 border-t border-[#f0f2f4] bg-gray-50 flex items-center justify-end gap-3">
                        <button type="button" onclick="document.getElementById('add-role-modal').classList.add('hidden')" class="px-6 py-2.5 rounded-lg border border-gray-300 bg-white text-[#111418] text-gray-900 text-sm font-medium hover:bg-gray-50800 transition-colors">Cancel</button>
                        <button type="submit" class="px-6 py-2.5 rounded-lg bg-primary text-white text-sm font-medium hover:bg-blue-600 shadow-sm transition-colors flex items-center gap-2">
                            <span class="material-symbols-outlined text-[18px]">check</span>
                            Save Role
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
        </div>
    </div>
</div>
@endsection