@extends('layouts/contentNavbarLayout')

@section('title', 'Dashboard - Analytics')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset('assets/js/dashboards-analytics.js') }}"></script>
@endsection

@section('content')
<div class="card">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <span>Developer Option</span>
    </div>
    <div class="card-body">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>API Key</th>
                    <td>{{ $user['api_key'] }}</td>
                </tr>
                <tr>
                    <th>Secret Key</th>
                    <td>{{ $user['secret_key'] }}</td>
                </tr>
               <!-- Show IP List -->
                <tr>
                    <th>White List IP</th>
                    <td>
                        <!-- Add new IP -->
                        <div class="input-group">
                            <input type="text" class="form-control" id="new-ip" placeholder="Enter IP">
                            <button type="button" class="btn btn-primary" id="add-ip">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                        <div id="ip-list-container" class="mt-3">
                            @php $ips = array_filter(explode(',', $user['whitelist_ips'])); @endphp
                            @foreach ($ips as $ip)
                                <div class="input-group mb-2 ip-item">
                                    <input type="text" class="form-control" value="{{ trim($ip) }}" readonly>
                                    <button type="button" class="delete-ip btn btn-danger" data-ip="{{ trim($ip) }}">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                        <!-- Hidden input to hold comma-separated IPs -->
                        <input type="hidden" name="whitelist_ips" id="whitelist_ips" value="{{ $user['whitelist_ips'] }}">
                    </td>
                </tr>
            </tbody>
        </table>
        <a href="{{ url($admin_settings['api_docs']) }}" target="_blank">
            <button class="btn btn-primary mt-3">API Docs</button>
        </a>
        <h5 class="mt-4">API Instructions</h5>
        <p>{!! $admin_settings['api_instructions'] !!}</p>
    </div>
</div>

@endsection
@section('js')
<script>
    $(document).ready(function () {
        // Set CSRF token for all AJAX requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        // Add IP
        $('#add-ip').click(function () {
            const ip = $('#new-ip').val().trim();
            if (!ip) return;

            $.post("{{ route('whitelistIp.add') }}", { ip: ip }, function (response) {
                if (response.status) {
                    $('#ip-list-container').append(`
                        <div class="input-group mb-2 ip-item">
                            <input type="text" class="form-control" value="${ip}" readonly>
                            <button type="button" class="delete-ip btn btn-danger" data-ip="${ip}">
                                <i class="fa fa-trash"></i>
                            </button>
                        </div>
                    `);
                    toastr.success(response.message);
                    $('#new-ip').val('');
                } else {
                    toastr.error(response.message);
                }
            });
        });

        // Delete IP
        $('#ip-list-container').on('click', '.delete-ip', function () {
            const ip = $(this).data('ip');
            const $group = $(this).closest('.ip-item');

            $.ajax({
                url: "{{ route('whitelistIp.delete') }}",
                type: 'DELETE',
                data: { ip: ip },
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.status) {
                        $group.remove();
                        toastr.success(response.message);
                    } else {
                        toastr.error(response.message);
                    }
                }
            });
        });
    });
</script>

@endsection