<div class="container py-4">
    <x-title>
        Phone Numbers
        <x-slot:buttons>
            <a href="{{ route('settings.index') }}" class="btn btn-outline-secondary">Back</a>
        </x-slot:buttons>
    </x-title>

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

    <div class="card shadow-sm">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="fw-bold mb-0">Phone Numbers</h4>
                @if(!$showForm)
                    <button class="btn btn-primary btn-sm" wire:click="create">
                        <i class="mdi mdi-plus"></i> Add Number
                    </button>
                @endif
            </div>

            @if($this->phoneNumbers->count())
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Number</th>
                            <th>Type</th>
                            <th>Label</th>
                            <th>Capabilities</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($this->phoneNumbers as $pn)
                            <tr>
                                <td>
                                    {{ $pn->phone_number }}
                                    @if($pn->is_primary)
                                        <span class="badge bg-primary ms-1">Primary</span>
                                    @endif
                                </td>
                                <td>{{ $pn->type?->name ?? '—' }}</td>
                                <td>{{ $pn->label ?: '—' }}</td>
                                <td>
                                    @foreach($pn->capabilities ?? [] as $cap)
                                        <span class="badge bg-secondary me-1">{{ ucfirst($cap) }}</span>
                                    @endforeach
                                </td>
                                <td>
                                    <span class="badge {{ $pn->is_active ? 'bg-success' : 'bg-secondary' }}">
                                        {{ $pn->is_active ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <div class="d-flex gap-2 justify-content-end">
                                        @unless($pn->is_primary)
                                            <button class="btn btn-sm btn-outline-secondary"
                                                    wire:click="setPrimary({{ $pn->id }})"
                                                    title="Set as primary">
                                                <i class="mdi mdi-star-outline"></i>
                                            </button>
                                        @endunless
                                        <button class="btn btn-sm btn-outline-secondary"
                                                wire:click="toggleActive({{ $pn->id }})"
                                                title="{{ $pn->is_active ? 'Deactivate' : 'Activate' }}">
                                            <i class="mdi mdi-{{ $pn->is_active ? 'pause' : 'play' }}"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-primary"
                                                wire:click="edit({{ $pn->id }})">
                                            <i class="mdi mdi-pencil-outline"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"
                                                wire:click="delete({{ $pn->id }})"
                                                wire:confirm="Delete this phone number?">
                                            <i class="mdi mdi-delete-outline"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @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">No phone numbers configured.</p>
                </div>
            @endif
        </div>
    </div>

    @if($showForm)
        <div class="card shadow-sm mt-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ $editingId ? 'Edit Phone Number' : 'Add Phone Number' }}</h5>
                <button class="btn-close" wire:click="cancel"></button>
            </div>
            <div class="card-body">
                <form wire:submit="save">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                            <input class="form-control @error('phone_number') is-invalid @enderror"
                                   wire:model="phone_number" placeholder="07700 900000">
                            @error('phone_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <div class="col-md-6">
                            <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>

                        <div class="col-md-6">
                            <label class="form-label">Label</label>
                            <input class="form-control" wire:model="label" placeholder="e.g. Main Line">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Provider <span class="text-danger">*</span></label>
                            <input class="form-control" wire:model="provider">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Twilio Account SID</label>
                            <input class="form-control" wire:model="twilio_account_sid">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Twilio Subaccount SID</label>
                            <input class="form-control" wire:model="twilio_subaccount_sid">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Twilio Phone Number SID</label>
                            <input class="form-control" wire:model="twilio_phone_number_sid">
                        </div>

                        <div class="col-12">
                            <label class="form-label d-block">Capabilities</label>
                            <div class="d-flex gap-3">
                                @foreach(['voice', 'sms', 'whatsapp'] as $cap)
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                               wire:model="capabilities" value="{{ $cap }}"
                                               id="cap_{{ $cap }}">
                                        <label class="form-check-label" for="cap_{{ $cap }}">{{ ucfirst($cap) }}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" wire:model="is_active" id="is_active">
                                <label class="form-check-label" for="is_active">Active</label>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" wire:model="is_primary" id="is_primary">
                                <label class="form-check-label" for="is_primary">Primary</label>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2 justify-content-end mt-4">
                        <button type="button" class="btn btn-outline-secondary" wire:click="cancel">Cancel</button>
                        <button type="submit" class="btn btn-success">
                            {{ $editingId ? 'Save Changes' : 'Add Number' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif
</div>
