@extends('layouts.app')

@section('content')
</div>
<div class="container">
    <style>
        :root {
            --primary-color: #34548A;
            --secondary-color: #ebe7e7;
            --border-color: #d7d7d7;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border: 2px solid var(--border-color) !important;
            color: var(--primary-color) !important;
            font-weight: bold;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
            color: var(--secondary-color) !important;
            background: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            font-weight: bold !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            border: 2px solid var(--primary-color) !important;
            background: var(--primary-color) !important;
            color: var(--secondary-color) !important;
            font-weight: bold !important;
        }

        .dataTables_info {
            color: var(--primary-color) !important;
            font-size: 16px;
            font-weight: bold;
        }

        .dataTables_length { display: none; }

        table.dataTable { border: none !important; }

        table.dataTable thead {
            background-color: #34548A !important;
            color: #ebe7e7 !important;
        }

        table.dataTable thead th,
        table.dataTable tbody td {
            border: none !important;
        }

        table.dataTable tbody td { padding: 16px 6px; font-size: 15px; }

        table.dataTable.stripe tbody tr.odd { background-color: #d7d7d7 !important; }
        table.dataTable.stripe tbody tr.even { background-color: #f8f8f8 !important; }

        #cigeBqTable tbody tr { cursor: pointer; }
        #cigeBqTable tbody tr.cige-bq-active td { outline: 2px solid #34548A; outline-offset: -2px; }

        .cige-bq-toolbar { display: flex; align-items: center; gap: 10px; margin: 16px 0 20px; flex-wrap: wrap; }
        .cige-bq-toolbar .btn.active { background: #34548A; color: #fff; border-color: #34548A; }

        .cige-result-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 10000;
            overflow: auto;
            background: rgba(15, 23, 42, 0.45);
            padding: 24px 16px;
        }

        .cige-result-dialog {
            position: relative;
            max-width: 860px;
            margin: 0 auto;
            background: #f4f7fb;
            border: 1px solid #e3e8f0;
            border-radius: 12px;
            padding: 16px;
        }

        .cige-bq-close {
            position: absolute;
            top: 8px;
            right: 12px;
            border: 0;
            background: transparent;
            cursor: pointer;
            font-size: 28px;
            line-height: 1;
            color: #667085;
            padding: 0;
        }

        .cige-result-head {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 36px;
            margin-bottom: 12px;
        }

        .cige-result-head h2 {
            position: absolute;
            left: 0;
            margin: 0;
            color: #2f6fed;
            font-size: 20px;
            font-weight: 700;
        }
        .cige-result-actions { display: flex; justify-content: center; gap: 8px; }
        .cige-bq-detail { width: 100%; border-collapse: collapse; background: #fff; }
        .cige-bq-detail td { border: 1px solid #d7d7d7; padding: 8px 10px; vertical-align: top; font-size: 14px; word-break: break-word; }
        .cige-bq-detail td:first-child { width: 220px; font-weight: 700; background: #f7f7f7; }
    </style>

    <h1 style="margin-top: 4%;">{{ strtoupper($source) }} Records</h1>

    @if(session('cige_bq_sync'))
        <div class="alert alert-success">{{ session('cige_bq_sync') }}</div>
    @endif
    @if(session('cige_bq_sync_error'))
        <div class="alert alert-danger">{{ session('cige_bq_sync_error') }}</div>
    @endif

    <div class="cige-bq-toolbar">
        <a class="btn btn-default {{ $source === 'cel' ? 'active' : '' }}" href="{{ route('cigeBqRecords', ['source' => 'cel']) }}">CEL Table</a>
        <a class="btn btn-default {{ $source === 'cdr' ? 'active' : '' }}" href="{{ route('cigeBqRecords', ['source' => 'cdr']) }}">CDR Table</a>
        <form method="POST" action="{{ route('cigeBqRecordsSync') }}" style="margin:0;">
            @csrf
            <input type="hidden" name="source" value="{{ $source }}">
            <button type="submit" class="btn btn-primary">Sync with BQ</button>
        </form>
        <a class="btn btn-default" href="{{ route('cigeTest') }}">Back to Calling Results</a>
    </div>

    <div class="container daily-calling-status-table-container1">
        <table id="cigeBqTable" class="stripe">
            <thead>
                <tr>
                    @if($source === 'cdr')
                        <th>Call Start</th>
                        <th>Call ID</th>
                        <th>Src User</th>
                        <th>Dst User</th>
                        <th>SIP Code</th>
                        <th>Call Type</th>
                    @else
                        <th>Decision Time</th>
                        <th>Call ID</th>
                        <th>Original TN</th>
                        <th>Substitute TN</th>
                        <th>Enforcement</th>
                        <th>Reason</th>
                    @endif
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $index => $row)
                    <tr data-index="{{ $index }}">
                        @if($source === 'cdr')
                            <td>{{ $row['call_start'] ?? '' }}</td>
                            <td>{{ $row['call_id'] ?? '' }}</td>
                            <td>{{ $row['src_user'] ?? '' }}</td>
                            <td>{{ $row['dst_user'] ?? '' }}</td>
                            <td>{{ $row['sip_code'] ?? '' }}</td>
                            <td>{{ $row['call_type'] ?? '' }}</td>
                        @else
                            <td>{{ $row['decision_ts'] ?? '' }}</td>
                            <td>{{ $row['call_id'] ?? '' }}</td>
                            <td>{{ $row['original_tn'] ?? '' }}</td>
                            <td>{{ $row['substitute_tn'] ?? '' }}</td>
                            <td>{{ $row['enforcement_action'] ?? '' }}</td>
                            <td>{{ $row['primary_reason_tag'] ?? '' }}</td>
                        @endif
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div id="cigeBqModal" class="cige-result-modal">
    <div class="cige-result-dialog">
        <div class="cige-result-head">
            <h2>Record Details</h2>
            <div class="cige-result-actions">
                <button type="button" class="btn btn-primary" id="cigeBqPrev">Previous</button>
                <button type="button" class="btn btn-primary" id="cigeBqNext">Next</button>
            </div>
            <button type="button" class="cige-bq-close" id="cigeBqModalClose" aria-label="Close">&times;</button>
        </div>
        <table class="cige-bq-detail" id="cigeBqDetailTable"></table>
    </div>
</div>

<script type="application/json" id="cigeBqRows">@json($rows)</script>
<script>
    var cigeBqRows = JSON.parse(document.getElementById('cigeBqRows').textContent || '[]');
    var cigeBqIndex = 0;

    function cigeBqRender(index) {
        var row = cigeBqRows[index] || {};
        var table = document.getElementById('cigeBqDetailTable');
        table.innerHTML = '';
        Object.keys(row).forEach(function (key) {
            var value = row[key];
            if (value !== null && typeof value === 'object') {
                value = JSON.stringify(value);
            }
            var tr = document.createElement('tr');
            var tdKey = document.createElement('td');
            var tdVal = document.createElement('td');
            tdKey.textContent = key;
            tdVal.textContent = value === null || value === undefined ? '' : String(value);
            tr.appendChild(tdKey);
            tr.appendChild(tdVal);
            table.appendChild(tr);
        });
        cigeBqIndex = index;
        var dt = $('#cigeBqTable').DataTable();
        $('#cigeBqTable tbody tr').removeClass('cige-bq-active');
        var node = dt.row(index).node();
        if (node) {
            $(node).addClass('cige-bq-active');
        }
        $('#cigeBqPrev').prop('disabled', index <= 0);
        $('#cigeBqNext').prop('disabled', index >= cigeBqRows.length - 1);
        $('#cigeBqModal').show();
    }

    $(function () {
        var table = $('#cigeBqTable').DataTable({
            pageLength: 10,
            ordering: false,
            bLengthChange: false,
            language: { search: '', searchPlaceholder: 'Search' }
        });

        $('#cigeBqTable').on('click', 'tbody tr', function () {
            var index = Number($(this).attr('data-index'));
            if (!Number.isNaN(index) && cigeBqRows[index]) {
                cigeBqRender(index);
            }
        });

        function cigeBqStep(delta) {
            var target = cigeBqIndex + delta;
            if (target < 0 || target >= cigeBqRows.length) {
                return;
            }
            var node = table.row(target).node();
            var shown = table.rows({ search: 'applied', order: 'current' }).nodes().toArray();
            var position = shown.indexOf(node);
            if (position >= 0) {
                table.page(Math.floor(position / table.page.len())).draw(false);
            }
            cigeBqRender(target);
        }

        $('#cigeBqPrev').on('click', function () {
            cigeBqStep(-1);
        });

        $('#cigeBqNext').on('click', function () {
            cigeBqStep(1);
        });

        $('#cigeBqModalClose').on('click', function () {
            $('#cigeBqModal').hide();
        });

        $('#cigeBqModal').on('click', function (event) {
            if (event.target === this) {
                $(this).hide();
            }
        });
    });
</script>
@endsection