@extends('layouts/base_view')
@section('title'){!! $variables['header_routes'] !!}@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">{{ $variables['judul'] ?? 'Broadcast WhatsApp' }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="form-broadcast">
                            @csrf
                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label>Judul Broadcast <span class="text-danger">*</span></label>
                                    <input type="text" name="title" class="form-control" required placeholder="Contoh: Promo Voucher Juni 2026">
                                </div>
                                <div class="form-group col-md-6">
                                    <label>Template <span class="text-danger">*</span></label>
                                    <select name="wa_template_id" id="templateSelect" class="form-control" required>
                                        <option value="">-- Pilih Template --</option>
                                        @foreach($templates as $t)
                                            <option value="{{ $t->id }}" data-vars="{{ $t->variable_count }}" data-labels="{{ json_encode($t->variable_labels ?? []) }}" data-body="{{ e($t->body_text) }}" data-category="{{ $t->category }}">
                                                [{{ $t->category }}] {{ $t->name }} ({{ $t->variable_count }} var)
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- Template preview --}}
                            <div id="templatePreview" class="alert alert-light border d-none">
                                <strong>Preview Template:</strong>
                                <pre id="templateBody" class="mb-0 mt-1" style="white-space:pre-wrap;"></pre>
                                <small class="text-muted">Kategori: <span id="templateCategory"></span> | Variabel: <span id="templateVarCount"></span></small>
                            </div>

                            <hr>
                            <h5><i class="fas fa-users"></i> Data Penerima</h5>
                            <p class="text-muted">
                                Upload data atau input manual. Format kolom: <code>nomor_hp_penerima, var1, var2, var3, ...</code> sesuai jumlah variabel template.
                            </p>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label>Upload Excel/CSV</label>
                                    <input type="file" id="fileUpload" class="form-control" accept=".csv,.xlsx,.xls">
                                    <small class="text-muted">Kolom: nomor_hp_penerima, var1, var2, ... (header row wajib)</small>
                                </div>
                                <div class="col-md-2 d-flex align-items-end">
                                    <button type="button" id="btnParseFile" class="btn btn-outline-info btn-block">
                                        <i class="fas fa-file-upload"></i> Parse File
                                    </button>
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button type="button" id="btnAddRow" class="btn btn-outline-success btn-block">
                                        <i class="fas fa-plus"></i> Tambah Baris Manual
                                    </button>
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button type="button" id="btnDownloadTemplate" class="btn btn-outline-secondary btn-block">
                                        <i class="fas fa-download"></i> Download Template CSV
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-bordered table-sm" id="recipientTable">
                                    <thead class="thead-light">
                                        <tr id="recipientHeader">
                                            <th width="5%">No</th>
                                            <th>No. HP Penerima</th>
                                            {{-- Variable columns will be added dynamically --}}
                                            <th width="5%">Hapus</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recipientBody"></tbody>
                                </table>
                            </div>

                            <div class="mt-2">
                                <strong>Total Penerima: <span id="totalRecipients">0</span></strong>
                            </div>

                            <hr>
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fab fa-whatsapp"></i> Simpan & Kirim
                            </button>
                            <a href="{{ route('wa-broadcasts.index') }}" class="btn btn-outline-secondary btn-lg">Batal</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- SheetJS for Excel parsing --}}
