@extends('layout.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <h3 class="card-title mb-0">Fiber Return API</h3>
        </div>
        <div class="card-body">

            <p class="text-muted">
                What happens when a customer is transferred to <strong>Fiber</strong>: a closing ticket is
                raised here, then the returns application is asked to open the matching return.
            </p>

            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-uppercase text-muted">Ticket</h6>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <th style="width:45%">Status</th>
                                <td>
                                    @if ($config['token_enabled'])
                                        <span class="badge badge-success">Enabled</span>
                                    @else
                                        <span class="badge badge-secondary">Disabled</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>CRM setting</th>
                                <td>{{ $config['crm_enabled'] ? 'enable' : 'disable' }}</td>
                            </tr>
                            <tr>
                                <th>Token code</th>
                                <td>
                                    @if ($config['token_code'])
                                        {{ $config['token_code'] }}
                                        <small class="text-muted">(id {{ $config['token_code_id'] }})</small>
                                    @elseif ($config['token_code_id'])
                                        <span class="text-danger">id {{ $config['token_code_id'] }} no longer exists</span>
                                    @else
                                        <span class="text-muted">not set</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Description</th>
                                <td>{{ $config['token_desc'] ?: '—' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="col-md-6">
                    <h6 class="text-uppercase text-muted">Returns API</h6>
                    <table class="table table-sm table-bordered">
                        <tbody>
                            <tr>
                                <th style="width:45%">Status</th>
                                <td>
                                    @if ($config['api_enabled'])
                                        <span class="badge badge-success">Enabled</span>
                                    @else
                                        <span class="badge badge-secondary">Disabled</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Auto create setting</th>
                                <td>
                                    @if ($config['auto_enabled'])
                                        <span class="badge badge-success">on</span>
                                    @else
                                        <span class="badge badge-warning">off</span>
                                        <small class="text-muted d-block">A Fiber transfer sends nothing while this is off.</small>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Endpoint</th>
                                <td class="text-break">{{ $config['full_url'] ?: '—' }}</td>
                            </tr>
                            <tr>
                                <th>API key</th>
                                <td>
                                    @if ($config['key_set'])
                                        <code>{{ $config['key_hint'] }}</code>
                                        <small class="text-muted">({{ $config['key_length'] }} chars)</small>
                                    @else
                                        <span class="text-muted">not set</span>
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>client_type_id</th>
                                <td>{{ $config['client_type_id'] }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <hr>

            <h6 class="text-uppercase text-muted">Send a test request</h6>

            <div class="row">
                <div class="col-md-5">
                    <label>Client ID</label>
                    <div class="input-group input-group-sm">
                        <input type="text" id="fr_client_id" class="form-control" value="999999999"
                            autocomplete="off">
                        <div class="input-group-append">
                            <button type="button" id="fr_test_btn" class="btn btn-info">Send</button>
                        </div>
                    </div>
                    <small class="text-muted">
                        <strong>999999999</strong> cannot match a customer, so the request is answered
                        without creating anything. A real client id <strong>will</strong> create a real
                        return on the returns application.
                    </small>
                </div>
            </div>

            <div id="fr_result" class="mt-3"></div>

        </div>
    </div>
@endsection

@section('ajax')
    <script>
        $(function() {
            var $btn = $('#fr_test_btn');
            var $out = $('#fr_result');

            // What each stage means, so the page says where the chain stopped rather
            // than leaving a status code to be interpreted.
            var STAGES = {
                config: ['secondary', 'Not configured', 'Set FIBER_RETURN_API_URL and FIBER_RETURN_API_KEY in .env.'],
                transport: ['danger', 'Unreachable', 'The request never got a reply. Check the host, DNS and TLS.'],
                route: ['danger', 'Route not found', 'The URL is wrong. Fix FIBER_RETURN_API_ENDPOINT.'],
                auth: ['danger', 'Unauthorized', 'The API key was rejected, or the returns app has none configured.'],
                validation: ['warning', 'Rejected', 'The returns app refused the payload.'],
                lookup: ['warning', 'No client found', 'Reached the returns app and it authenticated us, but it holds no client with this client_type_id and client_id.'],
                no_items: ['info', 'Nothing to return', 'The returns app knows this customer but has no returnable items recorded for them, so there was nothing to open a return for. Connection, key and lookup are all working.'],
                created: ['success', 'Created', 'The return was created on the returns application.'],
                other: ['danger', 'Failed', 'The returns app answered with an error.']
            };

            function esc(v) {
                return $('<div>').text(v === null || v === undefined ? '' : v).html();
            }

            function row(label, value) {
                return '<tr><th style="width:22%">' + esc(label) + '</th><td class="text-break">' + value + '</td></tr>';
            }

            $btn.on('click', function() {
                var original = $btn.text();
                $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');
                $out.html('');

                $.ajax({
                    url: '{{ route('system.fiber-return-api.test') }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        client_id: $('#fr_client_id').val()
                    },
                    success: function(res) {
                        var stage = STAGES[res.stage] || STAGES.other;
                        var html = '';

                        // The test always runs; this only says whether a real transfer
                        // would have sent anything.
                        if (res.setting_off) {
                            html += '<div class="alert alert-warning">' +
                                '<strong>Setting is off</strong> &mdash; this test ran, but a real ' +
                                'Fiber transfer would send nothing. Turn on ' +
                                '<code>fiber-return-auto-create</code> in Global Settings.</div>';
                        }

                        html += '<div class="alert alert-' + stage[0] + '">' +
                            '<strong>' + esc(stage[1]) + '</strong> &mdash; ' + esc(stage[2]) + '</div>';

                        html += '<table class="table table-sm table-bordered"><tbody>';
                        if (res.status) {
                            html += row('HTTP status', '<span class="badge badge-' + stage[0] + '">' + esc(res.status) + '</span>');
                        }
                        if (res.message) {
                            html += row('Message', esc(res.message));
                        }
                        if (res.url) {
                            html += row('URL', '<code>' + esc(res.url) + '</code>');
                        }
                        if (res.payload) {
                            html += row('Sent', '<pre class="mb-0 small">' + esc(JSON.stringify(res.payload, null, 2)) + '</pre>');
                        }
                        if (res.body !== undefined && res.body !== null) {
                            var body = typeof res.body === 'string' ? res.body : JSON.stringify(res.body, null, 2);
                            html += row('Response', '<pre class="mb-0 small">' + esc(body) + '</pre>');
                        }
                        if (res.duration !== undefined) {
                            html += row('Took', esc(res.duration) + ' ms');
                        }
                        html += '</tbody></table>';

                        $out.html(html);
                    },
                    error: function(xhr) {
                        $out.html('<div class="alert alert-danger mb-0">Request failed: ' +
                            esc(xhr.status + ' ' + xhr.statusText) + '</div>');
                    },
                    complete: function() {
                        $btn.prop('disabled', false).text(original);
                    }
                });
            });
        });
    </script>
@endsection