@extends('parts.container')

@section('styles')
    <link href="{{ asset('vendor/src/assets/css/dark/dashboard/dash_1.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('vendor/src/assets/css/light/dashboard/dash_1.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('vendor/src/plugins/src/flatpickr/flatpickr.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/src/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/light/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/plugins/css/dark/table/datatable/dt-global_style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('vendor/src/assets/css/dark/components/modal.css') }}" />
@endsection

@section('content')
<div class="row layout-top-spacing">
    <div class="col-md-12 layout-spacing">
        <div class="widget widget-card-four d-flex">
            <div class="widget-content d-flex align-items-center w-100" style="gap: 12px;">
                <input id="rangeCalendarFlatpickr" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Select Date.." style="max-width: 240px;">
                <div class="d-flex align-items-center">
                    <label class="mr-2 mb-0">Operator</label>
                    <select id="operatorSelect" class="form-control" style="max-width: 200px">
                        <option value="ALL" @if($data['default_operator'] === 'ALL') selected @endif>ALL</option>
                    </select>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="onlySucceededSwitch">
                    <label class="form-check-label" for="onlySucceededSwitch">Show only succeeded</label>
                </div>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="includeChargesSwitch">
                    <label class="form-check-label" for="includeChargesSwitch">Include charges</label>
                </div>
                <button class="btn btn-primary ml-auto" onclick="onDateSelected()">Submit</button>
            </div>
        </div>
    </div>
</div>

<div class="row layout-spacing">
    <div class="col-lg-12">
        <div class="statbox widget box box-shadow">
            <div class="widget-content widget-content-area">
                <div class="table-responsive">
                    <table id="transactionsTable" class="table style-3 dt-table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Operator</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Automation</th>
                                <th>Currency</th>
                                <th>Amount</th>
                                <th>User</th>
                                <th>Wallet</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
  </div>

