@extends('layouts/layoutMaster')

@section('title', 'QuickBooks — Sync Logs')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
@endsection

@section('page-script')
    <script>
        var syncDt = null;

        function applyFilters() {
            syncDt.draw();
            updateFilterBadge();
            bootstrap.Offcanvas.getInstance(document.getElementById('syncFilters'))?.hide();
        }

        function resetFilters() {
            $('#filter-type').val('');
            $('#filter-status').val('');
            $('#filter-date-from').val('');
            $('#filter-date-to').val('');
            syncDt.draw();
            updateFilterBadge();
        }

        function getActiveFilterCount() {
            var count = 0;
            if ($('#filter-type').val()) count++;
            if ($('#filter-status').val() !== '') count++;
            if ($('#filter-date-from').val()) count++;
            if ($('#filter-date-to').val()) count++;
            return count;
        }

        function updateFilterBadge() {
            var count = getActiveFilterCount();
            var $badge = $('#filter-count-badge');
            if (count > 0) {
                $badge.text(count).removeClass('d-none');
            } else {
                $badge.addClass('d-none');
            }
        }

        window.viewSync = async function(uuid) {
            var filterOc = bootstrap.Offcanvas.getInstance(document.getElementById('syncFilters'));
            if (filterOc) filterOc.hide();

            $('#detail-body').html('<div class="text-center text-muted py-5">Loading…</div>');
            bootstrap.Offcanvas.getOrCreateInstance(document.getElementById('syncDetail')).show();

            try {
                var res = await fetch(baseUrl + 'settings/quickbooks/sync/detail', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ uuid: uuid })
                });
                var data = await res.json();
            } catch (e) {
                $('#detail-body').html('<div class="text-center text-muted py-5">Failed to load sync details.</div>');
                return;
            }
            if (!data || !data.success) {
                $('#detail-body').html('<div class="text-center text-muted py-5">Failed to load sync details.</div>');
                return;
            }

            var s = data.sync;
            var typeLabels = { init: 'Initial', cdc: 'CDC', msync: 'Manual Sync' };
            var statusBadge = s.status == 2
                ? '<span class="badge bg-label-success">Completed</span>'
                : s.status == 1
                    ? '<span class="badge bg-label-warning">In Progress</span>'
                    : '<span class="badge bg-label-danger">Failed</span>';

            var html = '<div class="mb-4">';
            html += '<div class="row g-3">';
            html += '<div class="col-sm-4"><small class="text-muted d-block">ID</small><span class="fw-medium">' + s.id + '</span></div>';
            html += '<div class="col-sm-4"><small class="text-muted d-block">Type</small><span class="fw-medium">' + (typeLabels[s.type] || s.type) + '</span></div>';
            html += '<div class="col-sm-4"><small class="text-muted d-block">Status</small>' + statusBadge + '</div>';
            html += '<div class="col-sm-4"><small class="text-muted d-block">Data Size</small><span class="fw-medium">' + (s.prep_data_size ?? '—') + '</span></div>';
            html += '<div class="col-sm-4"><small class="text-muted d-block">Cut-off Time</small><span class="text-muted">' + (s.cut_off_time || '—') + '</span></div>';
            html += '<div class="col-sm-4"><small class="text-muted d-block">Created</small><span class="text-muted">' + (s.created_at || '—') + '</span></div>';
            html += '<div class="col-sm-4"><small class="text-muted d-block">Prepared</small><span class="text-muted">' + (s.prepared_at || '—') + '</span></div>';
            html += '<div class="col-sm-4"><small class="text-muted d-block">Synced</small><span class="text-muted">' + (s.synced_at || '—') + '</span></div>';
            html += '</div></div>';

            html += '<hr class="my-3">';

            var entities = data.entities || [];
            if (!entities.length) {
                html += '<p class="text-muted text-center py-3">No synced items found for this operation.</p>';
            } else {
                html += '<div class="mb-3">';
                html += '<label class="form-label fw-semibold">Business Entity</label>';
                html += '<select class="form-select" id="detail-entity-select" onchange="filterDetailEntity()">';
                html += '<option value="">All Entities (' + entities.length + ')</option>';
                entities.forEach(function(e) {
                    html += '<option value="' + e.entity_id + '">' + e.entity_name + ' (' + e.total + ' items)</option>';
                });
                html += '</select></div>';

                html += '<div id="detail-entities-list">';
                entities.forEach(function(e) {
                    html += '<div class="detail-entity-card mb-3" data-entity="' + e.entity_id + '">';
                    html += '<h6 class="fw-semibold mb-2">' + e.entity_name + '</h6>';
                    html += '<div class="table-responsive"><table class="table table-sm table-bordered mb-0">';
                    html += '<thead><tr><th>Object Type</th><th class="text-end">Count</th></tr></thead><tbody>';
                    e.objects.forEach(function(o) {
                        html += '<tr><td>' + o.name + '</td><td class="text-end fw-medium">' + o.count.toLocaleString() + '</td></tr>';
                    });
                    html += '<tr class="table-light"><td class="fw-semibold">Total</td><td class="text-end fw-semibold">' + e.total.toLocaleString() + '</td></tr>';
                    html += '</tbody></table></div></div>';
                });
                html += '</div>';
            }

            $('#detail-body').html(html);
        };

        window.filterDetailEntity = function() {
            var val = $('#detail-entity-select').val();
            if (!val) {
                $('.detail-entity-card').show();
            } else {
                $('.detail-entity-card').hide();
                $('.detail-entity-card[data-entity="' + val + '"]').show();
            }
        };

        $(function() {
            syncDt = $('#sync-dt').DataTable({
                processing: true,
                serverSide: true,
                searching: false,
                ordering: false,
                pageLength: 25,
                ajax: {
                    url: baseUrl + 'settings/quickbooks/sync/data',
                    type: 'POST',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    data: function(d) {
                        d.type = $('#filter-type').val();
                        d.status = $('#filter-status').val();
                        d.date_from = $('#filter-date-from').val();
                        d.date_to = $('#filter-date-to').val();
                    }
                },
                columns: [
                    { data: 'id' },
                    { data: 'type' },
                    { data: 'status' },
                    { data: 'prep_data_size' },
                    { data: 'cut_off_time' },
                    { data: 'created_at' },
                    { data: 'prepared_at' },
                    { data: 'synced_at' },
                    { data: 'uuid', orderable: false, searchable: false },
                ],
                columnDefs: [
                    {
                        targets: 0,
                        render: function(data) {
                            return '<span class="text-muted">' + data + '</span>';
                        }
                    },
                    {
                        targets: 1,
                        render: function(data) {
                            var labels = { init: 'Initial', cdc: 'CDC', msync: 'Manual Sync' };
                            return '<span class="fw-medium">' + (labels[data] || data || '—') + '</span>';
                        }
                    },
                    {
                        targets: 2,
                        render: function(data) {
                            if (data == 2) return '<span class="badge bg-label-success">Completed</span>';
                            if (data == 1) return '<span class="badge bg-label-warning">In Progress</span>';
                            return '<span class="badge bg-label-danger">Failed</span>';
                        }
                    },
                    {
                        targets: 3,
                        render: function(data) {
                            return data !== null ? '<span class="fw-medium">' + data + '</span>' : '—';
                        }
                    },
                    {
                        targets: [4, 5, 6, 7],
                        render: function(data) {
                            return data ? '<span class="text-muted">' + data + '</span>' : '—';
                        }
                    },
                    {
                        targets: 8,
                        render: function(data) {
                            return '<button onclick="viewSync(\'' + data + '\')" class="btn btn-sm btn-icon" title="View Details"><i class="ti ti-eye"></i></button>';
                        }
                    }
                ],
                language: {
                    emptyTable: 'No synchronization logs found.',
                    processing: 'Loading…'
                }
            });
        });
    </script>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">Synchronization Logs</h4>
                    <p class="text-muted mb-0">QuickBooks data synchronization history and status.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Settings</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('settings.qb') }}">QuickBooks</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Sync Logs</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h5 class="card-title mb-0">Sync History</h5>
                    <small class="text-muted">All QuickBooks synchronization operations.</small>
                </div>
                <button type="button" class="btn btn-sm btn-icon btn-outline-primary position-relative" style="overflow: visible;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Filters" onclick="new bootstrap.Offcanvas(document.getElementById('syncFilters')).show()">
                    <i class="ti ti-filter"></i>
                    <span id="filter-count-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" style="font-size: 0.6rem; min-width: 18px; padding: 0.25em 0.4em; line-height: 1;"></span>
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table id="sync-dt" class="table border-top">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Data Size</th>
                        <th>Cut-off Time</th>
                        <th>Created</th>
                        <th>Prepared</th>
                        <th>Synced</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="syncDetail" aria-labelledby="syncDetailLabel" style="width: 580px;">
        <div class="offcanvas-header border-bottom">
            <h5 id="syncDetailLabel" class="offcanvas-title">Sync Details</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body" id="detail-body">
            <div class="text-center text-muted py-5">Select a sync record to view details.</div>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="syncFilters" aria-labelledby="syncFiltersLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="syncFiltersLabel" class="offcanvas-title">Filters</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="mb-4">
                <label class="form-label fw-semibold">Type</label>
                <select class="form-select" id="filter-type">
                    <option value="">All Types</option>
                    <option value="init">Initial</option>
                    <option value="cdc">CDC</option>
                    <option value="msync">Manual Sync</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="form-label fw-semibold">Status</label>
                <select class="form-select" id="filter-status">
                    <option value="">All Statuses</option>
                    <option value="2">Completed</option>
                    <option value="1">In Progress</option>
                    <option value="0">Failed</option>
                </select>
            </div>
            <hr class="my-3">
            <div class="mb-4">
                <label class="form-label fw-semibold">Date From</label>
                <input type="date" class="form-control" id="filter-date-from">
            </div>
            <div class="mb-4">
                <label class="form-label fw-semibold">Date To</label>
                <input type="date" class="form-control" id="filter-date-to">
            </div>
        </div>
        <div class="offcanvas-footer border-top p-3">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-primary flex-grow-1" onclick="applyFilters()">
                    Apply Filters
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
                    Reset
                </button>
            </div>
        </div>
    </div>
@endsection