<div class="card shadow-sm border-0 mb-3">
    <div class="card-body">
        <h6 class="fw-bold mb-3"><i class="mdi mdi-message-text me-1"></i>Send SMS</h6>

        <form wire:submit="send">
            <div class="mb-2">
                <label class="form-label small fw-bold text-muted">TO NUMBER</label>
                <input type="text" wire:model="toNumber" class="form-control form-control-sm" placeholder="+447...">
                @error('toNumber')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <div class="mb-2">
                <label class="form-label small fw-bold text-muted">MESSAGE</label>
                <textarea wire:model.live.debounce.150ms="body"
                          class="form-control form-control-sm"
                          rows="3"
                          maxlength="1224"
                          placeholder="Type your message..."></textarea>
                <div class="text-end text-muted small mt-1">{{ strlen($body ?? '') }}/1,224</div>
                @error('message')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
            </div>

            <button type="submit" class="btn btn-sm btn-primary w-100" wire:loading.attr="disabled">
                <span wire:loading.remove><i class="mdi mdi-send me-1"></i>Send</span>
                <span wire:loading>Sending...</span>
            </button>
        </form>

        @if($history->count())
            <hr class="my-3">
            <div class="small text-muted fw-bold mb-1">Recent</div>
            <ul class="list-unstyled mb-0">
                @foreach($history as $sms)
                    <li class="border-bottom py-1 small">
                        <div class="d-flex justify-content-between">
                            <span class="text-truncate me-2">{{ $sms->message }}</span>
                            <span class="badge bg-{{ $sms->status === 'sent' ? 'success' : ($sms->status === 'failed' ? 'danger' : 'secondary') }} flex-shrink-0">{{ $sms->status }}</span>
                        </div>
                        <div class="text-muted" style="font-size:0.7rem">{{ $sms->created_at->format('d/m/Y H:i') }} → {{ $sms->to_number }}</div>
                    </li>
                @endforeach
            </ul>
        @endif
    </div>
</div>
