<div class="card shadow-sm">
    <div class="card-body">
        <h4 class="fw-bold mb-1 d-flex justify-content-between align-items-center">
            <span><i class="mdi mdi-phone-outline me-1"></i>Phone numbers</span>
            @can('solicitors.edit')
            <button class="btn btn-primary btn-sm" wire:click="create">
                <i class="mdi mdi-plus"></i>
            </button>
            @endcan
        </h4>
        <p class="text-muted small mb-3">
            Managed Twilio numbers for voice calls, SMS, and WhatsApp per line type.
        </p>

        @error('general')
            <div class="alert alert-danger py-2 small">{{ $message }}</div>
        @enderror

        @if($this->phoneNumbers->count())
            @foreach($this->phoneNumbers as $number)
                <div class="p-3 rounded border bg-light position-relative mb-2"
                     wire:key="phone-number-{{ $number->id }}">
                    <div class="pe-5">
                        <div class="fw-semibold">
                            {{ $number->phone_number }}
                            @if(!$number->is_active)
                                <span class="badge bg-secondary ms-1">inactive</span>
                            @endif
                            @if($number->is_primary)
                                <span class="badge bg-warning text-dark ms-1">Primary</span>
                            @endif
                        </div>
                        @if($number->label)
                            <div class="text-muted small">{{ $number->label }}</div>
                        @endif
                        <div class="mt-1 d-flex flex-wrap gap-1">
                            @if($number->type)
                                <span class="badge bg-secondary">{{ $number->type->name }}</span>
                            @endif
                            @foreach($number->capabilities ?? [] as $cap)
                                @if($cap === 'voice')
                                    <span class="badge bg-primary"><i class="mdi mdi-phone me-1"></i>Voice</span>
                                @elseif($cap === 'sms')
                                    <span class="badge bg-info text-dark"><i class="mdi mdi-message-text me-1"></i>SMS</span>
                                @elseif($cap === 'whatsapp')
                                    <span class="badge bg-success"><i class="mdi mdi-whatsapp me-1"></i>WhatsApp</span>
                                @endif
                            @endforeach
                        </div>
                        @if($number->voicemail_greeting_path)
                            <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
                                <span class="badge bg-dark">
                                    <i class="mdi mdi-voicemail me-1"></i>Voicemail greeting
                                </span>
                                <audio controls preload="none" style="height:32px; max-width:240px;">
                                    <source src="{{ Storage::url($number->voicemail_greeting_path) }}" type="audio/mpeg">
                                </audio>
                                @can('solicitors.edit')
                                    <button type="button"
                                            class="btn btn-link btn-sm text-danger p-0"
                                            wire:click="removeVoicemailGreeting({{ $number->id }})"
                                            wire:confirm="Remove this voicemail greeting? Callers will hear the default spoken message instead.">
                                        Remove
                                    </button>
                                @endcan
                            </div>
                        @endif
                    </div>
                    @can('solicitors.edit')
                    <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                        <i class="mdi mdi-star action-icon {{ $number->is_primary ? 'text-warning' : 'text-muted opacity-25' }}"
                           wire:click="setPrimary({{ $number->id }})"
                           title="{{ $number->is_primary ? 'Primary number' : 'Set as primary' }}"
                           style="cursor:pointer;"></i>
                        <i class="mdi {{ $number->is_active ? 'mdi-pause-circle' : 'mdi-play-circle' }} action-icon"
                           wire:click="toggleActive({{ $number->id }})"
                           title="{{ $number->is_active ? 'Deactivate' : 'Activate' }}"
                           style="cursor:pointer;"></i>
                        <i class="mdi mdi-pencil-outline action-icon"
                           wire:click="edit({{ $number->id }})"
                           style="cursor:pointer;"></i>
                        <i class="mdi mdi-delete-outline action-icon text-danger"
                           wire:click="delete({{ $number->id }})"
                           wire:confirm="Delete this phone number?"
                           style="cursor:pointer;"></i>
                    </div>
                    @endcan
                </div>
            @endforeach
        @else
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-phone-off-outline" style="font-size:48px;"></i>
                <p class="mt-3 fw-bold mb-1">No phone numbers configured.</p>
                <p class="small">Add a Twilio number to enable voice and messaging for this solicitor.</p>
            </div>
        @endif
    </div>

    @if($showForm)
        <div class="offcanvas offcanvas-end show" tabindex="-1" style="--bs-offcanvas-width: 520px;" role="dialog">
            <div class="offcanvas-header">
                <h5>{{ $editingId ? 'Edit' : 'Add' }} phone number</h5>
                <button type="button" class="btn-close" wire:click="cancel"></button>
            </div>
            <div class="offcanvas-body bg-light">
                <form wire:submit="save">
                    @csrf

                    <div class="mb-3">
                        <label class="form-label">Type <span class="text-danger">*</span></label>
                        <select class="form-select @error('phone_number_type_id') is-invalid @enderror"
                                wire:model="phone_number_type_id">
                            <option value="">Select type…</option>
                            @foreach($this->phoneNumberTypes as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                        @error('phone_number_type_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <x-ui.input name="label"
                                label="Label"
                                placeholder="e.g. DSAR Helpline"/>

                    <x-ui.input name="phone_number"
                                label="Phone number"
                                placeholder="e.g. +44 1234 567890"/>

                    <div class="mb-3">
                        <label class="form-label">Capabilities</label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cap_voice"
                                       wire:model="capabilities" value="voice">
                                <label class="form-check-label" for="cap_voice">Voice</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cap_sms"
                                       wire:model="capabilities" value="sms">
                                <label class="form-check-label" for="cap_sms">SMS</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="cap_whatsapp"
                                       wire:model="capabilities" value="whatsapp">
                                <label class="form-check-label" for="cap_whatsapp">WhatsApp</label>
                            </div>
                        </div>
                        @error('capabilities')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Voicemail greeting</label>
                        <p class="text-muted small mb-2">
                            Upload an MP3 to play to callers who reach voicemail on this line
                            (e.g. “Welcome to the INS client line…”). Leave blank to use the
                            default spoken message.
                        </p>

                        @if($existing_voicemail_greeting_path)
                            <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
                                <audio controls preload="none" style="height:32px; max-width:260px;">
                                    <source src="{{ Storage::url($existing_voicemail_greeting_path) }}" type="audio/mpeg">
                                </audio>
                                <button type="button"
                                        class="btn btn-link btn-sm text-danger p-0"
                                        wire:click="removeVoicemailGreeting({{ $editingId }})"
                                        wire:confirm="Remove this voicemail greeting?">
                                    Remove
                                </button>
                            </div>
                        @endif

                        <input type="file"
                               class="form-control @error('voicemail_greeting') is-invalid @enderror"
                               wire:model="voicemail_greeting"
                               accept="audio/mpeg,.mp3">
                        <div wire:loading wire:target="voicemail_greeting" class="form-text">
                            Uploading…
                        </div>
                        @error('voicemail_greeting')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">
                            MP3 only. Max 5 MB.
                            {{ $existing_voicemail_greeting_path ? 'Uploading a new file replaces the current greeting.' : '' }}
                        </div>
                    </div>

                    <details class="mb-3">
                        <summary class="small text-muted" style="cursor:pointer;">Twilio routing (advanced)</summary>
                        <div class="mt-2">
                            <x-ui.input name="provider"
                                        label="Provider"
                                        placeholder="twilio"/>
                            <x-ui.input name="twilio_account_sid"
                                        label="Twilio account SID (optional)"
                                        placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
                            <x-ui.input name="twilio_subaccount_sid"
                                        label="Twilio subaccount SID (optional)"
                                        placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
                            <x-ui.input name="twilio_phone_number_sid"
                                        label="Twilio phone number SID (optional)"
                                        placeholder="PNxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
                            <x-ui.input name="twilio_twiml_app_sid"
                                        label="Twilio TwiML App SID (optional)"
                                        placeholder="APxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
                            <p class="form-text text-muted">Leave blank to use the main Twilio account configured for the system. The TwiML App SID routes the browser dialler's outgoing calls; when set on the primary voice number it overrides the system default for that solicitor's agents.</p>
                        </div>
                    </details>

                    <div class="mb-4">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="pn_active" wire:model="is_active">
                            <label class="form-check-label" for="pn_active">Active</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="pn_primary" wire:model="is_primary">
                            <label class="form-check-label" for="pn_primary">Set as primary number</label>
                        </div>
                    </div>

                    <x-ui.button class="btn-success w-100 btn-lg">
                        {{ $editingId ? 'Save Changes' : 'Add Number' }}
                    </x-ui.button>
                </form>
            </div>
        </div>
        <div class="offcanvas-backdrop fade show" wire:click="cancel"></div>
    @endif
</div>
