@extends('layouts.app')

@section('content')

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>
/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
    --bg:          #f4f5f7;
    --surface:     #ffffff;
    --surface2:    #fafbfc;
    --border:      rgba(0,0,0,0.08);
    --border-md:   rgba(0,0,0,0.13);

    --ink:   #1a1a2e;
    --ink2:  #4a4a6a;
    --ink3:  #9898b0;

    --green:     #16a34a;
    --green-bg:  #f0fdf4;
    --green-br:  #bbf7d0;
    --green-txt: #15803d;

    --red:     #dc2626;
    --red-bg:  #fef2f2;
    --red-br:  #fecaca;
    --red-txt: #b91c1c;

    --blue:     #2563eb;
    --blue-bg:  #eff6ff;
    --blue-br:  #bfdbfe;
    --blue-txt: #1d4ed8;

    --r:   10px;
    --rl:  16px;
    --rxl: 20px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════
   RESET & ROOT
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.sl-root {
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
}

.sl-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2.25rem 1.75rem 5rem;
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.sl-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    animation: rise 0.5s var(--ease) both;
}

.sl-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ink3);
    margin-bottom: 4px;
}

.sl-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.sl-title span { color: var(--blue); }

.sl-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sl-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 1rem;
    border-radius: var(--r);
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--border-md);
    background: var(--surface);
    color: var(--ink2);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s var(--ease);
}

.sl-btn i { font-size: 13px; }

.sl-btn:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: translateY(-1px);
}

.sl-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════
   STAT STRIP
══════════════════════════════════════ */
.sl-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 1.5rem;
    animation: rise 0.5s var(--ease) 0.08s both;
}

.sl-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rl);
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.22s var(--ease), box-shadow 0.22s;
    cursor: default;
}

.sl-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.sl-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    transition: transform 0.22s var(--ease);
}

.sl-stat:hover .sl-stat-icon { transform: scale(1.12) rotate(-5deg); }

.sl-stat-icon.blue  { background: var(--blue-bg);  border: 1px solid var(--blue-br);  color: var(--blue);  }
.sl-stat-icon.green { background: var(--green-bg); border: 1px solid var(--green-br); color: var(--green); }
.sl-stat-icon.red   { background: var(--red-bg);   border: 1px solid var(--red-br);   color: var(--red);   }

.sl-stat-label {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ink3);
    margin-bottom: 3px;
}

.sl-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -1px;
    line-height: 1;
}

/* ══════════════════════════════════════
   TOOLBAR
══════════════════════════════════════ */
.sl-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 1.4rem;
    animation: rise 0.5s var(--ease) 0.14s both;
}

.sl-search {
    flex: 1;
    position: relative;
}

.sl-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--ink3);
    pointer-events: none;
}

.sl-search input {
    width: 100%;
    padding: 0.68rem 1rem 0.68rem 2.5rem;
    border: 1px solid var(--border-md);
    border-radius: var(--r);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82rem;
    background: var(--surface);
    color: var(--ink);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.sl-search input::placeholder { color: var(--ink3); }

.sl-search input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

.sl-filter-select {
    padding: 0.68rem 1rem;
    border: 1px solid var(--border-md);
    border-radius: var(--r);
    font-family: 'Poppins', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink2);
    background: var(--surface);
    cursor: pointer;
    outline: none;
    min-width: 130px;
    transition: border-color 0.2s;
}

.sl-filter-select:focus { border-color: var(--blue); }

/* ══════════════════════════════════════
   TABLE CARD
══════════════════════════════════════ */
.sl-table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--rxl);
    overflow: hidden;
    animation: rise 0.55s var(--ease) 0.20s both;
}

.sl-table-bar {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface2);
}

.sl-table-bar-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ink2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.sl-table-bar-title i { font-size: 15px; color: var(--ink3); }

.sl-result-count {
    font-size: 0.72rem;
    color: var(--ink3);
}

.sl-table-wrap { overflow-x: auto; }

table.sl-table {
    width: 100%;
    border-collapse: collapse;
}

table.sl-table thead tr {
    border-bottom: 1px solid var(--border);
}

