@extends('layouts.app')

@section('title', 'Template Pesan')

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-title">Template Pesan WA</h1>
        <p class="page-subtitle">Kelola template untuk broadcast kampanye</p>
    </div>
    <a href="{{ route('broadcast.index') }}" class="btn btn-secondary">Kembali</a>
</div>

<div style="display:grid;grid-template-columns:1fr 360px;gap:1.25rem;align-items:start;">

    {{-- Template list --}}
    <div class="card">
        <div class="card-header"><span class="card-title">Daftar Template ({{ $templates->total() }})</span></div>
        @if($templates->isEmpty())
        <div class="empty-state">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            <div class="empty-state-title">Belum ada template</div>
            <p class="empty-state-text">Buat template pertama menggunakan form di sebelah kanan</p>
        </div>
        @else
        <div>
            @foreach($templates as $tpl)
            <div style="padding:1rem 1.25rem;border-bottom:1px solid var(--gray-100);">
                <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;">
                    <div style="flex:1;min-width:0;">
                        <div style="font-size:.875rem;font-weight:500;color:var(--gray-900);margin-bottom:.375rem;">{{ $tpl->name }}</div>
                        <div style="font-size:.8125rem;color:var(--gray-600);line-height:1.5;background:var(--gray-50);border-radius:var(--radius);padding:.5rem .75rem;white-space:pre-wrap;">{{ Str::limit($tpl->content, 150) }}</div>
                        <div style="display:flex;gap:.5rem;margin-top:.5rem;align-items:center;">
                            <span class="badge badge-gray" style="font-size:.6875rem;">{{ ucfirst($tpl->category) }}</span>
                            <span style="font-size:.75rem;color:var(--gray-400);">oleh {{ $tpl->createdBy?->name ?? '—' }}</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('broadcast.templates.destroy', $tpl) }}">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-ghost btn-sm btn-icon" style="color:var(--danger);"
                                onclick="return confirm('Hapus template ini?')">
                            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
        @if($templates->hasPages())
        <div class="pagination-wrapper">
            <div class="pagination-info">{{ $templates->firstItem() }}–{{ $templates->lastItem() }} dari {{ $templates->total() }}</div>
            <div class="pagination">
                @if(!$templates->onFirstPage())<a class="page-link" href="{{ $templates->previousPageUrl() }}">‹</a>@endif
                @foreach($templates->getUrlRange(max(1,$templates->currentPage()-2),min($templates->lastPage(),$templates->currentPage()+2)) as $p => $url)
                <a class="page-link {{ $p===$templates->currentPage()?'active':'' }}" href="{{ $url }}">{{ $p }}</a>
                @endforeach
                @if($templates->hasMorePages())<a class="page-link" href="{{ $templates->nextPageUrl() }}">›</a>@endif
            </div>
        </div>
        @endif
        @endif
    </div>

    {{-- Form tambah template --}}
    <div class="card">
        <div class="card-header"><span class="card-title">Tambah Template Baru</span></div>
        <div class="card-body">
            <form method="POST" action="{{ route('broadcast.templates.store') }}">
                @csrf
                <div class="form-group">
                    <label class="form-label">Nama Template <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name') }}"
                           placeholder="misal: Promo Bulanan" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Kategori</label>
                    <select name="category" class="form-control">
                        <option value="marketing">Marketing</option>
                        <option value="notification">Notifikasi</option>
                        <option value="support">Support</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Isi Pesan <span class="required">*</span></label>
                    <textarea name="content" class="form-control" rows="6"
                              placeholder="Halo {nama}, kami ingin menginformasikan..." required>{{ old('content') }}</textarea>
                    <p class="field-hint">Variable: <code style="background:var(--gray-100);padding:1px 5px;border-radius:3px;">{nama}</code> untuk nama kontak</p>
                </div>
                <button type="submit" class="btn btn-primary w-100">Simpan Template</button>
            </form>
        </div>
    </div>
</div>

@endsection