@extends('layouts.admin')

@section('style')
    <style>
        /* reach: the page's one headline — what share of the base is actually on WhatsApp */
        .wa-reach__eyebrow {
            letter-spacing: .08em;
        }

        .wa-reach__headline {
            font-size: clamp(1.25rem, 2.4vw, 1.75rem);
            font-weight: 300;
            line-height: 1.3;
        }

        .wa-reach__figure {
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .wa-reach__bar {
            height: .5rem;
            background-color: #e3e6ea;
        }

        .wa-reach__legend i {
            font-size: .5rem;
            vertical-align: middle;
        }

        .wa-dot-empty {
            color: #ced4da;
        }

        /* toolbar: one row instead of four scattered controls */
        .wa-controls {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            gap: .75rem;
        }

        .wa-controls .dataTables_length,
        .wa-controls .dataTables_filter {
            margin: 0;
        }

        .wa-controls .dataTables_filter {
            text-align: left;
        }

        @media (min-width: 992px) {
            .wa-controls {
                justify-content: flex-end;
            }
        }

        .wa-search-note {
            font-size: 85%;
        }

        /* records that can't be synced recede, so the workable rows are what you see */
        .wa-table tbody tr.wa-row-blocked td {
            color: #8a939b;
        }

        .wa-table tbody td,
        .wa-table thead th {
            vertical-align: middle;
        }

        .wa-table thead th {
            border-top: 0;
            font-size: 85%;
            letter-spacing: .03em;
            text-transform: uppercase;
            color: #6c757d;
        }

        .wa-uid {
            font-size: 92%;
        }

        /* one shape for both states — filled means on the platform, hollow means not yet.
           equal width so the column scans as a column instead of ragged text */
        .wa-pill {
            display: inline-block;
            min-width: 88px;
            padding: .3em .75em;
            border: 1px solid transparent;
            border-radius: 10rem;
            font-size: 82%;
            font-weight: 600;
            line-height: 1.4;
        }

        .wa-pill--on {
            color: #fff;
            background-color: #28a745;
            border-color: #28a745;
        }

        .wa-pill--off {
            color: #6c757d;
            background-color: transparent;
            border-color: #ced4da;
        }
    </style>
@endSection

@section('content')

    <div class="container-fluid mb-3">
        <div class="card card-outline card-success shadow-sm mb-3">
            <div class="card-body">
                <div class="text-muted text-uppercase small wa-reach__eyebrow">WhatsApp reach</div>

                <h2 class="wa-reach__headline mt-1 mb-3">
                    <span class="wa-reach__figure">{{ number_format($stats['synced']) }}</span>
                    of
                    <span class="wa-reach__figure">{{ number_format($stats['members']) }}</span>
                    members are on WhatsApp
                </h2>

                <div class="progress wa-reach__bar mb-2">
                    {{-- keep a hairline visible for a tiny non-zero share, but leave zero truly empty --}}
                    <div class="progress-bar bg-success" role="progressbar"
                         aria-label="Share of members synced to WhatsApp"
                         aria-valuenow="{{ round($stats['synced_pct']) }}" aria-valuemin="0" aria-valuemax="100"
                         style="width: {{ $stats['synced'] ? max($stats['synced_pct'], 0.75) : 0 }}%"></div>
                </div>

                <div class="d-flex flex-wrap wa-reach__legend small">
                    <span class="mr-4">
                        <i class="fas fa-circle text-success"></i>
                        {{ number_format($stats['synced']) }} synced
                    </span>
                    <span class="mr-4">
                        <i class="fas fa-circle wa-dot-empty"></i>
                        {{ number_format($stats['not_synced']) }} not synced
                    </span>
                    <span class="text-muted ml-auto">
                        Members without a name or a usable number can't be synced.
                    </span>
                </div>
            </div>
        </div>
    </div>

    @component('admin.components.tabs')
        <table id="member_directory" class="table table-hover dataTable wa-table"></table>
    @endcomponent

    <div class="modal fade" id="wa_sync_modal" tabindex="-1" role="dialog"
         aria-labelledby="wa_sync_modal_title" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="wa_sync_modal_title">Sync to WhatsApp</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Register <strong id="wa_sync_modal_count">0 members</strong> on the WhatsApp messaging
                        platform?</p>
                    <p class="text-muted mb-0">This creates their messaging record only — no message is sent.
                        Members already registered are left as they are.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-sm btn-success" id="wa_sync_confirm">
                        <i class="fab fa-whatsapp"></i> Sync to WhatsApp
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script>
        $(function () {
            function esc(v) {
                return $('<i>').text(v == null ? '' : v).html();
            }

            function flag(text, hint) {
                return '<span class="badge badge-light border text-muted" title="' + esc(hint) + '">'
                    + esc(text) + '</span>';
            }

            // the messaging platform needs a name and a dialable number
            function blocked(row) {
                return !row.has_name || !row.mobile_intact;
            }

            // nothing to do for a member already on the platform
            function selectable(row) {
                return !blocked(row) && !row.whatsapp_synced_at;
            }

            var table = $('#member_directory').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! route('admin.ajax_get_list_users.general') !!}',
                },
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
                dom:
                    "<'row px-3 pt-3 align-items-end'" +
                    "<'#wa_sync_action.col-lg-5 mb-2'>" +
                    "<'col-lg-7 mb-2 wa-controls'lfB>" +
                    ">" +
                    "<'row'<'col-12'tr>>" +
                    "<'row px-3 py-2 align-items-center'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default',
                    exportOptions: {columns: ':gt(0)'}
                }],
                columns: [
                    {
                        data: 'user_uid', name: 'user_uid', width: '36px',
                        title: '<input type="checkbox" id="wa_sync_all" aria-label="Select all members on this page">',
                        render: function (uid, type, row) {
                            if (row.whatsapp_synced_at) {
                                return '<input type="checkbox" disabled title="Already synced"' +
                                    ' aria-label="Already synced">';
                            }
                            if (blocked(row)) {
                                return '<input type="checkbox" disabled title="Incomplete record"' +
                                    ' aria-label="Cannot sync — incomplete record">';
                            }
                            return $('<input type="checkbox" class="wa-sync-row" aria-label="Select member">')
                                .val(uid == null ? '' : uid).prop('outerHTML');
                        }
                    },
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', title: 'No.', width: '56px'},
                    {
                        data: 'user_uid', name: 'user_uid', title: 'User UID', width: '150px',
                        render: function (v, type) {
                            return type !== 'display' ? v : '<span class="text-monospace wa-uid">' + esc(v) + '</span>';
                        }
                    },
                    {
                        data: 'name', name: 'name', title: 'Name',
                        render: function (v, type, row) {
                            if (type !== 'display') return v;
                            return row.has_name ? esc(v) : flag('No name', 'No name on file — cannot sync');
                        }
                    },
                    {
                        data: 'mobile', name: 'mobile', title: 'Mobile Number', width: '190px',
                        render: function (v, type, row) {
                            if (type !== 'display') return v;
                            return row.mobile_intact
                                ? esc(v)
                                : flag('No number', 'No usable number on file — cannot sync');
                        }
                    },
                    {
                        data: 'whatsapp_synced_at', name: 'whatsapp_synced_at', title: 'WhatsApp',
                        width: '130px', orderable: false, searchable: false,
                        render: function (v, type) {
                            if (type !== 'display') return v;
                            return v
                                ? '<span class="wa-pill wa-pill--on" title="Last synced ' + esc(v) + '">Synced</span>'
                                : '<span class="wa-pill wa-pill--off" title="Not yet registered on the' +
                                ' messaging platform">Not synced</span>';
                        }
                    },
                    {data: 'created_at', name: 'created_at', title: 'Registration Date', width: '170px'},
                    {
                        data: 'user_last_active_timestamp', name: 'user_last_active_timestamp',
                        title: 'Last Active Date', width: '170px',
                        visible: {{ $bool = boolToInt($dsc_module) }}, searchable: {{ $bool }}, orderable: {{ $bool }}
                    },
                ],
                columnDefs: [{
                    targets: [0, 1, 2, 5, 6, 7],
                    className: 'dt-center'
                }, {
                    targets: [0, 1],
                    searchable: false,
                    orderable: false,
                }, {
                    targets: [2, 3, 4],
                    orderable: false,
                }],
                order: [[6, 'desc']],
                autoWidth: false,
                createdRow: function (row, data) {
                    // only incomplete records recede — a synced member is a result, not a problem
                    if (blocked(data)) {
                        $(row).addClass('wa-row-blocked');
                    }
                },
                // ponytail: selection covers the current page only, and resets on redraw.
                drawCallback: function () {
                    refreshAction();
                }
            });

            $('#wa_sync_action').html(
                '<button type="button" id="wa_sync_btn" class="btn btn-sm btn-success" disabled>' +
                '<i class="fab fa-whatsapp"></i> Sync to WhatsApp</button>' +
                '<span id="wa_sync_status" class="ml-2 align-middle text-muted"></span>'
            );

            // the masking rule matters at the moment you search, so it lives under the search box
            $('#member_directory_filter').parent().append(
                '<small class="wa-search-note text-muted w-100 text-lg-right">' +
                'Names and numbers are masked. Search matches the full value — type a complete mobile number ' +
                'or email address.</small>'
            );

            function selected() {
                return $('#member_directory tbody .wa-sync-row:checked');
            }

            function refreshAction() {
                var $rows = $('#member_directory tbody .wa-sync-row');
                var count = selected().length;

                $('#wa_sync_all').prop({
                    checked: $rows.length > 0 && count === $rows.length,
                    indeterminate: count > 0 && count < $rows.length
                });
                $('#wa_sync_btn').prop('disabled', count === 0);
                $('#wa_sync_status').text(count ? count + ' selected' : '');
            }

            $('#member_directory').on('click', '#wa_sync_all', function () {
                $('#member_directory tbody .wa-sync-row').prop('checked', this.checked);
                refreshAction();
            });

            $('#member_directory').on('change', '.wa-sync-row', refreshAction);

            $('#wa_sync_btn').on('click', function () {
                var count = selected().length;
                if (!count) {
                    return;
                }

                $('#wa_sync_modal_count').text(count === 1 ? '1 member' : count + ' members');
                $('#wa_sync_modal').modal('show');
            });

            $('#wa_sync_confirm').on('click', function () {
                var uids = selected().map(function () {
                    return this.value;
                }).get();

                $('#wa_sync_modal').modal('hide');

                if (!uids.length) {
                    return;
                }

                var $btn = $('#wa_sync_btn').prop('disabled', true);
                $('#wa_sync_status').removeClass('text-danger').addClass('text-muted').text('Syncing…');

                $.ajax({
                    url: '{!! route('admin.whatsapp_sync.post') !!}',
                    method: 'POST',
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    data: {user_uids: uids}
                }).done(function (res) {
                    var parts = [res.synced + ' synced'];
                    if (res.already_synced) parts.push(res.already_synced + ' already synced');
                    if (res.failed) parts.push(res.failed + ' failed');
                    if (res.no_name) parts.push(res.no_name + ' skipped, no name');
                    if (res.bad_mobile) parts.push(res.bad_mobile + ' skipped, no number');
                    if (res.not_found) parts.push(res.not_found + ' not found');

                    // redraw so the WhatsApp column reflects what just happened;
                    // drawCallback clears the selection, so set the status text after it
                    $('#member_directory').one('draw.dt', function () {
                        $('#wa_sync_status').text(parts.join(', '));
                    });
                    table.ajax.reload(null, false);
                }).fail(function (xhr) {
                    $('#wa_sync_status').removeClass('text-muted').addClass('text-danger')
                        .text(xhr.status === 422
                            ? 'Select between 1 and 200 members.'
                            : 'Sync failed. Try again, or check the messaging service.');
                }).always(function () {
                    $btn.prop('disabled', false);
                });
            });
        });
    </script>
@endSection