<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-message-text-outline me-1"></i>SMS senders</span>
            <button class="btn btn-primary btn-sm" wire:click="showAdd">
                <i class="mdi mdi-plus"></i>
            </button>
        </h4>
        <p class="text-muted small mb-3">
            Whitelisted phone numbers and alpha tags allowed to send SMS from this solicitor.
        </p>

        @if($senders->count())
            @foreach($senders as $sender)
                <div class="p-3 rounded border bg-light position-relative mb-2"
                     wire:key="sms-sender-{{ $sender->id }}">
                    <div class="pe-5">
                        <div class="fw-semibold">
                            {{ $sender->label }}
                            @if(!$sender->is_active)
                                <span class="badge bg-secondary ms-1">inactive</span>
                            @endif
                        </div>
                        <div class="text-muted small">
                            <code>{{ $sender->normalized_value ?? $sender->value }}</code>
                        </div>
                        <div class="mt-1">
                            @if($sender->isAlphaTag())
                                <span class="badge bg-dark me-1">Alpha tag</span>
                                <span class="small text-muted">one-way only</span>
                            @else
                                <span class="badge bg-info text-dark me-1">Number</span>
                                @if($sender->supports_replies)
                                    <span class="small text-muted">two-way</span>
                                @endif
                            @endif
                            @if($sender->is_default)
                                <span class="badge bg-warning text-dark">Default</span>
                            @endif
                        </div>
                    </div>
                    <div class="position-absolute top-0 end-0 p-2 d-flex gap-2">
                        <i class="mdi mdi-star action-icon {{ $sender->is_default ? 'text-warning' : 'text-muted opacity-25' }}"
                           wire:click="makeDefault({{ $sender->id }})"
                           title="{{ $sender->is_default ? 'Default sender' : 'Set as default' }}"
                           style="cursor:pointer;"></i>
                        <i class="mdi {{ $sender->is_active ? 'mdi-pause-circle' : 'mdi-play-circle' }} action-icon"
                           wire:click="toggleActive({{ $sender->id }})"
                           title="{{ $sender->is_active ? 'Deactivate' : 'Activate' }}"
                           style="cursor:pointer;"></i>
                        <i class="mdi mdi-pencil-outline action-icon"
                           wire:click="loadSender({{ $sender->id }})"
                           style="cursor:pointer;"></i>
                        <i class="mdi mdi-delete-outline action-icon text-danger"
                           wire:click="deleteSender({{ $sender->id }})"
                           wire:confirm="Delete this SMS sender?"
                           style="cursor:pointer;"></i>
                    </div>
                </div>
            @endforeach
        @else
            <div class="text-center p-4 text-muted">
                <i class="mdi mdi-message-text-outline" style="font-size:42px;"></i>
                <p class="mt-3 fw-bold mb-1">No SMS senders whitelisted.</p>
                <p class="small">Add a phone number or alpha tag before sending SMS messages.</p>
            </div>
        @endif
    </div>

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

                    <div class="mb-3">
                        <label class="form-label">Type</label>
                        <select class="form-select @error('type') is-invalid @enderror"
                                wire:model.live="type">
                            @foreach($types as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">
                            Numbers can send + receive replies. Alpha tags are one-way only and not supported in all regions.
                        </div>
                    </div>

                    <x-ui.input name="label"
                                label="Label"
                                placeholder="e.g. Client SMS line"/>

                    @if($type === 'alpha_tag')
                        <x-ui.input name="value"
                                    label="Alpha tag"
                                    placeholder="e.g. ClaimsCo (max 11 chars)"/>
                    @else
                        <x-ui.input name="value"
                                    label="Phone number"
                                    placeholder="e.g. 07700 900000"/>
                    @endif

                    @if($type === 'number')
                        <details class="mb-3">
                            <summary class="small text-muted">Twilio routing (advanced)</summary>
                            <div class="mt-2">
                                <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"/>
                                <small class="form-text text-muted">
                                    Leave blank to use the main Twilio account configured for the system.
                                </small>
                            </div>
                        </details>
                    @endif

                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="sms_active" wire:model="is_active">
                            <label class="form-check-label" for="sms_active">Active</label>
                        </div>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="sms_default" wire:model="is_default">
                            <label class="form-check-label" for="sms_default">
                                Set as default SMS sender
                            </label>
                        </div>
                    </div>

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