@extends('layouts.app')
@section('title', 'Settings')
@section('breadcrumb')<span class="text-white">Settings</span>@endsection

@section('content')
<div x-data="{ section: '{{ request('section','general') }}' }" class="grid grid-cols-1 lg:grid-cols-4 gap-6">

    <!-- Settings Nav -->
    <div class="card p-3 h-fit">
        <div class="text-xs text-slate-500 font-medium px-3 py-2 uppercase tracking-wider">System</div>
        <nav class="space-y-1">
            <button @click="section='general'" :class="section==='general' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-cog w-4"></i> General</button>
            <button @click="section='job_settings'" :class="section==='job_settings' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-briefcase w-4"></i> Job Settings</button>
            <button @click="section='checklist_templates'" :class="section==='checklist_templates' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-tasks w-4"></i> CM Checklist</button>
            <button @click="section='financial'" :class="section==='financial' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-dollar-sign w-4"></i> Financial</button>
            <!-- <button @click="section='custom_fields'" :class="section==='custom_fields' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-list-alt w-4"></i> Custom Fields</button> -->
            <button @click="section='templates'" :class="section==='templates' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-file-alt w-4"></i> Templates</button>
            <!-- <button @click="section='notifications'" :class="section==='notifications' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-bell w-4"></i> Notifications</button> -->
        </nav>
        <div class="text-xs text-slate-500 font-medium px-3 py-2 uppercase tracking-wider mt-3">Access</div>
        <nav class="space-y-1">
            <a href="{{ route('settings.users') }}" class="nav-item"><i class="fas fa-users w-4"></i> Users &amp; Roles</a>
            <!-- <button @click="section='security'" :class="section==='security' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-shield-alt w-4"></i> Security</button>
            <button @click="section='integrations'" :class="section==='integrations' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-plug w-4"></i> Integrations</button> -->
        </nav>
        <div class="text-xs text-slate-500 font-medium px-3 py-2 uppercase tracking-wider mt-3">Branding &amp; Email</div>
        <nav class="space-y-1">
            <button @click="section='logo'" :class="section==='logo' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-image w-4"></i> Logo Upload</button>
            <button @click="section='smtp'" :class="section==='smtp' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-envelope w-4"></i> SMTP / Email</button>
        </nav>
        <!-- <div class="text-xs text-slate-500 font-medium px-3 py-2 uppercase tracking-wider mt-3">Data</div>
        <nav class="space-y-1">
            <button @click="section='data_storage'" :class="section==='data_storage' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-database w-4"></i> Data &amp; Storage</button>
            <button @click="section='activity'" :class="section==='activity' ? 'nav-item active' : 'nav-item'" class="w-full text-left"><i class="fas fa-history w-4"></i> Activity Log</button>
        </nav> -->
    </div>

    <div class="lg:col-span-3 space-y-6">

        @if(session('success'))
        <div class="card p-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
        @endif

        @if($errors->any())
        <div class="card p-4 border-red-600 bg-red-900/20 text-red-300">
            <ul class="text-sm space-y-1">@foreach($errors->all() as $e)<li><i class="fas fa-exclamation-circle mr-1"></i>{{ $e }}</li>@endforeach</ul>
        </div>
        @endif

        <!-- ══════════════════ GENERAL ══════════════════ -->
        <div x-show="section==='general'" class="space-y-6">
            <form method="POST" action="{{ route('settings.update') }}">
                @csrf
                <div class="card p-5">
                    <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-building text-blue-400"></i> Company Details</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Company Name</label>
                            <input type="text" name="company_name" class="input" value="{{ $settings['company_name'] ?? 'Degabriele Kitchens' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">ABN</label>
                            <input type="text" name="company_abn" class="input" value="{{ $settings['company_abn'] ?? '12 345 678 901' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Phone</label>
                            <input type="text" name="company_phone" class="input" value="{{ $settings['company_phone'] ?? '02 9000 1234' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Email</label>
                            <input type="email" name="company_email" class="input" value="{{ $settings['company_email'] ?? 'info@degabriele.com.au' }}">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm text-slate-400 mb-1">Address</label>
                            <input type="text" name="company_address" class="input" value="{{ $settings['company_address'] ?? '1/123 Business Park Drive, Sydney NSW 2000' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Website</label>
                            <input type="url" name="company_website" class="input" value="{{ $settings['company_website'] ?? 'https://degabriele.com.au' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Builder's Licence</label>
                            <input type="text" name="licence_number" class="input" value="{{ $settings['licence_number'] ?? 'LIC-2024-NSW-001' }}">
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save General</button>
                </div>
            </form>
        </div>

        <!-- ══════════════════ JOB SETTINGS ══════════════════ -->
        <div x-show="section==='job_settings'" class="space-y-6">
            <form method="POST" action="{{ route('settings.update') }}">
                @csrf
                <div class="card p-5">
                    <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-briefcase text-blue-400"></i> Job Pipeline Settings</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Default Job Stage (new jobs)</label>
                            <select name="default_job_stage" class="input">
                                @foreach(['lead'=>'Lead','consult'=>'Consultation','sold'=>'Sold'] as $k=>$v)
                                <option value="{{ $k }}" {{ ($settings['default_job_stage']??'lead')===$k ? 'selected' : '' }}>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Lead Expiry (days, 0 = never)</label>
                            <input type="number" name="lead_expiry_days" class="input" value="{{ $settings['lead_expiry_days'] ?? 90 }}" min="0">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Follow-up Reminder (days after no contact)</label>
                            <input type="number" name="followup_reminder_days" class="input" value="{{ $settings['followup_reminder_days'] ?? 7 }}" min="1">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Warranty Period (years)</label>
                            <input type="number" name="warranty_years" class="input" value="{{ $settings['warranty_years'] ?? 2 }}" min="0">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Check Measure Lead Days <span class="text-xs text-slate-500">(days before delivery = manufacture date)</span></label>
                            <input type="number" name="cm_manufacture_lead_days" class="input" value="{{ $settings['cm_manufacture_lead_days'] ?? 7 }}" min="1" max="30">
                        </div>
                    </div>

                    <h4 class="text-sm text-slate-400 mt-6 mb-3 font-semibold">Project Types</h4>
                    <p class="text-xs text-slate-500 mb-3">Comma-separated list of project types available when creating jobs.</p>
                    <input type="text" name="project_types" class="input w-full" value="{{ $settings['project_types'] ?? 'Kitchen, Laundry, Wardrobe, Bathroom Vanity, Entertainment Unit, Other' }}">

                    <h4 class="text-sm text-slate-400 mt-6 mb-3 font-semibold">Lead Sources</h4>
                    <p class="text-xs text-slate-500 mb-3">Comma-separated list of lead source options.</p>
                    <input type="text" name="lead_sources" class="input w-full" value="{{ $settings['lead_sources'] ?? 'Referral, Website, Walk In, Showroom, Google Ads, Social Media, Real Estate, Other' }}">

                    <h4 class="text-sm text-slate-400 mt-6 mb-3 font-semibold">Job Number Prefix</h4>
                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">Lead Prefix</label>
                            <input type="text" name="prefix_lead" class="input" value="{{ $settings['prefix_lead'] ?? 'L-' }}" maxlength="5">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">Job Prefix</label>
                            <input type="text" name="prefix_job" class="input" value="{{ $settings['prefix_job'] ?? 'J-' }}" maxlength="5">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">Quote Prefix</label>
                            <input type="text" name="prefix_quote" class="input" value="{{ $settings['prefix_quote'] ?? 'Q-' }}" maxlength="5">
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Job Settings</button>
                </div>
            </form>
        </div>

        <!-- ══════════════════ FINANCIAL ══════════════════ -->
        <div x-show="section==='financial'" class="space-y-6">
            <form method="POST" action="{{ route('settings.update') }}">
                @csrf
                <div class="card p-5">
                    <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-dollar-sign text-green-400"></i> Quote &amp; Contract Defaults</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Default Markup (%)</label>
                            <input type="number" name="default_markup" class="input" value="{{ $settings['default_markup'] ?? 35 }}" step="0.5">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">GST Rate (%)</label>
                            <input type="number" name="default_gst" class="input" value="{{ $settings['default_gst'] ?? 10 }}" step="0.5">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Quote Valid (Days)</label>
                            <input type="number" name="quote_valid_days" class="input" value="{{ $settings['quote_valid_days'] ?? 30 }}">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Currency Symbol</label>
                            <input type="text" name="currency_symbol" class="input" value="{{ $settings['currency_symbol'] ?? '$' }}" maxlength="3">
                        </div>
                    </div>

                    <h4 class="text-sm font-semibold text-slate-400 mt-6 mb-3">Work Order Settings</h4>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Fault Approval Threshold ($)</label>
                            <input type="number" name="work_order_fault_threshold" class="input" value="{{ $settings['work_order_fault_threshold'] ?? 300 }}" min="0" step="0.01">
                            <p class="text-xs text-slate-500 mt-1">Work orders with total fault cost above this amount require manager approval.</p>
                        </div>
                    </div>

                    <h4 class="text-sm font-semibold text-slate-400 mt-6 mb-3">Default Payment Schedule (%)</h4>
                    <p class="text-xs text-slate-500 mb-3">These percentages are applied by default when a new contract is created. They must total 100%.</p>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">Deposit</label>
                            <input type="number" name="deposit_pct" class="input" value="{{ $settings['deposit_pct'] ?? 30 }}" step="0.5">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">Check Measure</label>
                            <input type="number" name="cm_pct" class="input" value="{{ $settings['cm_pct'] ?? 20 }}" step="0.5">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">Delivery</label>
                            <input type="number" name="delivery_pct" class="input" value="{{ $settings['delivery_pct'] ?? 20 }}" step="0.5">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-500 mb-1">Completion</label>
                            <input type="number" name="completion_pct" class="input" value="{{ $settings['completion_pct'] ?? 30 }}" step="0.5">
                        </div>
                    </div>

                    <h4 class="text-sm font-semibold text-slate-400 mt-6 mb-3">Invoice Settings</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Invoice Prefix</label>
                            <input type="text" name="invoice_prefix" class="input" value="{{ $settings['invoice_prefix'] ?? 'INV-' }}" maxlength="8">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Default Payment Terms</label>
                            <select name="payment_terms" class="input">
                                @foreach(['deposit_on_acceptance'=>'Deposit on Acceptance','7_days'=>'Net 7 Days','14_days'=>'Net 14 Days','30_days'=>'Net 30 Days'] as $k=>$v)
                                <option value="{{ $k }}" {{ ($settings['payment_terms']??'deposit_on_acceptance')===$k ? 'selected' : '' }}>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Overdue Reminder (days)</label>
                            <input type="number" name="invoice_overdue_days" class="input" value="{{ $settings['invoice_overdue_days'] ?? 14 }}" min="1">
                        </div>
                    </div>

                    <h4 class="text-sm font-semibold text-slate-400 mt-6 mb-3">Bank Details (shown on invoices)</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Bank Name</label>
                            <input type="text" name="bank_name" class="input" value="{{ $settings['bank_name'] ?? 'Commonwealth Bank' }}">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">BSB</label>
                            <input type="text" name="bank_bsb" class="input" value="{{ $settings['bank_bsb'] ?? '062-000' }}" maxlength="10">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Account Number</label>
                            <input type="text" name="bank_account" class="input" value="{{ $settings['bank_account'] ?? '1234 5678' }}" maxlength="20">
                        </div>
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Financial Settings</button>
                </div>
            </form>
        </div>

        <!-- ══════════════════ CUSTOM FIELDS ══════════════════ -->
        <div x-show="section==='custom_fields'"
             x-data="{
                fields: {{ json_encode(json_decode($settings['custom_fields'] ?? '[]', true) ?: [
                    ['name'=>'Preferred Supplier','type'=>'text','applies_to'=>'job','required'=>false],
                    ['name'=>'Kitchen Style','type'=>'select','applies_to'=>'job','required'=>false,'options'=>'Modern, Traditional, Hamptons, Industrial, Scandinavian'],
                    ['name'=>'Referred By','type'=>'text','applies_to'=>'lead','required'=>false],
                ]) }},
                addField() { this.fields.push({name:'',type:'text',applies_to:'job',required:false,options:''}); },
                removeField(i) { this.fields.splice(i,1); }
             }">
            <div class="card p-5">
                <!-- <div class="flex items-center justify-between mb-5">
                    <h3 class="flex items-center gap-2"><i class="fas fa-list-alt text-blue-400"></i> Custom Fields</h3>
                    <button type="button" @click="addField()" class="btn btn-secondary text-xs"><i class="fas fa-plus mr-1"></i>Add Field</button>
                </div> -->
                <p class="text-xs text-slate-500 mb-4">Define additional data fields that appear on job and lead forms. Changes take effect immediately after saving.</p>

                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    <div class="space-y-3">
                        <template x-for="(field, i) in fields" :key="i">
                            <div class="flex gap-3 items-start p-3 rounded-lg" style="background:#0f172a;border:1px solid #1e293b;">
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-3 flex-1">
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Field Name</label>
                                        <input type="text" :name="`custom_fields[${i}][name]`" x-model="field.name" class="input text-sm" placeholder="e.g. Kitchen Style">
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Type</label>
                                        <select :name="`custom_fields[${i}][type]`" x-model="field.type" class="input text-sm">
                                            <option value="text">Text</option>
                                            <option value="number">Number</option>
                                            <option value="date">Date</option>
                                            <option value="select">Select (dropdown)</option>
                                            <option value="textarea">Textarea</option>
                                            <option value="checkbox">Checkbox</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Applies To</label>
                                        <select :name="`custom_fields[${i}][applies_to]`" x-model="field.applies_to" class="input text-sm">
                                            <option value="job">Job</option>
                                            <option value="lead">Lead</option>
                                            <option value="contact">Contact</option>
                                            <option value="quote">Quote</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-xs text-slate-500 mb-1">Required</label>
                                        <select :name="`custom_fields[${i}][required]`" x-model="field.required" class="input text-sm">
                                            <option :value="false">No</option>
                                            <option :value="true">Yes</option>
                                        </select>
                                    </div>
                                    <div class="md:col-span-4" x-show="field.type==='select'">
                                        <label class="block text-xs text-slate-500 mb-1">Options (comma-separated)</label>
                                        <input type="text" :name="`custom_fields[${i}][options]`" x-model="field.options" class="input text-sm w-full" placeholder="Option A, Option B, Option C">
                                    </div>
                                </div>
                                <button type="button" @click="removeField(i)" class="text-slate-600 hover:text-red-400 mt-6 flex-shrink-0"><i class="fas fa-times"></i></button>
                            </div>
                        </template>
                        <template x-if="fields.length===0">
                            <div class="text-center py-8 text-slate-500 text-sm">
                                <i class="fas fa-list-alt text-3xl block mb-2 opacity-30"></i>
                                No custom fields defined. Click "Add Field" to create one.
                            </div>
                        </template>
                    </div>
                    <input type="hidden" name="custom_fields_json" :value="JSON.stringify(fields)">
                    <div class="mt-5 flex justify-end">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Custom Fields</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- ══════════════════ TEMPLATES ══════════════════ -->
        <div x-show="section==='templates'" class="space-y-4">
            <div class="card p-5">
                <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-file-alt text-blue-400"></i> Document Templates</h3>
                <div class="space-y-4">
                    @foreach([['Quote Header Text','quote_header','Thank you for requesting a quote from Degabriele Kitchens. We are pleased to provide the following proposal for your consideration.'],['Quote Footer / Terms','quote_footer','This quote is valid for 30 days from the date of issue. Prices exclude GST unless stated. A deposit of 30% is required upon acceptance.'],['Contract Intro','contract_intro','This agreement is entered into between Degabriele Kitchens Pty Ltd (the Contractor) and the Client named above.'],['Completion Sign-off','completion_text','Works have been completed in accordance with the agreed specifications. Client acknowledges satisfactory completion.']] as [$label, $key, $default])
                    <div>
                        <label class="block text-sm text-slate-400 mb-1">{{ $label }}</label>
                        <textarea name="{{ $key }}" class="input" rows="3" form="templates-form">{{ $settings[$key] ?? $default }}</textarea>
                    </div>
                    @endforeach
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Default Quote Terms (Days)</label>
                            <input type="number" name="quote_terms_days" class="input" value="{{ $settings['quote_terms_days'] ?? 30 }}" form="templates-form">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Default Payment Terms</label>
                            <select name="payment_terms" class="input" form="templates-form">
                                <option value="deposit_on_acceptance" {{ ($settings['payment_terms']??'') === 'deposit_on_acceptance' ? 'selected' : '' }}>Deposit on Acceptance</option>
                                <option value="7_days" {{ ($settings['payment_terms']??'') === '7_days' ? 'selected' : '' }}>Net 7 Days</option>
                                <option value="14_days" {{ ($settings['payment_terms']??'') === '14_days' ? 'selected' : '' }}>Net 14 Days</option>
                                <option value="30_days" {{ ($settings['payment_terms']??'') === '30_days' ? 'selected' : '' }}>Net 30 Days</option>
                            </select>
                        </div>
                    </div>
                </div>
                <form id="templates-form" method="POST" action="{{ route('settings.update') }}" class="mt-4 flex justify-end">
                    @csrf
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Templates</button>
                </form>
            </div>
        </div>

        <!-- ══════════════════ NOTIFICATIONS ══════════════════ -->
        <div x-show="section==='notifications'" class="space-y-4">
            <div class="card p-5">
                <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-bell text-blue-400"></i> Notification Preferences</h3>
                <form method="POST" action="{{ route('settings.update') }}"
                      x-data="{
                        notify_new_lead:       '{{ $settings['notify_new_lead']       ?? 'true' }}',
                        notify_stage_change:   '{{ $settings['notify_stage_change']   ?? 'true' }}',
                        notify_payment:        '{{ $settings['notify_payment']        ?? 'true' }}',
                        notify_quote_accepted: '{{ $settings['notify_quote_accepted'] ?? 'true' }}',
                        notify_quote_expiry:   '{{ $settings['notify_quote_expiry']   ?? 'false' }}',
                        notify_cm_scheduled:   '{{ $settings['notify_cm_scheduled']   ?? 'false' }}',
                        notify_install_scheduled: '{{ $settings['notify_install_scheduled'] ?? 'false' }}',
                        notify_warranty:       '{{ $settings['notify_warranty']       ?? 'false' }}'
                      }">
                    @csrf
                    <input type="hidden" name="notify_new_lead"          :value="notify_new_lead">
                    <input type="hidden" name="notify_stage_change"       :value="notify_stage_change">
                    <input type="hidden" name="notify_payment"            :value="notify_payment">
                    <input type="hidden" name="notify_quote_accepted"     :value="notify_quote_accepted">
                    <input type="hidden" name="notify_quote_expiry"       :value="notify_quote_expiry">
                    <input type="hidden" name="notify_cm_scheduled"       :value="notify_cm_scheduled">
                    <input type="hidden" name="notify_install_scheduled"  :value="notify_install_scheduled">
                    <input type="hidden" name="notify_warranty"           :value="notify_warranty">
                    <div class="space-y-3">
                        @foreach([
                            ['New lead assigned',             'notify_new_lead'],
                            ['Job stage change',              'notify_stage_change'],
                            ['Payment received',              'notify_payment'],
                            ['Quote accepted',                'notify_quote_accepted'],
                            ['Quote expiring (3 days)',       'notify_quote_expiry'],
                            ['Check measure scheduled',      'notify_cm_scheduled'],
                            ['Installation scheduled',       'notify_install_scheduled'],
                            ['Warranty expiring (30 days)',  'notify_warranty'],
                        ] as [$label, $key])
                        <div class="flex items-center justify-between py-2 border-b border-slate-700 last:border-0">
                            <div class="text-sm text-white">{{ $label }}</div>
                            <button type="button"
                                    @click="{{ $key }} = ({{ $key }} === 'true' ? 'false' : 'true')"
                                    :class="{{ $key }} === 'true' ? 'bg-blue-600' : 'bg-slate-700'"
                                    class="relative inline-flex h-6 w-11 rounded-full transition-colors duration-200 focus:outline-none">
                                <span :class="{{ $key }} === 'true' ? 'translate-x-5' : 'translate-x-0'"
                                      class="inline-block h-6 w-6 transform rounded-full bg-white shadow transition-transform duration-200"></span>
                            </button>
                        </div>
                        @endforeach
                    </div>
                    <div class="mt-5 p-4 rounded-lg" style="background:#0f172a;border:1px solid #1e293b;">
                        <div class="flex items-center gap-2 text-xs text-slate-500">
                            <i class="fas fa-info-circle text-blue-400"></i>
                            Notifications are currently sent via the activity log. Email notifications require SMTP configuration in the Integrations section.
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Notifications</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- ══════════════════ SECURITY ══════════════════ -->
        <div x-show="section==='security'" class="space-y-4">
            <div class="card p-5">
                <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-shield-alt text-blue-400"></i> Security Settings</h3>
                <form method="POST" action="{{ route('settings.update') }}"
                      x-data="{
                        security_require_upper:   '{{ $settings['security_require_upper']   ?? 'false' }}',
                        security_require_numbers: '{{ $settings['security_require_numbers'] ?? 'true' }}',
                        security_multi_session:   '{{ $settings['security_multi_session']   ?? 'true' }}',
                        security_log_views:       '{{ $settings['security_log_views']       ?? 'false' }}'
                      }">
                    @csrf
                    <input type="hidden" name="security_require_upper"   :value="security_require_upper">
                    <input type="hidden" name="security_require_numbers" :value="security_require_numbers">
                    <input type="hidden" name="security_multi_session"   :value="security_multi_session">
                    <input type="hidden" name="security_log_views"       :value="security_log_views">
                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm text-slate-400 mb-1">Session Timeout (minutes)</label>
                                <input type="number" name="session_timeout" class="input" value="{{ $settings['session_timeout'] ?? 120 }}" min="5" max="1440">
                            </div>
                            <div>
                                <label class="block text-sm text-slate-400 mb-1">Password Min Length</label>
                                <input type="number" name="password_min_length" class="input" value="{{ $settings['password_min_length'] ?? 8 }}" min="6">
                            </div>
                        </div>
                        <div class="space-y-3">
                            @foreach([
                                ['Require uppercase in passwords', 'security_require_upper'],
                                ['Require numbers in passwords',   'security_require_numbers'],
                                ['Allow multiple sessions per user','security_multi_session'],
                                ['Log all page views in activity log','security_log_views'],
                            ] as [$label, $key])
                            <div class="flex items-center justify-between py-2 border-b border-slate-700 last:border-0">
                                <span class="text-sm text-white">{{ $label }}</span>
                                <button type="button"
                                        @click="{{ $key }} = ({{ $key }} === 'true' ? 'false' : 'true')"
                                        :class="{{ $key }} === 'true' ? 'bg-blue-600' : 'bg-slate-700'"
                                        class="relative inline-flex h-6 w-11 rounded-full transition-colors duration-200">
                                    <span :class="{{ $key }} === 'true' ? 'translate-x-5' : 'translate-x-0'"
                                          class="inline-block h-6 w-6 transform rounded-full bg-white shadow transition-transform duration-200"></span>
                                </button>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Security Settings</button>
                    </div>
                </form>
            </div>

            <div class="card p-5">
                <h3 class="mb-3 flex items-center gap-2"><i class="fas fa-key text-amber-400"></i> Change Password</h3>
                <form method="POST" action="{{ route('settings.password') }}" class="space-y-3" style="max-width:400px;">
                    @csrf
                    <div>
                        <label class="block text-sm text-slate-400 mb-1">Current Password</label>
                        <input type="password" name="current_password" class="input" required>
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1">New Password</label>
                        <input type="password" name="new_password" class="input" required minlength="8">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-400 mb-1">Confirm New Password</label>
                        <input type="password" name="new_password_confirmation" class="input" required>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Update Password</button>
                </form>
            </div>

            <div class="card p-5">
                <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-sign-in-alt text-slate-400"></i> Active Sessions</h3>
                <div class="p-4 rounded-lg flex items-center gap-4" style="background:#0f172a;border:1px solid #1e293b;">
                    <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center text-blue-300 font-bold flex-shrink-0">
                        {{ strtoupper(substr(auth()->user()->name, 0, 2)) }}
                    </div>
                    <div class="flex-1">
                        <div class="text-sm text-white font-medium">{{ auth()->user()->name }} <span class="text-xs text-green-400 ml-2">● Current session</span></div>
                        <div class="text-xs text-slate-500 mt-0.5">{{ request()->ip() }} · {{ request()->userAgent() ? substr(request()->userAgent(), 0, 60).'…' : 'Unknown browser' }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ══════════════════ INTEGRATIONS ══════════════════ -->
        <div x-show="section==='integrations'" class="space-y-4">
            <div class="card p-5">
                <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-plug text-blue-400"></i> Integrations</h3>
                <div class="space-y-3">
                    @foreach([
                        ['fa-envelope','SMTP Email','Connect an SMTP server to send quote and contract emails directly','email','Configure','Configure SMTP host, port, username and password for outbound email.'],
                        ['fa-comment-sms','SMS / Twilio','Send automated SMS reminders for appointments and milestones','sms','Configure','Enter Twilio account SID, auth token, and sender number.'],
                        ['fa-calendar-alt','Google Calendar','Sync check measure and installation appointments','gcal','Connect','OAuth 2.0 connection to sync events with Google Calendar.'],
                        ['fa-file-pdf','Xero Accounting','Export invoices and payments to Xero automatically','xero','Connect','Connect via Xero OAuth to push invoice data automatically.'],
                        ['fa-cloud','Dropbox / Google Drive','Attach cloud documents to jobs and contracts','storage','Connect','Link a cloud storage provider for document management.'],
                    ] as [$icon,$name,$desc,$key,$btn,$detail])
                    <div x-data="{ open: false }" class="rounded-xl overflow-hidden" style="border:1px solid #1e293b;">
                        <div class="flex items-center gap-4 p-4" style="background:#0f172a;">
                            <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center flex-shrink-0">
                                <i class="fas {{ $icon }} text-slate-400"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <div class="text-sm font-medium text-white">{{ $name }}</div>
                                <div class="text-xs text-slate-500 mt-0.5">{{ $desc }}</div>
                            </div>
                            <span class="text-xs text-slate-600 mr-2">Not configured</span>
                            <button @click="open=!open" class="btn btn-secondary text-xs">{{ $btn }}</button>
                        </div>
                        <div x-show="open" x-collapse style="background:#0d1420;border-top:1px solid #1e293b;">
                            <div class="p-4">
                                <p class="text-xs text-slate-400 mb-3">{{ $detail }}</p>
                                <div class="grid grid-cols-2 gap-3">
                                    <input type="text" class="input text-sm" placeholder="Setting 1">
                                    <input type="text" class="input text-sm" placeholder="Setting 2">
                                </div>
                                <div class="mt-3 flex gap-2">
                                    <button class="btn btn-primary text-xs">Test Connection</button>
                                    <button @click="open=false" class="btn btn-secondary text-xs">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- ══════════════════ DATA & STORAGE ══════════════════ -->
        <div x-show="section==='data_storage'" class="space-y-4">
            <!-- Storage Overview -->
            <div class="card p-5">
                <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-database text-blue-400"></i> Data &amp; Storage</h3>
                @php
                    $dbPath  = database_path('database.sqlite');
                    $dbSize  = file_exists($dbPath) ? round(filesize($dbPath) / 1024, 1) : 0;
                    $dbSizeMB = round($dbSize / 1024, 2);
                @endphp
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div class="stat-card">
                        <div class="text-xs text-slate-500 mb-1">Database Size</div>
                        <div class="text-xl font-bold text-white">{{ $dbSize < 1024 ? $dbSize.'KB' : $dbSizeMB.'MB' }}</div>
                        <div class="text-xs text-slate-500 mt-1">SQLite</div>
                    </div>
                    <div class="stat-card">
                        <div class="text-xs text-slate-500 mb-1">Total Records</div>
                        <div class="text-xl font-bold text-white">{{ number_format(\App\Models\Job::count() + \App\Models\Lead::count() + \App\Models\Quote::count()) }}</div>
                        <div class="text-xs text-slate-500 mt-1">Jobs + Leads + Quotes</div>
                    </div>
                    <div class="stat-card">
                        <div class="text-xs text-slate-500 mb-1">Activity Logs</div>
                        <div class="text-xl font-bold text-white">{{ number_format(\App\Models\ActivityLog::count()) }}</div>
                        <div class="text-xs text-slate-500 mt-1">Total entries</div>
                    </div>
                    <div class="stat-card">
                        <div class="text-xs text-slate-500 mb-1">Last Backup</div>
                        <div class="text-xl font-bold text-slate-400">Never</div>
                        <div class="text-xs text-slate-500 mt-1">Set up below</div>
                    </div>
                </div>

                <!-- Data Export -->
                <h4 class="text-sm font-semibold text-slate-400 mb-3 flex items-center gap-2"><i class="fas fa-file-export"></i> Export Data</h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-6">
                    @foreach([
                        ['All Jobs (CSV)',    route('reports.index', ['export'=>'csv']),              'fa-briefcase',   'text-blue-400'],
                        ['All Leads (CSV)',   route('reports.index', ['export'=>'csv','group_by'=>'source']), 'fa-users', 'text-purple-400'],
                        ['Revenue Report',   route('reports.index', ['export'=>'csv','group_by'=>'stage']),  'fa-coins', 'text-green-400'],
                    ] as [$label, $url, $icon, $color])
                    <a href="{{ $url }}" class="flex items-center gap-3 p-3 rounded-lg hover:opacity-80 transition-opacity" style="background:#0f172a;border:1px solid #1e293b;">
                        <i class="fas {{ $icon }} {{ $color }}"></i>
                        <span class="text-sm text-white">{{ $label }}</span>
                        <i class="fas fa-download text-slate-500 ml-auto text-xs"></i>
                    </a>
                    @endforeach
                </div>

                <!-- Retention -->
                <h4 class="text-sm font-semibold text-slate-400 mb-3 flex items-center gap-2"><i class="fas fa-clock"></i> Data Retention</h4>
                <form method="POST" action="{{ route('settings.update') }}" class="space-y-3">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Keep activity logs for (days)</label>
                            <input type="number" name="log_retention_days" class="input" value="{{ $settings['log_retention_days'] ?? 365 }}" min="30">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Soft-delete purge after (days)</label>
                            <input type="number" name="trash_retention_days" class="input" value="{{ $settings['trash_retention_days'] ?? 30 }}" min="7">
                        </div>
                    </div>
                    <div class="flex justify-end">
                        <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Retention Settings</button>
                    </div>
                </form>

                <!-- Danger zone -->
                <h4 class="text-sm font-semibold text-red-400 mt-6 mb-3 flex items-center gap-2"><i class="fas fa-exclamation-triangle"></i> Danger Zone</h4>
                <div class="p-4 rounded-lg space-y-3" style="background:#200d0d;border:1px solid #7f1d1d;">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-sm text-red-300 font-medium">Purge Soft-Deleted Records</div>
                            <div class="text-xs text-red-900/80 text-slate-500 mt-0.5">Permanently deletes all trashed leads, jobs, quotes, and contacts</div>
                        </div>
                        <button type="button" onclick="confirm('Are you sure? This cannot be undone.') && alert('Purge functionality requires CLI access — run php artisan model:prune')" class="btn text-xs" style="background:#7f1d1d;color:#fca5a5;">Purge Trash</button>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-sm text-red-300 font-medium">Clear Activity Log</div>
                            <div class="text-xs text-slate-500 mt-0.5">Removes all activity log entries older than the retention period</div>
                        </div>
                        <button type="button" onclick="alert('Clear log functionality: run php artisan log:clear from CLI')" class="btn text-xs" style="background:#7f1d1d;color:#fca5a5;">Clear Logs</button>
                    </div>
                </div>
            </div>
        </div>


        <!-- ============== LOGO UPLOAD ============== -->
        <div x-show="section==='logo'" class="space-y-6">
            <div class="card p-5">
                <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-image text-blue-400"></i> Company Logo</h3>
                @php $logoPath = \App\Models\AppSetting::get('company_logo'); @endphp
                @if($logoPath && \Illuminate\Support\Facades\Storage::disk('public')->exists($logoPath))
                <div class="mb-4">
                    <label class="block text-sm text-slate-400 mb-2">Current Logo</label>
                    <img src="{{ asset('storage/'.$logoPath) }}" alt="Company Logo" class="max-h-24 max-w-xs object-contain rounded border border-slate-700 p-2">
                </div>
                @endif
                <form method="POST" action="{{ route('settings.logo') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-4">
                        <label class="block text-sm text-slate-400 mb-2">Upload New Logo</label>
                        <input type="file" name="logo" accept="image/png,image/jpg,image/jpeg,image/svg+xml,image/gif" class="input py-2 cursor-pointer" required>
                        <p class="text-xs text-slate-500 mt-1">PNG, JPG, SVG or GIF. Max 2MB. Recommended: transparent PNG on dark background.</p>
                    </div>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-upload mr-2"></i>Upload Logo</button>
                </form>
                <p class="text-xs text-slate-500 mt-4">Logo appears in the sidebar, on quote emails, and on printed reports.<br>
                <strong class="text-yellow-400">Note:</strong> Run <code class="bg-slate-800 px-1 rounded">php artisan storage:link</code> if images don't display.</p>
            </div>
        </div>

        <!-- ============== SMTP / EMAIL ============== -->
        <div x-show="section==='smtp'" class="space-y-6">
            <form method="POST" action="{{ route('settings.update') }}">
                @csrf
                <div class="card p-5">
                    <h3 class="mb-5 flex items-center gap-2"><i class="fas fa-envelope text-blue-400"></i> SMTP / Email Settings</h3>
                    <p class="text-sm text-slate-400 mb-5">Used when sending quote emails to clients via the <strong>Send to Client</strong> button.</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">SMTP Host</label>
                            <input type="text" name="smtp_host" class="input" value="{{ $settings['smtp_host'] ?? '' }}" placeholder="smtp.gmail.com">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">SMTP Port</label>
                            <input type="number" name="smtp_port" class="input" value="{{ $settings['smtp_port'] ?? 587 }}" placeholder="587">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Username / Email</label>
                            <input type="text" name="smtp_username" class="input" value="{{ $settings['smtp_username'] ?? '' }}" placeholder="your@email.com">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Password</label>
                            <input type="password" name="smtp_password" class="input" value="{{ $settings['smtp_password'] ?? '' }}" placeholder="App Password">
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">Encryption</label>
                            <select name="smtp_encryption" class="input">
                                <option value="tls" {{ ($settings['smtp_encryption'] ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS (recommended)</option>
                                <option value="ssl" {{ ($settings['smtp_encryption'] ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                                <option value="starttls" {{ ($settings['smtp_encryption'] ?? '') === 'starttls' ? 'selected' : '' }}>STARTTLS</option>
                                <option value="none" {{ ($settings['smtp_encryption'] ?? '') === 'none' ? 'selected' : '' }}>None (insecure)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm text-slate-400 mb-1">From Email Address</label>
                            <input type="email" name="smtp_from_address" class="input" value="{{ $settings['smtp_from_address'] ?? '' }}" placeholder="quotes@yourdomain.com">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm text-slate-400 mb-1">From Name</label>
                            <input type="text" name="smtp_from_name" class="input" value="{{ $settings['smtp_from_name'] ?? ($settings['company_name'] ?? 'Degabriele Kitchens') }}" placeholder="Degabriele Kitchens">
                        </div>
                    </div>
                    <div class="mt-4 p-3 rounded bg-blue-900/20 border border-blue-800 text-xs text-blue-300">
                        <i class="fas fa-info-circle mr-2"></i>
                        <strong>Gmail:</strong> Use smtp.gmail.com, port 587, TLS, and a Google App Password (enable 2FA first in Google Account › Security).
                    </div>
                </div>
                <div class="mt-4 flex justify-end">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Email Settings</button>
                </div>
            </form>
        </div>

        <!-- ══════════════════ ACTIVITY LOG ══════════════════ -->
        <div x-show="section==='activity'" class="space-y-4">
            <div class="card p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="flex items-center gap-2"><i class="fas fa-history text-blue-400"></i> Activity Log</h3>
                    <span class="text-xs text-slate-500">Last 20 events</span>
                </div>
                <div class="space-y-1">
                    @forelse($recentActivity as $log)
                    <div class="flex items-start gap-3 py-2 border-b border-slate-700 last:border-0">
                        <div class="w-7 h-7 rounded-full bg-blue-900 flex items-center justify-center text-xs font-bold text-blue-300 flex-shrink-0">
                            {{ strtoupper(substr($log->user?->name ?? 'S', 0, 2)) }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="text-sm text-white">{{ $log->action }}</span>
                                <span class="text-xs text-slate-500">by {{ $log->user?->name ?? 'System' }}</span>
                            </div>
                            <div class="text-xs text-slate-500 mt-0.5">{{ $log->description }}</div>
                        </div>
                        <div class="text-xs text-slate-500 flex-shrink-0">{{ $log->created_at->diffForHumans() }}</div>
                    </div>
                    @empty
                    <p class="text-sm text-slate-500 text-center py-6">No activity logged yet</p>
                    @endforelse
                </div>
            </div>
        </div>


        <!-- ══════════════════ CM CHECKLIST TEMPLATES ══════════════════ -->
        <div x-show="section==='checklist_templates'" class="space-y-6"
             x-data="cmChecklist()">
            @php
                $rawCm = $settings['cm_checklist_defaults'] ?? '';
                if (is_array($rawCm)) { $rawCm = implode("
", $rawCm); }
                $cmItems = array_values(array_filter(array_map('trim', explode("
", (string)$rawCm))));
            @endphp
            <script>
            function cmChecklist() {
                const saved = @json($cmItems);
                return {
                    items: saved.length ? saved.map(t => ({ text: t })) : [],
                    newItem: '',
                    addItem() {
                        const t = this.newItem.trim();
                        if (t) { this.items.push({ text: t }); this.newItem = ''; }
                    },
                    removeItem(i) { this.items.splice(i, 1); },
                    serialized() { return this.items.map(it => it.text).join('\n'); }
                };
            }
            </script>
            <form method="POST" action="{{ route('settings.update') }}" @submit="$event.target.querySelector('[name=cm_checklist_defaults]').value = serialized()">
                @csrf
                <input type="hidden" name="cm_checklist_defaults" value="">
                <div class="card p-5">
                    <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-tasks text-blue-400"></i> Check Measure Default Checklist Items</h3>
                    <p class="text-sm text-slate-400 mb-5">These items are automatically added as checkboxes to every new check measure. Check measurers can tick them off and still add extra per-job items.</p>

                    <!-- Existing items list -->
                    <div class="space-y-2 mb-4">
                        <template x-for="(item, i) in items" :key="i">
                            <div class="flex items-center gap-3 bg-slate-800 rounded-lg px-3 py-2 group">
                                <i class="fas fa-grip-vertical text-slate-600 text-xs cursor-move"></i>
                                <div class="flex items-center gap-2 flex-shrink-0">
                                    <div class="w-4 h-4 rounded border border-slate-500 flex-shrink-0 opacity-50"></div>
                                </div>
                                <input type="text" x-model="item.text" class="flex-1 bg-transparent text-sm text-white outline-none border-b border-transparent focus:border-slate-500 py-0.5" placeholder="Checklist item text...">
                                <button type="button" @click="removeItem(i)"
                                    class="text-slate-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity text-xs flex-shrink-0">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </template>
                        <div x-show="items.length === 0" class="text-center py-6 text-slate-600 text-sm">
                            <i class="fas fa-tasks text-2xl block mb-2 text-slate-700"></i>
                            No default items yet — add your first item below.
                        </div>
                    </div>

                    <!-- Add new item row -->
                    <div class="flex gap-2 mt-3">
                        <input type="text" x-model="newItem"
                            @keydown.enter.prevent="addItem()"
                            class="input flex-1 text-sm" placeholder="Type a new checklist item and press Enter or click Add...">
                        <button type="button" @click="addItem()"
                            class="btn btn-secondary text-sm px-4 flex-shrink-0">
                            <i class="fas fa-plus mr-1"></i> Add Item
                        </button>
                    </div>
                    <p class="text-xs text-slate-600 mt-3">
                        <i class="fas fa-info-circle mr-1"></i>
                        Hover over any item and click <i class="fas fa-times"></i> to remove it. Items can be edited inline. Press Enter to quickly add multiple items.
                    </p>
                </div>
                <div class="mt-4 flex items-center justify-between">
                    <span class="text-xs text-slate-500" x-text="items.length + ' default item(s) will be added to each new check measure'"></span>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Save Checklist Defaults</button>
                </div>
            </form>
        </div>

    </div>
</div>
@endsection