<div class="modal fade" id="transactionDetailsModal" tabindex="-1" role="dialog" aria-labelledby="transactionDetailsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transactionDetailsLabel">Transaction details</h5>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <tbody id="transactionDetailsBody"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i> Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('vendor/src/plugins/src/table/datatable/datatables.js') }}"></script>
<script src="{{ asset('vendor/src/plugins/src/flatpickr/flatpickr.js') }}"></script>
<script>
    const datePicker = flatpickr("#rangeCalendarFlatpickr", { mode: "range", dateFormat: "Y-m-d" });
    let selectedDateRange = null;
    let onlySucceeded = false;
    let includeCharges = false;
    const userId = "{{ $data['user_id'] }}" !== "null" ? {{ $data['user_id'] }} : null;

    function onDateSelected() {
        selectedDateRange = datePicker.input.value || null;
        table.ajax.reload();
    }

    // Load operators from server
    fetch(`{{ route('transactions.operators') }}`)
        .then(r => r.json())
        .then(({operators}) => {
            const sel = document.getElementById('operatorSelect');
            (operators || []).forEach(op => {
                const opt = document.createElement('option');
                opt.value = op;
                opt.textContent = op;
                sel.appendChild(opt);
            });
            // Set default from backend
            const def = `{{ $data['default_operator'] }}`;
            if (def) sel.value = def;
            table.ajax.reload();
        });

    document.getElementById('onlySucceededSwitch').addEventListener('change', (e) => {
        onlySucceeded = e.target.checked;
        table.ajax.reload();
    });
    document.getElementById('includeChargesSwitch').addEventListener('change', (e) => {
        includeCharges = e.target.checked;
        table.ajax.reload();
    });
    document.getElementById('operatorSelect').addEventListener('change', () => table.ajax.reload());

    const table = $('#transactionsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `{{ route('transactions.list') }}`,
            data: function(d) {
                d.user_id = userId;
                d.date_range = selectedDateRange;
                d.only_succeeded = onlySucceeded;
                d.include_charges = includeCharges;
                d.operator = document.getElementById('operatorSelect').value || 'ALL';
            }
        },
        columns: [
            {
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: 'operator' },
            { data: 'type', render: function(data, type, row){ return row.subtype ? `${data}/${row.subtype}` : data; } },
            { data: 'status', render: function(data){
                const statusMap = { new: 'badge-secondary', accepted: 'badge-primary', succeeded: 'badge-success', failed: 'badge-danger' };
                const label = statusMap[data] || 'badge-light';
                return `<span class="badge ${label}">${data.charAt(0).toUpperCase() + data.slice(1)}</span>`;
            } },
            { data: 'automation_status', render: function(data){
                if (!data) return '—';
                const label = data === 'processed' ? 'badge-warning' : (data === 'success' ? 'badge-success' : (data === 'picked' || data === 'pending' ? 'badge-secondary' : 'badge-danger'));
                return `<span class="badge ${label}">${data}</span>`;
            } },
            { data: 'currency_code' },
            { data: 'amount' },
            { data: 'user' },
            { data: 'wallet_no' },
            { data: 'created_at' },
            {
                data: null,
                orderable: false,
                render: function(data, type, row) {
                    let buttons = `<button class="btn btn-sm btn-outline-primary view-transaction">View more</button>`;
                    if (row.automation_status === 'processed') {
                        buttons += ` <button class="btn btn-sm btn-outline-success finalize-transaction" data-status="success">Mark Succeeded</button>`;
                        buttons += ` <button class="btn btn-sm btn-outline-danger finalize-transaction" data-status="failed">Mark Failed</button>`;
                    }
                    return buttons;
                }
            }
        ],
        scrollX: true,
        dom: "<'dt--top-section'<'row'<'col-12 col-sm-6'l><'col-12 col-sm-6'f>>>tr<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'i'p>",
        oLanguage: {
            oPaginate: { sPrevious: '←', sNext: '→' },
            sInfo: "Showing page _PAGE_ of _PAGES_",
            sSearch: "Search...",
            sLengthMenu: "Results: _MENU_",
        },
        lengthMenu: [5, 10, 20, 50],
        pageLength: 50
    });

    const formatJson = (value) => {
        if (!value) return '—';
        try {
            const parsed = typeof value === 'string' ? JSON.parse(value) : value;
            return JSON.stringify(parsed, null, 2);
        } catch (e) {
            return value;
        }
    };

    const buildDetailsRow = (label, value) => {
        return `<tr><th>${label}</th><td><pre class="mb-0">${value ?? '—'}</pre></td></tr>`;
    };

    $('#transactionsTable').on('click', '.view-transaction', function() {
        const row = $(this).closest('tr');
        const data = table.row(row).data();
        if (!data) return;

        const details = [];
        details.push(buildDetailsRow('Reference', data.uuid));
        details.push(buildDetailsRow('External Reference', data.external_reference));
        details.push(buildDetailsRow('Operator', data.operator));
        details.push(buildDetailsRow('Type', data.subtype ? `${data.type}/${data.subtype}` : data.type));
        details.push(buildDetailsRow('Status', data.status));
        details.push(buildDetailsRow('Amount', `${data.currency_code} ${data.amount}`));
        details.push(buildDetailsRow('User', data.user));
        details.push(buildDetailsRow('Wallet', data.wallet_no));
        details.push(buildDetailsRow('Date', data.created_at));
        if (data.charge_amount) {
            details.push(buildDetailsRow('Charge Amount', `${data.charge_currency_code || ''} ${data.charge_amount}`));
        }
        details.push(buildDetailsRow('Receiver Description', data.receiver_description));
        details.push(buildDetailsRow('Request Params', formatJson(data.request_params)));
        details.push(buildDetailsRow('Response', formatJson(data.response)));
        details.push(buildDetailsRow('Result', formatJson(data.result)));
        details.push(buildDetailsRow('Meta', formatJson(data.meta)));

        document.getElementById('transactionDetailsBody').innerHTML = details.join('');
        $('#transactionDetailsModal').modal('show');
    });

    $('#transactionsTable').on('click', '.finalize-transaction', function() {
        const row = $(this).closest('tr');
        const data = table.row(row).data();
        if (!data) return;

        const status = $(this).data('status');
        const label = status === 'success' ? 'succeeded' : 'failed';
        if (!confirm(`Mark this transaction as ${label}? This will settle the wallet and cannot be undone.`)) return;

        fetch(`/admin/transactions/${data.uuid}/finalize`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ status }),
        })
            .then(r => r.json())
            .then(resp => {
                if (!resp.success) throw new Error(resp.message || 'Failed to finalise transaction');
                table.ajax.reload(null, false);
            })
            .catch(err => alert(err.message));
    });
</script>
@endsection