@extends('backEnd.layouts.master')
@section('title', 'Package SMS')

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-box me-2 text-success"></i>Package SMS</h4>
        <p class="text-muted mb-0 small">Send SMS to customers who ordered a specific product</p>
    </div>
    <a href="{{ route('admin.sms.templates.create') }}" class="btn btn-outline-primary btn-sm">
        <i class="fas fa-plus me-1"></i> New Template
    </a>
</div>

@include('backEnd.sms.partials.subnav')

<div class="row g-4">
    <div class="col-lg-8">
        <div class="admin-card mb-4">
            <div class="admin-card-header"><h5 class="mb-0"><span class="badge bg-primary me-2">1</span> Select Product</h5></div>
            <div class="admin-card-body">
                <select id="product-select" class="form-select">
                    <option value="">— Choose a product —</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}" data-name="{{ $product->name }}">
                            {{ $product->name }} @if($product->sku) ({{ $product->sku }}) @endif
                        </option>
                    @endforeach
                </select>

                <div id="loading-customers" class="text-muted small mt-3 d-none">
                    <i class="fas fa-spinner fa-spin me-1"></i> Loading customers...
                </div>

                <div id="customers-panel" class="d-none mt-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <strong id="customer-count">0 customers</strong>
                        <div>
                            <button type="button" class="btn btn-link btn-sm p-0" id="select-all">Select All</button>
                            <span class="text-muted mx-1">|</span>
                            <button type="button" class="btn btn-link btn-sm p-0" id="select-none">Clear</button>
                        </div>
                    </div>
                    <div class="table-responsive border rounded" style="max-height: 260px; overflow-y: auto;">
                        <table class="table table-sm mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th width="40"><input type="checkbox" id="check-all"></th>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Order #</th>
                                </tr>
                            </thead>
                            <tbody id="customers-body"></tbody>
                        </table>
                    </div>
                    <p class="small text-muted mt-2" id="selected-count">0 selected</p>
                </div>

                <div id="no-customers" class="alert alert-warning mt-3 d-none">
                    No customers with phone numbers found for this product.
                </div>
            </div>
        </div>

        <div class="admin-card">
            <div class="admin-card-header"><h5 class="mb-0"><span class="badge bg-primary me-2">2</span> Compose Message</h5></div>
            <div class="admin-card-body">
                <div class="mb-3">
                    <label class="form-label">Use Template</label>
                    <select id="template-select" class="form-select">
                        <option value="">— Custom message —</option>
                        @foreach($templates as $template)
                            <option value="{{ $template->id }}" data-body="{{ e($template->body) }}">
                                [{{ $template->category }}] {{ $template->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Message</label>
                    <textarea id="sms-message" class="form-control" rows="5" maxlength="1600"></textarea>
                </div>
                <button type="button" class="btn btn-primary" id="send-package-sms" disabled>
                    <i class="fas fa-paper-plane me-1"></i> Send to Selected
                </button>
                <div id="send-result" class="mt-3"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="admin-card">
            <div class="admin-card-header"><h5 class="mb-0">How it works</h5></div>
            <div class="admin-card-body small text-muted">
                <ol class="ps-3 mb-0">
                    <li class="mb-2">Select a product (package/combo item)</li>
                    <li class="mb-2">Customers who ordered that product will appear</li>
                    <li class="mb-2">Choose recipients and compose your message</li>
                    <li>Send bulk SMS to selected customers</li>
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const csrf = document.querySelector('meta[name="csrf-token"]').content;
    let customers = [];
    let selected = new Set();
    let productId = null;

    const productSelect = document.getElementById('product-select');
    const loadingEl = document.getElementById('loading-customers');
    const panelEl = document.getElementById('customers-panel');
    const noCustomersEl = document.getElementById('no-customers');
    const tbody = document.getElementById('customers-body');
    const sendBtn = document.getElementById('send-package-sms');

    productSelect.addEventListener('change', function () {
        productId = this.value;
        selected.clear();
        updateSelectedCount();
        tbody.innerHTML = '';
        panelEl.classList.add('d-none');
        noCustomersEl.classList.add('d-none');
        sendBtn.disabled = true;

        if (!productId) return;

        loadingEl.classList.remove('d-none');
        fetch(`{{ url('admin/sms/package') }}/${productId}/customers`)
            .then(r => r.json())
            .then(data => {
                customers = data.customers || [];
                document.getElementById('customer-count').textContent = customers.length + ' customers found';
                if (customers.length === 0) {
                    noCustomersEl.classList.remove('d-none');
                    return;
                }
                panelEl.classList.remove('d-none');
                customers.forEach(c => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td><input type="checkbox" class="customer-check" value="${c.phone}"></td>
                        <td>${c.name || '—'}</td>
                        <td class="font-monospace">${c.phone}</td>
                        <td>${c.order_no || '—'}</td>`;
                    tbody.appendChild(tr);
                });
                bindChecks();
            })
            .finally(() => loadingEl.classList.add('d-none'));
    });

    function bindChecks() {
        document.querySelectorAll('.customer-check').forEach(chk => {
            chk.addEventListener('change', function () {
                if (this.checked) selected.add(this.value);
                else selected.delete(this.value);
                updateSelectedCount();
            });
        });
    }

    function updateSelectedCount() {
        document.getElementById('selected-count').textContent = selected.size + ' of ' + customers.length + ' selected';
        sendBtn.disabled = selected.size === 0 || !document.getElementById('sms-message').value.trim();
    }

    document.getElementById('select-all').addEventListener('click', () => {
        selected = new Set(customers.map(c => c.phone));
        document.querySelectorAll('.customer-check').forEach(c => c.checked = true);
        document.getElementById('check-all').checked = true;
        updateSelectedCount();
    });

    document.getElementById('select-none').addEventListener('click', () => {
        selected.clear();
        document.querySelectorAll('.customer-check').forEach(c => c.checked = false);
        document.getElementById('check-all').checked = false;
        updateSelectedCount();
    });

    document.getElementById('check-all').addEventListener('change', function () {
        if (this.checked) document.getElementById('select-all').click();
        else document.getElementById('select-none').click();
    });

    document.getElementById('template-select').addEventListener('change', function () {
        const body = this.selectedOptions[0]?.dataset.body;
        if (body) document.getElementById('sms-message').value = body;
        updateSelectedCount();
    });

    document.getElementById('sms-message').addEventListener('input', updateSelectedCount);

    sendBtn.addEventListener('click', function () {
        const message = document.getElementById('sms-message').value.trim();
        const result = document.getElementById('send-result');
        result.innerHTML = '<div class="text-muted">Sending...</div>';
        this.disabled = true;

        fetch('{{ route('admin.sms.package.send') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            body: JSON.stringify({
                product_id: productId,
                numbers: Array.from(selected),
                message: message
            })
        })
        .then(r => r.json())
        .then(data => {
            result.innerHTML = `<div class="alert alert-info mb-0">Sent: ${data.sent}, Failed: ${data.failed}, Total: ${data.total}</div>`;
        })
        .catch(() => { result.innerHTML = '<div class="alert alert-danger mb-0">Request failed</div>'; })
        .finally(() => { this.disabled = selected.size === 0; });
    });
})();
</script>
@endpush