@section('title', 'Provisionamento')

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/manager-provisioning.css') }}">
@endsection

@include('admin/includes/header')

@php
    $statuses = ['ok' => ['Concluído', 'is-live'], 'partial' => ['Parcial', 'is-wait'], 'fail' => ['Falhou', 'is-off']];
    $total = $summary['ok'] + $summary['partial'] + $summary['fail'];
    $problems = $summary['partial'] + $summary['fail'];
    $isDefault = $filters['days'] === '7' && $filters['action'] === '' && $filters['server'] === '' && $filters['target'] === '' && $filters['status'] === '';
    $withStatus = fn (string $status) => route('admin.provisioning', array_filter(array_merge($filters, ['status' => $status])));
@endphp

<div class="mgr-head">
    <div>
        <h1>Provisionamento</h1>
        <p>Registro das chamadas de provisionamento que o Central faz aos servidores de sites e das falhas das contas de e-mail. Cada linha é uma chamada inteira; a etapa indica onde ela parou.</p>
    </div>
</div>

<form class="plog__filters" method="GET" action="{{ route('admin.provisioning') }}">
    <label class="plog__field">
        <span class="form-label">Período</span>

        <select class="form-select" name="days">
            @foreach($periods as $value => $label)
                <option value="{{ $value }}" @selected($filters['days'] === (string) $value)>{{ $label }}</option>
            @endforeach
        </select>
    </label>

    <label class="plog__field">
        <span class="form-label">Ação</span>

        <select class="form-select" name="action">
            <option value="">Todas</option>

            @foreach($actions as $value => $label)
                <option value="{{ $value }}" @selected($filters['action'] === $value)>{{ $label }}</option>
            @endforeach
        </select>
    </label>

    <label class="plog__field">
        <span class="form-label">Servidor</span>

        <select class="form-select" name="server">
            <option value="">Todos</option>

            @foreach($servers as $value => $label)
                <option value="{{ $value }}" @selected($filters['server'] === (string) $value)>{{ $label }}</option>
            @endforeach
        </select>
    </label>

    <label class="plog__field">
        <span class="form-label">Situação</span>

        <select class="form-select" name="status">
            <option value="">Todas</option>
            <option value="problem" @selected($filters['status'] === 'problem')>Só problemas</option>
            <option value="fail" @selected($filters['status'] === 'fail')>Falhou</option>
            <option value="partial" @selected($filters['status'] === 'partial')>Parcial</option>
            <option value="ok" @selected($filters['status'] === 'ok')>Concluído</option>
        </select>
    </label>

    <label class="plog__field plog__field--wide">
        <span class="form-label">Domínio</span>
        <input class="form-control" type="text" name="target" value="{{ $filters['target'] }}" placeholder="Parte do domínio" autocomplete="off">
    </label>

    <div class="plog__go">
        <button class="btn btn-primary" type="submit">Filtrar</button>

        @unless($isDefault)
            <a class="plog__clear" href="{{ route('admin.provisioning') }}">Limpar</a>
        @endunless
    </div>
</form>

<div class="plog__sum">
    <span class="plog__count">
        <b>{{ $total }}</b> {{ $total === 1 ? 'chamada no período' : 'chamadas no período' }}
    </span>

    <a class="plog__tag app-state is-live{{ $filters['status'] === 'ok' ? ' is-on' : '' }}" href="{{ $withStatus('ok') }}">
        {{ $summary['ok'] }} {{ $summary['ok'] === 1 ? 'concluída' : 'concluídas' }}
    </a>

    <a class="plog__tag app-state is-wait{{ $filters['status'] === 'partial' ? ' is-on' : '' }}" href="{{ $withStatus('partial') }}">
        {{ $summary['partial'] }} {{ $summary['partial'] === 1 ? 'parcial' : 'parciais' }}
    </a>

    <a class="plog__tag app-state is-off{{ $filters['status'] === 'fail' ? ' is-on' : '' }}" href="{{ $withStatus('fail') }}">
        {{ $summary['fail'] }} {{ $summary['fail'] === 1 ? 'falha' : 'falhas' }}
    </a>

    @if($problems > 0 && $filters['status'] !== 'problem')
        <a class="plog__only" href="{{ $withStatus('problem') }}">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span>Ver só os problemas</span>
        </a>
    @endif
</div>

