@extends('layouts.app')
@section('title', 'حساب‌های ایمیل')
@section('content')
<div class="flex flex-wrap justify-between items-center gap-4 mb-6">
    <h1 class="text-2xl font-bold">مدیریت حساب‌های ایمیل</h1>
    <form method="POST" action="{{ route('accounts.sync') }}">@csrf
        <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm">
            🔄 همگام‌سازی از سرور ایمیل
        </button>
    </form>
</div>

<p class="text-sm text-slate-600 mb-6 bg-blue-50 p-3 rounded-lg">
    این لیست از <strong>سرور cPanel دیگر</strong> (جایی که ایمیل‌های شما فعال است) خوانده می‌شود.
    با دکمه همگام‌سازی، حساب‌های موجود به این سامانه منتقل می‌شوند. همچنین می‌توانید حساب جدید بسازید.
</p>

{{-- Create form --}}
<div class="bg-white rounded-xl shadow p-5 mb-6">
    <h2 class="font-bold mb-3">ایجاد حساب ایمیل جدید</h2>
    <form method="POST" action="{{ route('accounts.store') }}" class="flex flex-wrap gap-3 items-end">
        @csrf
        <div>
            <label class="text-xs text-slate-500">نام کاربری (قبل از @)</label>
            <input type="text" name="local" required class="border rounded-lg px-3 py-2 block w-40"
                   placeholder="info">
        </div>
        <div class="text-slate-500 pb-2">@{{ config('services.cpanel.email_domain') }}</div>
        <div>
            <label class="text-xs text-slate-500">رمز عبور</label>
            <input type="password" name="password" required minlength="8" class="border rounded-lg px-3 py-2 block w-40">
        </div>
        <div>
            <label class="text-xs text-slate-500">سهمیه (MB) — ۰ = نامحدود</label>
            <input type="number" name="quota" value="0" min="0" class="border rounded-lg px-3 py-2 block w-28">
        </div>
        <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg">ایجاد</button>
    </form>
</div>

{{-- List --}}
<div class="bg-white rounded-xl shadow overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-slate-50 text-slate-600">
            <tr>
                <th class="text-right p-3">ایمیل</th>
                <th class="text-right p-3">مصرف / سهمیه</th>
                <th class="text-right p-3">وضعیت</th>
                <th class="text-right p-3">عملیات</th>
            </tr>
        </thead>
        <tbody>
            @forelse($accounts as $acc)
            <tr class="border-t">
                <td class="p-3 font-medium">
                    <a href="{{ route('mailbox.inbox', $acc->email) }}" class="text-blue-600 hover:underline">{{ $acc->email }}</a>
                </td>
                <td class="p-3">{{ number_format($acc->used_space, 1) }} / {{ $acc->quota ?: '∞' }} MB
                    <div class="w-24 bg-slate-200 rounded-full h-1.5 mt-1">
                        <div class="bg-blue-500 h-1.5 rounded-full" style="width: {{ min(100, $acc->usage_percent) }}%"></div>
                    </div>
                </td>
                <td class="p-3">
                    <span class="px-2 py-0.5 rounded text-xs {{ $acc->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                        {{ $acc->is_active ? 'فعال' : 'غیرفعال' }}
                    </span>
                </td>
                <td class="p-3 space-x-2 space-x-reverse">
                    <details class="inline">
                        <summary class="cursor-pointer text-amber-600 text-xs">تغییر رمز</summary>
                        <form method="POST" action="{{ route('accounts.password', $acc->id) }}" class="mt-2 flex gap-1">
                            @csrf
                            <input type="password" name="password" required minlength="8" placeholder="رمز جدید"
                                   class="border rounded px-2 py-1 text-xs w-28">
                            <button class="bg-amber-500 text-white text-xs px-2 py-1 rounded">ثبت</button>
                        </form>
                    </details>
                    <form method="POST" action="{{ route('accounts.destroy', $acc->id) }}" class="inline"
                          onsubmit="return confirm('آیا از حذف این حساب مطمئن هستید؟')">
                        @csrf @method('DELETE')
                        <button class="text-red-600 text-xs hover:underline">حذف</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr><td colspan="4" class="p-6 text-center text-slate-500">حسابی وجود ندارد. همگام‌سازی کنید یا حساب جدید بسازید.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection