@extends('layouts.layoutMaster')

@section('title', __('Posting History'))

@section('vendor-style')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
    'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
    'resources/assets/vendor/libs/flatpickr/flatpickr.scss'
])
@endsection

@section('vendor-script')
@vite([
    'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
    'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
    'resources/assets/vendor/libs/flatpickr/flatpickr.js'
])
@endsection

@section('content')
<x-breadcrumb
    :title="__('Posting History')"
    :breadcrumbs="[
        ['name' => __('System Core'), 'url' => route('systemcore.dashboard')],
        ['name' => __('Posting History')]
    ]"
/>

{{-- Statistics Cards --}}
<div class="row mb-4">
    <div class="col-sm-6 col-xl-3 mb-3 mb-xl-0">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-md flex-shrink-0 me-3">
                        <span class="avatar-initial rounded bg-label-primary">
                            <i class="bx bx-transfer-alt"></i>
                        </span>
                    </div>
                    <div>
                        <span class="d-block text-muted">{{ __('Total Postings') }}</span>
                        <h4 class="mb-0" id="stat-total">{{ number_format($statistics['total'] ?? 0) }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-3 mb-xl-0">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-md flex-shrink-0 me-3">
                        <span class="avatar-initial rounded bg-label-success">
                            <i class="bx bx-check-circle"></i>
                        </span>
                    </div>
                    <div>
                        <span class="d-block text-muted">{{ __('Successful') }}</span>
                        <h4 class="mb-0" id="stat-successful">{{ number_format($statistics['successful'] ?? 0) }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-3 mb-xl-0">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-md flex-shrink-0 me-3">
                        <span class="avatar-initial rounded bg-label-danger">
                            <i class="bx bx-x-circle"></i>
                        </span>
                    </div>
                    <div>
                        <span class="d-block text-muted">{{ __('Failed') }}</span>
                        <h4 class="mb-0" id="stat-failed">{{ number_format($statistics['failed'] ?? 0) }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <div class="avatar avatar-md flex-shrink-0 me-3">
                        <span class="avatar-initial rounded bg-label-info">
                            <i class="bx bx-calendar"></i>
                        </span>
                    </div>
                    <div>
                        <span class="d-block text-muted">{{ __("Today's Postings") }}</span>
                        <h4 class="mb-0" id="stat-today">{{ number_format($statistics['today'] ?? 0) }}</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Posting History Table --}}
<div class="card">
    <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
        <h5 class="mb-0">{{ __('Posting History') }}</h5>
        <div class="d-flex flex-wrap gap-2">
            {{-- Module Filter --}}
            <select id="filterModule" class="form-select form-select-sm" style="width: 160px;">
                <option value="">{{ __('All Modules') }}</option>
                @foreach($modules as $module)
                    <option value="{{ $module }}">{{ $module }}</option>
                @endforeach
            </select>

            {{-- Status Filter --}}
            <select id="filterStatus" class="form-select form-select-sm" style="width: 140px;">
                <option value="">{{ __('All Statuses') }}</option>
                <option value="success">{{ __('Success') }}</option>
                <option value="failed">{{ __('Failed') }}</option>
                <option value="pending">{{ __('Pending') }}</option>
            </select>

            {{-- Date Range Filter --}}
            <input type="text" id="filterDateRange" class="form-control form-control-sm" placeholder="{{ __('Select Date Range') }}" style="width: 220px;">

            {{-- Clear Filters --}}
            <button type="button" class="btn btn-sm btn-label-secondary" id="clearFilters">
                <i class="bx bx-reset me-1"></i>{{ __('Clear') }}
            </button>
        </div>
    </div>
    <div class="card-datatable table-responsive">
        <table class="table table-hover" id="postingHistoryTable">
            <thead>
                <tr>
                    <th>{{ __('ID') }}</th>
                    <th>{{ __('Posted At') }}</th>
                    <th>{{ __('Source') }}</th>
                    <th>{{ __('Target') }}</th>
                    <th>{{ __('Action') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th>{{ __('Amount') }}</th>
                    <th>{{ __('Posted By') }}</th>
                    <th>{{ __('Actions') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

{{-- Details Modal --}}
<div class="modal fade" id="detailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('Posting Details') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-muted mb-3">{{ __('Source Information') }}</h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted">{{ __('Module') }}:</td>
                                <td id="detail-source-module">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Entity Type') }}:</td>
                                <td id="detail-source-type">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Entity ID') }}:</td>
                                <td id="detail-source-id">-</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-muted mb-3">{{ __('Target Information') }}</h6>
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted">{{ __('Module') }}:</td>
                                <td id="detail-target-module">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Entity Type') }}:</td>
                                <td id="detail-target-type">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Entity ID') }}:</td>
                                <td id="detail-target-id">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-6">
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted">{{ __('Action') }}:</td>
                                <td id="detail-action">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Status') }}:</td>
                                <td id="detail-status">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Amount') }}:</td>
                                <td id="detail-amount">-</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td class="text-muted">{{ __('Posted By') }}:</td>
                                <td id="detail-posted-by">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Posted At') }}:</td>
                                <td id="detail-posted-at">-</td>
                            </tr>
                            <tr>
                                <td class="text-muted">{{ __('Retry Count') }}:</td>
                                <td id="detail-retry-count">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="mt-3" id="detail-description-section" style="display: none;">
                    <h6 class="text-muted">{{ __('Description') }}</h6>
                    <p id="detail-description" class="mb-0">-</p>
                </div>
                <div class="mt-3" id="detail-error-section" style="display: none;">
                    <h6 class="text-danger">{{ __('Error Message') }}</h6>
                    <div class="alert alert-danger mb-0" id="detail-error-message">-</div>
                </div>
                <div class="mt-3" id="detail-old-values-section" style="display: none;">
                    <h6 class="text-muted">{{ __('Old Values') }}</h6>
                    <pre class="bg-light p-3 rounded mb-0" id="detail-old-values" style="max-height: 200px; overflow: auto;">-</pre>
                </div>
                <div class="mt-3" id="detail-new-values-section" style="display: none;">
                    <h6 class="text-muted">{{ __('New Values') }}</h6>
                    <pre class="bg-light p-3 rounded mb-0" id="detail-new-values" style="max-height: 200px; overflow: auto;">-</pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
                <button type="button" class="btn btn-warning" id="retryFromModal" style="display: none;">
                    <i class="bx bx-refresh me-1"></i>{{ __('Retry') }}
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
const pageData = {
    urls: {
        datatable: @json(route('systemcore.sync.postings')),
        viewDetails: @json(route('systemcore.sync.details', ':id')),
        retry: @json(route('systemcore.sync.retry', ':id')),
        statistics: @json(route('systemcore.sync.statistics.ajax'))
    },
    labels: {
        confirmRetry: @json(__('Are you sure you want to retry this posting?')),
        retryText: @json(__('This will attempt to re-process the failed posting.')),
        yesRetry: @json(__('Yes, retry it!')),
        cancel: @json(__('Cancel')),
        retrySuccess: @json(__('Posting retried successfully')),
        retryError: @json(__('Failed to retry posting')),
        success: @json(__('Success')),
        failed: @json(__('Failed')),
        pending: @json(__('Pending')),
        error: @json(__('Error')),
        genericError: @json(__('Something went wrong')),
        loadingDetails: @json(__('Loading details...')),
        processing: @json(__('Processing...')),
        pleaseWait: @json(__('Please wait while we process your request')),
        searchPlaceholder: @json(__('Search...')),
        lengthMenu: @json(__('Show _MENU_ entries')),
        info: @json(__('Showing _START_ to _END_ of _TOTAL_ entries')),
        infoEmpty: @json(__('No entries to show')),
        infoFiltered: @json(__('(filtered from _MAX_ total entries)')),
        emptyTable: @json(__('No data available')),
        zeroRecords: @json(__('No matching records found')),
        paginate: {
            first: @json(__('First')),
            last: @json(__('Last')),
            next: @json(__('Next')),
            previous: @json(__('Previous'))
        }
    }
};
</script>
@vite(['Modules/SystemCore/resources/assets/js/sync.js'])
@endsection