@extends('layouts.app')
@section('title', __('dashboard.Email Campaigns'))
@section('page_heading', __('dashboard.Email Campaigns'))

@section('content')
@php
    $col = $campaigns->getCollection();
    $statusMap = [
        'draft'     => ['#f8fafc','#64748b','مسودة'],
        'scheduled' => ['#eff6ff','#2563eb','مجدولة'],
        'sending'   => ['#fffbeb','#d97706','جاري الإرسال'],
        'completed' => ['#f0fdf4','#16a34a','مكتملة'],
        'failed'    => ['#fef2f2','#dc2626','فشلت'],
    ];
@endphp

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-envelope','#eff6ff','#2563eb', $campaigns->total(),                       __('dashboard.total_campaigns')],
        ['fa-solid fa-pen-to-square', '#f8fafc','#64748b', $col->where('status','draft')->count(),    'مسودة'],
        ['fa-solid fa-paper-plane',    '#f0fdf4','#16a34a', $col->where('status','completed')->count(),'مكتملة'],
        ['fa-solid fa-circle-check', '#fffbeb','#d97706', number_format($col->sum('successful_sends')),__('dashboard.successful_sends')],
    ] as [$icon,$bg,$color,$val,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow-card)">
        <div style="width:42px;height:42px;border-radius:12px;flex-shrink:0;background:{{ $bg }};color:{{ $color }};display:flex;align-items:center;justify-content:center;font-size:1.05rem">
            <i class="{{ $icon }}"></i>
        </div>
        <div>
            <div style="font-size:1.35rem;font-weight:900;color:var(--text-primary);line-height:1">{{ $val }}</div>
            <div style="font-size:.7rem;font-weight:700;color:var(--text-muted);margin-top:.2rem">{{ $lbl }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Shell --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">

    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-bullhorn" style="color:var(--c-primary)"></i>
            {{ __('dashboard.Email Campaigns') }}
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $campaigns->total() }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            <a href="{{ route('dashboard.marketing.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-users me-1"></i>بيانات العملاء
            </a>
            @can('view email templates')
            <a href="{{ route('dashboard.marketing.email-templates.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-envelope me-1"></i>القوالب
            </a>
            @endcan
            @can('create email campaigns')
            <a href="{{ route('dashboard.marketing.campaigns.create') }}" class="app-btn app-btn--primary app-btn--sm">
                <i class="fa-solid fa-plus me-1"></i>{{ __('dashboard.Add New Campaign') }}
            </a>
            @endcan
        </div>
    </div>

    @if($campaigns->isEmpty())
        <div style="padding:3rem;text-align:center">
            @include('layouts.partials.index-empty-state', ['icon'=>'fa-solid fa-bullhorn','title'=>__('dashboard.No campaigns found'),'message'=>''])
        </div>
    @else
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse: collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach([__('dashboard.Campaign Name'),__('dashboard.Template'),__('dashboard.Status'),__('dashboard.Recipients'),__('dashboard.Sent At')] as $h)
                    <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start;white-space:nowrap">{{ $h }}</th>
                    @endforeach
                    <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:end">{{ __('dashboard.Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($campaigns as $c)
                @php [$bg,$color,$label] = $statusMap[$c->status] ?? ['#f8fafc','#64748b',$c->status]; @endphp
                <tr style="border-top:1px solid var(--border-subtle)" onmouseover="this.style.background='var(--border-subtle)'" onmouseout="this.style.background=''">
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $c->name }}</div>
                        <div style="font-size:.7rem;color:var(--text-muted)">{{ $c->creator->name ?? '—' }}</div>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-size:.82rem;color:var(--text-secondary)">{{ $c->template->name }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $bg }};color:{{ $color }}">{{ $label }}</span>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $c->total_recipients }}</div>
                        <div style="font-size:.7rem;margin-top:.15rem">
                            <span style="color:#16a34a">✓ {{ $c->successful_sends }}</span>
                            <span style="color:#dc2626;margin-inline-start:.4rem">✗ {{ $c->failed_sends }}</span>
                        </div>
                    </td>
                    <td style="padding:.875rem 1.25rem;font-size:.78rem;color:var(--text-muted)">
                        {{ $c->sent_at ? $c->sent_at->format('Y-m-d H:i') : '—' }}
                    </td>
                    <td style="padding:.875rem 1.25rem;text-align:end">
                        @canany(['send email campaigns','delete email campaigns'])
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">{{ __('dashboard.Actions') }}</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                @can('send email campaigns')
                                @if($c->status === 'draft')
                                <form action="{{ route('dashboard.marketing.campaigns.send', $c->id) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="custom-dropdown__item custom-dropdown__item--success">
                                        <i class="fa-solid fa-paper-plane me-2"></i>{{ __('dashboard.Send Now') }}
                                    </button>
                                </form>
                                @endif
                                @endcan
                                @can('delete email campaigns')
                                <form action="{{ route('dashboard.marketing.campaigns.destroy', $c->id) }}" method="POST">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="custom-dropdown__item custom-dropdown__item--danger" data-confirm-delete="{{ __('dashboard.Are you sure?') }}">
                                        <i class="fa-solid fa-trash me-2"></i>{{ __('dashboard.Delete') }}
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </div>
                        @endcanany
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $campaigns->links() }}
    </div>
    @endif
</div>
@endsection