table.sl-table th {
    padding: 0.8rem 1.2rem;
    text-align: left;
    font-size: 0.63rem;
    font-weight: 700;
    color: var(--ink3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

/* ── Row ── */
table.sl-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.15s;
    animation: rowIn 0.4s var(--ease) both;
    position: relative;
}

table.sl-table tbody tr:last-child { border-bottom: none; }
table.sl-table tbody tr:hover { background: #f8f9ff; }

/* left accent on hover */
table.sl-table tbody tr::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    background: var(--blue);
    border-radius: 0 3px 3px 0;
    opacity: 0;
    transition: opacity 0.18s;
}

table.sl-table tbody tr:hover::before { opacity: 1; }

/* staggered entrance */
table.sl-table tbody tr:nth-child(1)  { animation-delay: 0.22s; }
table.sl-table tbody tr:nth-child(2)  { animation-delay: 0.26s; }
table.sl-table tbody tr:nth-child(3)  { animation-delay: 0.30s; }
table.sl-table tbody tr:nth-child(4)  { animation-delay: 0.34s; }
table.sl-table tbody tr:nth-child(5)  { animation-delay: 0.38s; }
table.sl-table tbody tr:nth-child(6)  { animation-delay: 0.42s; }
table.sl-table tbody tr:nth-child(7)  { animation-delay: 0.46s; }
table.sl-table tbody tr:nth-child(8)  { animation-delay: 0.50s; }
table.sl-table tbody tr:nth-child(9)  { animation-delay: 0.54s; }
table.sl-table tbody tr:nth-child(10) { animation-delay: 0.58s; }

table.sl-table td {
    padding: 0.95rem 1.2rem;
    font-size: 0.82rem;
    color: var(--ink2);
    vertical-align: middle;
}

/* ── Cell types ── */
.sl-id {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink3);
    font-variant-numeric: tabular-nums;
}

.sl-phone {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.sl-phone i { font-size: 12px; color: var(--ink3); }

.sl-type-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    background: #f1f2f6;
    color: var(--ink2);
    border: 1px solid var(--border-md);
}

.sl-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.sl-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.sl-status.success {
    background: var(--green-bg);
    color: var(--green-txt);
    border: 1px solid var(--green-br);
}

.sl-status.failed {
    background: var(--red-bg);
    color: var(--red-txt);
    border: 1px solid var(--red-br);
}

.sl-message {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ink3);
    font-size: 0.79rem;
    cursor: help;
}

.sl-date-main {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.8rem;
}

.sl-date-time {
    font-size: 0.69rem;
    color: var(--ink3);
    margin-top: 2px;
}

/* ── Empty state ── */
.sl-empty {
    padding: 4.5rem 2rem;
    text-align: center;
}

.sl-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f1f2f6;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 24px;
    color: var(--ink3);
}

.sl-empty h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink2);
    margin-bottom: 5px;
}

.sl-empty p {
    font-size: 0.79rem;
    color: var(--ink3);
}

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.sl-pagination {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.sl-pag-info {
    font-size: 0.73rem;
    color: var(--ink3);
}

.sl-pag-info strong { color: var(--ink2); }

/* Override Laravel pagination */
.sl-pagination nav { display: flex; align-items: center; }
.sl-pagination nav svg { display: none; }

.sl-pagination nav span,
.sl-pagination nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border: 1px solid var(--border-md) !important;
    background: var(--surface) !important;
    color: var(--ink2) !important;
    margin: 0 2px !important;
    text-decoration: none !important;
    transition: all 0.18s var(--ease) !important;
}

.sl-pagination nav a:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
    transform: translateY(-1px) !important;
}

.sl-pagination nav span[aria-current="page"] {
    background: var(--ink) !important;
    color: #fff !important;
    border-color: var(--ink) !important;
}

.sl-pagination nav span.cursor-default {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes rowIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 640px) {
    .sl-page    { padding: 1.25rem 1rem 4rem; }
    .sl-header  { flex-direction: column; align-items: flex-start; }
    .sl-stats   { grid-template-columns: 1fr; gap: 8px; }
    .sl-toolbar { flex-direction: column; }
    .sl-title   { font-size: 1.4rem; }
    .sl-col-msg { display: none; }
}
</style>

