@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 Button */
    .btn-send {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 7px 16px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
        white-space: nowrap;
    }

    .btn-send:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    }

    .btn-send:active {
        transform: translateY(0);
        opacity: 1;
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
    }

    .btn-send svg {
        width: 14px;
        height: 14px;
        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;">Blast Push Notification</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>Blast Push Notification
            </h4>
            <p>Hantar notifikasi kepada pengguna.</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
    
    <div class="col md-6">
        <div class="card shadow-sm border-0 rounded" style="padding-top: 20px">
            <div class="card-body">
                <form action="{{ route('admin.message.pushnotiall') }}" method="POST"
                onsubmit="return confirm('Send this push notification to ALL users?')">
                @csrf              
                <div style="margin-bottom: 15px;">
                <label>Tajuk</label><br>
                <input type="text" name="template_head" style="width: 100%;">
                </div>

                <div style="margin-bottom: 15px;">
                <label>Keterangan</label><br>
                <textarea id="body" name="template_body" cols="30" rows="10" style="width: 100%;"></textarea>
                </div>

                <button type="submit" class="btn-send" style="margin-left: 90%">
                <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>
                 Hantar
                </button>
            </form>
            </div>
        </div>
    </div>

    {{-- Templates Table --}}
    <div class="col md-6">
        <div class="card shadow-sm border-0 rounded" style="padding-top: 20px">
        <div class="card-body">
            <table class="pn-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Code</th>
                        <th>Type</th>
                        <th>Head</th>
                        <th>Body</th>
                        <th style="text-align:center;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($template as $index => $row)
                        @php
                            $code = $row->code ?? $row->Code ?? '';
                            $type = $row->type ?? $row->Type ?? '';
                            $head = $row->head ?? $row->Head ?? '';
                            $body = $row->body ?? $row->Body ?? '';
                        @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">{{ $type ?: '—' }}</span></td>
                            <td class="td-head">{{ $head }}</td>
                            <td class="td-body">{{ $body }}</td>
                            <td style="text-align:center;">
                                <form action="{{ route('admin.message.pushnotiall') }}" method="POST"
                                      onsubmit="return confirm('Send this push notification to ALL users?\n\nHead: {{ addslashes($head) }}\nBody: {{ addslashes($body) }}')">
                                    @csrf
                                    <input type="hidden" name="template_code" value="{{ $code }}">
                                    <input type="hidden" name="template_type" value="{{ $type }}">
                                    <input type="hidden" name="template_head" value="{{ $head }}">
                                    <input type="hidden" name="template_body" value="{{ $body }}">
                                    <button type="submit" class="btn-send">
                                        <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
                                    </button>
                                </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>

</div>

@endsection