@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h3 class="mb-1">Device Provisioning</h3>
            <p class="text-muted mb-0">
                Manage device registry and provisioning
            </p>
        </div>

        <button class="btn btn-primary" onclick="openAddDeviceModal()">
            <i class="fas fa-plus me-2"></i>Add Device
        </button>
    </div>

    <!-- Device Health Dashboard -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1">Total Devices</h6>
                            <h3 class="mb-0" id="totalDevices">0</h3>
                        </div>
                        <div class="text-primary">
                            <i class="fas fa-server fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1">Online</h6>
                            <h3 class="mb-0 text-success" id="onlineDevices">0</h3>
                        </div>
                        <div class="text-success">
                            <i class="fas fa-check-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1">Offline</h6>
                            <h3 class="mb-0 text-danger" id="offlineDevices">0</h3>
                        </div>
                        <div class="text-danger">
                            <i class="fas fa-times-circle fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title mb-1">Provisioned</h6>
                            <h3 class="mb-0 text-info" id="provisionedDevices">0</h3>
                        </div>
                        <div class="text-info">
                            <i class="fas fa-cog fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Device Registry</h5>
                <div class="d-flex gap-2">
                    <input type="text" class="form-control" placeholder="Search by MAC, vendor, or extension..." id="searchInput" style="width: 250px;">
                    <button class="btn btn-outline-info" onclick="openTemplatesModal()">
                        <i class="fas fa-layer-group me-2"></i>Templates
                    </button>
                    <button class="btn btn-outline-warning" onclick="exportInventory()">
                        <i class="fas fa-file-export me-2"></i>Export
                    </button>
                    <button class="btn btn-outline-success" onclick="openImportModal()">
                        <i class="fas fa-file-import me-2"></i>Import
                    </button>
                    <button class="btn btn-outline-primary d-none" id="bulkActionsBtn" onclick="openBulkActionsModal()">
                        <i class="fas fa-tasks me-2"></i>Bulk Actions (<span id="selectedCount">0</span>)
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead>
                        <tr>
                            <th style="width: 40px;"><input type="checkbox" id="selectAllDevices" onchange="toggleAllDevices()"></th>
                            <th>MAC Address</th>
                            <th>Vendor</th>
                            <th>Model</th>
                            <th>Extension</th>
                            <th>Status</th>
                            <th>IP Address</th>
                            <th>Last Seen</th>
                            <th>Last Provisioned</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="devicesTableBody">
                        <tr>
                            <td colspan="7" class="text-center">Loading devices...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- Add/Edit Device Modal -->
<div class="modal fade" id="deviceModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deviceModalTitle">Add Device</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="deviceForm">
                    <input type="hidden" id="deviceMac" name="mac_address">
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">MAC Address</label>
                                <input type="text" class="form-control" id="macInput" name="mac_address" placeholder="AA:BB:CC:DD:EE:FF" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Vendor</label>
                                <select class="form-select" id="vendorInput" name="vendor">
                                    <option value="">Auto-detect</option>
                                    <option value="yealink">Yealink</option>
                                    <option value="fanvil">Fanvil</option>
                                    <option value="grandstream">Grandstream</option>
                                    <option value="poly">Poly</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Model</label>
                                <input type="text" class="form-control" id="modelInput" name="model" placeholder="e.g., T46U">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Serial Number</label>
                                <input type="text" class="form-control" id="serialInput" name="serial_number">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Extension</label>
                                <select class="form-select" id="extensionInput" name="extension">
                                    <option value="">None</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Status</label>
                                <select class="form-select" id="statusInput" name="status">
                                    <option value="unprovisioned">Unprovisioned</option>
                                    <option value="provisioning">Provisioning</option>
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                    <option value="retired">Retired</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Provisioning Username</label>
                                <input type="text" class="form-control" id="provUserInput" name="provisioning_username">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Provisioning Password</label>
                                <input type="password" class="form-control" id="provPassInput" name="provisioning_password">
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">VLAN</label>
                                <input type="text" class="form-control" id="vlanInput" name="vlan" placeholder="e.g., 100">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Switch Port</label>
                                <input type="text" class="form-control" id="switchPortInput" name="switch_port">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="zeroTouchInput" name="zero_touch_enabled">
                            <label class="form-check-label" for="zeroTouchInput">
                                Enable Zero-Touch Provisioning
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveDevice()">Save Device</button>
            </div>
        </div>
    </div>
</div>

<!-- Device Info Modal -->
<div class="modal fade" id="deviceInfoModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Device Information</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="deviceInfoContent">
                <!-- Device info will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Button Programming Modal -->
<div class="modal fade" id="buttonProgramModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Button Programming</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Device MAC</label>
                        <input type="text" class="form-control" id="buttonMac" readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Extension</label>
                        <input type="text" class="form-control" id="buttonExtension" readonly>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Button</th>
                                <th>Type</th>
                                <th>Value/Extension</th>
                                <th>Label</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="buttonProgramTableBody">
                            <!-- Button rows will be loaded here -->
                        </tbody>
                    </table>
                </div>
                
                <button type="button" class="btn btn-sm btn-secondary mt-2" onclick="addButtonRow()">+ Add Button</button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveButtonProgram()">Save Buttons</button>
            </div>
        </div>
    </div>
</div>

