@extends('layouts.app')

@section('content')
@php
    $toolTabs = [
        ['label' => 'All Extensions', 'route' => route('extensions.index'), 'active' => request()->routeIs('extensions.index')],
        ['label' => 'Status', 'route' => route('extensions.status'), 'active' => request()->routeIs('extensions.status')],
        ['label' => 'Hot Desking', 'route' => route('extensions.hot-desking'), 'active' => $tool === 'hot-desking'],
        ['label' => 'Import', 'route' => route('extensions.import'), 'active' => $tool === 'import'],
        ['label' => 'Export', 'route' => route('extensions.export'), 'active' => $tool === 'export'],
        ['label' => 'Bulk Modification', 'route' => route('extensions.bulk-modification'), 'active' => $tool === 'bulk-modification'],
        ['label' => 'Bulk Extensions', 'route' => route('extensions.bulk-extensions'), 'active' => $tool === 'bulk-extensions'],
    ];
    $filters = $filters ?? ['q' => '', 'transport' => '', 'device_type' => ''];
    $selectedExtensions = collect($selectedExtensions ?? [])->map(fn ($id) => (string) $id)->all();
@endphp

<div class="card border-0 shadow-sm grid-margin mb-3 bg-primary bg-gradient text-white">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <div class="text-uppercase small fw-semibold mb-2 text-white-50">Extensions Workspace</div>
                <h4 class="mb-1">{{ $pageTitle }}</h4>
                <div class="text-white-50">{{ $pageSubtitle }}</div>
            </div>
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <span class="badge bg-white text-primary">NobleUI</span>
                <span class="badge bg-primary-subtle text-primary border">Realtime PBX Tools</span>
            </div>
        </div>
        <div class="nav nav-pills gap-2 mt-4">
            @foreach ($toolTabs as $tab)
                <a href="{{ $tab['route'] }}" class="nav-link rounded-pill px-3 {{ $tab['active'] ? 'active bg-white text-primary' : 'bg-primary-subtle text-white border border-white border-opacity-25' }}">{{ $tab['label'] }}</a>
            @endforeach
        </div>
    </div>
</div>

@if (session('status'))
    <div class="alert alert-success" role="alert">
        {{ session('status') }}
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger" role="alert">
        <div class="fw-semibold mb-1">There were some problems with your input:</div>
        <ul class="mb-0 ps-3">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if (session('import_skipped'))
    <div class="alert alert-warning" role="alert">
        <div class="fw-semibold mb-1">Some import rows were skipped:</div>
        <ul class="mb-0 ps-3">
            @foreach (session('import_skipped') as $item)
                <li>{{ $item }}</li>
            @endforeach
        </ul>
    </div>
@endif

@if (session('bulk_skipped'))
    <div class="alert alert-warning" role="alert">
        <div class="fw-semibold mb-1">Existing extensions skipped:</div>
        <div>{{ implode(', ', session('bulk_skipped')) }}</div>
    </div>
@endif

