@csrf

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Campaign Name -->
    <div class="md:col-span-2">
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Campaign Name <span class="text-red-500">*</span></label>
        <input type="text" name="name" id="name" value="{{ old('name', $campaign->name ?? '') }}" required
               class="mt-1 block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md shadow-sm">
        @error('name') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
    </div>

    <!-- Sender ID -->
    <div>
        <label for="sender_id" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Sender ID <span class="text-red-500">*</span></label>
        <input type="text" name="sender_id" id="sender_id" value="{{ old('sender_id', $campaign->sender_id ?? '') }}" required maxlength="11"
               class="mt-1 block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md shadow-sm">
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Max 11 alphanumeric characters or a phone number.</p>
        @error('sender_id') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
    </div>

    <!-- Recipient Lists -->
    <div>
        <label for="recipient_list_ids" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Recipient Lists <span class="text-red-500">*</span></label>
        <select name="recipient_list_ids[]" id="recipient_list_ids" multiple required
                class="mt-1 block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md shadow-sm h-32 form-multiselect">
            @foreach($recipientLists as $list)
                <option value="{{ $list->id }}" 
                    {{ (in_array($list->id, old('recipient_list_ids', $campaign->recipientLists->pluck('id')->toArray() ?? []))) ? 'selected' : '' }}>
                    {{ $list->name }} ({{ $list->subscribers_count ?? 0 }} recipients)
                </option>
            @endforeach
        </select>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Hold Ctrl/Cmd to select multiple lists.</p>
        @error('recipient_list_ids') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
        @error('recipient_list_ids.*') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
    </div>

    <!-- Message -->
    <div class="md:col-span-2">
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Message <span class="text-red-500">*</span></label>
        <textarea name="message" id="message" rows="5" required maxlength="1600"
                  class="mt-1 block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md shadow-sm"
                  onkeyup="updateCharCount(this)">{{ old('message', $campaign->message ?? '') }}</textarea>
        <div class="mt-1 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span id="charCount">0/1600 characters</span>
            <span id="smsCount">1 SMS</span>
        </div>
        @error('message') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
    </div>

    <!-- Schedule Date -->
    <div>
        <label for="schedule_date" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Schedule Date</label>
        <input type="date" name="schedule_date" id="schedule_date" 
               value="{{ old('schedule_date', isset($campaign) && $campaign->scheduled_at ? $campaign->scheduled_at->format('Y-m-d') : '') }}"
               min="{{ now()->format('Y-m-d') }}"
               class="mt-1 block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md shadow-sm">
        @error('schedule_date') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
    </div>

    <!-- Schedule Time -->
    <div>
        <label for="schedule_time" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Schedule Time</label>
        <input type="time" name="schedule_time" id="schedule_time" 
               value="{{ old('schedule_time', isset($campaign) && $campaign->scheduled_at ? $campaign->scheduled_at->format('H:i') : '') }}"
               class="mt-1 block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md shadow-sm">
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">If date and time are set, campaign will be scheduled. Otherwise, it's a draft.</p>
        @error('schedule_time') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
    </div>

    <!-- Status (Only for Edit, primarily informational or for specific overrides) -->
    @if(isset($campaign))
    <div class="md:col-span-2">
        <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-400">Status</label>
        <select name="status" id="status"
                class="mt-1 block w-full text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray rounded-md shadow-sm {{ $campaign->status === 'sent' || $campaign->status === 'sending' || $campaign->status === 'queued' ? 'bg-gray-100 dark:bg-gray-600 cursor-not-allowed' : '' }}"
                {{ $campaign->status === 'sent' || $campaign->status === 'sending' || $campaign->status === 'queued' ? 'disabled' : '' }}>
            <option value="draft" {{ old('status', $campaign->status) == 'draft' ? 'selected' : '' }}>Draft</option>
            <option value="scheduled" {{ old('status', $campaign->status) == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
            @if(in_array($campaign->status, ['failed', 'cancelled']))
                <option value="{{$campaign->status}}" selected>{{ ucfirst($campaign->status) }} (Cannot change from here)</option>
            @endif
             <!-- Other statuses like sending, sent, failed are typically system-set -->
        </select>
        @if($campaign->status === 'sent' || $campaign->status === 'sending' || $campaign->status === 'queued')
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Status cannot be changed for campaigns that are active or sent.</p>
        @endif
        @error('status') <p class="text-xs text-red-600 dark:text-red-400 mt-1">{{ $message }}</p> @enderror
    </div>
    @endif

</div>

<!-- Tracking Options -->
<div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
    <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Tracking & Options</h4>
    <div class="space-y-4">
        <div class="flex items-start">
            <div class="flex items-center h-5">
                <input id="track_clicks" name="track_clicks" type="checkbox" value="1" 
                       {{ old('track_clicks', $campaign->track_clicks ?? false) ? 'checked' : '' }}
                       class="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-offset-gray-800">
            </div>
            <div class="ml-3 text-sm">
                <label for="track_clicks" class="font-medium text-gray-700 dark:text-gray-300">Track Clicks</label>
                <p class="text-gray-500 dark:text-gray-400">Enable click tracking for links in the SMS. (Requires link shortening setup)</p>
            </div>
        </div>

        <div class="flex items-start">
            <div class="flex items-center h-5">
                <input id="track_delivery" name="track_delivery" type="checkbox" value="1" 
                       {{ old('track_delivery', $campaign->track_delivery ?? true) ? 'checked' : '' }}
                       class="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-offset-gray-800">
            </div>
            <div class="ml-3 text-sm">
                <label for="track_delivery" class="font-medium text-gray-700 dark:text-gray-300">Track Delivery</label>
                <p class="text-gray-500 dark:text-gray-400">Attempt to get delivery reports from the SMS provider. (Default: On)</p>
            </div>
        </div>

        <div class="flex items-start">
            <div class="flex items-center h-5">
                <input id="opt_out_message" name="opt_out_message" type="checkbox" value="1" 
                       {{ old('opt_out_message', $campaign->opt_out_message ?? true) ? 'checked' : '' }}
                       class="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-offset-gray-800">
            </div>
            <div class="ml-3 text-sm">
                <label for="opt_out_message" class="font-medium text-gray-700 dark:text-gray-300">Include Opt-out Message</label>
                <p class="text-gray-500 dark:text-gray-400">Automatically append a standard opt-out message (e.g., 'Reply STOP to unsubscribe'). (Default: On)</p>
            </div>
        </div>
    </div>
</div>

<div class="mt-8 pt-5">
    <div class="flex justify-end space-x-3">
        <a href="{{ route('admin.sms-campaigns.index') }}"
           class="px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg active:bg-gray-50 dark:active:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:shadow-outline-gray">
            Cancel
        </a>
        <button type="submit"
                class="px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple">
            {{ isset($campaign) ? 'Update Campaign' : 'Create Campaign' }}
        </button>
    </div>
</div>

@push('scripts')
<script>
    function updateCharCount(textarea) {
        const message = textarea.value;
        const charLength = message.length;
        const gsm7Chars = ["@", "£", "$", "¥", "è", "é", "ù", "ì", "ò", "Ç", "\n", "Ø", "ø", "\r", "Å", "å", "Δ", "_", "Φ", "Γ", "Λ", "Ω", "Π", "Ψ", "Σ", "Θ", "Ξ", "\f", "^", "{", "}", "\\", "[", "~", "]", "|", "€"];
        
        let smsCount = 0;
        let currentSmsLength = 0;
        let isUnicode = false;

        for (let i = 0; i < charLength; i++) {
            const char = message[i];
            let charSize = 1;

            if (gsm7Chars.includes(char) || (char.charCodeAt(0) >= 32 && char.charCodeAt(0) <= 126)) {
                // Standard GSM-7 character or ASCII
                if (char === "^" || char === "{" || char === "}" || char === "[" || char === "~" || char === "]" || char === "|" || char === "€" || char === "\\") {
                    charSize = 2; // These are GSM-7 extension characters, count as 2
                }
            } else {
                isUnicode = true;
                break; // If any non-GSM char, the whole message is Unicode
            }
        }

        if (isUnicode) {
            // Unicode (UCS-2) encoding
            if (charLength <= 70) smsCount = 1;
            else smsCount = Math.ceil(charLength / 67);
            currentSmsLength = charLength;
            document.getElementById('smsCount').textContent = smsCount + (smsCount === 1 ? ' SMS (Unicode)' : ' SMSs (Unicode)');
        } else {
            // GSM-7 encoding
            let effectiveLength = 0;
            for (let i = 0; i < charLength; i++) {
                const char = message[i];
                 if (char === "^" || char === "{" || char === "}" || char === "[" || char === "~" || char === "]" || char === "|" || char === "€" || char === "\\") {
                    effectiveLength += 2;
                } else {
                    effectiveLength += 1;
                }
            }
            
            if (effectiveLength <= 160) smsCount = 1;
            else smsCount = Math.ceil(effectiveLength / 153);
            currentSmsLength = effectiveLength;
            document.getElementById('smsCount').textContent = smsCount + (smsCount === 1 ? ' SMS (GSM-7)' : ' SMSs (GSM-7)');
        }
        
        document.getElementById('charCount').textContent = currentSmsLength + '/' + (isUnicode ? (smsCount * (smsCount > 1 ? 67:70)) : (smsCount * (smsCount > 1 ? 153:160))) + ' characters';

        // Initial call to set count on page load if there's existing message
        if (textarea.value) {
             textarea.dispatchEvent(new Event('keyup'));
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const messageTextarea = document.getElementById('message');
        if (messageTextarea) {
            updateCharCount(messageTextarea);
        }
    });
</script>
@endpush