@extends('layouts.admin')
@section('title', 'Send Promotion')

@push('head')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css">
<link rel="stylesheet" href="{{ asset('css/admin-promotions.css') }}?v={{ filemtime(public_path('css/admin-promotions.css')) }}">
@endpush

@section('content')
<div class="page-header"><h1>Send Promotional Email</h1><p>Broadcast updates to clients</p></div>

<div class="md-card" style="margin-bottom:1.5rem">
    <div class="md-card-body">
        <form method="POST" action="{{ route('admin.promotions.store') }}" id="promotionForm">
            @csrf
            <div class="form-field">
                <label for="recipientType">Select Recipients</label>
                <select name="recipient_type" class="md-select" id="recipientType" required>
                    @foreach([
                        'all_verified' => 'All Verified Users',
                        'active_users' => 'Active Users',
                        'inactive_users' => 'Inactive Users',
                        'users_with_balance' => 'Users With Balance',
                        'users_without_balance' => 'Users Without Balance',
                        'specific_users' => 'Select Specific Users',
                    ] as $value => $label)
                        <option value="{{ $value }}" @selected(old('recipient_type') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="form-field promo-specific-picker" id="specificUserPicker" hidden>
                <label for="recipientUserSelect">Select Users</label>
                <div class="promo-user-select-wrap">
                    <select id="recipientUserSelect" name="recipient_ids[]" multiple placeholder="Search and select clients...">
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" @selected(in_array($client->id, $initialRecipientIds, true))>
                                {{ $client->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @error('recipient_ids')
                    <p class="promo-picker-error">{{ $message }}</p>
                @enderror
                @error('recipient_ids.*')
                    <p class="promo-picker-error">{{ $message }}</p>
                @enderror
            </div>

            <div class="form-field">
                <label>Subject</label>
                <input name="subject" class="md-input" value="{{ old('subject') }}" required>
            </div>
            <div class="form-field">
                <label>Message</label>
                <textarea name="body" class="md-textarea" placeholder="Hello {name}..." required>{{ old('body') }}</textarea>
            </div>
            <button type="submit" class="md-btn md-btn-filled">Send Promotion</button>
        </form>
    </div>
</div>

<div class="md-card">
    <div class="md-card-header">Promotion History</div>
    <div class="table-wrap">
        <table class="md-table">
            <thead><tr><th>Subject</th><th>Sent To</th><th>Sent At</th><th>Action</th></tr></thead>
            <tbody>
                @forelse($promotions as $p)
                <tr>
                    <td>{{ $p->subject }}</td>
                    <td>{{ $p->recipientLabel() }}</td>
                    <td>{{ $p->sent_at?->format('Y-m-d H:i:s') }}</td>
                    <td>
                        <form method="POST" action="{{ route('admin.promotions.resend', $p) }}">@csrf
                            <button class="md-btn md-btn-tonal md-btn-sm">Resend</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr><td colspan="4" style="text-align:center;padding:2rem">No promotions sent yet</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($promotions->hasPages())
    <div style="padding:1rem">{{ $promotions->links() }}</div>
    @endif
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/js/tom-select.complete.min.js"></script>
<script>
(function() {
    const recipientType = document.getElementById('recipientType');
    const specificPicker = document.getElementById('specificUserPicker');
    const recipientSelectEl = document.getElementById('recipientUserSelect');
    const form = document.getElementById('promotionForm');
    let userSelect = null;

    function initUserSelect() {
        if (userSelect || !recipientSelectEl || typeof TomSelect === 'undefined') {
            return;
        }

        userSelect = new TomSelect(recipientSelectEl, {
            plugins: ['remove_button'],
            persist: false,
            create: false,
            maxItems: null,
            hideSelected: true,
            closeAfterSelect: false,
            openOnFocus: true,
            placeholder: 'Type to search users...',
            sortField: { field: 'text', direction: 'asc' },
            render: {
                option: function(data, escape) {
                    return '<div class="promo-ts-option">' + escape(data.text) + '</div>';
                },
            },
        });
    }

    function toggleSpecificPicker() {
        const show = recipientType.value === 'specific_users';
        specificPicker.hidden = !show;

        if (show) {
            initUserSelect();
            if (userSelect) {
                userSelect.enable();
            } else {
                recipientSelectEl.disabled = false;
            }
        } else if (userSelect) {
            userSelect.clear();
            userSelect.disable();
        } else {
            recipientSelectEl.disabled = true;
            Array.from(recipientSelectEl.options).forEach(function(opt) {
                opt.selected = false;
            });
        }
    }

    recipientType.addEventListener('change', toggleSpecificPicker);

    form.addEventListener('submit', function(e) {
        if (recipientType.value !== 'specific_users') {
            return;
        }

        const count = userSelect
            ? userSelect.getValue().length
            : Array.from(recipientSelectEl.selectedOptions).length;

        if (count === 0) {
            e.preventDefault();
            alert('Please select at least one user.');
        }
    });

    toggleSpecificPicker();
})();
</script>
@endpush