@extends('layouts.app')

@section('title', __('dashboard.Add New Campaign'))
@section('page_heading', __('dashboard.Add New Campaign'))

@section('breadcrumb')
    <li class="bc-item text-slate-500 dark:text-slate-400">
        <a href="{{ route('dashboard.home') }}" class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="bc-item text-slate-500 dark:text-slate-400">
        <a href="{{ route('dashboard.marketing.campaigns.index') }}" class="text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400">{{ __('dashboard.Email Campaigns') }}</a>
    </li>
    <li class="bc-item text-slate-500 dark:text-slate-400 text-blue-600 dark:text-blue-400">{{ __('dashboard.Add New Campaign') }}</li>
@endsection

@section('content')
<style>
    .marketing-form-card {
        border: 1px solid #e8eef6;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
        overflow: hidden;
        height: 100%;
    }

    .marketing-form-card__header {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 1.35rem 1.5rem;
        border-bottom: 1px solid #edf2f7;
        background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    }

    .marketing-form-card__icon {
        width: 3rem;
        height: 3rem;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff7ed;
        color: #ea580c;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .marketing-form-card__title h2 {
        margin: 0;
        color: #0f172a;
        font-size: 1.02rem;
        font-weight: 900;
    }

    .marketing-form-card__title p {
        margin: 0.2rem 0 0;
        color: #64748b;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .marketing-form-card__body {
        padding: 1.5rem;
    }

    .marketing-field {
        padding: 1rem;
        border: 1px solid #e8eef6;
        border-radius: 18px;
        background: #fbfdff;
        height: 100%;
    }

    .marketing-field .app-input,
    .marketing-field .app-input.app-select {
        min-height: 48px;
        border-radius: 14px;
        background: #fff !important;
        border-color: #dbe4f0;
        box-shadow: none !important;
    }

    .marketing-field .app-label {
        color: #0f172a;
        font-size: 0.84rem;
        font-weight: 800;
        margin-bottom: 0.55rem;
    }

    .marketing-summary-box {
        padding: 1rem;
        border-radius: 18px;
        border: 1px dashed #fed7aa;
        background: linear-gradient(180deg, #fff7ed 0%, #fffaf5 100%);
    }
</style>

<form action="{{ route('dashboard.marketing.campaigns.store') }}" method="POST">
    @csrf
    <div class="app-grid g-7">
        <div class="xl:col-span-8">
            <div class="marketing-form-card mb-7">
                <div class="marketing-form-card__header">
                    <span class="marketing-form-card__icon"><i class="fa-solid fa-bullhorn"></i></span>
                    <div class="marketing-form-card__title">
                        <h2>{{ __('dashboard.Campaign Details') }}</h2>
                        <p>اسم الحملة، القالب المستخدم، وموضوع الرسالة.</p>
                    </div>
                </div>
                <div class="marketing-form-card__body">
                    <div class="app-grid g-5">
                        <div class="col-span-12">
                            <div class="marketing-field">
                                <label class="required app-label">{{ __('dashboard.Campaign Name') }}</label>
                                <input type="text" name="name" class="app-input app-input--solid" value="{{ old('name') }}" placeholder="{{ __('dashboard.e.g., Ramadan Sale 2026') }}" required>
                            </div>
                        </div>
                        <div class="md:col-span-6">
                            <div class="marketing-field">
                                <label class="required app-label">{{ __('dashboard.Select Template') }}</label>
                                <select name="email_template_id" id="email_template_id" class="app-input app-select app-input--solid" data-control="select2" required>
                                    <option value="">{{ __('dashboard.Choose a template') }}</option>
                                    @foreach($templates as $template)
                                        <option value="{{ $template->id }}" @selected(old('email_template_id') == $template->id)>{{ $template->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="md:col-span-6">
                            <div class="marketing-field">
                                <label class="app-label">{{ __('dashboard.Override Subject (Optional)') }}</label>
                                <input type="text" name="subject" class="app-input app-input--solid" value="{{ old('subject') }}" placeholder="{{ __('dashboard.Leave blank to use template subject') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="marketing-form-card">
                <div class="marketing-form-card__header">
                    <span class="marketing-form-card__icon"><i class="fa-solid fa-bullseye"></i></span>
                    <div class="marketing-form-card__title">
                        <h2>{{ __('dashboard.Target Audience') }}</h2>
                        <p>حدد من سيستلم الحملة بناءً على المناسبة أو التصنيف.</p>
                    </div>
                </div>
                <div class="marketing-form-card__body">
                    <div class="app-grid g-5">
                        <div class="md:col-span-4">
                            <div class="marketing-field">
                                <label class="app-label">{{ __('dashboard.Event Timing') }}</label>
                                <select name="event_timing" class="app-input app-select app-input--solid">
                                    <option value="all">{{ __('dashboard.All Customers') }}</option>
                                    <option value="upcoming">{{ __('dashboard.Upcoming Events') }}</option>
                                    <option value="past">{{ __('dashboard.Past Events') }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="md:col-span-4">
                            <div class="marketing-field">
                                <label class="app-label">{{ __('dashboard.Event Month') }}</label>
                                <select name="event_month" class="app-input app-select app-input--solid">
                                    <option value="">{{ __('dashboard.All Months') }}</option>
                                    @for($i = 1; $i <= 12; $i++)
                                        <option value="{{ $i }}">{{ date('F', mktime(0, 0, 0, $i, 1)) }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="md:col-span-4">
                            <div class="marketing-field">
                                <label class="app-label">{{ __('dashboard.Product Category') }}</label>
                                <select name="product_category_id" class="app-input app-select app-input--solid">
                                    <option value="">{{ __('dashboard.All Categories') }}</option>
                                    @foreach($productCategories as $category)
                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="xl:col-span-4">
            <div class="marketing-form-card mb-7">
                <div class="marketing-form-card__header">
                    <span class="marketing-form-card__icon"><i class="fa-solid fa-chart-bar"></i></span>
                    <div class="marketing-form-card__title">
                        <h2>{{ __('dashboard.Summary') }}</h2>
                        <p>تقدير أولي لحجم الإرسال المتوقع.</p>
                    </div>
                </div>
                <div class="marketing-form-card__body">
                    <div class="marketing-summary-box">
                        <div class="flex justify-between items-center mb-3">
                            <span class="text-gray-700 font-semibold">{{ __('dashboard.Estimated Recipients') }}</span>
                            <span class="font-black text-2xl text-gray-900" id="recipient_count">0</span>
                        </div>
                        <div class="text-slate-500 dark:text-slate-400 text-xs">{{ __('dashboard.Note: Emails will only be sent to customers with a valid email address.') }}</div>
                    </div>
                </div>
            </div>

            <div class="marketing-form-card">
                <div class="marketing-form-card__body text-center">
                    <button type="submit" class="app-btn app-btn--primary w-full mb-3">
                        <i class="fa-solid fa-check2-circle text-base me-2"></i>
                        {{ __('dashboard.Create Campaign') }}
                    </button>
                    <a href="{{ route('dashboard.marketing.campaigns.index') }}" class="app-btn app-btn--secondary w-full">{{ __('dashboard.Cancel') }}</a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const recipientCount = document.getElementById('recipient_count');
        const recipientCountUrl = '{{ route("dashboard.marketing.campaigns.recipient-count") }}';
        const getSelectValue = (name) => document.querySelector(`select[name="${name}"]`)?.value || '';

        async function updateRecipientCount() {
            const params = new URLSearchParams({
                event_timing: getSelectValue('event_timing'),
                event_month: getSelectValue('event_month'),
                product_category_id: getSelectValue('product_category_id'),
            });

            try {
                const response = await fetch(`${recipientCountUrl}?${params.toString()}`, {
                    method: 'GET',
                    headers: {
                        Accept: 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });

                if (!response.ok) {
                    return;
                }

                const data = await response.json();
                if (recipientCount) {
                    recipientCount.textContent = Number(data.count ?? 0).toLocaleString();
                }
            } catch (error) {
                // Keep the current estimate if the count endpoint is unavailable.
            }
        }

        document.querySelectorAll('select').forEach((select) => {
            select.addEventListener('change', updateRecipientCount);
        });

        updateRecipientCount();
    });
</script>
@endsection