@extends('layouts.app')
@section('content')
<style>
    :root {
        --cd-primary: #34548A;
        --cd-border: #d7d7d7;
        --cd-pending: #c27a00;
        --cd-completed: #1f7a3f;
        --cd-busy: #1a5f9e;
        --cd-failed: #a12b2b;
    }

    .cd-wrap {
        padding: 20px 24px 40px;
    }

    .cd-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .cd-header h1 {
        margin: 0;
        color: var(--cd-primary);
        font-size: 28px;
        font-weight: 700;
    }

    .cd-header-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #555;
        font-size: 14px;
    }

    .cd-refresh-btn,
    .cd-reset-btn {
        background: var(--cd-primary);
        color: #fff;
        border: none;
        border-radius: 4px;
        height: 32px;
        padding: 0 16px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        line-height: 32px;
        white-space: nowrap;
        box-sizing: border-box;
    }

    .cd-reset-btn {
        background: #6c757d;
    }

    .cd-refresh-btn:disabled,
    .cd-reset-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .cd-filters {
        display: grid;
        grid-template-columns: 160px 1fr 1fr auto;
        gap: 14px;
        align-items: end;
        margin-bottom: 20px;
        background: #fff;
        border: 1px solid var(--cd-border);
        border-radius: 4px;
        padding: 14px 16px;
    }

    .cd-filter-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .cd-filter-field label,
    .cd-filter-actions > .cd-filter-label {
        display: block;
        height: 20px;
        font-size: 13px;
        font-weight: 600;
        color: var(--cd-primary);
        margin-bottom: 6px;
        line-height: 20px;
    }

    .cd-filter-field .fs-wrap {
        width: 100%;
    }

    .cd-filter-field .fs-label-wrap {
        height: 32px;
        box-sizing: border-box;
    }

    .cd-filter-field .fs-label-wrap .fs-label {
        padding: 0 22px 0 8px;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
    }

    .cd-filter-field input[type="date"] {
        border: 1px solid var(--cd-border);
        border-radius: 4px;
        height: 32px;
        padding: 0 10px;
        font-size: 14px;
        color: #222;
        background: #fff;
        box-sizing: border-box;
        width: 100%;
        line-height: 30px;
    }

    .cd-filter-actions {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .cd-filter-actions .cd-filter-btns {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 32px;
    }

    @media (max-width: 900px) {
        .cd-filters {
            grid-template-columns: 1fr;
        }
    }

    .cd-summary {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 20px;
        overflow-x: auto;
    }

    .cd-card {
        background: #fff;
        border: 1px solid var(--cd-border);
        border-left: 3px solid var(--cd-primary);
        border-radius: 4px;
        padding: 8px 10px;
        flex: 1 1 0;
        min-width: 90px;
    }

    .cd-card.pending { border-left-color: var(--cd-pending); }
    .cd-card.completed { border-left-color: var(--cd-completed); }
    .cd-card.busy { border-left-color: var(--cd-busy); }
    .cd-card.failed { border-left-color: var(--cd-failed); }
    .cd-card.active { border-left-color: var(--cd-primary); }
    .cd-card.running {
        border-left-color: var(--cd-busy);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 2.2 1 180px;
        min-width: 280px;
        text-align: center;
    }

    .cd-card.running .cd-running-head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

    .cd-card.running .cd-card-label {
        margin-bottom: 0;
    }

    .cd-card-label {
        font-size: 11px;
        color: #666;
        margin-bottom: 2px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .cd-card-value {
        font-size: 18px;
        font-weight: 700;
        color: #222;
        line-height: 1.2;
    }

    .cd-card-meta {
        font-size: 14px;
        font-weight: 700;
        color: #222;
        line-height: 1.2;
    }

    .cd-card-stats {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 18px;
    }

    .cd-card-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
    }

    .cd-card-stat-label {
        font-size: 10px;
        color: #777;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    .cd-card-stat-value {
        font-size: 16px;
        font-weight: 700;
        color: #222;
        line-height: 1.2;
    }

    .cd-section {
        background: #fff;
        border: 1px solid var(--cd-border);
        border-radius: 4px;
        padding: 16px;
        margin-bottom: 20px;
    }

    .cd-section h2 {
        margin: 0 0 14px;
        font-size: 18px;
        color: var(--cd-primary);
        font-weight: 700;
    }

    .cd-section table.dataTable thead {
        background-color: var(--cd-primary) !important;
        color: #fff !important;
    }

    .cd-section table.dataTable thead th,
    .cd-section table.dataTable tbody td {
        border: none !important;
        padding: 12px 10px;
    }

    .cd-section table tbody tr:nth-child(even) {
        background-color: #ececec;
    }

    .cd-section table tbody tr:nth-child(odd) {
        background-color: #f8f8f8;
    }

    .cd-badge {
        display: inline-block;
        min-width: 42px;
        text-align: center;
        padding: 2px 8px;
        border-radius: 3px;
        font-weight: 700;
        font-size: 13px;
    }

    .cd-badge.pending { background: #fff3d9; color: var(--cd-pending); }
    .cd-badge.completed { background: #e4f6ea; color: var(--cd-completed); }
    .cd-badge.busy { background: #e3f0fb; color: var(--cd-busy); }
    .cd-badge.failed { background: #fde8e8; color: var(--cd-failed); }
    .cd-badge.zero { background: #f0f0f0; color: #888; }

    .cd-mismatch {
        background: #fde8e8 !important;
    }

    #cd-loader {
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.8);
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #cd-loader.active {
        display: flex;
    }

    .cd-spinner {
        width: 48px;
        height: 48px;
        border: 5px solid #e5e5e5;
        border-top-color: var(--cd-primary);
        border-radius: 50%;
        animation: cd-spin 0.8s linear infinite;
    }

    @keyframes cd-spin {
        to { transform: rotate(360deg); }
    }

    @media (max-width: 1100px) {
        .cd-summary {
            flex-wrap: wrap;
            justify-content: center;
        }

        .cd-card {
            flex: 1 1 calc(33.33% - 8px);
            min-width: 110px;
        }

        .cd-card.running {
            flex: 1 1 100%;
        }
    }

    @media (max-width: 700px) {
        .cd-card {
            flex: 1 1 calc(50% - 8px);
        }
    }
</style>

<div id="cd-loader">
    <div class="cd-spinner"></div>
    <div style="margin-top:12px;font-weight:600;color:#34548A;">Loading calling counts...</div>
</div>

<div class="cd-wrap">
    <div class="cd-header">
        <h1>Calling Dashboard</h1>
        <div class="cd-header-meta">
            <span id="cd-last-updated">—</span>
        </div>
    </div>

    <div class="cd-filters">
        <div class="cd-filter-field">
            <label for="cd-date-filter">Date</label>
            <input type="date" id="cd-date-filter" class="cd-date-filter">
        </div>
        <div class="cd-filter-field">
            <label for="cd-carrier-filter">Carrier</label>
            <select id="cd-carrier-filter" class="cd-carrier-filter" multiple></select>
        </div>
        <div class="cd-filter-field">
            <label for="cd-calltype-filter">Call Type</label>
            <select id="cd-calltype-filter" class="cd-calltype-filter" multiple></select>
        </div>
        <div class="cd-filter-actions">
            <div class="cd-filter-label">&nbsp;</div>
            <div class="cd-filter-btns">
                <button type="button" class="cd-refresh-btn" id="cd-refresh-btn">Refresh</button>
                <button type="button" class="cd-reset-btn" id="cd-reset-filters">Reset Filters</button>
            </div>
        </div>
    </div>

    <div class="cd-summary">
        <div class="cd-card active">
            <div class="cd-card-label">Total Calls</div>
            <div class="cd-card-value" id="sum-total">0</div>
        </div>
        <div class="cd-card pending">
            <div class="cd-card-label">Pending</div>
            <div class="cd-card-value" id="sum-pending">0</div>
        </div>
        <div class="cd-card completed">
            <div class="cd-card-label">Completed</div>
            <div class="cd-card-value" id="sum-completed">0</div>
        </div>
        <div class="cd-card busy">
            <div class="cd-card-label">Busy / Running</div>
            <div class="cd-card-value" id="sum-busy">0</div>
        </div>
        <div class="cd-card failed">
            <div class="cd-card-label">Failed</div>
            <div class="cd-card-value" id="sum-failed">0</div>
        </div>
        <div class="cd-card busy">
            <div class="cd-card-label">Busy Devices</div>
            <div class="cd-card-value" id="sum-busy-devices">0</div>
        </div>
        <div class="cd-card active">
            <div class="cd-card-label">Active Devices</div>
            <div class="cd-card-value" id="sum-active-devices">0</div>
        </div>
        <div class="cd-card running">
            <div class="cd-running-head">
                <div class="cd-card-label">Running Carriers</div>
                <div class="cd-card-meta">(<span id="sum-running-carriers">0</span>)</div>
            </div>
            <div class="cd-card-stats">
                <div class="cd-card-stat">
                    <div class="cd-card-stat-label">Busy Calls</div>
                    <div class="cd-card-stat-value" id="sum-running-busy-calls">0</div>
                </div>
                <div class="cd-card-stat">
                    <div class="cd-card-stat-label">Busy Devices</div>
                    <div class="cd-card-stat-value" id="sum-running-busy-devices">0</div>
                </div>
                <div class="cd-card-stat">
                    <div class="cd-card-stat-label">Active Devices</div>
                    <div class="cd-card-stat-value" id="sum-running-active-devices">0</div>
                </div>
            </div>
        </div>
    </div>

    <div class="cd-section">
        <h2>Calls by Carrier &amp; Call Type</h2>
        <table id="cd-calls-table" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Carrier</th>
                    <th>Call Type</th>
                    <th>Pending</th>
                    <th>Completed</th>
                    <th>Busy</th>
                    <th>Failed</th>
                    <th>Full Failed</th>
                    <th>Total</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="cd-section">
        <h2>Busy Calls vs Device Status</h2>
        <table id="cd-busy-table" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Carrier</th>
                    <th>Busy Calls</th>
                    <th>Free Devices</th>
                    <th>Busy Devices</th>
                    <th>Maintenance</th>
                    <th>Total Devices</th>
                    <th>Busy Calls vs Busy Devices</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="cd-section">
        <h2>Busy Calls by Device</h2>
        <table id="cd-device-table" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Device Number</th>
                    <th>Busy Calls</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script>
(function () {
    let callsTable = null;
    let busyTable = null;
    let deviceTable = null;
    let rawData = {
        carrier_call_counts: [],
        carrier_busy_counts: [],
        busy_calls_by_device: [],
        running_carrier_counts: []
    };
    let filtersInitialized = false;

    function badge(value, type) {
        const n = Number(value) || 0;
        const cls = n === 0 ? 'zero' : type;
        return '<span class="cd-badge ' + cls + '">' + n.toLocaleString() + '</span>';
    }

    function sumField(rows, field) {
        return rows.reduce(function (acc, row) {
            return acc + (Number(row[field]) || 0);
        }, 0);
    }

    function setLoading(isLoading) {
        $('#cd-loader').toggleClass('active', isLoading);
        $('#cd-refresh-btn').prop('disabled', isLoading);
        $('#cd-reset-filters').prop('disabled', isLoading);
    }

    function uniqueSorted(values) {
        return values
            .filter(function (v, i, arr) { return v !== null && v !== undefined && v !== '' && arr.indexOf(v) === i; })
            .sort(function (a, b) { return String(a).localeCompare(String(b)); });
    }

    function getSelectedValues($select) {
        const val = $select.val();
        return Array.isArray(val) ? val : (val ? [val] : []);
    }

    function populateFilterOptions() {
        const carriers = uniqueSorted(
            rawData.carrier_call_counts.map(function (r) { return r.carrier_name; })
                .concat(rawData.carrier_busy_counts.map(function (r) { return r.carrier_name; }))
        );
        const callTypes = uniqueSorted(
            rawData.carrier_call_counts.map(function (r) { return r.call_type_notes; })
        );

        const selectedCarriers = getSelectedValues($('#cd-carrier-filter'));
        const selectedCallTypes = getSelectedValues($('#cd-calltype-filter'));

        const $carrierOptions = $(document.createDocumentFragment());
        carriers.forEach(function (c) {
            $carrierOptions.append($('<option>', {
                value: c,
                text: c,
                selected: selectedCarriers.indexOf(c) !== -1
            }));
        });

        const $callTypeOptions = $(document.createDocumentFragment());
        callTypes.forEach(function (c) {
            $callTypeOptions.append($('<option>', {
                value: c,
                text: c,
                selected: selectedCallTypes.indexOf(c) !== -1
            }));
        });

        $('#cd-carrier-filter').empty().append($carrierOptions);
        $('#cd-calltype-filter').empty().append($callTypeOptions);

        if (!filtersInitialized) {
            $('#cd-carrier-filter').fSelect({
                placeholder: 'Select Carrier(s)',
                numDisplayed: 2,
                overflowText: '{n} carriers selected',
                noResultsText: 'No carriers found',
                searchText: 'Search carriers',
                showSearch: true
            });
            $('#cd-calltype-filter').fSelect({
                placeholder: 'Select Call Type(s)',
                numDisplayed: 2,
                overflowText: '{n} call types selected',
                noResultsText: 'No call types found',
                searchText: 'Search call types',
                showSearch: true
            });
            filtersInitialized = true;
        } else {
            $('#cd-carrier-filter').fSelect('reload');
            $('#cd-calltype-filter').fSelect('reload');
        }
    }

    function getFilteredData() {
        const selectedCarriers = getSelectedValues($('#cd-carrier-filter'));
        const selectedCallTypes = getSelectedValues($('#cd-calltype-filter'));

        let callCounts = rawData.carrier_call_counts.slice();
        let busyCounts = rawData.carrier_busy_counts.slice();
        let runningCounts = rawData.running_carrier_counts.slice();

        if (selectedCarriers.length) {
            callCounts = callCounts.filter(function (row) {
                return selectedCarriers.indexOf(row.carrier_name) !== -1;
            });
            busyCounts = busyCounts.filter(function (row) {
                return selectedCarriers.indexOf(row.carrier_name) !== -1;
            });
            runningCounts = runningCounts.filter(function (row) {
                return selectedCarriers.indexOf(row.carrier_name) !== -1;
            });
        }

        if (selectedCallTypes.length) {
            callCounts = callCounts.filter(function (row) {
                return selectedCallTypes.indexOf(row.call_type_notes) !== -1;
            });
        }

        return {
            callCounts: callCounts,
            busyCounts: busyCounts,
            runningCounts: runningCounts,
            deviceCounts: rawData.busy_calls_by_device
        };
    }

    function renderSummary(callCounts, runningCounts) {
        const runningCarrierNames = runningCounts.map(function (row) {
            return row.carrier_name;
        });
        const activeCallCounts = callCounts.filter(function (row) {
            return runningCarrierNames.indexOf(row.carrier_name) !== -1;
        });

        const pending = sumField(activeCallCounts, 'pending');
        const completed = sumField(activeCallCounts, 'completed');
        const busy = sumField(runningCounts, 'busy_calls');
        const failed = sumField(activeCallCounts, 'failed') + sumField(activeCallCounts, 'fullfailed');
        const total = pending
            + completed
            + sumField(activeCallCounts, 'busy')
            + failed;
        const busyDevices = sumField(runningCounts, 'busy_devices');
        const activeDevices = sumField(runningCounts, 'active_devices');

        $('#sum-total').text(total.toLocaleString());
        $('#sum-pending').text(pending.toLocaleString());
        $('#sum-completed').text(completed.toLocaleString());
        $('#sum-busy').text(busy.toLocaleString());
        $('#sum-failed').text(failed.toLocaleString());
        $('#sum-busy-devices').text(busyDevices.toLocaleString());
        $('#sum-active-devices').text(activeDevices.toLocaleString());
        $('#sum-running-carriers').text(runningCounts.length.toLocaleString());
        $('#sum-running-busy-calls').text(busy.toLocaleString());
        $('#sum-running-busy-devices').text(busyDevices.toLocaleString());
        $('#sum-running-active-devices').text(activeDevices.toLocaleString());
    }

    function initOrReload(table, selector, data, columns, order) {
        if (table) {
            table.clear();
            table.rows.add(data);
            table.draw();
            return table;
        }

        return $(selector).DataTable({
            data: data,
            columns: columns,
            order: order || [[0, 'asc']],
            pageLength: 25,
            deferRender: true,
            createdRow: function (row, rowData) {
                if (rowData && typeof rowData.diff !== 'undefined' && rowData.diff !== 0) {
                    $(row).addClass('cd-mismatch');
                }
            }
        });
    }

    function renderTables() {
        const filtered = getFilteredData();
        renderSummary(filtered.callCounts, filtered.runningCounts);

        callsTable = initOrReload(callsTable, '#cd-calls-table', filtered.callCounts, [
            { data: 'carrier_name' },
            { data: 'call_type_notes' },
            { data: 'pending', render: function (d) { return badge(d, 'pending'); } },
            { data: 'completed', render: function (d) { return badge(d, 'completed'); } },
            { data: 'busy', render: function (d) { return badge(d, 'busy'); } },
            { data: 'failed', render: function (d) { return badge(d, 'failed'); } },
            { data: 'fullfailed', render: function (d) { return badge(d, 'failed'); } },
            {
                data: null,
                render: function (row) {
                    const total = (Number(row.pending) || 0)
                        + (Number(row.completed) || 0)
                        + (Number(row.busy) || 0)
                        + (Number(row.failed) || 0)
                        + (Number(row.fullfailed) || 0);
                    return total.toLocaleString();
                }
            }
        ], [[0, 'asc'], [1, 'asc']]);

        busyTable = initOrReload(busyTable, '#cd-busy-table', filtered.busyCounts, [
            { data: 'carrier_name' },
            { data: 'busy_calls', render: function (d) { return badge(d, 'busy'); } },
            { data: 'free_devices', render: function (d) { return badge(d, 'completed'); } },
            { data: 'busy_devices', render: function (d) { return badge(d, 'busy'); } },
            { data: 'maintenance_devices', render: function (d) { return badge(d, 'pending'); } },
            { data: 'total_devices', render: function (d) { return badge(d, 'busy'); } },
            {
                data: 'diff',
                render: function (d) {
                    const n = Number(d) || 0;
                    return '<span class="cd-badge ' + (n === 0 ? 'zero' : 'failed') + '">' + n + '</span>';
                }
            }
        ], [[1, 'desc']]);

        deviceTable = initOrReload(deviceTable, '#cd-device-table', filtered.deviceCounts, [
            { data: 'called_to' },
            { data: 'totalcalls', render: function (d) { return badge(d, 'busy'); } }
        ], [[1, 'desc']]);
    }

    function resetFilters() {
        $('#cd-carrier-filter option').prop('selected', false);
        $('#cd-calltype-filter option').prop('selected', false);
        $('#cd-carrier-filter').fSelect('reload');
        $('#cd-calltype-filter').fSelect('reload');

        var today = new Date();
        var todayStr = today.getFullYear() + '-'
            + String(today.getMonth() + 1).padStart(2, '0') + '-'
            + String(today.getDate()).padStart(2, '0');
        var reloadForDate = $('#cd-date-filter').val() !== todayStr;
        $('#cd-date-filter').val(todayStr);

        if (reloadForDate) {
            loadCounts();
        } else {
            renderTables();
        }
    }

    function loadCounts() {
        setLoading(true);

        $.ajax({
            url: "{{ route('getCallingCounts') }}",
            method: 'GET',
            dataType: 'json',
            data: { date: $('#cd-date-filter').val() }
        }).done(function (res) {
            rawData = {
                carrier_call_counts: res.carrier_call_counts || [],
                carrier_busy_counts: (res.carrier_busy_counts || []).map(function (row) {
                    return Object.assign({}, row, {
                        diff: (Number(row.busy_calls) || 0) - (Number(row.busy_devices) || 0)
                    });
                }),
                busy_calls_by_device: res.busy_calls_by_device || [],
                running_carrier_counts: res.running_carrier_counts || []
            };

            if (res.date) {
                $('#cd-date-filter').val(res.date);
            }
            populateFilterOptions();
            renderTables();
            $('#cd-last-updated').text('Updated: ' + new Date().toLocaleString());
        }).fail(function () {
            toastr.error('Failed to load calling counts');
        }).always(function () {
            setLoading(false);
        });
    }

    $(function () {
        $(".theme-selector").remove();

        var today = new Date();
        $('#cd-date-filter').val(
            today.getFullYear() + '-'
            + String(today.getMonth() + 1).padStart(2, '0') + '-'
            + String(today.getDate()).padStart(2, '0')
        );
        $('#cd-date-filter').attr('max', $('#cd-date-filter').val());

        $('#cd-refresh-btn').on('click', loadCounts);
        $('#cd-reset-filters').on('click', resetFilters);
        $(document).on('change', '#cd-date-filter', loadCounts);
        $(document).on('change', '#cd-carrier-filter, #cd-calltype-filter', renderTables);
        loadCounts();
    });
})();
</script>
@endsection