@extends('layouts.app')
@section('title', 'Canned responses')

@section('content')
    <div class="page-head">
        <div><h1>Canned responses</h1><p>{{ $responses->total() }} saved reply snippet(s) for support.</p></div>
        <div class="page-actions">
            <a href="{{ route('canned.create') }}" class="btn">+ New response</a>
        </div>
    </div>

    <form class="filters" method="GET">
        <div class="field" style="flex:2 1 260px;">
            <label>Search</label>
            <input type="search" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Title or body text…">
        </div>
        <div class="field">
            <label>Category</label>
            <select name="category" data-auto-submit>
                <option value="">All</option>
                @foreach ($categories as $c)
                    <option value="{{ $c }}" @selected(($filters['category'] ?? '') === $c)>{{ title_case_words($c) }}</option>
                @endforeach
            </select>
        </div>
        <div class="field">
            <label>Active</label>
            <select name="active" data-auto-submit>
                <option value="">All</option>
                <option value="1" @selected(($filters['active'] ?? '') === '1')>Active only</option>
                <option value="0" @selected(($filters['active'] ?? '') === '0')>Disabled only</option>
            </select>
        </div>
        <div class="field"><label>&nbsp;</label><button class="btn secondary" type="submit">Filter</button></div>
    </form>

    <div class="card">
        <div class="card-body" style="padding:0;">
            @if ($responses->isEmpty())
                @include('components.empty-state', [
                    'icon' => '&#128172;',
                    'title' => 'No canned responses',
                    'message' => 'Save the answers support types most often, so nobody retypes them.',
                ])
            @else
                <table class="data">
                    <thead>
                    <tr><th>Title</th><th>Category</th><th>Preview</th><th>Status</th><th></th></tr>
                    </thead>
                    <tbody>
                    @foreach ($responses as $response)
                        <tr>
                            <td>{{ $response->title }}</td>
                            <td><span class="badge muted">{{ title_case_words($response->category) }}</span></td>
                            <td class="small muted">{{ \Illuminate\Support\Str::limit($response->body, 110) }}</td>
                            <td><span class="badge {{ $response->is_active ? 'success' : 'muted' }}">
                                <span class="dot"></span>{{ $response->is_active ? 'Active' : 'Disabled' }}</span></td>
                            <td class="right nowrap">
                                <a href="{{ route('canned.edit', $response) }}" class="btn xs secondary">Edit</a>
                                <form method="POST" action="{{ route('canned.destroy', $response) }}"
                                      data-confirm="Delete &quot;{{ $response->title }}&quot;?" style="display:inline;">
                                    @csrf @method('DELETE')
                                    <button class="btn xs danger" type="submit">Del</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif
        </div>
        @if ($responses->hasPages())<div class="card-foot">{{ $responses->links('partials.pagination') }}</div>@endif
    </div>
@endsection