@extends('layouts.admin')

@section('content')
    <div class="card border-0 shadow-sm">

        <div class="card-header bg-white">
            <h4 class="mb-0">Relograde Sync Logs</h4>
            <small class="text-muted">
                Product Import History
            </small>
        </div>

        <div class="card-body">
            <table id="syncLogTable" class="table table-hover align-middle">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Provider</th>
                        <th>Total</th>
                        <th>Created</th>
                        <th>Updated</th>
                        <th>Failed</th>
                        <th width="100">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="modal fade" id="syncLogModal" tabindex="-1">

        <div class="modal-dialog modal-xl">

            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">
                        Sync Log Details
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>
                </div>

                <div class="modal-body">

                    <div id="syncLogContent"></div>

                </div>

            </div>

        </div>

    </div>
@endsection

@push('scripts')
    <script>
        let table = initDataTable('#syncLogTable', {

            ajax: "{{ route('admin.sync.logs.relograde.data') }}",

            order: [
                [0, 'desc']
            ],

            columns: [{
                    data: 'id'
                },
                {
                    data: 'provider'
                },
                {
                    data: 'total_count'
                },
                {
                    data: 'created_count'
                },
                {
                    data: 'updated_count'
                },
                {
                    data: 'failed_count'
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        $(document).on(
            'click',
            '.viewLog',
            function() {
                let id = $(this).data('id');

                $.get(
                    "{{ route('admin.sync.logs.relograde.view', ':id') }}"
                    .replace(':id', id),

                    function(res) {
                        let html = `

            <table class="table table-bordered">

                <tr>
                    <th width="200">Provider</th>
                    <td>${res.provider}</td>
                </tr>

                <tr>
                    <th>Type</th>
                    <td>${res.type}</td>
                </tr>

                <tr>
                    <th>Entity</th>
                    <td>${res.entity}</td>
                </tr>

                <tr>
                    <th>Status</th>
                    <td>${res.status}</td>
                </tr>

                <tr>
                    <th>Total Count</th>
                    <td>${res.total_count}</td>
                </tr>

                <tr>
                    <th>Created Count</th>
                    <td>${res.created_count}</td>
                </tr>

                <tr>
                    <th>Updated Count</th>
                    <td>${res.updated_count}</td>
                </tr>

                <tr>
                    <th>Skipped Count</th>
                    <td>${res.skipped_count}</td>
                </tr>

                <tr>
                    <th>Failed Count</th>
                    <td>${res.failed_count}</td>
                </tr>

                <tr>
                    <th>Started At</th>
                    <td>${res.started_at ?? '-'}</td>
                </tr>

                <tr>
                    <th>Completed At</th>
                    <td>${res.completed_at ?? '-'}</td>
                </tr>

                <tr>
                    <th>Message</th>
                    <td>${res.message ?? '-'}</td>
                </tr>

            </table>
            `;

                        $('#syncLogContent')
                            .html(html);

                        $('#syncLogModal')
                            .modal('show');
                    }
                );
            });
    </script>
@endpush