@extends('admin.layouts.app')

@section('title', 'SMS 템플릿')
@section('page_title', 'SMS 템플릿')
@section('page_desc', '자주 쓰는 메시지 템플릿 관리')

@push('head')
    <style>
        /* 이 페이지 전용 */
        .tplbar{display:flex; gap:10px; flex-wrap:wrap; align-items:end;}
        .tplbar__grow{flex:1; min-width:260px;}

        .tplbtn{padding:8px 12px;font-size:13px;border-radius:12px;line-height:1.1;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
            border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:inherit;cursor:pointer;}
        .tplbtn:hover{background:rgba(255,255,255,.10);}
        .tplbtn--primary{background:rgba(59,130,246,.88);border-color:rgba(59,130,246,.95);color:#fff;}
        .tplbtn--primary:hover{background:rgba(59,130,246,.98);}
        .tplbtn--ghost{background:transparent;}

        .tplpill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;
            border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);}
        .tplpill--on{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12);}
        .tplpill--off{border-color:rgba(244,63,94,.35);background:rgba(244,63,94,.10);}

        .tplcode{padding:4px 8px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;}

        .tplbody{
            max-width:520px;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            white-space:normal;
            opacity:.95;
        }
        .tpltable td{vertical-align:top;}
        .tplright{display:flex; justify-content:flex-end;}
    </style>
@endpush

@section('content')
    {{-- 필터/검색 --}}
    <div class="a-card" style="padding:16px; margin-bottom:16px;">
        <form method="GET" action="{{ route('admin.templates.index') }}" class="tplbar">
            <div style="min-width:140px;">
                <div class="a-muted" style="margin-bottom:6px;">활성</div>
                <select class="a-input" name="active">
                    <option value="">전체</option>
                    <option value="1" @selected(request('active')==='1')>활성</option>
                    <option value="0" @selected(request('active')==='0')>비활성</option>
                </select>
            </div>

            <div class="tplbar__grow">
                <div class="a-muted" style="margin-bottom:6px;">검색</div>
                <input class="a-input" name="q" value="{{ request('q') }}" placeholder="code / title / body">
            </div>

            <div class="tplright" style="gap:8px;">
                <button class="tplbtn tplbtn--primary" type="submit">조회</button>
                <a class="tplbtn" href="{{ route('admin.templates.create') }}">새 템플릿</a>
            </div>

            @if(request('active') !== null || request('q') !== null)
                <div class="tplright" style="width:100%; margin-top:8px;">
                    <a class="tplbtn tplbtn--ghost" href="{{ route('admin.templates.index') }}">필터 초기화</a>
                </div>
            @endif
        </form>
    </div>

    {{-- 리스트 --}}
    <div class="a-card" style="padding:16px;">
        <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;">
            <div class="a-muted">총 <b>{{ $templates->total() }}</b>건</div>
            <div class="a-muted">
                @if(request('active') !== null && request('active') !== '')
                    상태: <b>{{ request('active')==='1' ? '활성' : '비활성' }}</b>
                @endif
                @if((string)request('q') !== '')
                    &nbsp; / 검색: <b>{{ request('q') }}</b>
                @endif
            </div>
        </div>

        <div style="overflow:auto;">
            <table class="a-table tpltable" style="width:100%; min-width:980px;">
                <thead>
                <tr>
                    <th style="width:70px;">ID</th>
                    <th style="width:110px;">상태</th>
                    <th style="width:180px;">Code</th>
                    <th style="width:220px;">Title</th>
                    <th>Body</th>
                    <th style="width:90px;"></th>
                </tr>
                </thead>
                <tbody>
                @forelse($templates as $t)
                    <tr>
                        <td>{{ $t->id }}</td>
                        <td>
                            @if((int)$t->is_active === 1)
                                <span class="tplpill tplpill--on">● 활성</span>
                            @else
                                <span class="tplpill tplpill--off">● 비활성</span>
                            @endif
                        </td>
                        <td><span class="tplcode">{{ $t->code }}</span></td>
                        <td style="font-weight:700;">{{ $t->title }}</td>
                        <td><div class="tplbody">{{ $t->body }}</div></td>
                        <td style="text-align:right;">
                            <a class="tplbtn" href="{{ route('admin.templates.edit', ['id'=>$t->id]) }}">수정</a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="a-muted">데이터가 없습니다.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div style="margin-top:12px;">
            {{ $templates->links() }}
        </div>
    </div>
@endsection