<script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
<script>
$(function() {
    var varCount = 0;
    var varLabels = [];

    // Template select change
    $('#templateSelect').on('change', function() {
        var opt = $(this).find(':selected');
        varCount = parseInt(opt.data('vars')) || 0;
        varLabels = opt.data('labels') || [];
        var body = opt.data('body') || '';
        var category = opt.data('category') || '';

        if (body) {
            $('#templatePreview').removeClass('d-none');
            $('#templateBody').text(body);
            $('#templateCategory').text(category);
            $('#templateVarCount').text(varCount);
        } else {
            $('#templatePreview').addClass('d-none');
        }

        rebuildTableHeader();
        $('#recipientBody').empty();
        updateTotal();
    });

    function rebuildTableHeader() {
        var header = '<th width="5%">No</th><th>No. HP Penerima</th>';
        for (var i = 1; i <= varCount; i++) {
            var label = (varLabels && varLabels[i - 1]) ? varLabels[i - 1] : 'var' + i;
            header += '<th>' + label + '</th>';
        }
        header += '<th width="5%">Hapus</th>';
        $('#recipientHeader').html(header);
    }

    function addRow(phone, vars) {
        var idx = $('#recipientBody tr').length + 1;
        var row = '<tr><td>' + idx + '</td>';
        row += '<td><input type="text" class="form-control form-control-sm r-phone" value="' + (phone || '') + '"></td>';
        for (var i = 1; i <= varCount; i++) {
            var val = (vars && vars['var' + i]) ? vars['var' + i] : '';
            row += '<td><input type="text" class="form-control form-control-sm r-var" data-var="' + i + '" value="' + val + '"></td>';
        }
        row += '<td><button type="button" class="btn btn-xs btn-danger btn-remove-row"><i class="fas fa-times"></i></button></td>';
        row += '</tr>';
        $('#recipientBody').append(row);
        updateTotal();
    }

    function updateTotal() {
        $('#totalRecipients').text($('#recipientBody tr').length);
    }

    // Add row manually
    $('#btnAddRow').on('click', function() {
        if (!varCount && !$('#templateSelect').val()) {
            Swal.fire({ icon: 'warning', text: 'Pilih template terlebih dahulu.' });
            return;
        }
        addRow('', {});
    });

    // Remove row
    $(document).on('click', '.btn-remove-row', function() {
        $(this).closest('tr').remove();
        // Re-number
        $('#recipientBody tr').each(function(i) { $(this).find('td:first').text(i + 1); });
        updateTotal();
    });

    // Parse uploaded file
    $('#btnParseFile').on('click', function() {
        var file = $('#fileUpload')[0].files[0];
        if (!file) { Swal.fire({ icon: 'warning', text: 'Pilih file terlebih dahulu.' }); return; }
        if (!$('#templateSelect').val()) { Swal.fire({ icon: 'warning', text: 'Pilih template terlebih dahulu.' }); return; }

        var reader = new FileReader();
        reader.onload = function(e) {
            var data = new Uint8Array(e.target.result);
            var workbook = XLSX.read(data, { type: 'array' });
            var sheet = workbook.Sheets[workbook.SheetNames[0]];
            var json = XLSX.utils.sheet_to_json(sheet, { defval: '' });

            $('#recipientBody').empty();
            json.forEach(function(row) {
                var phone = row['nomor_hp_penerima'] || row['phone'] || row['no_hp'] || Object.values(row)[0] || '';
                var vars = {};
                for (var i = 1; i <= varCount; i++) {
                    vars['var' + i] = row['var' + i] || row['variable_' + i] || Object.values(row)[i] || '';
                }
                addRow(String(phone), vars);
            });
        };
        reader.readAsArrayBuffer(file);
    });

    // Download CSV template
    $('#btnDownloadTemplate').on('click', function() {
        if (!$('#templateSelect').val()) { Swal.fire({ icon: 'warning', text: 'Pilih template terlebih dahulu.' }); return; }
        var headers = ['nomor_hp_penerima'];
        for (var i = 1; i <= varCount; i++) headers.push('var' + i);
        var csv = headers.join(',') + '\n08123456789';
        for (var i = 1; i <= varCount; i++) csv += ',contoh_' + i;
        csv += '\n';

        var blob = new Blob([csv], { type: 'text/csv' });
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url; a.download = 'template_broadcast.csv'; a.click();
    });

    // Submit form
    $('#form-broadcast').on('submit', function(e) {
        e.preventDefault();
        var rows = [];
        $('#recipientBody tr').each(function() {
            var phone = $(this).find('.r-phone').val();
            if (!phone) return;
            var obj = { phone: phone };
            $(this).find('.r-var').each(function() {
                obj['var' + $(this).data('var')] = $(this).val();
            });
            rows.push(obj);
        });

        if (rows.length === 0) {
            Swal.fire({ icon: 'warning', text: 'Tambahkan minimal 1 penerima.' });
            return;
        }

        Swal.fire({
            icon: 'question',
            title: 'Kirim Broadcast?',
            text: 'Pesan akan dikirim ke ' + rows.length + ' penerima. Lanjutkan?',
            showCancelButton: true,
            confirmButtonText: 'Ya, Kirim',
            cancelButtonText: 'Batal',
        }).then(function(result) {
            if (!result.isConfirmed) return;

            $('#loaderaditdinda').show();
            var formData = {
                _token: '{{ csrf_token() }}',
                title: $('[name=title]').val(),
                wa_template_id: $('[name=wa_template_id]').val(),
                recipients: JSON.stringify(rows),
            };

            $.ajax({
                type: 'POST',
                url: '{{ route("wa-broadcasts.store", 0) }}',
                data: formData,
                dataType: 'json'
            }).done(function(data) {
                Swal.fire({ icon: data[0], text: data[1], confirmButtonColor: '#6c757d' }).then(function(r) {
                    if (r.isConfirmed && data[0] === 'success') window.location = '{{ route("wa-broadcasts.index") }}';
                });
            }).fail(function(xhr) {
                var msg = xhr.responseJSON?.[1] || xhr.responseJSON?.message || 'Terjadi kesalahan.';
                Swal.fire({ icon: 'error', text: msg });
            }).always(function() { $('#loaderaditdinda').hide(); });
        });
    });
});
</script>
@endsection