@extends('layouts.app')

@section('title', 'FCM 발송 이력')

@section('content')
<div>
    <!-- 페이지 헤더 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">FCM 발송 이력</h1>
        <div class="flex gap-2">
            <a href="{{ route('fcm.tokens') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg transition">
                토큰 관리
            </a>
            <a href="{{ route('fcm.send') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
                테스트 발송
            </a>
        </div>
    </div>

    <!-- 필터 영역 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <form hx-get="{{ route('fcm.history.list') }}"
              hx-target="#table-container"
              hx-trigger="submit, change from:select, change from:input[type=date]"
              hx-push-url="true">
            <div class="flex flex-wrap gap-4">
                <!-- 상태 필터 -->
                <div class="w-36">
                    <select name="status" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">전체 상태</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>대기</option>
                        <option value="sending" {{ request('status') === 'sending' ? 'selected' : '' }}>발송 중</option>
                        <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>완료</option>
                        <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>실패</option>
                    </select>
                </div>

                <!-- 기간 필터 -->
                <div class="flex gap-2 items-center">
                    <input type="date"
                           name="from"
                           value="{{ request('from') }}"
                           class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <span class="text-gray-500">~</span>
                    <input type="date"
                           name="to"
                           value="{{ request('to') }}"
                           class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>

                <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition">
                    검색
                </button>
            </div>
        </form>
    </div>

    <!-- 테이블 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div id="table-container">
            @include('fcm.partials.history-table', ['logs' => $logs])
        </div>
    </div>
</div>
@endsection