@extends('layouts.main')

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

@section('content')
    <div class="grid">
        <div class="min-w-full card card-grid" data-datatable="false" data-datatable-page-size="10"
            data-datatable-state-save="false" id="email-statement-logs-table"
            data-api-url="{{ route('email-statement-logs.datatables') }}">
            <div class="flex-wrap py-5 card-header">
                <h3 class="card-title">
                    Log Pengiriman Email Statement
                </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 Email Statement" id="search" type="text" value="">
                        </label>
                    </div>
                    <div class="flex">
                        <select class="select select-sm" id="filter-branch">
                            <option value="">Cabang (Semua)</option>
                            @foreach ($branches as $branch)
                                <option value="{{ $branch }}">{{ $branch }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex">
                        <select class="select select-sm" id="filter-email-status">
                            <option value="">Status Email (Semua)</option>
                            <option value="sent">Terkirim</option>
                            <option value="failed">Gagal</option>
                            <option value="pending">Pending</option>
                        </select>
                    </div>
                    <div class="flex">
                        <select class="select select-sm" id="filter-email-source">
                            <option value="">Sumber Email (Semua)</option>
                            <option value="account">Email Akun</option>
                            <option value="customer">Email Nasabah</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="scrollable-x-auto">
                    <table class="table text-sm font-medium text-gray-700 align-middle table-auto table-border"
                        data-datatable-table="true">
                        <thead>
                            <tr>
                                <th class="min-w-[120px]" data-datatable-column="branch_code">
                                    <span class="sort"> <span class="sort-label">Cabang</span>
                                        <span class="sort-icon"> </span> </span>
                                </th>
                                <th class="min-w-[150px]" data-datatable-column="account_number">
                                    <span class="sort"> <span class="sort-label">No. Rekening</span>
                                        <span class="sort-icon"> </span> </span>
                                </th>
                                <th class="min-w-[120px]" data-datatable-column="period_from">
                                    <span class="sort"> <span class="sort-label">Periode Dari</span>
                                        <span class="sort-icon"> </span> </span>
                                </th>
                                <th class="min-w-[120px]" data-datatable-column="period_to">
                                    <span class="sort"> <span class="sort-label">Periode Sampai</span>
                                        <span class="sort-icon"> </span> </span>
                                </th>
                                <th class="min-w-[200px]" data-datatable-column="email_address">
                                    <span class="sort"> <span class="sort-label">Email</span>
                                        <span class="sort-icon"> </span> </span>
                                </th>
                                <th class="min-w-[120px]" data-datatable-column="email_source">
                                    <span class="sort"> <span class="sort-label">Sumber Email</span>
                                        <span class="sort-icon"> </span> </span>
                                </th>
                                <th class="min-w-[120px]" data-datatable-column="email_status">
                                    <span class="sort"> <span class="sort-label">Status Email</span>
                                        <span class="sort-icon"> </span> </span>
                                </th>
                                <th class="min-w-[150px]" data-datatable-column="email_sent_at">
                                    <span class="sort"> <span class="sort-label">Waktu Kirim</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="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
                    <div class="flex gap-2 items-center">
                        Show
                        <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per page
                    </div>
                    <div class="flex gap-4 items-center">
                        <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="overflow-hidden px-5 w-full modal-content pt-7.5 container-fixed">
            <div class="modal-header">
                <h2 class="modal-title">Detail Log Email Statement</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="mb-2 font-bold">Informasi Umum</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div>Cabang:</div>
                        <div id="detail-branch-code"></div>
                        <div>No. Rekening:</div>
                        <div id="detail-account-number"></div>
                        <div>Periode:</div>
                        <div id="detail-period"></div>
                        <div>Email:</div>
                        <div id="detail-email-address"></div>
                        <div>Sumber Email:</div>
                        <div id="detail-email-source"></div>
                    </div>
                </div>

                <div class="mb-5">
                    <h3 class="mb-2 font-bold">Status Pengiriman Email</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div>Status:</div>
                        <div id="detail-email-status"></div>
                        <div>Waktu Kirim:</div>
                        <div id="detail-email-sent-at"></div>
                        <div>Error Message:</div>
                        <div id="detail-error-message"></div>
                    </div>
                </div>

                <div class="mb-5">
                    <h3 class="mb-2 font-bold">Informasi Tambahan</h3>
                    <div class="grid grid-cols-2 gap-2">
                        <div>Dibuat Oleh:</div>
                        <div id="detail-user-id"></div>
                        <div>Waktu Dibuat:</div>
                        <div id="detail-created-at"></div>
                        <div>Waktu Update:</div>
                        <div id="detail-updated-at"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="btn-resend-email" class="btn btn-primary btn-sm me-3">
                    <i class="ki-outline ki-send me-1"></i> Kirim Ulang Email
                </button>
                <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('#email-statement-logs-table');
        const searchInput = document.getElementById('search');
        const filterBranch = document.getElementById('filter-branch');
        const filterEmailStatus = document.getElementById('filter-email-status');
        const filterEmailSource = document.getElementById('filter-email-source');
        const detailModal = document.getElementById('detail-modal');
        const btnResendEmail = document.getElementById('btn-resend-email');

        const apiUrl = element.getAttribute('data-api-url');
        const dataTableOptions = {
            apiEndpoint: apiUrl,
            pageSize: 10,
            columns: {
                branch_code: {
                    title: 'Cabang',
                },
                account_number: {
                    title: 'No. Rekening',
                },
                period_from: {
                    title: 'Periode Dari',
                    render: (item, data) => {
                        return data.period_from ? new Date(data.period_from).toLocaleDateString('id-ID') : '-';
                    },
                },
                period_to: {
                    title: 'Periode Sampai',
                    render: (item, data) => {
                        return data.period_to ? new Date(data.period_to).toLocaleDateString('id-ID') : '-';
                    },
                },
                email_address: {
                    title: 'Email',
                },
                email_source: {
                    title: 'Sumber Email',
                    render: (item, data) => {
                        if (data.email_source === 'account') {
                            return '<span class="badge badge-info">Email Akun</span>';
                        } else if (data.email_source === 'customer') {
                            return '<span class="badge badge-primary">Email Nasabah</span>';
                        }
                        return '-';
                    },
                },
                email_status: {
                    title: 'Status Email',
                    render: (item, data) => {
                        if (data.email_status === 'sent') {
                            return '<span class="badge badge-success">Terkirim</span>';
                        } else if (data.email_status === 'failed') {
                            return '<span class="badge badge-danger">Gagal</span>';
                        } else if (data.email_status === 'pending') {
                            return '<span class="badge badge-warning">Pending</span>';
                        }
                        return '<span class="badge badge-secondary">Unknown</span>';
                    },
                },
                email_sent_at: {
                    title: 'Waktu Kirim',
                    render: (item, data) => {
                        return data.email_sent_at ? new Date(data.email_sent_at).toLocaleString('id-ID') : '-';
                    },
                },
                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>`;

                        // Resend button for failed emails
                        if (data.email_status === 'failed') {
                            actions += `<button class="btn btn-sm btn-icon btn-warning btn-resend" data-id="${data.id}" title="Kirim Ulang Email">
                                 <i class="ki-outline ki-send fs-3"></i>
                               </button>`;
                        }

                        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 branchValue = filterBranch.value;
            const emailStatusValue = filterEmailStatus.value;
            const emailSourceValue = filterEmailSource.value;

            const params = {};
            if (searchInput.value) {
                params.search = searchInput.value;
            }
            if (branchValue !== '') params.branch_code = branchValue;
            if (emailStatusValue !== '') params.email_status = emailStatusValue;
            if (emailSourceValue !== '') params.email_source = emailSourceValue;

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

        filterBranch.addEventListener('change', applyFilters);
        filterEmailStatus.addEventListener('change', applyFilters);
        filterEmailSource.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('email-statement-logs') }}/${id}`)
                    .then(response => response.json())
                    .then(data => {
                        // Store current log ID for resend functionality
                        btnResendEmail.setAttribute('data-id', data.id);

                        // Show/hide resend button based on email status
                        if (data.email_status === 'failed') {
                            btnResendEmail.classList.remove('hidden');
                        } else {
                            btnResendEmail.classList.add('hidden');
                        }

                        // Populate modal with data
                        document.getElementById('detail-branch-code').textContent = data.branch_code;
                        document.getElementById('detail-account-number').textContent = data.account_number;
                        document.getElementById('detail-period').textContent =
                            `${new Date(data.period_from).toLocaleDateString('id-ID')} - ${new Date(data.period_to).toLocaleDateString('id-ID')}`;
                        document.getElementById('detail-email-address').textContent = data.email_address;

                        const emailSourceText = data.email_source === 'account' ? 'Email Akun' : (data
                            .email_source === 'customer' ? 'Email Nasabah' : '-');
                        document.getElementById('detail-email-source').textContent = emailSourceText;

                        let emailStatusBadge = '';
                        if (data.email_status === 'sent') {
                            emailStatusBadge = '<span class="badge badge-success">Terkirim</span>';
                        } else if (data.email_status === 'failed') {
                            emailStatusBadge = '<span class="badge badge-danger">Gagal</span>';
                        } else if (data.email_status === 'pending') {
                            emailStatusBadge = '<span class="badge badge-warning">Pending</span>';
                        }
                        document.getElementById('detail-email-status').innerHTML = emailStatusBadge;

                        document.getElementById('detail-email-sent-at').textContent = data.email_sent_at ?
                            new Date(data.email_sent_at).toLocaleString('id-ID') :
                            '-';
                        document.getElementById('detail-error-message').textContent = data.error_message || '-';
                        document.getElementById('detail-user-id').textContent = data.user_id || '-';
                        document.getElementById('detail-created-at').textContent = data.created_at ?
                            new Date(data.created_at).toLocaleString('id-ID') :
                            '-';
                        document.getElementById('detail-updated-at').textContent = data.updated_at ?
                            new Date(data.updated_at).toLocaleString('id-ID') :
                            '-';

                        // 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');
                    });
            }

            // Resend email functionality
            if (e.target.closest('.btn-resend') || e.target.closest('#btn-resend-email')) {
                const id = e.target.closest('.btn-resend, #btn-resend-email').getAttribute('data-id');

                if (confirm('Apakah Anda yakin ingin mengirim ulang email ini?')) {
                    fetch(`{{ url('email-statement-logs') }}/${id}/resend`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    'content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                alert('Email berhasil dikirim ulang');
                                dataTable.reload();

                                // Close modal if open
                                const modalEl = KTDom.getElement('#detail-modal');
                                const modal = KTModal.getInstance(modalEl);
                                if (modal) {
                                    modal.hide();
                                }
                            } else {
                                alert('Gagal mengirim ulang email: ' + (data.message || 'Unknown error'));
                            }
                        })
                        .catch(error => {
                            console.error('Error resending email:', error);
                            alert('Gagal mengirim ulang email');
                        });
                }
            }
        });

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