@if ($tool === 'hot-desking')
    <div class="card mb-3 border-0 shadow-sm">
        <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <div class="fw-semibold">PBX-level hot desking</div>
                <div class="text-secondary small">Assignments and login sessions now drive the realtime `from-internal` dial target for each extension.</div>
            </div>
            <form method="POST" action="{{ route('extensions.hot-desking.sync') }}">
                @csrf
                <button type="submit" class="btn btn-outline-primary btn-sm">Sync Dialplan Now</button>
            </form>
        </div>
    </div>

    <div class="row g-3">
        <div class="col-12 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-secondary small text-uppercase mb-2">Overview</div>
                    <h3 class="mb-1">{{ $extensions->total() }}</h3>
                    <div class="text-secondary">Extensions in the internal pool.</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-secondary small text-uppercase mb-2">Ready For Hot Desk</div>
                    <h3 class="mb-1">{{ $extensions->getCollection()->filter(fn($row) => (int) ($row->max_contacts ?? 1) > 1)->count() }}</h3>
                    <div class="text-secondary">Extensions already allowing multiple contacts.</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-secondary small text-uppercase mb-2">Web/Mobile Capable</div>
                    <h3 class="mb-1">{{ $extensions->getCollection()->filter(fn($row) => in_array($row->transport, ['transport-wss', 'transport-tcp'], true))->count() }}</h3>
                    <div class="text-secondary">Extensions provisioned for roaming-friendly clients.</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-secondary small text-uppercase mb-2">Currently Logged In</div>
                    <h3 class="mb-1">{{ collect($hotDeskAssignments ?? [])->filter(fn($row) => !empty($row->logged_in_user))->count() }}</h3>
                    <div class="text-secondary">Active hot desk sessions across assigned devices.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Extension</th>
                            <th>Device Type</th>
                            <th>Transport</th>
                            <th>Context</th>
                            <th>Max Contacts</th>
                            <th>Hot Desk Readiness</th>
                            <th>Assignment</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($extensions as $extension)
                            @php $assignment = $hotDeskAssignments[$extension->id] ?? null; @endphp
                            <tr>
                                <td class="font-monospace">{{ $extension->id }}</td>
                                <td>{{ ucfirst(str_replace('_', ' ', $extension->description ?: 'sip_phone')) }}</td>
                                <td class="font-monospace">{{ $extension->transport }}</td>
                                <td>{{ $extension->context }}</td>
                                <td>{{ $extension->max_contacts ?? 1 }}</td>
                                <td>
                                    @if ((int) ($extension->max_contacts ?? 1) > 1)
                                        <span class="badge bg-success">Ready</span>
                                    @else
                                        <span class="badge bg-warning text-dark">Single Contact</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($assignment && $assignment->assigned_user)
                                        <div class="fw-semibold">{{ $assignment->assigned_user }}</div>
                                        <div class="small text-secondary">{{ $assignment->logged_in_user ? 'Logged in: ' . $assignment->logged_in_user : 'Not logged in' }}</div>
                                        <div class="small text-secondary font-monospace mt-1">Target: {{ $assignment->logged_in_endpoint ?: ($assignment->assigned_endpoint ?: $extension->id) }}</div>
                                    @else
                                        <span class="text-secondary small">Unassigned</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex flex-column gap-2" style="min-width: 290px;">
                                        <form method="POST" action="{{ route('extensions.hot-desking.assign') }}" class="border rounded p-2 bg-light">
                                            @csrf
                                            <input type="hidden" name="extension" value="{{ $extension->id }}">
                                            <div class="row g-2">
                                                <div class="col-12">
                                                    <input type="text" list="hot-desk-users" class="form-control form-control-sm" name="user_name" value="{{ $assignment->assigned_user ?? '' }}" placeholder="Assign user">
                                                </div>
                                                <div class="col-6">
                                                    <input type="text" class="form-control form-control-sm" name="user_pin" value="{{ $assignment->assigned_pin ?? '' }}" placeholder="PIN (optional)">
                                                </div>
                                                <div class="col-6">
                                                    <input type="text" class="form-control form-control-sm font-monospace" name="assigned_endpoint" value="{{ $assignment->assigned_endpoint ?? $extension->id }}" placeholder="Target endpoint">
                                                </div>
                                                <div class="col-12 d-grid">
                                                    <button type="submit" class="btn btn-outline-primary btn-sm">Assign</button>
                                                </div>
                                            </div>
                                        </form>
                                        <form method="POST" action="{{ route('extensions.hot-desking.login') }}" class="border rounded p-2">
                                            @csrf
                                            <input type="hidden" name="extension" value="{{ $extension->id }}">
                                            <div class="row g-2">
                                                <div class="col-6">
                                                    <input type="text" class="form-control form-control-sm" name="login_user" placeholder="Login user">
                                                </div>
                                                <div class="col-3">
                                                    <input type="text" class="form-control form-control-sm" name="login_pin" placeholder="PIN">
                                                </div>
                                                <div class="col-3">
                                                    <input type="text" class="form-control form-control-sm" name="device_label" placeholder="Desk">
                                                </div>
                                                <div class="col-12">
                                                    <input type="text" class="form-control form-control-sm font-monospace" name="login_endpoint" value="{{ $assignment->logged_in_endpoint ?? $assignment->assigned_endpoint ?? $extension->id }}" placeholder="Logged-in endpoint override">
                                                </div>
                                                <div class="col-6 d-grid">
                                                    <button type="submit" class="btn btn-primary btn-sm">Login</button>
                                                </div>
                                                <div class="col-6 d-grid">
                                                    <button type="submit" formaction="{{ route('extensions.hot-desking.logout') }}" class="btn btn-outline-secondary btn-sm">Logout</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-secondary py-4">No extensions found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <datalist id="hot-desk-users">
        @foreach (($hotDeskUsers ?? []) as $userName)
            <option value="{{ $userName }}"></option>
        @endforeach
    </datalist>

    <div class="mt-3">{{ $extensions->links() }}</div>
