@extends('layouts.app')

@section('title', 'WhatsApp Broadcast')

@push('style')
    <style>
        .recipient-tag {
            display: inline-flex; align-items: center; gap: 6px;
            background: #e8f5e9; border: 1px solid #a5d6a7;
            border-radius: 20px; padding: 3px 10px;
            font-size: 12.5px; color: #2e7d32; font-weight: 500;
        }
        .recipient-tag button { background: none; border: none; padding: 0; color: #888; line-height: 1; cursor: pointer; font-size: 14px; }
        .recipient-tag button:hover { color: #c00; }
        #recipient-box { min-height: 56px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 10px; border: 1px solid #dee2e6; border-radius: 8px; background: #fff; }
        .preview-bubble { background: #dcf8c6; border-radius: 12px 0 12px 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; max-width: 360px; color: #1a1a2e; word-break: break-word; }
        .preview-bubble:empty::before { content: 'Message preview will appear here…'; color: #aaa; font-style: italic; }
    </style>
@endpush

@section('content')
    @php $routePrefix = strtolower(auth()->user()->role->name); @endphp

    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
        <div>
            <h3 class="mb-0"><span class="text-success me-2"><i class="ri-broadcast-line"></i></span>Broadcast Message</h3>
            <span class="text-secondary fs-13">Send a WhatsApp message to multiple leads at once.</span>
        </div>
        <a href="{{ route($routePrefix . '.whatsapp.index') }}"
           class="btn btn-outline-secondary py-1 px-3 fs-14 fw-medium rounded-3">
            <i class="ri-arrow-left-line me-1"></i> Back
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger"><ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
    @endif

    <form method="POST" action="{{ route($routePrefix . '.whatsapp.broadcast.send') }}">
        @csrf
        <div class="row g-4">

            {{-- Left: Compose --}}
            <div class="col-xxl-8">

                {{-- Recipients --}}
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <div class="border-bottom pb-3 mb-4">
                            <h5 class="mb-1">Recipients</h5>
                            <span class="text-secondary fs-13">Select leads or filter by segment.</span>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Quick Segment</label>
                            <div class="d-flex flex-wrap gap-3">
                                @foreach([
                                    ['label' => 'All Active Leads',       'value' => 'active'],
                                    ['label' => 'Gujarat Leads',          'value' => 'gujarat'],
                                    ['label' => 'Overdue Invoices',       'value' => 'overdue'],
                                    ['label' => 'New (Uncontacted)',       'value' => 'new'],
                                    ['label' => 'Custom selection',        'value' => 'custom'],
                                ] as $seg)
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="segment"
                                               id="seg_{{ $seg['value'] }}" value="{{ $seg['value'] }}"
                                            {{ old('segment', 'custom') === $seg['value'] ? 'checked' : '' }}>
                                        <label class="form-check-label fs-13" for="seg_{{ $seg['value'] }}">{{ $seg['label'] }}</label>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div id="custom-recipients-block">
                            <label class="form-label fw-semibold">Individual Leads</label>
                            <select id="lead-picker" class="form-select mb-3" style="max-width: 420px;">
                                <option value="">— Search and pick a lead —</option>
                                @foreach($leads as $l)
                                    <option value="{{ $l->id }}" data-name="{{ $l->name }}" data-phone="{{ $l->phone }}">
                                        {{ $l->name }} — {{ $l->phone }}
                                    </option>
                                @endforeach
                            </select>
                            <div id="recipient-box"></div>
                            <div class="form-text mt-2"><span id="recipient-count">0</span> recipient(s) selected</div>
                        </div>
                    </div>
                </div>

                {{-- Message --}}
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <div class="border-bottom pb-3 mb-4">
                            <h5 class="mb-1">Message</h5>
                            <span class="text-secondary fs-13">Use a template or write a custom message.</span>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">Message Type</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="msg_type" id="type_text" value="text" checked>
                                    <label class="form-check-label" for="type_text">Custom Text</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="msg_type" id="type_tpl" value="template">
                                    <label class="form-check-label" for="type_tpl">Use Template</label>
                                </div>
                            </div>
                        </div>

                        <div id="text-block">
                            <label class="form-label fw-semibold">Message Body <span class="text-danger">*</span></label>
                            <textarea name="body" id="broadcast-body" class="form-control @error('body') is-invalid @enderror"
                                      rows="5" placeholder="Hi @{{name}}, this is a message from {{ auth()->user()->company->name ?? config('app.name') }}…&#10;&#10;Use @{{name}} as a placeholder for the lead's name.">{{ old('body') }}</textarea>
                            @error('body')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <div class="form-text"><span id="char-count">0</span> / 4096 characters · Use <code>@{{name}}</code> for personalisation</div>
                        </div>

                        <div id="template-block" class="d-none">
                            <label class="form-label fw-semibold">Template <span class="text-danger">*</span></label>
                            <select name="template_id" class="form-select @error('template_id') is-invalid @enderror">
                                <option value="">— Select template —</option>
                                @foreach($templates as $tpl)
                                    <option value="{{ $tpl->id }}" data-body="{{ $tpl->body }}"
                                        {{ old('template_id') == $tpl->id ? 'selected' : '' }}>
                                        {{ $tpl->name }} ({{ $tpl->category }})
                                    </option>
                                @endforeach
                            </select>
                            @error('template_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>

                {{-- Schedule --}}
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <div class="border-bottom pb-3 mb-4">
                            <h5 class="mb-1">Scheduling</h5>
                            <span class="text-secondary fs-13">Send now or schedule for later.</span>
                        </div>
                        <div class="d-flex gap-4">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="schedule_type" value="now" id="sched_now" checked>
                                <label class="form-check-label" for="sched_now">Send immediately</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="schedule_type" value="later" id="sched_later">
                                <label class="form-check-label" for="sched_later">Schedule for later</label>
                            </div>
                        </div>
                        <div id="schedule-block" class="mt-3 d-none">
                            <label class="form-label fw-semibold">Send At</label>
                            <input type="datetime-local" name="scheduled_at"
                                   class="form-control @error('scheduled_at') is-invalid @enderror"
                                   style="max-width:280px;" value="{{ old('scheduled_at') }}">
                            @error('scheduled_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Right: Preview + Send --}}
            <div class="col-xxl-4">
                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Message Preview</h5>
                        <div style="background:#f0f2f5; border-radius:10px; padding:16px 14px;">
                            <div class="preview-bubble" id="preview-bubble"></div>
                            <div class="mt-2 text-end">
                                <span style="font-size:10.5px;color:#888;">Now &nbsp;<span style="color:#53bdeb;">✓✓</span></span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-white border-0 rounded-3 mb-4">
                    <div class="card-body p-4">
                        <h5 class="mb-3">Broadcast Summary</h5>
                        <div class="d-flex justify-content-between py-2 border-bottom fs-13">
                            <span class="text-secondary">Recipients</span>
                            <span class="fw-semibold" id="summary-count">—</span>
                        </div>
                        <div class="d-flex justify-content-between py-2 border-bottom fs-13">
                            <span class="text-secondary">Message type</span>
                            <span class="fw-semibold" id="summary-type">Custom text</span>
                        </div>
                        <div class="d-flex justify-content-between py-2 fs-13">
                            <span class="text-secondary">Timing</span>
                            <span class="fw-semibold" id="summary-timing">Immediately</span>
                        </div>
                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-success py-2 fw-semibold">
                                <i class="ri-send-plane-line me-1"></i> Send Broadcast
                            </button>
                            <a href="{{ route($routePrefix . '.whatsapp.index') }}"
                               class="btn btn-outline-secondary py-2">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('script')
    <script>
        $(function () {
            const selectedIds = new Set();

            $('#lead-picker').on('change', function () {
                const opt = this.options[this.selectedIndex];
                const id = this.value;
                if (!id || selectedIds.has(id)) { this.value = ''; return; }
                selectedIds.add(id);

                const tag = $(`<span class="recipient-tag">
            ${opt.dataset.name}
            <input type="hidden" name="recipient_ids[]" value="${id}">
            <button type="button" data-id="${id}" title="Remove">×</button>
        </span>`);

                tag.find('button').on('click', function () {
                    selectedIds.delete(this.dataset.id);
                    tag.remove();
                    updateCount();
                });
                $('#recipient-box').append(tag);
                this.value = '';
                updateCount();
            });

            function updateCount() {
                const c = selectedIds.size;
                $('#recipient-count, #summary-count').text(c || '—');
            }

            $('input[name="msg_type"]').on('change', function () {
                const isText = this.value === 'text';
                $('#text-block').toggleClass('d-none', !isText);
                $('#template-block').toggleClass('d-none', isText);
                $('#summary-type').text(isText ? 'Custom text' : 'Template');
                updatePreview();
            });

            $('input[name="schedule_type"]').on('change', function () {
                $('#schedule-block').toggleClass('d-none', this.value !== 'later');
                $('#summary-timing').text(this.value === 'later' ? 'Scheduled' : 'Immediately');
            });

            $('#broadcast-body').on('input', function () {
                $('#char-count').text(this.value.length);
                updatePreview();
            });

            $('select[name="template_id"]').on('change', updatePreview);

            function updatePreview() {
                let text = '';
                if ($('#type_text').is(':checked')) {
                    text = $('#broadcast-body').val().replace(/\{\{name\}\}/g, '<em>[Lead Name]</em>');
                } else {
                    text = $('select[name="template_id"] option:selected').data('body') || '';
                }
                $('#preview-bubble').html(text.replace(/\n/g, '<br>') || '');
            }

            updatePreview();
            updateCount();
        });
    </script>
@endpush