@extends('layouts.admin')

@section('pageTitle', 'کدهای OTP')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h3 class="text-gray-700 dark:text-white text-3xl font-medium">مدیریت کدهای OTP</h3>
        <button onclick="deleteExpiredCodes()" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 focus:outline-none focus:bg-red-700">
            <i class="fas fa-trash ml-2"></i>حذف کدهای منقضی
        </button>
    </div>

    @if (session('success'))
        <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <!-- Stats Cards -->
    <div class="grid grid-cols-4 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-gray-600 dark:text-gray-400 text-sm">کل کدها</p>
            <p class="text-3xl font-bold text-gray-900 dark:text-white">{{ $stats['total'] ?? 0 }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-gray-600 dark:text-gray-400 text-sm">کدهای استفاده‌شده</p>
            <p class="text-3xl font-bold text-green-600">{{ $stats['used'] ?? 0 }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-gray-600 dark:text-gray-400 text-sm">کدهای فعال</p>
            <p class="text-3xl font-bold text-blue-600">{{ $stats['pending'] ?? 0 }}</p>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
            <p class="text-gray-600 dark:text-gray-400 text-sm">کدهای منقضی</p>
            <p class="text-3xl font-bold text-red-600">{{ $stats['expired'] ?? 0 }}</p>
        </div>
    </div>

    <!-- OTP Codes Table -->
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
        <div class="p-4 overflow-x-auto">
            <table class="w-full display datatable">
                <thead>
                    <tr>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-right text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">کد OTP</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-right text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">شماره تماس</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-right text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">وضعیت</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-right text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">تاریخ ایجاد</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-right text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">انقضا در</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-right text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">تلاش‌ها</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-right text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">عملیات</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800">
                    @forelse($otpCodes as $code)
                        <tr class="dark:border-gray-700">
                            <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                                <span class="font-mono text-gray-900 dark:text-white font-semibold">{{ $code->otp_code }}</span>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                                <p class="text-gray-900 dark:text-white">{{ $code->phone_number ?? '—' }}</p>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                                @if(is_null($code->phone_number))
                                    <span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded text-xs">منتظر</span>
                                @elseif($code->attempts > 0)
                                    <span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded text-xs">استفاده‌شده</span>
                                @else
                                    <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-xs">فعال</span>
                                @endif
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                                <p class="text-gray-600 dark:text-gray-400">{{ $code->created_at->format('Y/m/d H:i') }}</p>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                                @if($code->expires_at > now())
                                    <span class="text-green-600 dark:text-green-400">{{ $code->expires_at->format('Y/m/d H:i') }}</span>
                                @else
                                    <span class="text-red-600 dark:text-red-400">{{ $code->expires_at->format('Y/m/d H:i') }}</span>
                                @endif
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                                <span class="text-gray-900 dark:text-white">{{ $code->attempts }}</span>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
                                <div class="flex items-center gap-3">
                                    <button onclick="extendCode({{ $code->id }})" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300" title="تمدید">
                                        <i class="fas fa-clock"></i>
                                    </button>
                                    <form action="{{ route('admin.activation-codes.destroy', $code->id) }}" method="POST" class="inline-block" onsubmit="return confirm('آیا مطمئن هستید؟')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300" title="حذف">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-inbox ml-2"></i>هیچ کد OTP ایجاد نشده است
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Extend Modal -->
<div id="extendModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full mx-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">تمدید اعتبار کد</h2>
        
        <form id="extendForm" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">مدت تمدید (دقیقه)</label>
                <input type="number" id="extendMinutes" name="minutes" min="1" max="1440" value="10" 
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" required>
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                    <i class="fas fa-check ml-2"></i>تمدید
                </button>
                <button type="button" onclick="closeExtendModal()" class="flex-1 bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg">
                    انصراف
                </button>
            </div>
        </form>
    </div>
</div>
<div id="generateModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full mx-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">تولید کدهای OTP جدید</h2>
        
        <form class="space-y-4" onsubmit="handleGenerateOTP(event)">
            @csrf
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">تعداد کدها</label>
                <input type="number" id="otpCount" name="count" min="1" max="500" value="10" 
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" required>
                <small class="text-gray-600 dark:text-gray-400">حداکثر 500 کد در یک بار</small>
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">مدت اعتبار (دقیقه)</label>
                <input type="number" id="otpExpiry" name="expiry" min="1" max="1440" value="10" 
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white" required>
                <small class="text-gray-600 dark:text-gray-400">پیش‌فرض: 10 دقیقه</small>
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">
                    <i class="fas fa-check ml-2"></i>تولید
                </button>
                <button type="button" onclick="closeGenerateModal()" class="flex-1 bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg">
                    انصراف
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Search Modal -->
<div id="searchModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md w-full mx-4">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">جستجو در کدهای OTP</h2>
        
        <form class="space-y-4" onsubmit="handleSearchOTP(event)">
            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">شماره تماس</label>
                <input type="text" id="phoneSearch" name="phone" placeholder="09xxxxxxxxx" 
                    class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
            </div>

            <div>
                <label class="block text-sm font-semibold text-gray-900 dark:text-white mb-2">وضعیت</label>
                <select id="statusFilter" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white">
                    <option value="">تمام</option>
                    <option value="pending">منتظر</option>
                    <option value="used">استفاده‌شده</option>
                    <option value="expired">منقضی</option>
                </select>
            </div>

            <div class="flex gap-3 pt-4">
                <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                    <i class="fas fa-search ml-2"></i>جستجو
                </button>
                <button type="button" onclick="closeSearchModal()" class="flex-1 bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg">
                    انصراف
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    let currentExtendCodeId = null;

    function openSearchModal() {
        document.getElementById('searchModal').classList.remove('hidden');
    }

    function closeSearchModal() {
        document.getElementById('searchModal').classList.add('hidden');
    }

    function extendCode(id) {
        currentExtendCodeId = id;
        document.getElementById('extendModal').classList.remove('hidden');
    }

    function closeExtendModal() {
        document.getElementById('extendModal').classList.add('hidden');
        currentExtendCodeId = null;
    }

    function handleSearchOTP(e) {
        e.preventDefault();
        const phone = document.getElementById('phoneSearch').value;
        const status = document.getElementById('statusFilter').value;
        
        const params = new URLSearchParams();
        if (phone) params.append('phone', phone);
        if (status) params.append('status', status);
        
        window.location.href = "{{ route('admin.activation-codes.search') }}?" + params.toString();
    }

    function deleteExpiredCodes() {
        if (!confirm('آیا مطمئن هستید که می‌خواهید تمام کدهای منقضی را حذف کنید؟')) {
            return;
        }

        fetch("{{ route('admin.activation-codes.delete-expired') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            location.reload();
        })
        .catch(error => {
            alert('خطا: ' + error);
        });
    }

    // Extend Form Handler
    document.getElementById('extendForm')?.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const minutes = document.getElementById('extendMinutes').value;
        
        fetch(`/admin/activation-codes/${currentExtendCodeId}/extend`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ minutes: minutes })
        })
        .then(response => response.text())
        .then(() => {
            location.reload();
        })
        .catch(error => {
            alert('خطا در تمدید: ' + error);
        });
    });

    // بسته شدن modal با کلیک روی backdrop
    document.getElementById('searchModal')?.addEventListener('click', function(e) {
        if (e.target === this) closeSearchModal();
    });

    document.getElementById('extendModal')?.addEventListener('click', function(e) {
        if (e.target === this) closeExtendModal();
    });
</script>
@endsection