@extends('admin::layouts.master')
@php
    $pageTitle = 'مدیریت برادکست‌ها';
@endphp

@section('title', $pageTitle)

@push('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
.card-animate {
    transition: all 0.3s ease;
}
.search-box {
    position: relative;
}
.search-box .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}
</style>
@endpush

@section('content')
@php
    // داده‌های نمونه
    $broadcasts = [
        (object)[
            'id' => 1,
            'title' => 'اعلان جشنواره پاییزه',
            'owner' => (object)['name' => 'کاربر تست', 'email' => 'test@example.com'],
            'segment' => 'تمام کاربران فعال',
            'platform' => 'instagram',
            'scheduled_at' => \Carbon\Carbon::now()->addDays(2),
            'sent_at' => null,
            'status' => 'scheduled',
            'is_active' => true,
            'recipients_count' => 1250,
            'opened_count' => 0,
            'created_at' => \Carbon\Carbon::now()->subDays(1)
        ],
        (object)[
            'id' => 2,
            'title' => 'کد تخفیف شب یلدا',
            'owner' => (object)['name' => 'مدیر سیستم', 'email' => 'admin@example.com'],
            'segment' => 'کاربران ویژه',
            'platform' => 'telegram',
            'scheduled_at' => \Carbon\Carbon::now()->addDays(5),
            'sent_at' => null,
            'status' => 'scheduled',
            'is_active' => false,
            'recipients_count' => 450,
            'opened_count' => 0,
            'created_at' => \Carbon\Carbon::now()->subHours(3)
        ],
        (object)[
            'id' => 3,
            'title' => 'خبرنامه هفتگی',
            'owner' => (object)['name' => 'سارا محمدی', 'email' => 'sara@example.com'],
            'segment' => 'مشترکین خبرنامه',
            'platform' => 'sms',
            'scheduled_at' => null,
            'sent_at' => \Carbon\Carbon::now()->subDays(1),
            'status' => 'sent',
            'is_active' => true,
            'recipients_count' => 3200,
            'opened_count' => 2450,
            'created_at' => \Carbon\Carbon::now()->subDays(3)
        ],
        (object)[
            'id' => 5,
            'title' => 'بروزرسانی سرویس',
            'owner' => (object)['name' => 'مدیر سیستم', 'email' => 'admin@example.com'],
            'segment' => 'همه کاربران',
            'platform' => 'multi',
            'scheduled_at' => null,
            'sent_at' => \Carbon\Carbon::now()->subWeek(),
            'status' => 'failed',
            'is_active' => false,
            'recipients_count' => 5000,
            'opened_count' => 0,
            'created_at' => \Carbon\Carbon::now()->subDays(7)
        ]
    ];

    $stats = [
        'total' => 15,
        'scheduled' => 3,
        'sent' => 10,
        'failed' => 2,
        'active' => 8
    ];
@endphp

