@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@push('css')
<style>
    table.dataTable tbody tr.sent-ok td {
        box-shadow: inset 0 0 0 9999px #e8f8ee !important;
    }

    table.dataTable tbody tr.sent-ok:hover td,
    table.dataTable tbody tr.sent-ok.selected td {
        box-shadow: inset 0 0 0 9999px #d8f1e1 !important;
    }

    table.dataTable tbody tr.bypassed-row td {
        box-shadow: inset 0 0 0 9999px #eef3ff !important;
        opacity: 0.75;
    }
    table.dataTable tbody tr.bypassed-row:hover td {
        box-shadow: inset 0 0 0 9999px #dce6ff !important;
    }
</style>
@endpush
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Resend Gmail'])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <button type="button" class="btn btn-primary mb-0" id="btn-send-selection" disabled>
                                        <i class="fas fa-paper-plane me-1"></i>
                                        <span class="font-weight-bold">Send Selection</span>
                                        <span id="selected-count" class="badge bg-white text-dark ms-2 d-none">0</span>
                                    </button>

                                    <button type="button" class="btn btn-primary mb-0" id="btn-resend-all">
                                        <i class="fas fa-paper-plane me-1"></i>
                                        <span class="font-weight-bold">Resend All Sample</span>
                                    </button>

                                    <div class="ms-auto d-flex align-items-center gap-1">
                                        <label class="text-sm mb-0 me-1">Cari :</label>
                                        <input type="search" id="live-search" class="form-control form-control-sm" style="width:300px;" placeholder="Sample / Approver / Queue / Error ...">
                                    </div>
                                </div>
                                <div class="mt-2 text-sm text-muted">
                                    Failed Queue: <strong>{{ $failed_queue_count ?? 0 }}</strong> |
                                    Pending Approval: <strong>{{ $pending_case_count ?? 0 }}</strong> |
                                    Bypassed by IT: <strong>{{ $bypassed_count ?? 0 }}</strong>
                                </div>
                                </div>
                            </div>

                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}" data-skip-auto-dt="1">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>Pilih</th>
                                            <th>No</th>
                                            <th>Status</th>
                                            <th>Case</th>
                                            <th>ID Sample</th>
                                            <th>Approver</th>
                                            <th>Email</th>
                                            <th>Waktu Case</th>
                                            <th>Error</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($records as $i => $row)
                                            @php
                                                $rowKey = (string) ($row->row_key ?? '');
                                                $isSent = in_array($rowKey, (array) ($sent_row_keys ?? []), true);
                                                $isBypassed = ($row->case_type ?? '') === 'Bypassed';
                                            @endphp
                                            <tr class="{{ $isBypassed ? 'bypassed-row' : ($isSent ? 'sent-ok' : '') }}">
                                                <td class="text-sm text-center">
                                                    <input
                                                        class="row-select"
                                                        type="checkbox"
                                                        value="{{ $rowKey }}"
                                                        data-case="{{ $row->case_type }}"
                                                        data-approver="{{ $row->approver_name ?? '' }}"
                                                        data-email="{{ $row->approver_email ?? '' }}"
                                                        data-sample="{{ $row->sample_id ?? '' }}"
                                                        style="width: 18px; height: 18px; cursor: pointer;"
                                                        {{ ($isBypassed || $isSent) ? 'disabled title=Sudah Terkirim' : '' }}
                                                    >
                                                </td>
                                                <td class="text-sm">{{ $i + 1 }}</td>
                                                <td class="text-sm text-center">
                                                    @if($isBypassed)
                                                        <span class="badge bg-success">Sent</span>
                                                    @elseif($isSent)
                                                        <span class="badge bg-success">Sent</span>
                                                    @else
                                                        <span class="badge bg-danger text-white">Unsent</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm">
                                                    @if($isBypassed)
                                                        <span class="badge bg-gradient-info text-xs">Bypassed</span>
                                                    @elseif(($row->case_type ?? '-') === 'Failed Queue')
                                                        <span class="badge bg-gradient-danger text-xs">Failed Queue</span>
                                                    @else
                                                        <span class="badge bg-gradient-warning text-xs">{{ $row->case_type ?? '-' }}</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm">{{ $row->sample_id ?? '-' }}</td>
                                                <td class="text-sm">{{ $row->approver_name ?? '-' }}</td>
                                                <td class="text-sm">{{ $row->approver_email ?? '-' }}</td>
                                                <td class="text-sm">{{ $row->case_time ?? '-' }}</td>
                                                <td class="text-sm error-cell" data-id="{{ $row->sample_id }}">
                                                    {{ $row->error_short ?? '-' }}
                                                </td>
                                                <td class="text-sm text-center">
                                                    @if($isBypassed)
                                                        <button type="button" class="btn btn-sm btn-primary mb-0" disabled title="Sudah di-Bypass ke OnProgress">
                                                            <i class="fas fa-check me-1"></i> Bypassed
                                                        </button>
                                                    @elseif(($row->case_type ?? '') === 'Pending')
                                                         @if(session('users_rules') === 'admins')
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-sm btn-primary mb-0 btn-analyze" 
                                                                    data-id="{{ $row->sample_id }}" title="Cek level approval terakhir">
                                                                    <i class="fas fa-search"></i> Analyze
                                                                </button>
                                                                <button type="button" class="btn btn-sm btn-primary mb-0 dropdown-toggle dropdown-toggle-split" 
                                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                                </button>
                                                                <ul class="dropdown-menu shadow-lg">
                                                                    <li>
                                                                        <a class="dropdown-item btn-bypass py-2" href="javascript:;" data-id="{{ $row->sample_id }}" data-missing-from="0">
                                                                            <i class="fas fa-fast-forward text-primary me-2"></i> Bypass Approval
                                                                        </a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        @else
                                                            <span class="badge badge-secondary">Pending Approval</span>
                                                        @endif
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@push('js')
<script>
$(document).ready(function () {
    var tableSelector = '#list_{{ $dmenu }}';
    if ($.fn.DataTable.isDataTable(tableSelector)) {
        $(tableSelector).DataTable().destroy();
    }

    var table = $(tableSelector).DataTable({
        dom: 'lrtip',
        order: [[8, 'desc']],
        pageLength: 25,
        language: {
            emptyTable: 'Tidak ada case email approval.'
        }
    });

    $('#live-search').on('keyup', function () {
        table.search(this.value).draw();
    });

    function toggleSendSelectionButton() {
        var checkedCount = $('.row-select:checked').length;
        $('#btn-send-selection').prop('disabled', checkedCount === 0);

        var countBadge = $('#selected-count');
        if (checkedCount > 0) {
            countBadge.text(checkedCount).removeClass('d-none');
        } else {
            countBadge.addClass('d-none').text('0');
        }
    }

    $(document).on('change', '.row-select', toggleSendSelectionButton);

    function submitAction(mode, selectedIds) {
        var form = $('<form method="POST" action="{{ url($url_menu) }}/bulkmail"></form>');
        form.append('<input type="hidden" name="_token" value="{{ csrf_token() }}">');
        form.append('<input type="hidden" name="_method" value="PUT">');
        form.append('<input type="hidden" name="mode" value="' + mode + '">');

        selectedIds.forEach(function (rowKey) {
            form.append('<input type="hidden" name="selected_rows[]" value="' + rowKey + '">');
        });

        $('body').append(form);
        form.submit();
    }



    // ── Master approver list from PHP ───────────────────────────────
    var allApprovers = @json($all_approvers ?? []);

    function buildApproverSelectOptions(selectedId) {
        var opts = '<option value="">-- Pilih Approver --</option>';
        allApprovers.forEach(function(a) {
            var sel = (String(a.id) === String(selectedId)) ? ' selected' : '';
            opts += '<option value="' + a.id + '" data-email="' + (a.email || '') + '"' + sel + '>' + a.nama + '</option>';
        });
        return opts;
    }

    function openPreSendModal(mode, selectedIds) {
        // Collect rows to display in modal
        var rows = [];
        if (mode === 'send_selection') {
            selectedIds.forEach(function(rowKey) {
                var $cb = $('.row-select[value="' + rowKey + '"]');
                rows.push({
                    rowKey: rowKey,
                    sampleId: $cb.data('sample') || rowKey,
                    approverName: $cb.data('approver') || '',
                    approverEmail: $cb.data('email') || ''
                });
            });
        } else {
            // resend_all: collect all non-bypassed rows
            $('.row-select:not(:disabled)').each(function() {
                rows.push({
                    rowKey: $(this).val(),
                    sampleId: $(this).data('sample') || $(this).val(),
                    approverName: $(this).data('approver') || '',
                    approverEmail: $(this).data('email') || ''
                });
            });
        }

        if (rows.length === 0) {
            Swal.fire({ title: 'Info', text: 'Tidak ada data untuk dikirim.', icon: 'info' });
            return;
        }

        // Build table rows
        var tbody = '';
        rows.forEach(function(r, i) {
            var searchName = (r.approverName || '').trim();
            var knownApprover = (searchName && searchName !== '-');
            
            // Find approver id if known (Robust matching)
            var matchedId = '';
            var matchedEmail = '';
            if (knownApprover) {
                allApprovers.forEach(function(a) {
                    if ((a.nama || '').trim().toLowerCase() === searchName.toLowerCase()) {
                        matchedId = a.id;
                        matchedEmail = a.email || '';
                    }
                });
            }

            // Fallback: if we have the email but no matchedId yet, try matching by email
            if (!matchedId && r.approverEmail && r.approverEmail !== '-') {
                allApprovers.forEach(function(a) {
                    if ((a.email || '').trim().toLowerCase() === r.approverEmail.trim().toLowerCase()) {
                        matchedId = a.id;
                        matchedEmail = a.email || '';
                    }
                });
            }

            tbody += '<tr>';
            tbody += '<td class="text-sm font-weight-bold text-center">' + r.sampleId + '</td>';
            tbody += '<td class="text-sm">';
            tbody += '<select class="form-select pre-send-approver" style="width:100%;" '
                   + 'data-idx="' + i + '" data-rowkey="' + r.rowKey + '">';
            tbody += buildApproverSelectOptions(matchedId);
            tbody += '</select>';
            tbody += '</td>';
            tbody += '<td class="text-sm">';
            tbody += '<input type="text" class="form-control pre-send-email text-xs" id="pre-send-email-' + i + '" readonly value="' + (matchedEmail || r.approverEmail || '') + '">';
            tbody += '</td>';
            tbody += '</tr>';
        });

        $('#pre-send-tbody').html(tbody);
        $('#pre-send-mode').val(mode);

        // Store all rowKeys
        $('#pre-send-rowkeys').val(JSON.stringify(rows.map(function(r){ return r.rowKey; })));

        // Re-init select2 inside modal
        if ($.fn.select2) {
            $('#modal-pre-send .pre-send-approver').select2({ dropdownParent: $('#modal-pre-send'), width: '100%' });
        }

        $('#modal-pre-send').modal('show');
    }

    // Auto-fill email when approver selected in modal
    $(document).on('change', '.pre-send-approver', function() {
        var idx = $(this).data('idx');
        var selectedOpt = $(this).find('option:selected');
        var email = selectedOpt.data('email') || '';
        $('#pre-send-email-' + idx).val(email);
    });

    // Final confirm send from modal
    $('#btn-confirm-pre-send').on('click', function() {
        const $btn = $(this);
        const originalHtml = $btn.html();
        const mode = $('#pre-send-mode').val();
        const rowKeys = JSON.parse($('#pre-send-rowkeys').val() || '[]');
        const bulkMailUrl = '{{ url($url_menu) }}/update'; // Reusing update method in Controller

        // 1. Validate & Collect approver overrides
        let allFilled = true;
        const approverMap = {};
        $('.pre-send-approver').each(function() {
            const rk = $(this).data('rowkey');
            const val = $(this).val();
            if (!val) { 
                allFilled = false; 
            } else {
                approverMap[rk] = val;
            }
        });

        if (!allFilled) {
            Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Semua baris harus memiliki Approver terpilih.' });
            return;
        }

        // 2. Safety filter: Jangan kirim yang sudah SENT
        const alreadySent = @json($sent_row_keys ?? []);
        const finalRows = rowKeys.filter(rk => !alreadySent.includes(rk));

        if (finalRows.length === 0) {
            Swal.fire('Info', 'Data terpilih sudah berstatus SENT.', 'info');
            return;
        }

        // 3. Matikan tombol & Tampilkan Loading
        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Mengirim...');

        $.post(bulkMailUrl, {
            _token: '{{ csrf_token() }}',
            _method: 'PUT',
            mode: mode,
            selected_rows: finalRows,
            approver_override: approverMap
        })
        .done(function (res) {
            // Because controller returns redirect on standard form, 
            // but for AJAX we should ideally return JSON.
            // However, since controller is mostly redirect-based, 
            // the simplest way is to manually reload here.
            Swal.fire('Berhasil', 'Proses pengiriman selesai.', 'success').then(() => {
                location.reload();
            });
        })
        .fail(function (err) {
            console.error(err);
            $btn.prop('disabled', false).html(originalHtml);
            Swal.fire('Gagal', 'Terjadi kesalahan saat memproses data.', 'error');
        });
    });

    $('#btn-send-selection').on('click', function () {
        var selectedIds = $('.row-select:checked').map(function () {
            return $(this).val();
        }).get();

        if (selectedIds.length === 0) {
            toggleSendSelectionButton();
            return;
        }
        openPreSendModal('send_selection', selectedIds);
    });

    $('#btn-resend-all').on('click', function () {
        var unsentCount = $('.row-select:not(:disabled)').length;
        if (unsentCount === 0) {
            Swal.fire({ title: 'Info', text: 'Seluruh sample telah terkirim.', icon: 'info' });
            return;
        }
        openPreSendModal('resend_failed_jobs', []);
    });

    $(document).on('click', '.btn-analyze', function () {
        var sampleId = $(this).data('id');
        var $btn = $(this);
        var $row = $btn.closest('tr');
        var $errorCell = $row.find('.error-cell');
        var $bypassBtn = $row.find('.btn-bypass');

        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Analyzing...');

        $.get('{{ url("remail/analyze") }}', { id_sample: sampleId })
            .done(function (result) {
                if (result.success) {
                    $errorCell.html(
                        '<span class="text-primary fw-bold"><i class="fas fa-info-circle me-1"></i>' +
                        result.message + '</span>'
                    );
                    $bypassBtn.data('missing-from', result.missing_from_level);
                    $btn.removeClass('btn-primary').addClass('btn-primary')
                        .html('<i class="fas fa-check"></i> Analyzed');
                } else {
                    $errorCell.html('<span class="text-danger">' + result.message + '</span>');
                    $btn.prop('disabled', false).html('<i class="fas fa-search me-1"></i> Analyze');
                }
            })
            .fail(function () {
                $errorCell.html('<span class="text-danger">Gagal melakukan analyze.</span>');
                $btn.prop('disabled', false).html('<i class="fas fa-search me-1"></i> Analyze');
            });
    });

    // ── Bypass Button ───────────────────────────────────────────────
    $(document).on('click', '.btn-bypass', function () {
        var sampleId = $(this).data('id');
        var missingFrom = $(this).data('missing-from') || 0;

        Swal.fire({
            title: 'Bypass Approval?',
            html: 'Sampel <b>' + sampleId + '</b> akan otomatis disetujui dan status berubah menjadi <b>OnProgress</b>.' +
                  (missingFrom > 0 ? '<br><small class="text-info">Smart Bypass: hanya membuat level ≥ ' + missingFrom + '</small>' : '') +
                  '<br><br><small class="text-danger">Keputusan ini mengubah status sample langsung di database</small>',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#098365ff',
            confirmButtonText: 'Ya, Bypass Sekarang',
            cancelButtonText: 'Batal'
        }).then(function (result) {
            if (result.isConfirmed) {
                var form = $('<form method="POST" action="{{ url($url_menu) }}/bypass"></form>');
                form.append('<input type="hidden" name="_token" value="{{ csrf_token() }}">');
                form.append('<input type="hidden" name="id_sample" value="' + sampleId + '">');
                form.append('<input type="hidden" name="missing_from_level" value="' + missingFrom + '">');
                $('body').append(form);
                form.submit();
            }
        });
    });


    toggleSendSelectionButton();

    @if (Session::has('message'))
        @php
            $msg   = addslashes((string)Session::get('message'));
            $msg   = str_replace(["\r", "\n"], "", $msg);
            $cls   = Session::get('class', 'info');
            $icon  = $cls === 'success' ? 'success' : ($cls === 'danger' || $cls === 'error' ? 'error' : 'info');
        @endphp
        Swal.fire({
            icon: '{{ $icon }}',
            title: '{{ $cls === "success" ? "Berhasil!" : "Info" }}',
            text: '{{ $msg }}'
        });
    @endif
});
</script>
@endpush

