@extends('layouts/contentLayoutMaster')

@section('title', $workflow->name)

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
@endsection

@section('content')
    @php
        $trigger = $workflow->triggers->first();
    @endphp
    <section id="workflow-show">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <div>
                <h3 class="mb-25">{{ $workflow->name }}</h3>
                {!! $workflow->getStatusBadge() !!}
            </div>
            <div>
                <a href="{{ route('customer.workflows.builder', $workflow->uid) }}" class="btn btn-outline-primary">
                    <i data-feather="share-2"></i> {{ __('locale.workflows.flow_builder') }}
                </a>
                <a href="{{ route('customer.workflows.edit', $workflow->uid) }}" class="btn btn-primary">
                    <i data-feather="edit"></i> {{ __('locale.buttons.edit') }}
                </a>
                <a href="{{ route('customer.workflows.index') }}" class="btn btn-outline-secondary">{{ __('locale.buttons.back') }}</a>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted mb-25">{{ __('locale.workflows.runs') }}</p>
                        <h3 class="mb-0">{{ $workflow->total_runs }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted mb-25">{{ __('locale.labels.success') }}</p>
                        <h3 class="mb-0">{{ $workflow->total_success }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted mb-25">{{ __('locale.labels.failed') }}</p>
                        <h3 class="mb-0">{{ $workflow->total_failed }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('locale.workflows.overview') }}</h4>
            </div>
            <div class="card-body">
                <p class="mb-50"><strong>{{ __('locale.workflows.trigger') }}:</strong>
                    {{ $trigger ? __('locale.workflows.trigger_'.$trigger->type) : __('locale.labels.none') }}
                </p>
                <p class="mb-50"><strong>{{ __('locale.workflows.actions') }}:</strong> {{ $workflow->actions->count() }}</p>
                <p class="mb-0"><strong>{{ __('locale.workflows.conditions') }}:</strong> {{ count($workflow->conditions ?? []) }}</p>
                @if($workflow->last_error)
                    <p class="text-danger mt-1 mb-0">{{ $workflow->last_error }}</p>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h4 class="card-title">{{ __('locale.workflows.logs') }}</h4>
            </div>
            <div class="card-body">
                <table class="table datatables-workflow-logs table-sm mb-0">
                    <thead>
                    <tr>
                        <th>{{ __('locale.labels.phone') }}</th>
                        <th>{{ __('locale.workflows.trigger') }}</th>
                        <th>{{ __('locale.workflows.action_type') }}</th>
                        <th>{{ __('locale.labels.status') }}</th>
                        <th>{{ __('locale.labels.message') }}</th>
                        <th>{{ __('locale.labels.created_at') }}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </section>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.min.js')) }}"></script>
@endsection

@section('page-script')
    <script>
        (function ($) {
            $('.datatables-workflow-logs').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: @json(route('customer.workflows.logs', $workflow->uid)),
                    type: 'POST',
                    data: { _token: $('meta[name="csrf-token"]').attr('content') }
                },
                columns: [
                    { data: 'contact', orderable: false },
                    { data: 'trigger_type' },
                    { data: 'action_type' },
                    { data: 'status', orderable: false },
                    { data: 'message', orderable: false },
                    { data: 'created_at' }
                ],
                order: [[5, 'desc']]
            });
        })(jQuery);
    </script>
@endsection