@extends('layouts.admin')
@section('title', 'New Campaign')

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/themes/dark.css">
    <style>
        .flatpickr-calendar { background:#0a0a0a !important; border:1px solid #1f2937 !important; }
        .flatpickr-day.selected { background:#dc2626 !important; border-color:#dc2626 !important; }
        .flatpickr-day:hover { background:#1f2937 !important; }
    </style>
@endpush

@section('admin')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    @include('admin._nav')

    <h1 class="text-3xl font-bold text-white mb-6">New Campaign</h1>

    @if($errors->any())
        <div class="mb-4 p-3 rounded bg-red-900/50 border border-red-700 text-red-200">
            <ul class="list-disc list-inside">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ route('admin.campaigns.store') }}" class="space-y-6">
        @csrf

        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <div>
                <label class="block text-sm text-gray-300 mb-1">Campaign Name (internal)</label>
                <input name="name" required class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" value="{{ old('name') }}">
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Subject Line</label>
                <input name="subject" required class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" value="{{ old('subject') }}">
                <p class="text-xs text-gray-500 mt-1">Personalization tokens like <code>@{{first_name}}</code> are supported.</p>
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Preheader (preview text)</label>
                <input name="preheader" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" value="{{ old('preheader') }}">
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-1">From Name</label>
                    <input name="from_name" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" value="{{ old('from_name', $brandDefaults['from_name'] ?? '') }}" placeholder="{{ $brandDefaults['from_name'] ?? '(default: site name)' }}">
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">From Address</label>
                    <input name="from_address" type="email" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" value="{{ old('from_address', $brandDefaults['from_address'] ?? '') }}" placeholder="{{ $brandDefaults['from_address'] ?? '(default: configured sender)' }}">
                </div>
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Reply-To</label>
                <input name="reply_to" type="email" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white" value="{{ old('reply_to', $brandDefaults['reply_to'] ?? '') }}" placeholder="{{ $brandDefaults['reply_to'] ?? '' }}">
                <p class="text-xs text-gray-500 mt-1">Pre-filled from your <a href="{{ route('admin.brand-kit') }}" class="text-amber-400 hover:underline">Brand Kit</a>. Override here for this campaign only.</p>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-1">Start From Template (optional)</label>
                <select name="template_id" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                    <option value="">— Blank —</option>
                    @foreach($templates as $t)
                        <option value="{{ $t->id }}">{{ $t->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <h2 class="text-lg text-white font-semibold">Audience</h2>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Include subscribers tagged with</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                    @foreach($tags as $tag)
                        <label class="flex items-center gap-2 text-sm text-gray-200">
                            <input type="checkbox" name="include_tags[]" value="{{ $tag->id }}"> {{ $tag->name }}
                        </label>
                    @endforeach
                </div>
            </div>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Exclude subscribers tagged with</label>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                    @foreach($tags as $tag)
                        <label class="flex items-center gap-2 text-sm text-gray-200">
                            <input type="checkbox" name="exclude_tags[]" value="{{ $tag->id }}"> {{ $tag->name }}
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 space-y-4">
            <h2 class="text-lg text-white font-semibold">Schedule</h2>
            <div>
                <label class="block text-sm text-gray-300 mb-1">Mode</label>
                <select name="schedule_mode" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                    <option value="now">Send now (after design)</option>
                    <option value="datetime">At a specific date/time</option>
                    <option value="per_tz">At a local clock-time per subscriber timezone</option>
                    <option value="cron">Recurring (cron expression)</option>
                </select>
                <p class="text-xs text-gray-500 mt-1">You can change this later before sending.</p>
            </div>

            {{-- Auto-detected browser timezone banner --}}
            <div id="tzDetectBanner"
                 class="flex items-center justify-between gap-3 px-3 py-2 rounded-lg bg-blue-900/20 border border-blue-800/40 text-blue-200 text-xs"
                 style="display:none;">
                <div>
                    <i class="fa-solid fa-location-crosshairs mr-1"></i>
                    Your browser is in <strong id="tzDetectName">…</strong>
                    <span class="text-blue-300/70" id="tzDetectOffset"></span>.
                    Current local time: <strong id="tzDetectClock">…</strong>
                </div>
                <button type="button" id="tzUseDetected"
                        class="px-2 py-1 rounded bg-blue-800/60 hover:bg-blue-700 text-white text-[11px] font-semibold whitespace-nowrap">
                    Use this zone
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Scheduled at</label>
                    <input type="text" name="scheduled_at" id="createScheduledAt"
                           value="{{ old('scheduled_at') }}"
                           placeholder="Click to choose date & time"
                           class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white cursor-pointer">
                    <p id="createScheduledHint" class="text-[11px] text-gray-500 mt-1"></p>
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Timezone</label>
                    @php
                        $tzOptionsCreate = [
                            'America/New_York'    => 'Eastern (New York)',
                            'America/Chicago'     => 'Central (Chicago)',
                            'America/Denver'      => 'Mountain (Denver)',
                            'America/Phoenix'     => 'Mountain — no DST (Phoenix)',
                            'America/Los_Angeles' => 'Pacific (Los Angeles)',
                            'America/Anchorage'   => 'Alaska (Anchorage)',
                            'Pacific/Honolulu'    => 'Hawaii (Honolulu)',
                            'UTC'                 => 'UTC',
                            'Europe/London'       => 'London',
                            'Europe/Berlin'       => 'Berlin / Paris',
                            'Asia/Tokyo'          => 'Tokyo',
                            'Australia/Sydney'    => 'Sydney',
                        ];
                        $defaultTzCreate = old('schedule_timezone', config('app.timezone', 'America/Denver'));
                    @endphp
                    <select name="schedule_timezone" id="createScheduleTz"
                            class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                        @foreach($tzOptionsCreate as $tz => $lbl)
                            <option value="{{ $tz }}" @selected($defaultTzCreate === $tz)>{{ $lbl }} — {{ $tz }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block text-sm text-gray-300 mb-1">Cron expression</label>
                    <input name="cron_expression" placeholder="0 8 * * *" class="w-full px-3 py-2 bg-gray-950 border border-gray-700 rounded text-white">
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-2">
            <a href="{{ route('admin.campaigns.index') }}" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded">Cancel</a>
            <button class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded">Create &amp; Open Editor</button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr@4.6.13/dist/flatpickr.min.js"></script>
<script>
(function () {
    var detectedTz;
    try { detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone; } catch (e) { detectedTz = null; }

    var input  = document.getElementById('createScheduledAt');
    var tzSel  = document.getElementById('createScheduleTz');
    var hint   = document.getElementById('createScheduledHint');
    var banner = document.getElementById('tzDetectBanner');
    var bName  = document.getElementById('tzDetectName');
    var bOff   = document.getElementById('tzDetectOffset');
    var bClock = document.getElementById('tzDetectClock');
    var useBtn = document.getElementById('tzUseDetected');

    function offsetLabel(tz) {
        try {
            var parts = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'longOffset' }).formatToParts(new Date());
            var off = (parts.find(function (p) { return p.type === 'timeZoneName'; }) || {}).value || '';
            return off ? '(' + off + ')' : '';
        } catch (e) { return ''; }
    }
    function liveClock(tz) {
        try {
            return new Intl.DateTimeFormat([], {
                timeZone: tz, weekday:'short', month:'short', day:'numeric',
                hour:'numeric', minute:'2-digit', hour12:true
            }).format(new Date());
        } catch (e) { return ''; }
    }

    if (detectedTz && tzSel && banner) {
        var have = false;
        for (var i = 0; i < tzSel.options.length; i++) {
            if (tzSel.options[i].value === detectedTz) { have = true; break; }
        }
        if (!have) {
            var opt = document.createElement('option');
            opt.value = detectedTz;
            opt.textContent = 'Detected — ' + detectedTz;
            tzSel.insertBefore(opt, tzSel.firstChild);
        }
        bName.textContent = detectedTz;
        bOff.textContent  = ' ' + offsetLabel(detectedTz);
        bClock.textContent = liveClock(detectedTz);
        banner.style.display = 'flex';
        setInterval(function () { bClock.textContent = liveClock(detectedTz); }, 30000);

        useBtn.addEventListener('click', function () {
            tzSel.value = detectedTz;
            tzSel.dispatchEvent(new Event('change'));
        });
        if (tzSel.value === detectedTz) {
            useBtn.textContent = '✓ Selected';
            useBtn.disabled = true;
            useBtn.classList.add('opacity-60', 'cursor-default');
        }
    }

    if (window.flatpickr && input) {
        flatpickr(input, {
            enableTime: true,
            dateFormat: 'Y-m-d\\TH:i',
            altInput: true,
            altFormat: 'D, M j, Y at h:i K',
            minuteIncrement: 5,
            minDate: 'today',
            time_24hr: false,
            onChange: refreshHint,
            onReady: refreshHint,
        });
    }

    function refreshHint() {
        if (!input || !hint || !tzSel) return;
        var raw = input.value;
        if (!raw) { hint.textContent = ''; return; }
        var tz  = tzSel.value;
        var label = tz;
        if (detectedTz && detectedTz !== tz) label += ' — your browser is ' + detectedTz;
        else if (detectedTz === tz)          label += ' (matches your browser)';
        hint.innerHTML = '<i class="fa-regular fa-clock mr-1"></i>Wall-clock in <strong>' + label + '</strong>; stored as UTC.';
    }
    if (tzSel) tzSel.addEventListener('change', refreshHint);
    if (input) input.addEventListener('change', refreshHint);
})();
</script>
@endpush