@endsection

<div class="modal fade" id="modal-pre-send" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
        <div class="modal-content border-0">
            <div class="modal-body p-0">
                <input type="hidden" id="pre-send-mode">
                <input type="hidden" id="pre-send-rowkeys">
                <div class="px-4 py-3 bg-light border-bottom">
                    <span class="text-sm text-muted"><i class="fas fa-info-circle me-1 text-info"></i>
                    Baris yang approvernya <strong>telah terdeteksi</strong> otomatis terisi. Baris yang kosong <span class="text-danger font-weight-bold">wajib diisi</span> sebelum melanjutkan.
                    </span>
                </div>
                <div class="table-responsive px-2 py-2">
                    <table class="table table-bordered table-sm align-middle mb-0" id="pre-send-table">
                        <thead style="background-color:#00b7bd4f;">
                            <tr>
                                <th>ID Sample</th>
                                <th>Approver</th>
                                <th>Email</th>
                            </tr>
                        </thead>
                        <tbody id="pre-send-tbody">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary mb-0" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Batal
                </button>
                <buttry type="button" class="btn btn-primary mb-0" id="btn-confirm-pre-send">
                    <i class="fas fa-paper-plane me-1"></i>Kirim Sekarang
                </button>
            </div>
        </div>
    </div>
</div>