<!-- Advanced Settings Modal -->
<div class="modal fade" id="advancedSettingsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Advanced Settings</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="advancedSettingsForm">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="mb-3">Codec Settings</h6>
                            <div class="mb-3">
                                <label class="form-label">Preferred Codec</label>
                                <select class="form-select" id="prefCodec" name="pref_codec">
                                    <option value="pcmu">G.711 μ-law (PCMU)</option>
                                    <option value="pcma">G.711 A-law (PCMA)</option>
                                    <option value="g729">G.729</option>
                                    <option value="g722">G.722</option>
                                    <option value="opus">Opus</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">DTMF Mode</label>
                                <select class="form-select" id="dtmfMode" name="dtmf_mode">
                                    <option value="rfc4733">RFC 4733 (In-band)</option>
                                    <option value="inband">In-band Audio</option>
                                    <option value="auto">Auto</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-3">Network Settings</h6>
                            <div class="mb-3">
                                <label class="form-label">SIP Transport</label>
                                <select class="form-select" id="sipTransport" name="sip_transport">
                                    <option value="0">UDP</option>
                                    <option value="1">TCP</option>
                                    <option value="2">TLS</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">RTP Symmetric</label>
                                <select class="form-select" id="rtpSymmetric" name="rtp_symmetric">
                                    <option value="1">Enabled</option>
                                    <option value="0">Disabled</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <h6 class="mb-3">Time Settings</h6>
                            <div class="mb-3">
                                <label class="form-label">Primary NTP Server</label>
                                <input type="text" class="form-control" id="ntpPrimary" name="ntp_primary" placeholder="pool.ntp.org">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Secondary NTP Server</label>
                                <input type="text" class="form-control" id="ntpSecondary" name="ntp_secondary" placeholder="time.google.com">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Timezone</label>
                                <select class="form-select" id="timezone" name="timezone">
                                    <option value="UTC">UTC</option>
                                    <option value="Africa/Johannesburg">Africa/Johannesburg</option>
                                    <option value="America/New_York">America/New_York</option>
                                    <option value="America/Los_Angeles">America/Los_Angeles</option>
                                    <option value="Europe/London">Europe/London</option>
                                    <option value="Europe/Paris">Europe/Paris</option>
                                    <option value="Asia/Tokyo">Asia/Tokyo</option>
                                    <option value="Australia/Sydney">Australia/Sydney</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="dstEnabled" name="dst_enabled">
                                    <label class="form-check-label" for="dstEnabled">
                                        Enable Daylight Saving Time
                                    </label>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Time Format</label>
                                <select class="form-select" id="timeFormat" name="time_format">
                                    <option value="24h">24-hour (14:30)</option>
                                    <option value="12h">12-hour (2:30 PM)</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Date Format</label>
                                <select class="form-select" id="dateFormat" name="date_format">
                                    <option value="YYYY-MM-DD">YYYY-MM-DD</option>
                                    <option value="DD/MM/YYYY">DD/MM/YYYY</option>
                                    <option value="MM/DD/YYYY">MM/DD/YYYY</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-3">Display Settings</h6>
                            <div class="mb-3">
                                <label class="form-label">Language</label>
                                <select class="form-select" id="language" name="language">
                                    <option value="English">English</option>
                                    <option value="Spanish">Spanish</option>
                                    <option value="French">French</option>
                                    <option value="German">German</option>
                                    <option value="Portuguese">Portuguese</option>
                                    <option value="Italian">Italian</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <h6 class="mb-3">Branding</h6>
                            <div class="mb-3">
                                <label class="form-label">Wallpaper URL</label>
                                <input type="text" class="form-control" id="wallpaperUrl" name="wallpaper_url" placeholder="https://example.com/wallpaper.jpg">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Logo URL</label>
                                <input type="text" class="form-control" id="logoUrl" name="logo_url" placeholder="https://example.com/logo.png">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="mb-3">Network Settings</h6>
                            <div class="mb-3">
                                <label class="form-label">VLAN ID</label>
                                <input type="text" class="form-control" id="vlanId" name="vlan" placeholder="10">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveAdvancedSettings()">Save Settings</button>
            </div>
        </div>
    </div>
</div>

<!-- Import Devices Modal -->
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Import Devices</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>CSV Format:</strong> mac,vendor,model,extension,display_name,tenant,template,site,username,password,vlan,ntp_server,status<br>
                    <strong>Example:</strong> 249AD8174F72,yealink,T43U,1002,Ravi OpenV,MainTenant,OfficeTemplate,CapeTown,1002,pass123,10,pool.ntp.org,active
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Select CSV File</label>
                    <input type="file" class="form-control" id="importFile" accept=".csv">
                </div>
                
                <div class="mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="skipDuplicates" checked>
                        <label class="form-check-label" for="skipDuplicates">
                            Skip duplicate MAC addresses
                        </label>
                    </div>
                </div>
                
                <div id="importPreview" class="d-none">
                    <h6 class="mt-3">Import Preview</h6>
                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr>
                                    <th>MAC</th>
                                    <th>Vendor</th>
                                    <th>Model</th>
                                    <th>Ext</th>
                                    <th>Display Name</th>
                                    <th>Tenant</th>
                                    <th>Template</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="importPreviewBody">
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div id="importErrors" class="d-none">
                    <h6 class="mt-3 text-danger">Errors / Conflicts</h6>
                    <div class="alert alert-danger" id="importErrorsList"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="processImport()">Import Devices</button>
            </div>
        </div>
    </div>
</div>

