@extends('layouts.app')

@section('title', 'Keywords')

@section('content')
<x-page-header title="Keywords" subtitle="SMS filter rules synced to mobile devices" icon="keywords" icon-color="amber" />

<form method="POST" action="{{ route('keywords.store') }}" class="glass-card-subtle p-4 sm:p-5 mb-6 flex flex-col sm:flex-row gap-3 max-w-2xl animate-slide-up">
    @csrf
    <input type="text" name="keyword" placeholder="Add keyword…" required class="field-input flex-1">
    <button type="submit" class="btn-primary shrink-0">
        <x-icon name="plus" class="w-4 h-4" />
        Add
    </button>
</form>

<div class="table-wrap">
    <div class="overflow-x-auto md:overflow-visible">
        <table class="data-table responsive-table">
            <thead>
                <tr>
                    <th>Keyword</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($keywords as $keyword)
                    <tr>
                        <td data-label="Keyword">
                            <span class="inline-flex items-center gap-2 font-mono text-sm">
                                <x-icon name="keywords" class="w-4 h-4 text-amber-400" />
                                {{ $keyword->keyword }}
                            </span>
                        </td>
                        <td data-label="Status">
                            <span class="{{ $keyword->status === 'active' ? 'badge-success' : 'badge-neutral' }} capitalize">
                                {{ $keyword->status }}
                            </span>
                        </td>
                        <td data-label="" class="td-actions">
                            <form method="POST" action="{{ route('keywords.update', $keyword) }}" class="inline">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="{{ $keyword->status === 'active' ? 'inactive' : 'active' }}">
                                <button type="submit" class="btn-ghost btn-sm text-teal-600">
                                    {{ $keyword->status === 'active' ? 'Disable' : 'Enable' }}
                                </button>
                            </form>
                            <form method="POST" action="{{ route('keywords.destroy', $keyword) }}" class="inline" onsubmit="return confirm('Delete keyword?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-danger btn-sm">
                                    <x-icon name="trash" class="w-4 h-4" />
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" class="!block text-center py-12 text-slate-500">No keywords yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
<div class="mt-10">
    <x-page-header title="Sender Filters" subtitle="Allow or block SMS by sender number or name (synced to devices)" icon="shield" icon-color="cyan" />

    <form method="POST" action="{{ route('sender-filters.store') }}" class="glass-card-subtle p-4 sm:p-5 mb-6 flex flex-col sm:flex-row gap-3 max-w-3xl animate-slide-up">
        @csrf
        <input type="text" name="pattern" placeholder="Sender e.g. MTN, +233..." required class="field-input flex-1">
        <select name="list_type" class="field-select sm:max-w-[180px]">
            <option value="whitelist">Whitelist</option>
            <option value="blacklist">Blacklist</option>
        </select>
        <button type="submit" class="btn-primary shrink-0">
            <x-icon name="plus" class="w-4 h-4" />
            Add
        </button>
    </form>

    <p class="text-sm text-slate-400 mb-4 max-w-3xl">If any whitelist rules exist, only matching senders are forwarded. Blacklist rules always block matching senders.</p>

    <div class="table-wrap">
        <div class="overflow-x-auto md:overflow-visible">
            <table class="data-table responsive-table">
                <thead>
                    <tr>
                        <th>Pattern</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($senderFilters as $filter)
                        <tr>
                            <td data-label="Pattern" class="font-mono text-sm">{{ $filter->pattern }}</td>
                            <td data-label="Type">
                                <span class="{{ $filter->list_type === 'whitelist' ? 'badge-success' : 'badge-warning' }} capitalize">
                                    {{ $filter->list_type }}
                                </span>
                            </td>
                            <td data-label="Status">
                                <span class="{{ $filter->status === 'active' ? 'badge-success' : 'badge-neutral' }} capitalize">
                                    {{ $filter->status }}
                                </span>
                            </td>
                            <td data-label="" class="td-actions">
                                <form method="POST" action="{{ route('sender-filters.update', $filter) }}" class="inline">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="status" value="{{ $filter->status === 'active' ? 'inactive' : 'active' }}">
                                    <button type="submit" class="btn-ghost btn-sm text-teal-600">
                                        {{ $filter->status === 'active' ? 'Disable' : 'Enable' }}
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('sender-filters.destroy', $filter) }}" class="inline" onsubmit="return confirm('Delete sender filter?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-danger btn-sm">
                                        <x-icon name="trash" class="w-4 h-4" />
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="!block text-center py-12 text-slate-500">No sender filters yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection