<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>
                    </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>

                    <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"/>
                            <p class="form-text text-muted">Leave blank to use the main Twilio account configured for the system.</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>
