@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render(request()->route()->getName()) }}
@endsection

@section('content')
    <div class="grid">
        <div class="card card-grid min-w-full" data-datatable="false" data-datatable-page-size="10" data-datatable-state-save="false" id="sync-logs-table" data-api-url="{{ route('sync-logs.datatables') }}">
            <div class="card-header py-5 flex-wrap">
                <h3 class="card-title">
                    Log Sinkronisasi Data Kartu
                </h3>
                <div class="flex flex-wrap gap-2 lg:gap-5">
                    <div class="flex">
                        <label class="input input-sm"> <i class="ki-filled ki-magnifier"> </i>
                            <input placeholder="Cari Log Sinkronisasi" id="search" type="text" value="">
                        </label>
                    </div>
                    <div class="flex">
                        <select class="select select-sm" id="filter-sync">
                            <option value="">Status Sinkronisasi (Semua)</option>
                            <option value="1">Sudah Sinkronisasi</option>
                            <option value="0">Belum Sinkronisasi</option>
                        </select>
                    </div>
                    <div class="flex">
                        <select class="select select-sm" id="filter-csv">
                            <option value="">Status CSV (Semua)</option>
                            <option value="1">CSV Sudah Dibuat</option>
                            <option value="0">CSV Belum Dibuat</option>
                        </select>
                    </div>
                    <div class="flex">
                        <select class="select select-sm" id="filter-ftp">
                            <option value="">Status FTP (Semua)</option>
                            <option value="1">Sudah Upload ke FTP</option>
                            <option value="0">Belum Upload ke FTP</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="scrollable-x-auto">
                    <table class="table table-auto table-border align-middle text-gray-700 font-medium text-sm" data-datatable-table="true">
                        <thead>
                        <tr>
                            <th class="min-w-[100px]" data-datatable-column="periode">
                                <span class="sort"> <span class="sort-label">Periode</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[100px]" data-datatable-column="is_sync">
                                <span class="sort"> <span class="sort-label">Status Sinkronisasi</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[150px]" data-datatable-column="sync_at">
                                <span class="sort"> <span class="sort-label">Waktu Sinkronisasi</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[100px]" data-datatable-column="is_csv">
                                <span class="sort"> <span class="sort-label">Status CSV</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[150px]" data-datatable-column="csv_at">
                                <span class="sort"> <span class="sort-label">Waktu Pembuatan CSV</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[100px]" data-datatable-column="is_ftp">
                                <span class="sort"> <span class="sort-label">Status FTP</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[150px]" data-datatable-column="ftp_at">
                                <span class="sort"> <span class="sort-label">Waktu Upload FTP</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[100px]" data-datatable-column="total_records">
                                <span class="sort"> <span class="sort-label">Total Rekaman</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[150px]" data-datatable-column="file_name">
                                <span class="sort"> <span class="sort-label">Nama File</span>
                                    <span class="sort-icon"> </span> </span>
                            </th>
                            <th class="min-w-[100px]" data-datatable-column="actions">
                                <span>Aksi</span>
                            </th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="card-footer justify-center md:justify-between flex-col md:flex-row gap-3 text-gray-600 text-2sm font-medium">
                    <div class="flex items-center gap-2">
                        Show
                        <select class="select select-sm w-16" data-datatable-size="true" name="perpage"> </select> per page
                    </div>
                    <div class="flex items-center gap-4">
                        <span data-datatable-info="true"> </span>
                        <div class="pagination" data-datatable-pagination="true">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for detail view -->
    <div class="modal modal-open:!flex" data-modal="true" id="detail-modal">
        <div class="modal-content pt-7.5 w-full container-fixed px-5 overflow-hidden">
            <div class="modal-header">
                <h2 class="modal-title">Detail Log Sinkronisasi</h2>
                <button class="btn btn-sm btn-icon btn-active-color-danger" data-modal-dismiss="true">
                    <i class="ki-outline ki-cross fs-1"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-5">
                    <h3 class="font-bold mb-2">Informasi Umum</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div>Periode:</div>
                        <div id="detail-periode"></div>
                        <div>Total Records:</div>
                        <div id="detail-total-records"></div>
                        <div>Sukses Records:</div>
                        <div id="detail-success-records"></div>
                        <div>Gagal Records:</div>
                        <div id="detail-failed-records"></div>
                    </div>
                </div>

                <div class="mb-5">
                    <h3 class="font-bold mb-2">Status Sinkronisasi</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div>Status:</div>
                        <div id="detail-sync-status"></div>
                        <div>Waktu:</div>
                        <div id="detail-sync-at"></div>
                        <div>Catatan:</div>
                        <div id="detail-sync-notes"></div>
                    </div>
                </div>

                <div class="mb-5">
                    <h3 class="font-bold mb-2">Status CSV</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div>Status:</div>
                        <div id="detail-csv-status"></div>
                        <div>Waktu:</div>
                        <div id="detail-csv-at"></div>
                        <div>Nama File:</div>
                        <div id="detail-file-name"></div>
                        <div>Catatan:</div>
                        <div id="detail-csv-notes"></div>
                    </div>
                </div>

                <div class="mb-5">
                    <h3 class="font-bold mb-2">Status FTP</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div>Status:</div>
                        <div id="detail-ftp-status"></div>
                        <div>Waktu:</div>
                        <div id="detail-ftp-at"></div>
                        <div>Tujuan:</div>
                        <div id="detail-ftp-destination"></div>
                        <div>Catatan:</div>
                        <div id="detail-ftp-notes"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" id="btn-download-file" class="btn btn-success btn-sm me-3 hidden">
                    <i class="ki-outline ki-file-down me-1"></i> Download File
                </a>
                <button type="button" class="btn btn-light" data-modal-dismiss="true">Tutup</button>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script type="module">
        const element = document.querySelector('#sync-logs-table');
        const searchInput = document.getElementById('search');
        const filterSync = document.getElementById('filter-sync');
        const filterCsv = document.getElementById('filter-csv');
        const filterFtp = document.getElementById('filter-ftp');
        const detailModal = document.getElementById('detail-modal');
        const btnDownloadFile = document.getElementById('btn-download-file');

        const apiUrl = element.getAttribute('data-api-url');
        const dataTableOptions = {
            apiEndpoint: apiUrl,
            pageSize: 10,
            columns: {
                periode: {
                    title: 'Periode',
                },
                is_sync: {
                    title: 'Status Sinkronisasi',
                    render: (item, data) => {
                        return data.is_sync
                            ? '<span class="badge badge-success">Sudah Sinkronisasi</span>'
                            : '<span class="badge badge-warning">Belum Sinkronisasi</span>';
                    },
                },
                sync_at: {
                    title: 'Waktu Sinkronisasi',
                    render: (item, data) => {
                        return data.sync_at ? new Date(data.sync_at).toLocaleString('id-ID') : '-';
                    },
                },
                is_csv: {
                    title: 'Status CSV',
                    render: (item, data) => {
                        return data.is_csv
                            ? '<span class="badge badge-success">CSV Dibuat</span>'
                            : '<span class="badge badge-warning">Belum Dibuat</span>';
                    },
                },
                csv_at: {
                    title: 'Waktu Pembuatan CSV',
                    render: (item, data) => {
                        return data.csv_at ? new Date(data.csv_at).toLocaleString('id-ID') : '-';
                    },
                },
                is_ftp: {
                    title: 'Status FTP',
                    render: (item, data) => {
                        return data.is_ftp
                            ? '<span class="badge badge-success">Uploaded ke FTP</span>'
                            : '<span class="badge badge-warning">Belum Upload</span>';
                    },
                },
                ftp_at: {
                    title: 'Waktu Upload FTP',
                    render: (item, data) => {
                        return data.ftp_at ? new Date(data.ftp_at).toLocaleString('id-ID') : '-';
                    },
                },
                total_records: {
                    title: 'Total Rekaman',
                },
                file_name: {
                    title: 'Nama File',
                    render: (item, data) => {
                        return data.file_name || '-';
                    },
                },
                actions: {
                    title: 'Aksi',
                    render: (item, data) => {
                        let actions = `<div class="flex gap-2">`;

                        // Detail button
                        actions += `<button class="btn btn-sm btn-icon btn-light btn-detail" data-id="${data.id}">
                                    <i class="ki-outline ki-eye fs-3"></i>
                                </button>`;

                        if (data.is_csv && data.file_name) {
                            actions += `<a href="{{ url('sync-logs/download') }}/${data.id}" class="btn btn-sm btn-icon btn-success" title="Download File">
                                 <i class="ki-outline ki-file-down fs-3"></i>
                               </a>`;
                        }


                        actions += `</div>`;
                        return actions;
                    },
                }
            },
        };

        let dataTable = new KTDataTable(element, dataTableOptions);

        // Custom search functionality
        searchInput.addEventListener('change', function () {
            const searchValue = this.value.trim();
            dataTable.goPage(1);
            dataTable.search(searchValue, true);
        });

        // Filter functionality
        const applyFilters = () => {
            const syncValue = filterSync.value;
            const csvValue = filterCsv.value;
            const ftpValue = filterFtp.value;

            const params = {};
            if (syncValue !== '') params.is_sync = syncValue;
            if (csvValue !== '') params.is_csv = csvValue;
            if (ftpValue !== '') params.is_ftp = ftpValue;

            dataTable.goPage(1);
            dataTable.setRequestParams(params);
            dataTable.reload();
        };

        filterSync.addEventListener('change', applyFilters);
        filterCsv.addEventListener('change', applyFilters);
        filterFtp.addEventListener('change', applyFilters);

        // Detail modal functionality
        document.addEventListener('click', function (e) {
            if (e.target.closest('.btn-detail')) {
                const id = e.target.closest('.btn-detail').getAttribute('data-id');

                // Fetch log details by ID
                fetch(`{{ url('sync-logs') }}/${id}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.is_csv && data.file_name) {
                            btnDownloadFile.classList.remove('hidden');
                            btnDownloadFile.href = `{{ url('sync-logs/download') }}/${data.id}`;
                        } else {
                            btnDownloadFile.classList.add('hidden');
                        }

                        // Populate modal with data
                        document.getElementById('detail-periode').textContent = data.periode;
                        document.getElementById('detail-total-records').textContent = data.total_records;
                        document.getElementById('detail-success-records').textContent = data.success_records;
                        document.getElementById('detail-failed-records').textContent = data.failed_records;

                        document.getElementById('detail-sync-status').innerHTML = data.is_sync
                            ? '<span class="badge badge-success">Sudah Sinkronisasi</span>'
                            : '<span class="badge badge-warning">Belum Sinkronisasi</span>';
                        document.getElementById('detail-sync-at').textContent = data.sync_at
                            ? new Date(data.sync_at).toLocaleString('id-ID')
                            : '-';
                        document.getElementById('detail-sync-notes').textContent = data.sync_notes || '-';

                        document.getElementById('detail-csv-status').innerHTML = data.is_csv
                            ? '<span class="badge badge-success">CSV Dibuat</span>'
                            : '<span class="badge badge-warning">Belum Dibuat</span>';
                        document.getElementById('detail-csv-at').textContent = data.csv_at
                            ? new Date(data.csv_at).toLocaleString('id-ID')
                            : '-';
                        document.getElementById('detail-file-name').textContent = data.file_name || '-';
                        document.getElementById('detail-csv-notes').textContent = data.csv_notes || '-';

                        document.getElementById('detail-ftp-status').innerHTML = data.is_ftp
                            ? '<span class="badge badge-success">Uploaded ke FTP</span>'
                            : '<span class="badge badge-warning">Belum Upload</span>';
                        document.getElementById('detail-ftp-at').textContent = data.ftp_at
                            ? new Date(data.ftp_at).toLocaleString('id-ID')
                            : '-';
                        document.getElementById('detail-ftp-destination').textContent = data.ftp_destination || '-';
                        document.getElementById('detail-ftp-notes').textContent = data.ftp_notes || '-';

                        // Show modal
                        const modalEl = KTDom.getElement('#detail-modal');
                        const modal = KTModal.getInstance(modalEl);
                        modal.show();

                    })
                    .catch(error => {
                        console.error('Error fetching log details:', error);
                        alert('Gagal mengambil detail log');
                    });
            }
        });

        window.dataTable = dataTable;
    </script>
@endpush