{{--
    brafa Systems — Call system settings.
    Livewire backing: App\Http\Livewire\CallSystemSettings. Bindings preserved:
    wire:model call_system_number/call_system_lock_id/allow_all_numbers/
    sciener_username/sciener_password/newNumber, wire:click saveSettings/
    saveCredentials/addNumber/removeNumber, $showCredentialsForm, $whitelist, $logs.
--}}
<div class="brafa-screen" style="max-width: 820px;">
    {{-- Settings --}}
    <section class="card card--pad-lg" style="margin-bottom: 20px;">
        <h3 class="card-heading">Call system settings</h3>
        <div class="input-row">
            <div>
                <label class="field-label">Call system number</label>
                <input type="text" class="input" wire:model="call_system_number">
            </div>
            <div>
                <label class="field-label">Lock ID</label>
                <input type="text" class="input" wire:model="call_system_lock_id">
            </div>
        </div>
        <label class="brafa-auth__check" for="allow_all" style="margin-bottom: 16px;">
            <input type="checkbox" id="allow_all" wire:model="allow_all_numbers">
            Allow all numbers
        </label>
        <div><button class="btn" wire:click="saveSettings">Save settings</button></div>
    </section>

    {{-- Sciener credentials --}}
    @if ($showCredentialsForm)
        <section class="card card--pad-lg" style="margin-bottom: 20px;">
            <h3 class="card-heading">Sciener credentials</h3>
            <div class="input-row">
                <div>
                    <label class="field-label">Username</label>
                    <input type="text" class="input" wire:model="sciener_username">
                </div>
                <div>
                    <label class="field-label">Password</label>
                    <input type="password" class="input" wire:model="sciener_password">
                </div>
            </div>
            <div><button class="btn" wire:click="saveCredentials">Save credentials</button></div>
        </section>
    @endif

    {{-- Whitelisted numbers --}}
    <section class="card prop-list" style="margin-bottom: 20px;">
        <div class="prop-toolbar">
            <h3 class="card-heading" style="margin: 0;">Whitelisted numbers</h3>
            <div class="prop-toolbar__right" style="gap: 8px;">
                <input type="text" class="input" style="width: 200px;" placeholder="Add number" wire:model="newNumber">
                <button class="btn btn--sm" wire:click="addNumber"><x-lucide name="plus" size="14" /> Add</button>
            </div>
        </div>
        <div style="overflow-x:auto;">
            <table class="table">
                <thead><tr><th>Number</th><th>Last opened</th><th style="width: 90px;"></th></tr></thead>
                <tbody>
                    @forelse ($whitelist as $entry)
                        <tr>
                            <td class="mono">{{ $entry->from_number }}</td>
                            <td class="mono muted">{{ $entry->last_opened_at }}</td>
                            <td>
                                <button class="btn btn--outline btn--sm" wire:click="removeNumber({{ $entry->id }})"
                                        style="border-color: var(--brafa-red); color: var(--brafa-red);">Delete</button>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3" style="padding:24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No numbers whitelisted.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>

    {{-- Recent logs --}}
    <section class="card prop-list">
        <div class="prop-toolbar">
            <h3 class="card-heading" style="margin: 0;">Recent logs</h3>
        </div>
        <div style="overflow-x:auto;">
            <table class="table">
                <thead><tr><th>Time</th><th>Number</th><th>Status</th></tr></thead>
                <tbody>
                    @forelse ($logs as $log)
                        <tr>
                            <td class="mono muted">{{ $log->created_at }}</td>
                            <td class="mono">{{ $log->from_number }}</td>
                            <td>{{ $log->status }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3" style="padding:24px;text-align:center;color:var(--fg-subtle);font-size:13px;">No logs yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>