<!-- Templates Management Modal -->
<div class="modal fade" id="templatesModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Provisioning Templates</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <button type="button" class="btn btn-primary" onclick="openAddTemplateModal()">
                            <i class="fas fa-plus me-2"></i>New Template
                        </button>
                    </div>
                    <div class="col-md-6">
                        <input type="text" class="form-control" placeholder="Search templates..." id="templateSearch">
                    </div>
                </div>
                
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Vendor</th>
                                <th>Model</th>
                                <th>Description</th>
                                <th>Default</th>
                                <th>Active</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="templatesTableBody">
                            <tr>
                                <td colspan="8" class="text-center">Loading templates...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Add/Edit Template Modal -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="templateModalTitle">Template</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="templateForm">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Template Name</label>
                                <input type="text" class="form-control" id="templateName" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Type</label>
                                <select class="form-select" id="templateType" name="type">
                                    <option value="global">Global</option>
                                    <option value="tenant">Tenant</option>
                                    <option value="site">Site</option>
                                    <option value="device_model">Device Model</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Vendor</label>
                                <select class="form-select" id="templateVendor" name="vendor">
                                    <option value="">All Vendors</option>
                                    <option value="yealink">Yealink</option>
                                    <option value="fanvil">Fanvil</option>
                                    <option value="grandstream">Grandstream</option>
                                    <option value="polycom">Polycom</option>
                                    <option value="cisco">Cisco</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Model</label>
                                <input type="text" class="form-control" id="templateModel" name="model" placeholder="e.g., T43U, X3U">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label">Tenant ID</label>
                                <input type="text" class="form-control" id="templateTenant" name="tenant_id">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="templateDescription" name="description" rows="2"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="templateDefault" name="is_default">
                                <label class="form-check-label" for="templateDefault">
                                    Set as Default Template
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="templateActive" name="is_active" checked>
                                <label class="form-check-label" for="templateActive">
                                    Active
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="saveTemplate()">Save Template</button>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Actions Modal -->
<div class="modal fade" id="bulkActionsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Actions</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Perform action on <strong><span id="bulkSelectedCount">0</span></strong> selected devices.</p>
                
                <div class="d-grid gap-2">
                    <button class="btn btn-outline-success" onclick="bulkReprovision()">
                        <i class="fas fa-sync me-2"></i>Reprovision All
                    </button>
                    <button class="btn btn-outline-warning" onclick="bulkReboot()">
                        <i class="fas fa-redo me-2"></i>Reboot All
                    </button>
                    <button class="btn btn-outline-danger" onclick="bulkDelete()">
                        <i class="fas fa-trash me-2"></i>Delete All
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

