<x-app-layout>
    <x-slot name="header">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <h2 class="h4 mb-0">SMS Templates</h2>
            <a href="{{ route('admin.sms-gateways.index') }}" class="btn btn-outline-primary"><i class="fas fa-plug me-1"></i> SMS Configuration</a>
        </div>
    </x-slot>

<div>
    <div class="alert alert-info py-2">Click a placeholder to append it to the end of the template. After payment, the <strong>Paid SMS</strong> template will be used.</div>
    <div class="row g-3">
        @foreach($templates as $template)
        <div class="col-12 col-xl-6">
            <form class="card border-0 shadow-sm h-100 sms-template-form" action="{{ route('admin.sms-templates.update', $template) }}" method="POST">
                @csrf @method('PUT')
                <div class="card-header bg-white d-flex justify-content-between align-items-center gap-2">
                    <input class="form-control fw-semibold border-0 px-0" name="name" value="{{ $template->name }}" maxlength="100" required>
                    <div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" name="is_active" value="1" @checked($template->is_active) title="Active"></div>
                </div>
                <div class="card-body">
                    <textarea class="form-control template-body" name="body" rows="4" maxlength="1000" required>{{ $template->body }}</textarea>
                    <div class="d-flex flex-wrap gap-1 mt-2">
                        @foreach($placeholders as $placeholder)<button type="button" class="btn btn-sm btn-light border placeholder-btn">&#123;{{ $placeholder }}&#125;</button>@endforeach
                    </div>
                </div>
                <div class="card-footer bg-white d-flex justify-content-between align-items-center">
                    <small class="text-muted">Key: {{ $template->key }}</small>
                    @can('sms.update')<button class="btn btn-primary btn-sm save-template">Save Template</button>@endcan
                </div>
            </form>
        </div>
        @endforeach
    </div>
</div>
@push('scripts')
<script>
document.addEventListener('click', function(e){
    const token = e.target.closest('.placeholder-btn');
    if(token){ const box = token.closest('form').querySelector('.template-body'); box.value += (box.value.endsWith(' ') ? '' : ' ') + token.textContent.trim(); box.focus(); }
});
document.querySelectorAll('.sms-template-form').forEach(form => form.addEventListener('submit', async function(e){
    e.preventDefault(); const btn=form.querySelector('.save-template'); if(btn){btn.disabled=true;btn.textContent='Saving...';}
    try { const response=await fetch(form.action,{method:'POST',headers:{'Accept':'application/json','X-Requested-With':'XMLHttpRequest'},body:new FormData(form)}); const data=await response.json(); if(!response.ok) throw new Error(data.message || 'Could not save template'); showToast(data.message,'success'); }
    catch(error){ showToast(error.message,'error'); } finally { if(btn){btn.disabled=false;btn.textContent='Save Template';} }
}));
</script>
@endpush
</x-app-layout>