<div class="page-content wrapper" style="margin-top: -6rem;">
    <div class="container-fluid">

        <!-- هدر صفحه -->
        <div class="row mb-4">
            <div class="col-md-8">
                <div class="d-flex align-items-center">
                    <div class="flex-grow-1">
                        <h4 class="mb-1">📢 مدیریت برادکست‌ها</h4>
                        <p class="text-muted mb-0">مدیریت و پیگیری ارسال‌های انبوه</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="hstack gap-2 justify-content-end">
                    <button class="btn btn-outline-secondary">
                        <i class="ri-download-line align-bottom me-1"></i>خروجی
                    </button>

                </div>
            </div>
        </div>

        <!-- کارت‌های آمار -->
        <div class="row mb-4">
            <div class="col-xl-2 col-md-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h4 class="mb-0">{{ $stats['total'] }}</h4>
                                <p class="text-muted mb-0">کل برادکست‌ها</p>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-broadcast-fill text-primary fs-18"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h4 class="mb-0">{{ $stats['active'] }}</h4>
                                <p class="text-muted mb-0">فعال</p>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-checkbox-circle-line text-success fs-18"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h4 class="mb-0">{{ $stats['scheduled'] }}</h4>
                                <p class="text-muted mb-0">در انتظار</p>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-time-line text-warning fs-18"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h4 class="mb-0">{{ $stats['sent'] }}</h4>
                                <p class="text-muted mb-0">ارسال شده</p>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-send-plane-line text-info fs-18"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-2 col-md-4">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h4 class="mb-0">{{ $stats['failed'] }}</h4>
                                <p class="text-muted mb-0">ناموفق</p>
                            </div>
                            <div class="flex-shrink-0">
                                <div class="avatar-sm bg-danger bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-close-circle-line text-danger fs-18"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- فیلترها -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label">جستجو</label>
                        <div class="search-box">
                            <input type="text" class="form-control" placeholder="عنوان یا توضیحات...">
                            <i class="ri-search-line search-icon"></i>
                        </div>
                    </div>
                     <div class="col-md-3">
                        <label class="form-label">فیلتر کاربر</label>
                        <div class="search-box">
                            <input type="text" class="form-control" placeholder="موبایل یا ایمیل...">
                            <i class="ri-search-line search-icon"></i>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <label class="form-label">وضعیت</label>
                        <select class="form-select" id="statusFilter">
                            <option value="">همه وضعیت‌ها</option>
                            <option value="scheduled">در انتظار</option>
                            <option value="sent">ارسال شده</option>
                            <option value="failed">ناموفق</option>
                            <option value="draft">پیش‌نویس</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">پلتفرم</label>
                        <select class="form-select" id="platformFilter">
                            <option value="">همه پلتفرم‌ها</option>
                            <option value="instagram">اینستاگرام</option>
                            <option value="telegram">تلگرام</option>
                            <option value="sms">SMS</option>
                            <option value="multi">چندگانه</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">فعالیت</label>
                        <select class="form-select" id="activeFilter">
                            <option value="">همه</option>
                            <option value="active">فعال</option>
                            <option value="inactive">غیرفعال</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <div class="hstack gap-2">
                            <button class="btn btn-primary w-100" onclick="applyFilters()">
                                <i class="ri-filter-line align-bottom me-1"></i>اعمال فیلتر
                            </button>
                            <button class="btn btn-outline-secondary" onclick="resetFilters()">
                                <i class="ri-refresh-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- جدول برادکست‌ها -->
        <div class="card">
            <div class="card-header border-bottom py-3 d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="ri-megaphone-line align-bottom me-2"></i>لیست برادکست‌ها
                </h5>
                <span class="text-muted fs-12" id="broadcastCount">{{ count($broadcasts) }} برادکست نمایش داده می‌شود</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-borderless align-middle mb-0">
                        <thead class="table-light text-muted">
                            <tr>
                                <th style="width: 60px;">#</th>
                                <th>عنوان برادکست</th>
                                <th>ایجاد کننده</th>
                                <th>پلتفرم</th>
                                <th class="text-center">گیرندگان</th>
                                <th class="text-center">زمان ارسال</th>
                                <th class="text-center">وضعیت</th>
                                <th class="text-center" style="width: 140px;">عملیات</th>
                            </tr>
                        </thead>
                        <tbody id="broadcastsTable">
                            @foreach($broadcasts as $broadcast)
                            <tr data-status="{{ $broadcast->status }}" data-platform="{{ $broadcast->platform }}" data-active="{{ $broadcast->is_active ? 'active' : 'inactive' }}">
                                <td class="fw-semibold text-muted">#{{ $broadcast->id }}</td>
                                <td>
                                    <div class="d-flex align-items-start">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-1">{{ $broadcast->title }}</h6>
                                            <small class="text-muted">{{ $broadcast->segment }}</small>
                                        </div>
                                        @if(!$broadcast->is_active)
                                            <div class="flex-shrink-0 ms-2">
                                                <i class="ri-pause-circle-line text-warning" title="غیرفعال"></i>
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 me-2">
                                            <div class="avatar-xs bg-light rounded-circle d-flex align-items-center justify-content-center">
                                                <i class="ri-user-line text-muted fs-12"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <span class="fw-medium">{{ $broadcast->owner->name }}</span>
                                            <small class="text-muted d-block">{{ $broadcast->owner->email }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($broadcast->platform == 'instagram')
                                        <span class="badge bg-danger bg-opacity-10 text-danger">
                                            <i class="ri-instagram-line align-bottom me-1"></i>اینستاگرام
                                        </span>
                                    @elseif($broadcast->platform == 'telegram')
                                        <span class="badge bg-info bg-opacity-10 text-info">
                                            <i class="ri-telegram-line align-bottom me-1"></i>تلگرام
                                        </span>
                                    @elseif($broadcast->platform == 'sms')
                                        <span class="badge bg-success bg-opacity-10 text-success">
                                            <i class="ri-message-2-line align-bottom me-1"></i>SMS
                                        </span>
                                    @else
                                        <span class="badge bg-primary bg-opacity-10 text-primary">
                                            <i class="ri-apps-line align-bottom me-1"></i>چندگانه
                                        </span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="d-flex flex-column align-items-center">
                                        <span class="fw-semibold">{{ number_format($broadcast->recipients_count) }}</span>
                                        @if($broadcast->status == 'sent' && $broadcast->opened_count > 0)
                                            <small class="text-success">
                                                {{ number_format(($broadcast->opened_count / $broadcast->recipients_count) * 100, 1) }}% باز شده
                                            </small>
                                        @endif
                                    </div>
                                </td>
                                <td class="text-center">
                                    @if($broadcast->scheduled_at)
                                        <div class="text-warning">
                                            <small>{{ $broadcast->scheduled_at->format('d M Y') }}</small>
                                            <small class="d-block">{{ $broadcast->scheduled_at->format('H:i') }}</small>
                                        </div>
                                    @elseif($broadcast->sent_at)
                                        <div class="text-muted">
                                            <small>{{ $broadcast->sent_at->format('d M Y') }}</small>
                                            <small class="d-block">{{ $broadcast->sent_at->format('H:i') }}</small>
                                        </div>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    @if($broadcast->status == 'scheduled')
                                        <span class="badge bg-warning-subtle text-warning">
                                            <i class="ri-time-line align-bottom me-1"></i>در انتظار
                                        </span>
                                    @elseif($broadcast->status == 'sent')
                                        <span class="badge bg-success-subtle text-success">
                                            <i class="ri-checkbox-circle-line align-bottom me-1"></i>ارسال شده
                                        </span>
                                    @elseif($broadcast->status == 'failed')
                                        <span class="badge bg-danger-subtle text-danger">
                                            <i class="ri-close-circle-line align-bottom me-1"></i>ناموفق
                                        </span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary">
                                            <i class="ri-draft-line align-bottom me-1"></i>پیش‌نویس
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="hstack gap-1 justify-content-center">
                                        <a href="{{ route('admin.broadcasts.show' , $broadcast->id) }}">
                                        <button class="btn btn-icon btn-sm btn-soft-info" data-bs-toggle="tooltip" title="مشاهده جزئیات">
                                            <i class="ri-eye-line fs-14"></i>
                                        </button>
                                        </a>
                                        <button class="btn btn-icon btn-sm btn-soft-warning" data-bs-toggle="tooltip" title="ویرایش" onclick="editBroadcast({{ $broadcast->id }})">
                                            <i class="ri-edit-line fs-14"></i>
                                        </button>
                                        @if($broadcast->status == 'scheduled')
                                            <button class="btn btn-icon btn-sm btn-soft-success" data-bs-toggle="tooltip" title="ارسال فوری" onclick="sendNow({{ $broadcast->id }})">
                                                <i class="ri-send-plane-line fs-14"></i>
                                            </button>
                                        @endif
                                        <button class="btn btn-icon btn-sm {{ $broadcast->is_active ? 'btn-soft-warning' : 'btn-soft-success' }}" data-bs-toggle="tooltip" title="{{ $broadcast->is_active ? 'غیرفعال کردن' : 'فعال کردن' }}" onclick="toggleBroadcast({{ $broadcast->id }}, {{ $broadcast->is_active ? 'true' : 'false' }})">
                                            <i class="ri-{{ $broadcast->is_active ? 'pause' : 'play' }}-line fs-14"></i>
                                        </button>
                                        <button class="btn btn-icon btn-sm btn-soft-danger" data-bs-toggle="tooltip" title="حذف" onclick="confirmDelete({{ $broadcast->id }})">
                                            <i class="ri-delete-bin-line fs-14"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- صفحه‌بندی -->
                <div class="row align-items-center mt-4">
                    <div class="col-sm-6">
                        <div class="text-muted">
                            نمایش <span class="fw-semibold">{{ count($broadcasts) }}</span> از <span class="fw-semibold">{{ $stats['total'] }}</span> برادکست
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="float-sm-end">
                            <ul class="pagination pagination-separated mb-0">
                                <li class="page-item disabled">
                                    <a href="javascript:void(0);" class="page-link">قبلی</a>
                                </li>
                                <li class="page-item active">
                                    <a href="javascript:void(0);" class="page-link">1</a>
                                </li>
                                <li class="page-item">
                                    <a href="javascript:void(0);" class="page-link">2</a>
                                </li>
                                <li class="page-item">
                                    <a href="javascript:void(0);" class="page-link">بعدی</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- مدال ویرایش برادکست -->
<div class="modal fade" id="editBroadcastModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ویرایش برادکست</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editBroadcastForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">عنوان برادکست</label>
                            <input type="text" class="form-control" name="title" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">پلتفرم</label>
                            <select class="form-select" name="platform" required>
                                <option value="instagram">اینستاگرام</option>
                                <option value="telegram">تلگرام</option>
                                <option value="sms">SMS</option>
                                <option value="multi">چندگانه</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">سگمنت هدف</label>
                            <input type="text" class="form-control" name="segment" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">تاریخ ارسال</label>
                            <input type="datetime-local" class="form-control" name="scheduled_at">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">وضعیت</label>
                            <select class="form-select" name="status" required>
                                <option value="draft">پیش‌نویس</option>
                                <option value="scheduled">زمان‌بندی شده</option>
                                <option value="sent">ارسال شده</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_active" id="isActive">
                                <label class="form-check-label" for="isActive">
                                    برادکست فعال باشد
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">لغو</button>
                <button type="button" class="btn btn-primary" onclick="saveBroadcast()">ذخیره تغییرات</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
let currentBroadcastId = null;

// فیلتر کردن جدول
function applyFilters() {
    const statusFilter = document.getElementById('statusFilter').value;
    const platformFilter = document.getElementById('platformFilter').value;
    const activeFilter = document.getElementById('activeFilter').value;

    const rows = document.querySelectorAll('#broadcastsTable tr');
    let visibleCount = 0;

    rows.forEach(row => {
        const status = row.dataset.status;
        const platform = row.dataset.platform;
        const active = row.dataset.active;

        let show = true;

        if (statusFilter && status !== statusFilter) show = false;
        if (platformFilter && platform !== platformFilter) show = false;
        if (activeFilter && active !== activeFilter) show = false;

        row.style.display = show ? '' : 'none';
        if (show) visibleCount++;
    });

    document.getElementById('broadcastCount').textContent = `${visibleCount} برادکست نمایش داده می‌شود`;
}

function resetFilters() {
    document.getElementById('statusFilter').value = '';
    document.getElementById('platformFilter').value = '';
    document.getElementById('activeFilter').value = '';
    applyFilters();
}

// مشاهده جزئیات
function viewBroadcast(id) {
    Swal.fire({
        title: 'جزئیات برادکست',
        html: `در اینجا جزئیات کامل برادکست #${id} نمایش داده می‌شود...`,
        icon: 'info',
        confirmButtonText: 'متوجه شدم'
    });
}

// ویرایش برادکست
function editBroadcast(id) {
    currentBroadcastId = id;
    // در اینجا داده‌های برادکست از سرور دریافت و در فرم پر می‌شود
    const modal = new bootstrap.Modal(document.getElementById('editBroadcastModal'));
    modal.show();
}

// ذخیره تغییرات
function saveBroadcast() {
    if (!currentBroadcastId) return;

    Swal.fire({
        title: 'آیا از ذخیره تغییرات مطمئن هستید؟',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'بله، ذخیره کن',
        cancelButtonText: 'لغو'
    }).then((result) => {
        if (result.isConfirmed) {
            // در اینجا درخواست AJAX برای ذخیره تغییرات ارسال می‌شود
            Swal.fire('موفق!', 'تغییرات با موفقیت ذخیره شد.', 'success');
            bootstrap.Modal.getInstance(document.getElementById('editBroadcastModal')).hide();
        }
    });
}

// ارسال فوری
function sendNow(id) {
    Swal.fire({
        title: 'ارسال فوری',
        text: 'آیا می‌خواهید این برادکست همین الان ارسال شود؟',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'بله، ارسال کن',
        cancelButtonText: 'لغو'
    }).then((result) => {
        if (result.isConfirmed) {
            // در اینجا درخواست AJAX برای ارسال فوری ارسال می‌شود
            Swal.fire('ارسال شد!', 'برادکست با موفقیت ارسال شد.', 'success');
        }
    });
}

// فعال/غیرفعال کردن
function toggleBroadcast(id, isActive) {
    const action = isActive ? 'غیرفعال' : 'فعال';
    Swal.fire({
        title: `${action} کردن برادکست`,
        text: `آیا می‌خواهید این برادکست را ${action} کنید؟`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: `بله، ${action} کن`,
        cancelButtonText: 'لغو'
    }).then((result) => {
        if (result.isConfirmed) {
            // در اینجا درخواست AJAX برای تغییر وضعیت ارسال می‌شود
            Swal.fire('موفق!', `برادکست با موفقیت ${action} شد.`, 'success');
            // رفرش صفحه یا آپدیت وضعیت در جدول
            setTimeout(() => location.reload(), 1000);
        }
    });
}

// حذف برادکست
function confirmDelete(id) {
    Swal.fire({
        title: 'آیا مطمئن هستید؟',
        text: "این برادکست حذف خواهد شد!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'بله، حذف کن!',
        cancelButtonText: 'لغو',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            // در اینجا درخواست AJAX برای حذف ارسال می‌شود
            Swal.fire('حذف شد!', 'برادکست با موفقیت حذف شد.', 'success');
            setTimeout(() => location.reload(), 1000);
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    // فعال کردن tooltip‌ها
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    // انیمیشن کارت‌ها
    const cards = document.querySelectorAll('.card-animate');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });

        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
});
</script>
@endpush