<!-- Config Preview Modal -->
<div class="modal fade" id="configPreviewModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Config Preview</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">Device MAC</label>
                        <input type="text" class="form-control" id="previewMac" readonly>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Vendor</label>
                        <input type="text" class="form-control" id="previewVendor" readonly>
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Generated Configuration</label>
                    <textarea class="form-control font-monospace" id="configPreviewContent" rows="20" readonly></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="copyConfigToClipboard()">Copy to Clipboard</button>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    console.log("=== PROVISIONING PAGE SCRIPT LOADING v8-FINAL - " + new Date().toISOString() + " ===");
    console.log("=== COLUMN ORDER: Status then IP Address ===");
    console.log("=== FILE MODIFIED: " + new Date().toISOString());
    
    const csrfToken = '{{ csrf_token() }}';
    console.log('CSRF Token:', csrfToken);
    
    let deviceModal, deviceInfoModal, buttonProgramModal, advancedSettingsModal, importModal, templatesModal, templateModal, bulkActionsModal, configPreviewModal;
    
    document.addEventListener('DOMContentLoaded', function() {
        console.log('=== DOM CONTENT LOADED ===');
        
        try {
            deviceModal = new bootstrap.Modal(document.getElementById('deviceModal'));
            deviceInfoModal = new bootstrap.Modal(document.getElementById('deviceInfoModal'));
            buttonProgramModal = new bootstrap.Modal(document.getElementById('buttonProgramModal'));
            advancedSettingsModal = new bootstrap.Modal(document.getElementById('advancedSettingsModal'));
            importModal = new bootstrap.Modal(document.getElementById('importModal'));
            templatesModal = new bootstrap.Modal(document.getElementById('templatesModal'));
            templateModal = new bootstrap.Modal(document.getElementById('templateModal'));
            bulkActionsModal = new bootstrap.Modal(document.getElementById('bulkActionsModal'));
            configPreviewModal = new bootstrap.Modal(document.getElementById('configPreviewModal'));
            console.log('Modals initialized successfully');
            
            loadDevices();
            loadExtensions();
        } catch (e) {
            console.error('Error during initialization:', e);
        }
    });
    
    async function api(url, opts = {}) {
        const headers = {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': csrfToken,
        };
        if (opts.body) headers['Content-Type'] = 'application/json';
        const r = await fetch(url, { headers, credentials: 'same-origin', ...opts });
        return { ok: r.ok, status: r.status, data: await r.json().catch(() => ({})) };
    }
    
    async function loadDevices() {
        console.log('=== LOAD DEVICES CALLED ===');
        const tbody = document.getElementById('devicesTableBody');
        tbody.innerHTML = '<tr><td colspan="7" class="text-center">Loading devices...</td></tr>';
        
        const url = '/api/provisioning/list';
        console.log('Fetching from:', url);
        
        const { ok, data } = await api(url);
        console.log('API Response:', { ok, data });
        
        if (!ok) {
            console.error('API request failed');
            tbody.innerHTML = '<tr><td colspan="7" class="text-center text-danger">Failed to load devices</td></tr>';
            return;
        }
        
        const devices = data.data || [];
        
        // Update health statistics
        const total = devices.length;
        const online = devices.filter(d => d.status === 'online' || d.status === 'provisioned').length;
        const offline = devices.filter(d => d.status === 'offline' || d.status === 'unprovisioned').length;
        const provisioned = devices.filter(d => d.last_provisioned_at).length;
        
        document.getElementById('totalDevices').textContent = total;
        document.getElementById('onlineDevices').textContent = online;
        document.getElementById('offlineDevices').textContent = offline;
        document.getElementById('provisionedDevices').textContent = provisioned;
        
        if (devices.length === 0) {
            console.log('No devices found');
            tbody.innerHTML = '<tr><td colspan="8" class="text-center">No devices registered. Add your first device.</td></tr>';
            return;
        }
        
        console.log('Rendering', devices.length, 'devices - UPDATED 2026-06-06 14:05');
        tbody.innerHTML = devices.map(device => `
            <tr>
                <td><input type="checkbox" class="device-checkbox" data-mac="${device.mac_address}" onchange="updateSelectedCount()"></td>
                <td><code>${device.mac_address}</code></td>
                <td>${device.vendor || '—'}</td>
                <td>${device.model || '—'}</td>
                <td>${device.extension || '—'}</td>
                <td><span class="badge bg-${getStatusColor(device.status)}">${device.status}</span></td>
                <td>${device.last_known_ip || '—'}</td>
                <td>${device.last_seen_at ? new Date(device.last_seen_at).toLocaleString() : 'Never'}</td>
                <td>${device.last_provisioned_at ? new Date(device.last_provisioned_at).toLocaleString() : 'Never'}</td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-primary" onclick="viewDevice('${device.mac_address}')" title="View">👁</button>
                        <button class="btn btn-outline-secondary" onclick="editDevice('${device.mac_address}')" title="Edit">✏</button>
                        <button class="btn btn-outline-info" onclick="syncDevice('${device.mac_address}')" title="Sync">🔄</button>
                        <button class="btn btn-outline-success" onclick="reprovisionDevice('${device.mac_address}')" title="Reprovision">📡</button>
                        <button class="btn btn-outline-warning" onclick="rebootDevice('${device.mac_address}')" title="Reboot">🔌</button>
                        <button class="btn btn-outline-danger" onclick="deleteDevice('${device.mac_address}')" title="Delete">🗑</button>
                    </div>
                </td>
            </tr>
        `).join('');
    }
    
    function getStatusColor(status) {
        const colors = {
            'unprovisioned': 'secondary',
            'provisioning': 'warning',
            'active': 'success',
            'inactive': 'danger',
            'retired': 'dark'
        };
        return colors[status] || 'secondary';
    }
    
    async function loadExtensions() {
        console.log('=== LOAD EXTENSIONS CALLED ===');
        const select = document.getElementById('extensionInput');
        console.log('Extension select element:', select);
        
        const { ok, data } = await api('/api/provisioning/extensions');
        console.log('Extensions API Response:', { ok, data });
        console.log('Data keys:', Object.keys(data));
        console.log('Has extensions property:', 'extensions' in data);
        console.log('Extensions value:', data.extensions);
        
        if (ok && data.extensions) {
            console.log('Found', data.extensions.length, 'extensions');
            select.innerHTML = '<option value="">None</option>' + 
                data.extensions.map(ext => `<option value="${ext.id}">${ext.id} - ${ext.name}</option>`).join('');
        } else {
            console.error('Failed to load extensions or no extensions found');
        }
    }
    
    function openAddDeviceModal() {
        console.log('=== OPEN ADD DEVICE MODAL CALLED ===');
        document.getElementById('deviceForm').reset();
        document.getElementById('deviceMac').value = '';
        document.getElementById('extensionInput').value = '';
        deviceModal.show();
    }
    
    function openImportModal() {
        console.log('=== OPEN IMPORT MODAL CALLED ===');
        document.getElementById('importFile').value = '';
        document.getElementById('importPreview').classList.add('d-none');
        document.getElementById('importErrors').classList.add('d-none');
        document.getElementById('importPreviewBody').innerHTML = '';
        document.getElementById('importErrorsList').innerHTML = '';
        importModal.show();
    }
    
    function openTemplatesModal() {
        console.log('=== OPEN TEMPLATES MODAL CALLED ===');
        loadTemplates();
        templatesModal.show();
    }
    
    function openAddTemplateModal() {
        console.log('=== OPEN ADD TEMPLATE MODAL CALLED ===');
        document.getElementById('templateForm').reset();
        document.getElementById('templateModalTitle').textContent = 'New Template';
        templateModal.show();
    }
    
    async function loadTemplates() {
        console.log('=== LOAD TEMPLATES CALLED ===');
        const tbody = document.getElementById('templatesTableBody');
        tbody.innerHTML = '<tr><td colspan="8" class="text-center">Loading templates...</td></tr>';
        
        const { ok, data } = await api('/api/provisioning/templates');
        
        if (!ok) {
            tbody.innerHTML = '<tr><td colspan="8" class="text-center text-danger">Failed to load templates</td></tr>';
            return;
        }
        
        const templates = data.data || [];
        
        if (templates.length === 0) {
            tbody.innerHTML = '<tr><td colspan="8" class="text-center">No templates found. Create your first template.</td></tr>';
            return;
        }
        
        tbody.innerHTML = templates.map(template => `
            <tr>
                <td><strong>${template.name}</strong></td>
                <td>${template.type}</td>
                <td>${template.vendor || '—'}</td>
                <td>${template.model || '—'}</td>
                <td>${template.description || '—'}</td>
                <td>${template.is_default ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>'}</td>
                <td>${template.is_active ? '<span class="badge bg-success">Active</span>' : '<span class="badge bg-danger">Inactive</span>'}</td>
                <td>
                    <button class="btn btn-sm btn-outline-primary" onclick="applyTemplate('${template.id}')">Apply</button>
                    <button class="btn btn-sm btn-outline-secondary" onclick="editTemplate('${template.id}')">Edit</button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteTemplate('${template.id}')">Delete</button>
                </td>
            </tr>
        `).join('');
    }
    
    async function saveTemplate() {
        console.log('=== SAVE TEMPLATE CALLED ===');
        const form = document.getElementById('templateForm');
        const formData = new FormData(form);
        
        const templateData = {
            name: formData.get('name'),
            type: formData.get('type'),
            vendor: formData.get('vendor') || null,
            model: formData.get('model') || null,
            tenant_id: formData.get('tenant_id') || null,
            description: formData.get('description') || null,
            is_default: formData.get('is_default') === 'on',
            is_active: formData.get('is_active') === 'on',
        };
        
        const { ok, data } = await api('/api/provisioning/templates', {
            method: 'POST',
            body: JSON.stringify(templateData)
        });
        
        if (ok) {
            alert('Template saved successfully');
            templateModal.hide();
            loadTemplates();
        } else {
            alert('Failed to save template: ' + (data.error || 'Unknown error'));
        }
    }
    
    async function deleteTemplate(id) {
        if (!confirm('Are you sure you want to delete this template?')) return;
        
        const { ok } = await api(`/api/provisioning/templates/${id}`, { method: 'DELETE' });
        
        if (ok) {
            alert('Template deleted successfully');
            loadTemplates();
        } else {
            alert('Failed to delete template');
        }
    }
    
    async function applyTemplate(id) {
        if (!confirm('Are you sure you want to apply this template? This will overwrite device settings.')) return;
        
        const { ok, data } = await api(`/api/provisioning/templates/${id}/apply`, { method: 'POST' });
        
        if (ok) {
            alert(`Template applied to ${data.applied} devices`);
        } else {
            alert('Failed to apply template: ' + (data.error || 'Unknown error'));
        }
    }
    
    function toggleAllDevices() {
        const selectAll = document.getElementById('selectAllDevices');
        const checkboxes = document.querySelectorAll('.device-checkbox');
        checkboxes.forEach(cb => cb.checked = selectAll.checked);
        updateSelectedCount();
    }
    
    function updateSelectedCount() {
        const checkboxes = document.querySelectorAll('.device-checkbox:checked');
        const count = checkboxes.length;
        document.getElementById('selectedCount').textContent = count;
        
        const bulkBtn = document.getElementById('bulkActionsBtn');
        if (count > 0) {
            bulkBtn.classList.remove('d-none');
        } else {
            bulkBtn.classList.add('d-none');
        }
    }
    
    function openBulkActionsModal() {
        const checkboxes = document.querySelectorAll('.device-checkbox:checked');
        const count = checkboxes.length;
        document.getElementById('bulkSelectedCount').textContent = count;
        bulkActionsModal.show();
    }
    
    async function bulkReprovision() {
        const checkboxes = document.querySelectorAll('.device-checkbox:checked');
        const macs = Array.from(checkboxes).map(cb => cb.dataset.mac);
        
        if (!confirm(`Reprovision ${macs.length} devices?`)) return;
        
        const { ok, data } = await api('/api/provisioning/bulk/reprovision', {
            method: 'POST',
            body: JSON.stringify({ macs })
        });
        
        if (ok) {
            alert(`Reprovisioned ${data.successful} devices. Failed: ${data.failed}`);
            bulkActionsModal.hide();
            loadDevices();
        } else {
            alert('Failed to bulk reprovision: ' + (data.error || 'Unknown error'));
        }
    }
    
    async function bulkReboot() {
        const checkboxes = document.querySelectorAll('.device-checkbox:checked');
        const macs = Array.from(checkboxes).map(cb => cb.dataset.mac);
        
        if (!confirm(`Reboot ${macs.length} devices?`)) return;
        
        const { ok, data } = await api('/api/provisioning/bulk/reboot', {
            method: 'POST',
            body: JSON.stringify({ macs })
        });
        
        if (ok) {
            alert(`Rebooted ${data.successful} devices. Failed: ${data.failed}`);
            bulkActionsModal.hide();
        } else {
            alert('Failed to bulk reboot: ' + (data.error || 'Unknown error'));
        }
    }
    
    async function bulkDelete() {
        const checkboxes = document.querySelectorAll('.device-checkbox:checked');
        const macs = Array.from(checkboxes).map(cb => cb.dataset.mac);
        
        if (!confirm(`Delete ${macs.length} devices? This cannot be undone.`)) return;
        
        const { ok, data } = await api('/api/provisioning/bulk/delete', {
            method: 'POST',
            body: JSON.stringify({ macs })
        });
        
        if (ok) {
            alert(`Deleted ${data.deleted} devices`);
            bulkActionsModal.hide();
            loadDevices();
        } else {
            alert('Failed to bulk delete: ' + (data.error || 'Unknown error'));
        }
    }
    
    function exportInventory() {
        window.location.href = '/api/provisioning/export';
    }
    
    async function previewConfig(mac) {
        const { ok, data } = await api(`/api/provisioning/${mac}/config`);
        
        if (!ok) {
            alert('Failed to load config preview');
            return;
        }
        
        const device = data.device;
        document.getElementById('previewMac').value = device.mac_address;
        document.getElementById('previewVendor').value = device.vendor;
        document.getElementById('configPreviewContent').value = data.config;
        
        configPreviewModal.show();
    }
    
    function copyConfigToClipboard() {
        const configContent = document.getElementById('configPreviewContent');
        configContent.select();
        document.execCommand('copy');
        alert('Config copied to clipboard');
    }
    
    document.getElementById('importFile').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = function(event) {
            const text = event.target.result;
            const lines = text.split('\n').filter(line => line.trim());
            
            const previewBody = document.getElementById('importPreviewBody');
            const errorsList = document.getElementById('importErrorsList');
            const errorsDiv = document.getElementById('importErrors');
            
            previewBody.innerHTML = '';
            errorsList.innerHTML = '';
            let hasErrors = false;
            
            lines.forEach((line, index) => {
                const parts = line.split(',').map(p => p.trim());
                if (parts.length < 2) return; // Skip invalid lines
                
                const [mac, vendor, model, extension, displayName, tenant, template, site, username, password, vlan, ntpServer, status] = parts;
                
                // Validate MAC format
                const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$|^([0-9A-Fa-f]{12})$/;
                const isValidMac = macRegex.test(mac);
                
                const rowClass = isValidMac ? '' : 'table-danger';
                
                previewBody.innerHTML += `
                    <tr class="${rowClass}">
                        <td><code>${mac}</code></td>
                        <td>${vendor || '—'}</td>
                        <td>${model || '—'}</td>
                        <td>${extension || '—'}</td>
                        <td>${displayName || '—'}</td>
                        <td>${tenant || '—'}</td>
                        <td>${template || '—'}</td>
                        <td>${status || 'active'}</td>
                    </tr>
                `;
                
                if (!isValidMac) {
                    hasErrors = true;
                    errorsList.innerHTML += `<div>Line ${index + 1}: Invalid MAC format - ${mac}</div>`;
                }
            });
            
            document.getElementById('importPreview').classList.remove('d-none');
            if (hasErrors) {
                errorsDiv.classList.remove('d-none');
            }
        };
        reader.readAsText(file);
    });
    
    async function processImport() {
        console.log('=== PROCESS IMPORT CALLED ===');
        const fileInput = document.getElementById('importFile');
        const file = fileInput.files[0];
        
        if (!file) {
            alert('Please select a CSV file to import');
            return;
        }
        
        const skipDuplicates = document.getElementById('skipDuplicates').checked;
        
        const formData = new FormData();
        formData.append('file', file);
        formData.append('skip_duplicates', skipDuplicates ? '1' : '0');
        
        const response = await fetch('/api/provisioning/import', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            body: formData
        });
        
        const result = await response.json();
        console.log('Import result:', result);
        
        if (result.success) {
            let message = `Import completed successfully!\n\nImported: ${result.imported}\nSkipped: ${result.skipped}\nErrors: ${result.errors}`;
            
            if (result.conflicts && result.conflicts.length > 0) {
                message += `\n\nConflicts:\n${result.conflicts.join('\n')}`;
            }
            
            alert(message);
            importModal.hide();
            loadDevices();
        } else {
            alert('Import failed: ' + (result.error || 'Unknown error'));
        }
    }
    
    async function openButtonProgram(mac) {
        const { ok, data } = await api(`/api/provisioning/${mac}`);
        if (!ok) {
            alert('Failed to load device');
            return;
        }
        
        document.getElementById('buttonMac').value = mac;
        document.getElementById('buttonExtension').value = data.extension || '';
        
        // Load existing button programming
        const buttons = data.button_programming || [];
        const tbody = document.getElementById('buttonProgramTableBody');
        tbody.innerHTML = buttons.map((btn, i) => `
            <tr data-index="${i}">
                <td>Button ${i + 1}</td>
                <td>
                    <select class="form-select btn-type" onchange="updateButtonType(${i})">
                        <option value="blf" ${btn.type === 'blf' ? 'selected' : ''}>BLF</option>
                        <option value="speeddial" ${btn.type === 'speeddial' ? 'selected' : ''}>Speed Dial</option>
                        <option value="line" ${btn.type === 'line' ? 'selected' : ''}>Line Key</option>
                        <option value="intercom" ${btn.type === 'intercom' ? 'selected' : ''}>Intercom</option>
                        <option value="pickup" ${btn.type === 'pickup' ? 'selected' : ''}>Pickup</option>
                    </select>
                </td>
                <td>
                    <input type="text" class="form-control btn-value" value="${btn.value || ''}" placeholder="Extension">
                </td>
                <td>
                    <input type="text" class="form-control btn-label" value="${btn.label || ''}" placeholder="Label">
                </td>
                <td>
                    <button class="btn btn-sm btn-danger" onclick="removeButtonRow(${i})">Remove</button>
                </td>
            </tr>
        `).join('');
        
        if (buttons.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center">No buttons configured</td></tr>';
        }
        
        buttonProgramModal.show();
    }
    
    function addButtonRow() {
        console.log('=== ADD BUTTON ROW CALLED ===');
        const tbody = document.getElementById('buttonProgramTableBody');
        const index = tbody.children.length;
        console.log('Current tbody children:', tbody.children.length);
        
        if (tbody.children.length === 1 && tbody.children[0].textContent.includes('No buttons')) {
            console.log('Clearing "No buttons" row');
            tbody.innerHTML = '';
        }
        
        const row = document.createElement('tr');
        row.dataset.index = index;
        row.innerHTML = `
            <td>Button ${index + 1}</td>
            <td>
                <select class="form-select btn-type">
                    <option value="blf">BLF</option>
                    <option value="speeddial">Speed Dial</option>
                    <option value="line">Line Key</option>
                    <option value="intercom">Intercom</option>
                    <option value="pickup">Pickup</option>
                </select>
            </td>
            <td>
                <input type="text" class="form-control btn-value" placeholder="Extension">
            </td>
            <td>
                <input type="text" class="form-control btn-label" placeholder="Label">
            </td>
            <td>
                <button class="btn btn-sm btn-danger" onclick="removeButtonRow(${index})">Remove</button>
            </td>
        `;
        tbody.appendChild(row);
        console.log('Row added, new tbody children:', tbody.children.length);
    }
    
    function removeButtonRow(index) {
        const tbody = document.getElementById('buttonProgramTableBody');
        const row = tbody.querySelector(`tr[data-index="${index}"]`);
        if (row) {
            row.remove();
        }
        
        if (tbody.children.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-center">No buttons configured</td></tr>';
        }
    }
    
    async function saveButtonProgram() {
        console.log('=== SAVE BUTTON PROGRAM CALLED ===');
        const mac = document.getElementById('buttonMac').value;
        const tbody = document.getElementById('buttonProgramTableBody');
        
        const buttons = [];
        tbody.querySelectorAll('tr[data-index]').forEach(row => {
            const index = row.dataset.index;
            buttons.push({
                type: row.querySelector('.btn-type').value,
                value: row.querySelector('.btn-value').value,
                label: row.querySelector('.btn-label').value
            });
        });
        
        console.log('Saving buttons for MAC:', mac);
        console.log('Buttons data:', buttons);
        
        const { ok, data } = await api(`/api/provisioning/${mac}/buttons`, {
            method: 'POST',
            body: JSON.stringify({ buttons })
        });
        
        console.log('Button save API response:', { ok, data });
        
        if (ok) {
            alert('Button programming saved successfully. Please reprovision the phone to apply changes.');
            buttonProgramModal.hide();
        } else {
            alert('Failed to save button programming: ' + (data.error || 'Unknown error'));
        }
    }
    
    async function openAdvancedSettings(mac) {
        const { ok, data } = await api(`/api/provisioning/${mac}`);
        if (!ok) {
            alert('Failed to load device');
            return;
        }
        
        // Load existing settings
        const settings = data.advanced_settings || {};
        document.getElementById('prefCodec').value = settings.pref_codec || 'pcmu';
        document.getElementById('dtmfMode').value = settings.dtmf_mode || 'rfc4733';
        document.getElementById('sipTransport').value = settings.sip_transport || '0';
        document.getElementById('rtpSymmetric').value = settings.rtp_symmetric !== undefined ? settings.rtp_symmetric : '1';
        
        // NTP/Time Settings
        document.getElementById('ntpPrimary').value = settings.ntp_primary || '';
        document.getElementById('ntpSecondary').value = settings.ntp_secondary || '';
        document.getElementById('timezone').value = settings.timezone || 'Africa/Johannesburg';
        document.getElementById('dstEnabled').checked = settings.dst_enabled || false;
        document.getElementById('timeFormat').value = settings.time_format || '24h';
        document.getElementById('dateFormat').value = settings.date_format || 'YYYY-MM-DD';
        
        // Display Settings
        document.getElementById('language').value = settings.language || 'English';
        
        // Branding
        document.getElementById('wallpaperUrl').value = settings.wallpaper_url || '';
        document.getElementById('logoUrl').value = settings.logo_url || '';
        
        // Network Settings
        document.getElementById('vlanId').value = data.vlan || '';
        
        // Store MAC for saving
        document.getElementById('advancedSettingsForm').dataset.mac = mac;
        
        advancedSettingsModal.show();
    }
    
    async function saveAdvancedSettings() {
        const mac = document.getElementById('advancedSettingsForm').dataset.mac;
        
        const settings = {
            pref_codec: document.getElementById('prefCodec').value,
            dtmf_mode: document.getElementById('dtmfMode').value,
            sip_transport: document.getElementById('sipTransport').value,
            rtp_symmetric: document.getElementById('rtpSymmetric').value,
            ntp_primary: document.getElementById('ntpPrimary').value,
            ntp_secondary: document.getElementById('ntpSecondary').value,
            timezone: document.getElementById('timezone').value,
            dst_enabled: document.getElementById('dstEnabled').checked,
            time_format: document.getElementById('timeFormat').value,
            date_format: document.getElementById('dateFormat').value,
            language: document.getElementById('language').value,
            wallpaper_url: document.getElementById('wallpaperUrl').value,
            logo_url: document.getElementById('logoUrl').value,
            vlan: document.getElementById('vlanId').value
        };
        
        const { ok } = await api(`/api/provisioning/${mac}/settings`, {
            method: 'POST',
            body: JSON.stringify({ settings })
        });
        
        if (ok) {
            alert('Advanced settings saved successfully');
            advancedSettingsModal.hide();
        } else {
            alert('Failed to save advanced settings');
        }
    }
    
    async function editDevice(mac) {
        const { ok, data } = await api(`/api/provisioning/${mac}`);
        
        if (!ok) {
            alert('Failed to load device');
            return;
        }
        
        document.getElementById('deviceModalTitle').textContent = 'Edit Device';
        document.getElementById('deviceMac').value = data.mac_address;
        document.getElementById('macInput').value = data.mac_address;
        document.getElementById('macInput').disabled = true;
        document.getElementById('vendorInput').value = data.vendor || '';
        document.getElementById('modelInput').value = data.model || '';
        document.getElementById('serialInput').value = data.serial_number || '';
        document.getElementById('extensionInput').value = data.extension || '';
        document.getElementById('statusInput').value = data.status || 'unprovisioned';
        document.getElementById('provUserInput').value = data.provisioning_username || '';
        document.getElementById('provPassInput').value = data.provisioning_password || '';
        document.getElementById('vlanInput').value = data.vlan || '';
        document.getElementById('switchPortInput').value = data.switch_port || '';
        document.getElementById('zeroTouchInput').checked = data.zero_touch_enabled || false;
        
        deviceModal.show();
    }
    
    async function saveDevice() {
        const form = document.getElementById('deviceForm');
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());
        
        const mac = document.getElementById('deviceMac').value;
        const isNew = !mac;
        
        data.zero_touch_enabled = document.getElementById('zeroTouchInput').checked;
        
        const url = isNew ? '/api/provisioning' : `/api/provisioning/${mac}`;
        const method = isNew ? 'POST' : 'PUT';
        
        const { ok, data: response } = await api(url, {
            method,
            body: JSON.stringify(data)
        });
        
        if (!ok) {
            alert('Failed to save device: ' + (response.error || 'Unknown error'));
            return;
        }
        
        deviceModal.hide();
        loadDevices();
    }
    
    async function deleteDevice(mac) {
        if (!confirm('Are you sure you want to delete this device?')) return;
        
        const { ok } = await api(`/api/provisioning/${mac}`, { method: 'DELETE' });
        
        if (!ok) {
            alert('Failed to delete device');
            return;
        }
        
        loadDevices();
    }
    
    async function viewDevice(mac) {
        const { ok, data } = await api(`/api/provisioning/${mac}`);
        
        if (!ok) {
            alert('Failed to load device');
            return;
        }
        
        const content = document.getElementById('deviceInfoContent');
        content.innerHTML = `
            <table class="table table-sm">
                <tr><td><strong>MAC Address:</strong></td><td><code>${data.mac_address}</code></td></tr>
                <tr><td><strong>Vendor:</strong></td><td>${data.vendor || '—'}</td></tr>
                <tr><td><strong>Model:</strong></td><td>${data.model || '—'}</td></tr>
                <tr><td><strong>Serial Number:</strong></td><td>${data.serial_number || '—'}</td></tr>
                <tr><td><strong>Extension:</strong></td><td>${data.extension || '—'}</td></tr>
                <tr><td><strong>Status:</strong></td><td><span class="badge bg-${getStatusColor(data.status)}">${data.status}</span></td></tr>
                <tr><td><strong>Last Provisioned:</strong></td><td>${data.last_provisioned_at ? new Date(data.last_provisioned_at).toLocaleString() : 'Never'}</td></tr>
                <tr><td><strong>Last Seen:</strong></td><td>${data.last_seen_at ? new Date(data.last_seen_at).toLocaleString() : 'Never'}</td></tr>
                <tr><td><strong>Last IP:</strong></td><td>${data.last_known_ip || '—'}</td></tr>
                <tr><td><strong>VLAN:</strong></td><td>${data.vlan || '—'}</td></tr>
                <tr><td><strong>Zero-Touch:</strong></td><td>${data.zero_touch_enabled ? 'Enabled' : 'Disabled'}</td></tr>
            </table>
        `;
        
        deviceInfoModal.show();
    }
    
    async function getProvisioningUrl(mac) {
        const { ok, data } = await api(`/api/provisioning/${mac}/url`);
        
        if (!ok) {
            alert('Failed to get provisioning URL');
            return;
        }
        
        prompt('Provisioning URL (copy this to your device):', data.provisioning_url);
    }
    
    async function reprovisionDevice(mac) {
        console.log('=== REPROVISION DEVICE CALLED ===');
        console.log('Reprovisioning device:', mac);
        
        if (!confirm('Are you sure you want to reprovision this device?')) return;
        
        console.log('Calling API: /api/provisioning/' + mac + '/reprovision');
        
        // Update last_provisioned_at to trigger phone to download new config
        const { ok, data, status } = await api(`/api/provisioning/${mac}/reprovision`, { method: 'POST' });
        
        console.log('Reprovision API response:', { ok, data, status });
        
        if (!ok) {
            alert('Failed to reprovision device: ' + (data.error || 'Unknown error'));
            return;
        }
        
        alert('Device reprovisioned successfully. The phone should download the new configuration automatically.');
        loadDevices(); // Refresh the device list
    }
    
    async function rebootDevice(mac) {
        console.log('=== REBOOT DEVICE CALLED ===');
        console.log('Rebooting device:', mac);
        
        if (!confirm('Are you sure you want to reboot this device?')) return;
        
        const { ok, data, status } = await api(`/api/provisioning/${mac}/reboot`, { method: 'POST' });
        
        console.log('Reboot API response:', { ok, data, status });
        
        if (!ok) {
            alert('Failed to reboot device: ' + (data.error || 'Unknown error'));
            return;
        }
        
        alert(data.message || 'Reboot command sent to device successfully. The phone should restart shortly.');
    }
    async function syncDevice(mac) {
        console.log('=== SYNC DEVICE CALLED ===');
        console.log('Syncing device:', mac);

        try {
            const url = `/api/provisioning/${mac}/sync`;
            console.log('Fetching from:', url);

            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken,
                    'Content-Type': 'application/json',
                },
                credentials: 'same-origin',
            });

            console.log('Response status:', response.status);
            console.log('Response ok:', response.ok);

            const data = await response.json().catch(() => ({}));
            console.log('Sync API response:', data);

            if (!response.ok) {
                alert('Failed to sync device: ' + (data.error || 'Unknown error'));
                return;
            }

            alert(data.message || 'Device synced successfully. Refreshing...');
            loadDevices(); // Refresh the device list
        } catch (error) {
            console.error('Sync error:', error);
            alert('Failed to sync device: ' + error.message);
        }
    }

    
    // Search functionality
    document.getElementById('searchInput').addEventListener('input', function(e) {
        const query = e.target.value.toLowerCase();
        const rows = document.querySelectorAll('#devicesTableBody tr');
        
        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            row.style.display = text.includes(query) ? '' : 'none';
        });
    });
    
    // Expose functions to global scope for onclick handlers
    window.openAddDeviceModal = openAddDeviceModal;
    window.openImportModal = openImportModal;
    window.openTemplatesModal = openTemplatesModal;
    window.openAddTemplateModal = openAddTemplateModal;
    window.openButtonProgram = openButtonProgram;
    window.openAdvancedSettings = openAdvancedSettings;
    window.addButtonRow = addButtonRow;
    window.removeButtonRow = removeButtonRow;
    window.saveButtonProgram = saveButtonProgram;
    window.saveAdvancedSettings = saveAdvancedSettings;
    window.reprovisionDevice = reprovisionDevice;
    window.editDevice = editDevice;
    window.saveDevice = saveDevice;
    window.deleteDevice = deleteDevice;
    window.viewDevice = viewDevice;
    window.getProvisioningUrl = getProvisioningUrl;
    window.rebootDevice = rebootDevice;
    window.syncDevice = syncDevice;
    window.saveTemplate = saveTemplate;
    window.deleteTemplate = deleteTemplate;
    window.applyTemplate = applyTemplate;
    window.editTemplate = function(id) { console.log("editTemplate called with id:", id); alert("Edit template functionality not yet implemented"); };
    window.toggleAllDevices = toggleAllDevices;
    window.updateSelectedCount = updateSelectedCount;
    window.openBulkActionsModal = openBulkActionsModal;
    window.bulkReprovision = bulkReprovision;
    window.bulkReboot = bulkReboot;
    window.bulkDelete = bulkDelete;
    window.exportInventory = exportInventory;
    window.previewConfig = previewConfig;
    window.copyConfigToClipboard = copyConfigToClipboard;
    console.log('Functions exposed to window object');
})();
</script>
@endsection