@endif

@if ($tool === 'import')
    <div class="row g-3">
        <div class="col-12 col-xl-8">
            <div class="card">
                <div class="card-header">CSV Import</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('extensions.import.store') }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Default Context</label>
                                <select class="form-select" name="default_context">
                                    <option value="from-internal" {{ old('default_context') === 'from-internal' ? 'selected' : '' }}>from-internal</option>
                                    <option value="from-external" {{ old('default_context') === 'from-external' ? 'selected' : '' }}>from-external</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Default Device Type</label>
                                <select class="form-select" name="default_device_type">
                                    <option value="sip_phone" {{ old('default_device_type') === 'sip_phone' ? 'selected' : '' }}>SIP Phone</option>
                                    <option value="web_phone" {{ old('default_device_type') === 'web_phone' ? 'selected' : '' }}>Web Phone</option>
                                    <option value="mobile_app" {{ old('default_device_type') === 'mobile_app' ? 'selected' : '' }}>Mobile App</option>
                                    <option value="teams" {{ old('default_device_type') === 'teams' ? 'selected' : '' }}>Teams</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">CSV Data</label>
                                <textarea class="form-control font-monospace" rows="12" name="csv_data" placeholder="1001,password123,Reception,sip_phone,from-internal&#10;1002,password456,Sales,web_phone,from-internal">{{ old('csv_data') }}</textarea>
                                <div class="form-text">Format: extension,password,display_name,device_type,context</div>
                            </div>
                        </div>
                        <div class="mt-3 d-flex gap-2 flex-wrap">
                            <button type="submit" formaction="{{ route('extensions.import.preview') }}" class="btn btn-outline-primary">Preview Import</button>
                            <button type="submit" class="btn btn-primary">Import Extensions</button>
                            <a href="{{ route('extensions.import.template') }}" class="btn btn-outline-secondary">Download Template</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-header">Import Notes</div>
                <div class="card-body">
                    <div class="small text-secondary mb-2">Supported device types</div>
                    <ul class="mb-0 ps-3">
                        <li><code>sip_phone</code></li>
                        <li><code>web_phone</code></li>
                        <li><code>mobile_app</code></li>
                        <li><code>teams</code></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    @if (!empty($importPreview))
        <div class="card mt-3">
            <div class="card-header">Validation Preview</div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Line</th>
                                <th>Extension</th>
                                <th>Display Name</th>
                                <th>Device Type</th>
                                <th>Context</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($importPreview as $row)
                                <tr>
                                    <td>{{ $row['line'] }}</td>
                                    <td class="font-monospace">{{ $row['id'] }}</td>
                                    <td>{{ $row['display_name'] ?: '-' }}</td>
                                    <td>{{ $row['device_type'] }}</td>
                                    <td>{{ $row['context'] }}</td>
                                    <td>
                                        @if ($row['valid'])
                                            <span class="badge bg-success">Valid</span>
                                        @elseif (!empty($row['exists']))
                                            <span class="badge bg-warning text-dark">Existing / Duplicate</span>
                                        @else
                                            <span class="badge bg-danger">{{ implode(', ', $row['errors']) }}</span>
                                        @endif
                                        @if (!empty($row['errors']))
                                            <div class="small text-secondary mt-1">{{ implode(', ', $row['errors']) }}</div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
@endif