<div class="sl-root">
<div class="sl-page">

    {{-- ── Header ── --}}
    <div class="sl-header">
        <div class="sl-title-block">
            <div class="sl-eyebrow">Communication Logs</div>
            <div class="sl-title">SMS <span>Logs</span></div>
        </div>
        <div class="sl-header-actions">
            <button class="sl-btn">
                <i class="fas fa-download"></i> Export CSV
            </button>
            <button class="sl-btn" onclick="window.print()">
                <i class="fas fa-print"></i> Print
            </button>
        </div>
    </div>

    {{-- ── Stat Strip ── --}}
    @php
        $totalLogs   = $logs->total();
        $successLogs = $logs->getCollection()->where('status', 'success')->count();
        $failedLogs  = $logs->getCollection()->where('status', 'failed')->count();
    @endphp

    <div class="sl-stats">
        <div class="sl-stat">
            <div class="sl-stat-icon blue">
                <i class="fas fa-comment-sms"></i>
            </div>
            <div>
                <div class="sl-stat-label">Total Logs</div>
                <div class="sl-stat-value">{{ number_format($totalLogs) }}</div>
            </div>
        </div>
        <div class="sl-stat">
            <div class="sl-stat-icon green">
                <i class="fas fa-circle-check"></i>
            </div>
            <div>
                <div class="sl-stat-label">Delivered</div>
                <div class="sl-stat-value">{{ number_format($successLogs) }}</div>
            </div>
        </div>
        <div class="sl-stat">
            <div class="sl-stat-icon red">
                <i class="fas fa-circle-xmark"></i>
            </div>
            <div>
                <div class="sl-stat-label">Failed</div>
                <div class="sl-stat-value">{{ number_format($failedLogs) }}</div>
            </div>
        </div>
    </div>

    {{-- ── Toolbar ── --}}
    <div class="sl-toolbar">
        <div class="sl-search">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" id="slSearch" placeholder="Search by phone, type, or message…" oninput="slFilter()">
        </div>
        <select class="sl-filter-select" id="slStatus" onchange="slFilter()">
            <option value="">All Statuses</option>
            <option value="success">Delivered</option>
            <option value="failed">Failed</option>
        </select>
        <select class="sl-filter-select" id="slType" onchange="slFilter()">
            <option value="">All Types</option>
            @foreach($logs->getCollection()->pluck('message_type')->unique()->filter() as $type)
                <option value="{{ strtolower($type) }}">{{ ucfirst($type) }}</option>
            @endforeach
        </select>
    </div>

    {{-- ── Table Card ── --}}
    <div class="sl-table-card">
        <div class="sl-table-bar">
            <span class="sl-table-bar-title">
                <i class="fas fa-table-list"></i>
                All Messages
            </span>
            <span class="sl-result-count" id="slCount"></span>
        </div>

        <div class="sl-table-wrap">
            <table class="sl-table" id="slTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Phone</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th class="sl-col-msg">Message</th>
                        <th>Sent At</th>
                    </tr>
                </thead>
                <tbody id="slTbody">
                    @forelse($logs as $log)
                    <tr
                        data-phone="{{ strtolower($log->phone) }}"
                        data-type="{{ strtolower($log->message_type) }}"
                        data-status="{{ strtolower($log->status) }}"
                        data-msg="{{ strtolower($log->message) }}"
                    >
                        {{-- ID --}}
                        <td>
                            <span class="sl-id">#{{ str_pad($log->id, 5, '0', STR_PAD_LEFT) }}</span>
                        </td>

                        {{-- Phone --}}
                        <td>
                            <span class="sl-phone">
                                <i class="fas fa-mobile-screen-button"></i>
                                {{ $log->phone }}
                            </span>
                        </td>

                        {{-- Type --}}
                        <td>
                            <span class="sl-type-chip">{{ $log->message_type ?? '—' }}</span>
                        </td>

                        {{-- Status --}}
                        <td>
                            @if($log->status == 'success')
                                <span class="sl-status success">
                                    <span class="sl-status-dot"></span>
                                    Delivered
                                </span>
                            @else
                                <span class="sl-status failed">
                                    <span class="sl-status-dot"></span>
                                    Failed
                                </span>
                            @endif
                        </td>

                        {{-- Message --}}
                        <td class="sl-col-msg">
                            <span class="sl-message" title="{{ $log->message }}">
                                {{ $log->message }}
                            </span>
                        </td>

                        {{-- Date --}}
                        <td>
                            <div class="sl-date-main">
                                {{ \Carbon\Carbon::parse($log->sent_at)->format('d M Y') }}
                            </div>
                            <div class="sl-date-time">
                                {{ \Carbon\Carbon::parse($log->sent_at)->format('h:i A') }}
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" style="padding:0; border:none;">
                            <div class="sl-empty">
                                <div class="sl-empty-icon">
                                    <i class="fas fa-comment-slash"></i>
                                </div>
                                <h3>No SMS logs found</h3>
                                <p>Messages will appear here once they are sent.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($logs->hasPages())
        <div class="sl-pagination">
            <span class="sl-pag-info">
                Showing <strong>{{ $logs->firstItem() }}–{{ $logs->lastItem() }}</strong>
                of <strong>{{ $logs->total() }}</strong> logs
            </span>
            {{ $logs->links() }}
        </div>
        @endif
    </div>

</div>
</div>

<script>
(function () {
    const tbody  = document.getElementById('slTbody');
    const search = document.getElementById('slSearch');
    const status = document.getElementById('slStatus');
    const type   = document.getElementById('slType');
    const count  = document.getElementById('slCount');

    const allRows = Array.from(tbody.querySelectorAll('tr[data-phone]'));

    function filter() {
        const q  = search.value.trim().toLowerCase();
        const st = status.value.toLowerCase();
        const tp = type.value.toLowerCase();

        let visible = 0;

        allRows.forEach(tr => {
            const matchQ  = !q  || [tr.dataset.phone, tr.dataset.type, tr.dataset.status, tr.dataset.msg].some(v => v.includes(q));
            const matchSt = !st || tr.dataset.status === st;
            const matchTp = !tp || tr.dataset.type   === tp;
            const show    = matchQ && matchSt && matchTp;

            tr.style.display = show ? '' : 'none';
            if (show) visible++;
        });

        count.textContent = (q || st || tp)
            ? `${visible} result${visible !== 1 ? 's' : ''}`
            : '';
    }

    window.slFilter = filter;
    filter();
})();
</script>

@endsection