@extends('layouts.app')
@section('content')

<style>
    .pn-wrapper {
        padding: 0 4px;
    }

    .pn-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 28px;
    }

    .pn-header-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
        flex-shrink: 0;
    }

    .pn-header-icon svg {
        width: 24px;
        height: 24px;
        fill: #fff;
    }

    .pn-header-text h4 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e1b4b;
        letter-spacing: -0.2px;
    }

    .pn-header-text p {
        margin: 2px 0 0;
        font-size: 0.82rem;
        color: #6b7280;
    }

    /* Alert */
    .pn-alert {
        border-radius: 10px;
        border-left: 4px solid;
        padding: 12px 16px;
        margin-bottom: 20px;
        font-size: 0.875rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .pn-alert.success {
        background: #f0fdf4;
        border-color: #22c55e;
        color: #15803d;
    }

    .pn-alert.danger {
        background: #fef2f2;
        border-color: #ef4444;
        color: #b91c1c;
    }

    /* Table Card */
    .pn-card {
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
        overflow: hidden;
        border: 1px solid #e5e7eb;
    }

    .pn-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.875rem;
    }

    .pn-table thead tr {
        background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
    }

    .pn-table thead th {
        color: #fff;
        font-weight: 600;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        padding: 14px 18px;
        border: none;
        white-space: nowrap;
    }

    .pn-table tbody tr {
        border-bottom: 1px solid #f3f4f6;
        transition: background 0.15s ease;
    }

    .pn-table tbody tr:last-child {
        border-bottom: none;
    }

    .pn-table tbody tr:hover {
        background: #f8f7ff;
    }

    .pn-table tbody td {
        padding: 14px 18px;
        color: #374151;
        vertical-align: middle;
        border: none;
    }

    /* Badges */
    .badge-code {
        display: inline-block;
        background: #ede9fe;
        color: #5b21b6;
        font-weight: 700;
        font-size: 0.78rem;
        padding: 4px 10px;
        border-radius: 6px;
        letter-spacing: 0.4px;
        font-family: monospace;
    }

    .badge-type {
        display: inline-block;
        background: #dbeafe;
        color: #1d4ed8;
        font-weight: 600;
        font-size: 0.75rem;
        padding: 3px 10px;
        border-radius: 20px;
        letter-spacing: 0.3px;
    }

    .td-head {
        font-weight: 600;
        color: #111827;
    }

    .td-body {
        color: #6b7280;
        max-width: 340px;
        line-height: 1.5;
    }

    /* Send Buttons */
    .btn-send-group {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }

    .btn-send {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: none;
        border-radius: 8px;
        padding: 7px 14px;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
        white-space: nowrap;
        color: #fff;
    }

    .btn-send.btn-all {
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    }

    .btn-send.btn-single {
        background: linear-gradient(135deg, #0891b2, #0e7490);
        box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
    }

    .btn-send:hover {
        opacity: 0.88;
        transform: translateY(-1px);
    }

    .btn-send.btn-all:hover  { box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4); }
    .btn-send.btn-single:hover { box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4); }

    .btn-send:active {
        transform: translateY(0);
        opacity: 1;
    }

    .btn-send svg {
        width: 13px;
        height: 13px;
        fill: #fff;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
    }

    .empty-state svg {
        width: 52px;
        height: 52px;
        fill: #d1d5db;
        margin-bottom: 14px;
    }

    .empty-state p {
        color: #9ca3af;
        font-size: 0.9rem;
        margin: 0;
    }

    /* Stats badge */
    .pn-count-badge {
        display: inline-block;
        background: #ede9fe;
        color: #5b21b6;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 20px;
        margin-left: 8px;
    }
</style>

<div class="pn-wrapper">

    {{-- Breadcrumb --}}
    <nav aria-label="breadcrumb" style="margin-bottom: 16px;">
        <ol class="breadcrumb" style="margin: 0; font-size: 0.82rem; padding: 0; background: none;">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" style="color: #6b7280; text-decoration: none;">Utama</a></li>
            <li class="breadcrumb-item active" style="color: #374151;">Send WABA</li>
        </ol>
    </nav>

    {{-- Page Header --}}
    <div class="pn-header">
        <div class="pn-header-icon">
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
            </svg>
        </div>
        <div class="pn-header-text">
            <h4>Send WABA
                <span class="pn-count-badge">{{ $template->count() }} template(s)</span>
            </h4>
            <p>Select a template below and send a WhatsApp Business message to all registered users.</p>
        </div>
    </div>

    {{-- Alerts --}}
    @include('errors')

    @if(session('success'))
        <div class="pn-alert success alert-dismissible" role="alert">
            <svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:#22c55e;flex-shrink:0;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>
            <span style="flex:1">{{ session('success') }}</span>
            <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close" style="margin-left:auto;"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="pn-alert danger alert-dismissible" role="alert">
            <svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:#ef4444;flex-shrink:0;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
            <span style="flex:1">{{ session('error') }}</span>
            <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close" style="margin-left:auto;"></button>
        </div>
    @endif

    {{-- Templates Table --}}
    <div class="pn-card">
        <div class="table-responsive">
            <table class="pn-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Template</th>
                        <th>Var1</th>
                        <th>Var2</th>
                        <th>Var3</th>
                        <th style="text-align:center;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($template as $index => $row)
                        @php
                            $code = $row->code ?? $row->Code ?? '';
                            $var1 = $row->var1 ?? $row->Var1 ?? '';
                            $var2 = $row->var2 ?? $row->Var2 ?? '';
                            $var3 = $row->var3 ?? $row->Var3 ?? '';
                        @endphp
                        <tr>
                            <td style="color:#9ca3af;font-size:0.8rem;">{{ $index + 1 }}</td>
                            <td><span class="badge-code">{{ $code ?: '—' }}</span></td>
                            <td><span class="badge-type">{{ $var1 ?: '—' }}</span></td>
                            <td class="td-head">{{ $var2 }}</td>
                            <td class="td-body">{{ $var3 }}</td>
                            <td style="text-align:center;">
                                <form action="{{ route('admin.message.sendwabaone') }}" method="POST"
                                      onsubmit="return handleWabaConfirm(event, this, '{{ addslashes($var2) }}', '{{ addslashes($var3) }}')">
                                    @csrf
                                    <input type="hidden" name="template_code" value="{{ $code }}">
                                    <input type="hidden" name="var1" value="{{ $var1 }}">
                                    <input type="hidden" name="var2" value="{{ $var2 }}">
                                    <input type="hidden" name="var3" value="{{ $var3 }}">
                                    <div class="btn-send-group">
                                        <button type="submit" name="mode" value="ALL" class="btn-send btn-all">
                                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                                            Send ALL
                                        </button>
                                        <button type="submit" name="mode" value="SINGLE" class="btn-send btn-single">
                                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                                            Single
                                        </button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6">
                                <div class="empty-state">
                                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
                                    <p>No push notification templates found.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

<script>
function handleWabaConfirm(event, form, var2, var3) {
    const clicked = form.querySelector('button[type="submit"]:focus') ?? event.submitter;
    const mode = clicked ? clicked.value : 'ALL';
    const target = mode === 'ALL' ? 'ALL users' : 'a SINGLE user';
    return confirm('Send this WABA message to ' + target + '?\n\nVar2: ' + var2 + '\nVar3: ' + var3);
}
</script>

@endsection