<div class="card">
    @if($logs->count() === 0)
        <p class="plog__empty">Nenhuma chamada registrada com esses filtros.</p>
    @else
        <table class="plog__table">
            <thead>
                <tr>
                    <th>Quando</th>
                    <th>Ação</th>
                    <th>Alvo</th>
                    <th>Servidor</th>
                    <th>Situação</th>
                    <th>Etapa</th>
                    <th class="text-end">Tempo</th>
                </tr>
            </thead>

            <tbody>
                @foreach($logs as $log)
                    @php
                        $when = \Carbon\Carbon::parse($log->created_at);
                        [$label, $tone] = $statuses[$log->status] ?? [$log->status, ''];
                        $took = $log->took_ms === null
                            ? null
                            : ($log->took_ms >= 1000 ? number_format($log->took_ms / 1000, 1, ',', '.') . ' s' : $log->took_ms . ' ms');
                    @endphp

                    <tr class="plog__row" data-log="{{ $log->id }}">
                        <td data-l="Quando">
                            <span class="plog__when" title="{{ $when->format('d/m/Y H:i:s') }}">{{ $when->format('d/m H:i:s') }}</span>
                        </td>

                        <td data-l="Ação">
                            <span class="plog__act">{{ $actions[$log->action] ?? $log->action }}</span>
                        </td>

                        <td data-l="Alvo">
                            <span class="plog__target">{{ $log->target }}</span>

                            @if($log->service_id)
                                <span class="plog__svc">serviço {{ $log->service_id }}</span>
                            @endif
                        </td>

                        <td data-l="Servidor">
                            <span class="plog__srv srv-{{ $log->server_id }}">{{ $servers[$log->server_id] ?? 'Sem servidor' }}</span>
                        </td>

                        <td data-l="Situação">
                            <span class="app-state {{ $tone }}">{{ $label }}</span>
                        </td>

                        <td data-l="Etapa">
                            @if($log->step)
                                <span class="plog__step">{{ $log->step }}</span>
                            @endif

                            @if($log->message)
                                <span class="plog__msg" title="{{ $log->message }}">{{ $log->message }}</span>
                            @endif

                            @if(! $log->step && ! $log->message)
                                <span class="plog__none">sem observação</span>
                            @endif
                        </td>

                        <td data-l="Tempo">
                            <span class="plog__ms">{{ $took ?? '-' }}</span>
                            <i class="fa-solid fa-chevron-down plog__caret"></i>
                        </td>
                    </tr>

                    <tr class="plog__open" id="detail-{{ $log->id }}" hidden>
                        <td colspan="7">
                            <div class="plog__box" id="detail-box-{{ $log->id }}">
                                <span class="plog__loading"><i class="fa-solid fa-circle-notch fa-spin"></i> Carregando...</span>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

{{ $logs->links('vendor.pagination.default') }}

<script>
(function () {
    'use strict';

    var BASE = '{{ url('manager/provisioning') }}';
    var loaded = {};

    function escapeHtml(value) {
        return String(value === null || value === undefined ? '' : value).replace(/[&<>"]/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
        });
    }

    function block(title, data, empty) {
        if (data === null || data === undefined || (typeof data === 'object' && ! Object.keys(data).length)) {
            return '<div class="plog__part"><h3>' + title + '</h3><p class="plog__none">' + empty + '</p></div>';
        }

        return '<div class="plog__part"><h3>' + title + '</h3><pre class="plog__json">'
            + escapeHtml(JSON.stringify(data, null, 2)) + '</pre></div>';
    }

    function draw(box, data) {
        box.innerHTML = block('O que foi enviado', data.payload, 'O pedido não guardou nenhum dado.')
            + block('O que o servidor respondeu', data.response, 'O servidor não chegou a responder.');
    }

    document.addEventListener('click', function (event) {
        var row = event.target.closest('[data-log]');

        if (! row) {
            return;
        }

        var id = row.dataset.log;
        var detail = document.getElementById('detail-' + id);
        var box = document.getElementById('detail-box-' + id);

        detail.hidden = ! detail.hidden;
        row.classList.toggle('is-open', ! detail.hidden);

        if (detail.hidden || loaded[id]) {
            return;
        }

        loaded[id] = true;

        fetch(BASE + '/' + encodeURIComponent(id), {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function (r) {
            return r.ok ? r.json() : null;
        }).then(function (data) {
            if (! data || ! data.ok) {
                box.innerHTML = '<span class="plog__none">Não foi possível carregar o detalhe desta chamada.</span>';
                loaded[id] = false;

                return;
            }

            draw(box, data);
        }).catch(function () {
            box.innerHTML = '<span class="plog__none">Falha de conexão.</span>';
            loaded[id] = false;
        });
    });
}());
</script>

@include('admin/includes/footer')