@extends('layout.app')
@section('content')
    <div class="col-md-12 col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ $title }}</h3></br>
                <div class="col">
                    <a class="right btn btn-default btn-flat" href="{{ route('zns-templates.index') }}">
                        <i class="fa fa-list"></i> Danh sách mẫu tin
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    Nhà cung cấp đang dùng: <b>{{ $driverLabel }}</b>.
                    Tin gửi thử đi thẳng tới nhà cung cấp (không qua hàng đợi) nên <b>vẫn tính phí</b> như tin thật.
                </div>

                <div class="row">
                    <div class="col-md-4 col-xs-12">
                        <div class="form-group">
                            <label class="control-label required">Mẫu tin</label>
                            <select class="form-control" id="test-template">
                                <option value="">-- Chọn mẫu tin --</option>
                                @foreach($templates as $template)
                                    <option value="{{ $template->id }}">
                                        [{{ $template->event_label }}] {{ $template->name }}
                                        @if($template->status != \App\Constants\StatusCode::ON) (đang tắt) @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 col-xs-12">
                        <div class="form-group">
                            <label class="control-label">Tìm khách hàng theo</label>
                            <select class="form-control" id="test-search-by">
                                <option value="phone">Số điện thoại</option>
                                <option value="account_code">Mã khách hàng</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-5 col-xs-12">
                        <div class="form-group">
                            <label class="control-label required">Giá trị tìm kiếm</label>
                            <input type="text" class="form-control" id="test-keyword" placeholder="VD: 0975091435">
                        </div>
                    </div>
                    <div class="col-md-5 col-xs-12">
                        <div class="form-group">
                            <label class="control-label">Gửi tới số khác (tuỳ chọn)</label>
                            <input type="text" class="form-control" id="test-phone-override"
                                   placeholder="Để trống = gửi tới SĐT của khách hàng">
                            <span class="help-block">Nhập số của bạn để test mà không làm phiền khách hàng</span>
                        </div>
                    </div>
                    <div class="col-md-7 col-xs-12">
                        <div class="form-group">
                            <label class="control-label">&nbsp;</label><br>
                            <button type="button" class="btn btn-primary" id="btn-preview">
                                <i class="fa fa-search"></i> Xem trước dữ liệu
                            </button>
                            <button type="button" class="btn btn-success" id="btn-send" disabled>
                                <i class="fa fa-paper-plane"></i> Gửi thử
                            </button>
                        </div>
                    </div>
                </div>

                <div id="test-result" style="display:none">
                    <hr>
                    <div id="test-alert"></div>
                    <div class="row">
                        <div class="col-md-5 col-xs-12">
                            <h4>Khách hàng</h4>
                            <table class="table table-bordered">
                                <tbody id="test-customer"></tbody>
                            </table>
                        </div>
                        <div class="col-md-7 col-xs-12">
                            <h4>Dữ liệu gửi đi (TempData)</h4>
                            <table class="table table-bordered">
                                <thead class="bg-info text-white">
                                <tr>
                                    <th style="width: 35%">Tên params</th>
                                    <th>Giá trị</th>
                                </tr>
                                </thead>
                                <tbody id="test-data"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('_script')
    <script>
        var znsPreviewUrl = '{{ route('zns-templates.testPreview') }}';
        var znsSendUrl = '{{ route('zns-templates.testSend') }}';

        function znsPayload() {
            return {
                _token: '{{ csrf_token() }}',
                template_id: $('#test-template').val(),
                search_by: $('#test-search-by').val(),
                keyword: $('#test-keyword').val(),
                phone_override: $('#test-phone-override').val()
            };
        }

        function escapeHtml(text) {
            return $('<div>').text(text === null ? '' : text).html();
        }

        function znsAlert(type, message) {
            $('#test-alert').html('<div class="alert alert-' + type + '">' + escapeHtml(message) + '</div>');
            $('#test-result').show();
        }

        function renderResult(res) {
            var notes = [];
            if (res.sample && res.sample.length) {
                notes.push('Khách hàng chưa có dữ liệu thật cho: ' + res.sample.join(', ')
                    + ' → đang dùng dữ liệu mẫu.');
            }
            if (res.missing && res.missing.length) {
                notes.push('Tham số bắt buộc đang rỗng: ' + res.missing.join(', ')
                    + '. Luồng gửi tự động sẽ bỏ qua tin này.');
            }
            $('#test-alert').html(notes.length
                ? '<div class="alert alert-warning">' + notes.map(escapeHtml).join('<br>') + '</div>'
                : '<div class="alert alert-success">Dữ liệu đầy đủ, sẵn sàng gửi.</div>');

            var c = res.customer;
            $('#test-customer').html(
                '<tr><th style="width:40%">Họ tên</th><td>' + escapeHtml(c.full_name) + '</td></tr>' +
                '<tr><th>SĐT khách hàng</th><td>' + escapeHtml(c.phone) + '</td></tr>' +
                '<tr><th>Mã khách hàng</th><td>' + escapeHtml(c.account_code) + '</td></tr>' +
                '<tr><th>Sự kiện</th><td>' + escapeHtml(res.event) + '</td></tr>' +
                '<tr><th>Template ID</th><td>' + escapeHtml(res.template_id) + '</td></tr>' +
                '<tr><th>Số nhận tin</th><td><b>' + escapeHtml(res.phone) + '</b></td></tr>'
            );

            var rows = '';
            $.each(res.data, function (key, value) {
                rows += '<tr><td><code>' + escapeHtml(key) + '</code></td><td>' +
                    (value === '' ? '<span class="text-muted">(rỗng)</span>' : escapeHtml(value)) +
                    '</td></tr>';
            });
            $('#test-data').html(rows || '<tr><td colspan="2" class="text-center">Mẫu tin chưa định nghĩa tham số</td></tr>');
            $('#test-result').show();
        }

        function znsRequest(url, done) {
            $.ajax({url: url, method: 'post', data: znsPayload()})
                .done(done)
                .fail(function (xhr) {
                    var res = xhr.responseJSON || {};
                    znsAlert('danger', res.message || 'Có lỗi xảy ra, vui lòng thử lại');
                    $('#btn-send').prop('disabled', true);
                });
        }

        $('#btn-preview').on('click', function () {
            znsRequest(znsPreviewUrl, function (res) {
                renderResult(res);
                $('#btn-send').prop('disabled', false);
            });
        });

        $('#btn-send').on('click', function () {
            if (!confirm('Gửi tin thật tới số này? Tin gửi thử vẫn bị tính phí.')) {
                return;
            }
            var $btn = $(this).prop('disabled', true);
            znsRequest(znsSendUrl, function (res) {
                renderResult(res);
                znsAlert(res.sent ? 'success' : 'danger', res.message);
                $btn.prop('disabled', false);
            });
        });

        // Đổi tiêu chí tìm kiếm thì đổi gợi ý nhập cho khớp
        $('#test-search-by').on('change', function () {
            $('#test-keyword').attr('placeholder',
                $(this).val() === 'phone' ? 'VD: 0975091435' : 'VD: KH001');
        });
    </script>
@endsection