@extends('parts.container')

@section('styles')
    <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-lg-12">
            <div class="widget widget-card-four">
                <div class="widget-content">
                    <h4 class="mb-1">User statement</h4>
                    <p class="text-muted">Statement for {{ $user->first_name }} {{ $user->last_name }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row layout-top-spacing">
        <div class="col-lg-6 layout-spacing">
            <div class="widget widget-card-four h-100">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">User details</h6>
                        </div>
                    </div>
                    <div class="w-content">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <tbody>
                                    <tr>
                                        <th>Name</th>
                                        <td>{{ $user->first_name }} {{ $user->last_name }}</td>
                                    </tr>
                                    <tr>
                                        <th>Email</th>
                                        <td>{{ $user->email }}</td>
                                    </tr>
                                    <tr>
                                        <th>Phone</th>
                                        <td>
                                            @if ($user->userDetails?->customer_phone)
                                                {{ $user->userDetails?->customer_dial_code }}{{ $user->userDetails?->customer_phone }}
                                            @else
                                                —
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Country</th>
                                        <td>{{ $user->userDetails?->customer_country ?? '—' }}</td>
                                    </tr>
                                    <tr>
                                        <th>ID</th>
                                        <td>
                                            {{ $user->userDetails?->id_type ?? '—' }}
                                            {{ $user->userDetails?->id_number ?? '' }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Date registered</th>
                                        <td>{{ $user->created_at?->format('Y-m-d H:i') ?? '—' }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 layout-spacing">
            <div class="widget widget-card-four h-100">
                <div class="widget-content">
                    <div class="w-header">
                        <div class="w-info">
                            <h6 class="value">Wallet details</h6>
                        </div>
                    </div>
                    <div class="w-content">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <th>Alias</th>
                                        <th>Currency</th>
                                        <th>Wallet No</th>
                                        <th>Available</th>
                                        <th>Actual</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($wallets as $wallet)
                                        <tr>
                                            <td>{{ $wallet->alias ?? '—' }}</td>
                                            <td>{{ $wallet->currency_code ?? '—' }}</td>
                                            <td>{{ $wallet->wallet_no ?? '—' }}</td>
                                            <td>{{ number_format((float) ($wallet->available_balance ?? 0), 2) }}</td>
                                            <td>{{ number_format((float) ($wallet->actual_balance ?? 0), 2) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted">No wallets available.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row layout-top-spacing">
        <div class="col-md-6 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="userStatementDateRange" class="form-control flatpickr flatpickr-input active" type="text" placeholder="Select Date.." style="max-width: 240px;">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="showFailedSwitch">
                        <label class="form-check-label" for="showFailedSwitch">All statuses</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="userStatementTable" class="table style-3 dt-table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Operator</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Currency</th>
                                    <th>Amount</th>
                                    <th>Wallet</th>
                                    <th>Date</th>
                                    <th>View more</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("#userStatementDateRange", { mode: "range", dateFormat: "Y-m-d" });
        let selectedDateRange = null;
        let showFailed = false;
        const userId = {{ $user->id }};

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

        document.getElementById('showFailedSwitch').addEventListener('change', (e) => {
            showFailed = e.target.checked;
            table.ajax.reload();
        });

        const table = $('#userStatementTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: `{{ route('transactions.list') }}`,
                data: function(d) {
                    d.user_id = userId;
                    d.date_range = selectedDateRange;
                    d.show_failed = showFailed;
                    d.operator = '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: 'currency_code' },
                { data: 'amount' },
                { data: 'wallet_no' },
                { data: 'created_at' },
                {
                    data: null,
                    orderable: false,
                    render: function() {
                        return `<button class="btn btn-sm btn-outline-primary view-transaction">View more</button>`;
                    }
                }
            ],
            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: 25
        });

        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>`;
        };

        $('#userStatementTable').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('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');
        });
    </script>
@endsection