@if ($tool === 'export')
    <div class="row g-3 mb-3">
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-secondary small text-uppercase mb-2">Extensions Ready</div>
                    <h3 class="mb-1">{{ $extensions->total() }}</h3>
                    <div class="text-secondary">Inventory items available for CSV export.</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-body">
                    <div class="text-secondary small text-uppercase mb-2">WebRTC Endpoints</div>
                    <h3 class="mb-1">{{ $extensions->getCollection()->filter(fn($row) => $row->transport === 'transport-wss')->count() }}</h3>
                    <div class="text-secondary">Browser/mobile capable extensions in this page set.</div>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column justify-content-between">
                    <div>
                        <div class="text-secondary small text-uppercase mb-2">CSV Export</div>
                        <div class="text-secondary">Download current extension provisioning details.</div>
                    </div>
                    <div class="mt-3">
                        <a href="{{ route('extensions.export.download') }}" class="btn btn-primary btn-sm">Download CSV</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div>
                <div class="fw-semibold">Download current extension inventory</div>
                <div class="text-secondary small">Exports core provisioning fields to CSV.</div>
            </div>
            <a href="{{ route('extensions.export.download') }}" class="btn btn-primary btn-sm">Download CSV</a>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Extension</th>
                            <th>Username</th>
                            <th>Context</th>
                            <th>Transport</th>
                            <th>Device Type</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($extensions as $extension)
                            <tr>
                                <td class="font-monospace">{{ $extension->id }}</td>
                                <td class="font-monospace">{{ $extension->username ?: $extension->id }}</td>
                                <td>{{ $extension->context }}</td>
                                <td class="font-monospace">{{ $extension->transport }}</td>
                                <td>{{ ucfirst(str_replace('_', ' ', $extension->description ?: 'sip_phone')) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center text-secondary py-4">No extensions available for export.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="mt-3">{{ $extensions->links() }}</div>
@endif

@if ($tool === 'bulk-modification')
    <form method="POST" action="{{ route('extensions.bulk-modification.update') }}">
        @csrf
        <div class="row g-3">
            <div class="col-12 col-xl-4">
                <div class="card h-100">
                    <div class="card-header">Apply Changes</div>
                    <div class="card-body">
                        <div class="alert alert-light border mb-3">
                            <div class="fw-semibold mb-1">Selection tools</div>
                            <div class="small text-secondary">Use the filters on the right, add visible rows, or capture the full filtered result across all pages.</div>
                        </div>
                        <div class="card border mb-3 bg-light">
                            <div class="card-body py-3">
                                <div class="d-flex justify-content-between align-items-center gap-2 flex-wrap">
                                    <div>
                                        <div class="fw-semibold">Saved selection</div>
                                        <div class="small text-secondary">{{ count($selectedExtensions) }} extension(s) currently selected across pages.</div>
                                    </div>
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" type="checkbox" id="useSavedSelection" name="use_saved_selection" value="1" {{ count($selectedExtensions) > 0 ? 'checked' : '' }}>
                                        <label class="form-check-label" for="useSavedSelection">Use saved selection</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Context</label>
                            <select class="form-select" name="context">
                                <option value="">No change</option>
                                <option value="from-internal">from-internal</option>
                                <option value="from-external">from-external</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Transport</label>
                            <select class="form-select" name="transport">
                                <option value="">No change</option>
                                <option value="transport-udp">transport-udp</option>
                                <option value="transport-tcp">transport-tcp</option>
                                <option value="transport-wss">transport-wss</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Allowed Codecs</label>
                            <input type="text" class="form-control" name="allow" placeholder="e.g. ulaw,alaw">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Max Contacts</label>
                            <input type="number" class="form-control" name="max_contacts" min="1" max="10" placeholder="No change">
                        </div>
                        <hr class="my-4">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Routing Mode</label>
                            <select class="form-select" name="routing_mode" id="bulkRoutingMode">
                                <option value="">No change</option>
                                <option value="system_default">System Default</option>
                                <option value="dedicated">Dedicated Trunk</option>
                            </select>
                        </div>
                        <div id="bulkRoutingFields" class="d-none">
                            <div class="mb-3">
                                <label class="form-label">Primary Trunk</label>
                                <select class="form-select" name="outbound_trunk_id" id="bulkPrimaryTrunk">
                                    <option value="">Select trunk</option>
                                    @foreach ($trunks ?? [] as $trunk)
                                        <option value="{{ $trunk['id'] }}">{{ $trunk['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Failover Trunk (optional)</label>
                                <select class="form-select" name="failover_trunk_id" id="bulkFailoverTrunk">
                                    <option value="">None</option>
                                    @foreach ($trunks ?? [] as $trunk)
                                        <option value="{{ $trunk['id'] }}">{{ $trunk['label'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="enable_trunk_failover" id="bulkFailoverEnabled">
                                    <label class="form-check-label" for="bulkFailoverEnabled">Enable Automatic Failover</label>
                                </div>
                                <div class="form-text text-secondary small">Automatically route via failover trunk if primary fails</div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Apply Bulk Update</button>
                    </div>
                </div>
            </div>
            <div class="col-12 col-xl-8">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row g-2 align-items-end">
                            <div class="col-md-5">
                                <label class="form-label">Search</label>
                                <input type="text" class="form-control" name="q" form="bulkFilterForm" value="{{ $filters['q'] ?? '' }}" placeholder="Extension or codecs">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Transport</label>
                                <select class="form-select" name="transport" form="bulkFilterForm">
                                    <option value="">All transports</option>
                                    <option value="transport-udp" {{ ($filters['transport'] ?? '') === 'transport-udp' ? 'selected' : '' }}>transport-udp</option>
                                    <option value="transport-tcp" {{ ($filters['transport'] ?? '') === 'transport-tcp' ? 'selected' : '' }}>transport-tcp</option>
                                    <option value="transport-wss" {{ ($filters['transport'] ?? '') === 'transport-wss' ? 'selected' : '' }}>transport-wss</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Device Type</label>
                                <select class="form-select" name="device_type" form="bulkFilterForm">
                                    <option value="">All device types</option>
                                    <option value="sip_phone" {{ ($filters['device_type'] ?? '') === 'sip_phone' ? 'selected' : '' }}>SIP Phone</option>
                                    <option value="web_phone" {{ ($filters['device_type'] ?? '') === 'web_phone' ? 'selected' : '' }}>Web Phone</option>
                                    <option value="mobile_app" {{ ($filters['device_type'] ?? '') === 'mobile_app' ? 'selected' : '' }}>Mobile App</option>
                                    <option value="teams" {{ ($filters['device_type'] ?? '') === 'teams' ? 'selected' : '' }}>Teams</option>
                                </select>
                            </div>
                            <div class="col-md-1 d-grid">
                                <button type="submit" form="bulkFilterForm" class="btn btn-outline-primary">Go</button>
                            </div>
                        </div>
                        <form method="GET" action="{{ route('extensions.bulk-modification') }}" id="bulkFilterForm"></form>
                        <div class="d-flex gap-2 flex-wrap mt-3">
                            <button type="submit" form="bulkVisibleSelectionForm" class="btn btn-outline-primary btn-sm">Add Visible Page</button>
                            <button type="submit" form="bulkFilteredSelectionForm" class="btn btn-outline-secondary btn-sm">Select All Filtered</button>
                            <button type="submit" form="bulkClearSelectionForm" class="btn btn-outline-danger btn-sm">Clear Selection</button>
                        </div>
                        <form method="POST" action="{{ route('extensions.bulk-modification.select-visible') }}" id="bulkVisibleSelectionForm">
                            @csrf
                        </form>
                        <form method="POST" action="{{ route('extensions.bulk-modification.select-filtered') }}" id="bulkFilteredSelectionForm">
                            @csrf
                            <input type="hidden" name="q" value="{{ $filters['q'] ?? '' }}">
                            <input type="hidden" name="transport" value="{{ $filters['transport'] ?? '' }}">
                            <input type="hidden" name="device_type" value="{{ $filters['device_type'] ?? '' }}">
                        </form>
                        <form method="POST" action="{{ route('extensions.bulk-modification.clear-selection') }}" id="bulkClearSelectionForm">
                            @csrf
                        </form>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">Select Extensions</div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead>
                                    <tr>
                                        <th style="width:48px;"><input class="form-check-input" type="checkbox" id="toggleAllExtensions"></th>
                                        <th>Extension</th>
                                        <th>Context</th>
                                        <th>Transport</th>
                                        <th>Device Type</th>
                                        <th>Codecs</th>
                                        <th>Max Contacts</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($extensions as $extension)
                                        <tr>
                                            <td><input class="form-check-input bulk-extension-checkbox" type="checkbox" name="extensions[]" value="{{ $extension->id }}" {{ in_array((string) $extension->id, $selectedExtensions, true) ? 'checked' : '' }}></td>
                                            <td class="font-monospace">{{ $extension->id }}</td>
                                            <td>{{ $extension->context }}</td>
                                            <td class="font-monospace">{{ $extension->transport }}</td>
                                            <td>{{ ucfirst(str_replace('_', ' ', $extension->description ?: 'sip_phone')) }}</td>
                                            <td class="font-monospace">{{ $extension->allow }}</td>
                                            <td>{{ $extension->max_contacts ?? 1 }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center text-secondary py-4">No extensions available.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="mt-3">{{ $extensions->links() }}</div>
            </div>
        </div>
    </form>
@endif

@if ($tool === 'bulk-extensions')
    <div class="row g-3">
        <div class="col-12 col-xl-7">
            <div class="card">
                <div class="card-header">Create Extension Range</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('extensions.bulk-extensions.store') }}">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Start Extension</label>
                                <input type="number" class="form-control" name="start_extension" value="{{ old('start_extension') }}" min="100" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">End Extension</label>
                                <input type="number" class="form-control" name="end_extension" value="{{ old('end_extension') }}" min="100" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Password Prefix</label>
                                <input type="text" class="form-control" name="password_prefix" value="{{ old('password_prefix') }}" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Context</label>
                                <select class="form-select" name="context">
                                    <option value="from-internal">from-internal</option>
                                    <option value="from-external">from-external</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Device Type</label>
                                <select class="form-select" name="device_type">
                                    <option value="sip_phone">SIP Phone</option>
                                    <option value="web_phone">Web Phone</option>
                                    <option value="mobile_app">Mobile App</option>
                                    <option value="teams">Teams</option>
                                </select>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-primary">Create Bulk Extensions</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-12 col-xl-5">
            <div class="card h-100">
                <div class="card-header">How it works</div>
                <div class="card-body">
                    <div class="text-secondary small">Each extension in the range is created with:</div>
                    <ul class="mt-2 mb-0 ps-3">
                        <li>Auto-generated username matching the extension number</li>
                        <li>Password built from <code>password_prefix + extension</code></li>
                        <li>Transport defaults based on the selected device type</li>
                        <li>Standard internal PBX defaults used by the existing extension provisioning flow</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const toggleAll = document.getElementById('toggleAllExtensions');
    const bulkCheckboxes = document.querySelectorAll('.bulk-extension-checkbox');
    const visibleSelectionForm = document.getElementById('bulkVisibleSelectionForm');

    // Bulk routing mode toggle
    const bulkRoutingMode = document.getElementById('bulkRoutingMode');
    const bulkRoutingFields = document.getElementById('bulkRoutingFields');

    if (bulkRoutingMode && bulkRoutingFields) {
        bulkRoutingMode.addEventListener('change', function () {
            if (this.value === 'dedicated') {
                bulkRoutingFields.classList.remove('d-none');
            } else {
                bulkRoutingFields.classList.add('d-none');
            }
        });
    }

    if (toggleAll) {
        toggleAll.addEventListener('change', function () {
            bulkCheckboxes.forEach(function (checkbox) {
                checkbox.checked = toggleAll.checked;
            });
        });

        bulkCheckboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                if (!toggleAll.checked && Array.from(bulkCheckboxes).every((item) => item.checked)) {
                    toggleAll.checked = true;
                } else if (toggleAll.checked && !checkbox.checked) {
                    toggleAll.checked = false;
                }
            });
        });
    }

    if (visibleSelectionForm) {
        bulkCheckboxes.forEach(function (checkbox) {
            const hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.name = 'extensions[]';
            hidden.value = checkbox.value;
            if (!checkbox.checked) {
                hidden.disabled = true;
            }
            visibleSelectionForm.appendChild(hidden);

            checkbox.addEventListener('change', function () {
                hidden.disabled = !checkbox.checked;
            });
        });
    }

    document.querySelectorAll('input[name="extensions[]"]').forEach(function (checkbox) {
        if (!checkbox.classList.contains('bulk-extension-checkbox')) {
            checkbox.checked = toggleAll.checked;
        }
    });
});
</script>
@endpush