@extends('layouts.master')
@section('page-title') 
    {{ $page_title }}
@endsection
@section('page-css')
@endsection
@section('content')
        <section class="row g-4">
            <div class="col-xl-9">
                <div class="filter-card mb-4">
                    <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3 mb-3">
                        <div>
                            <h2 class="h4 mb-1">App List</h2>
                            <!-- <p class="text-secondary mb-0">Filter messages by date, sender, recipient, or delivery state.</p> -->
                        </div>
                    </div>
                </div>

                <div class="traffic-table-card">
                    <div class="table-responsive">
                        <table class="table align-middle mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">App Name</th>
                                    <th scope="col">Type</th>
                                    <th scope="col">Api Key</th>
                                    <th scope="col">Date Created</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($apps_arr->content) > 0)
                                    @foreach($apps_arr->content as $row)
                                        <tr>
                                            <td class="fw-semibold">{{ $row->name}}</td>
                                            <td class="recipient-cellss">
                                                <div class="fw-semibold">{{ $row->type }}</div>
                                            </td>
                                            <td class="text-wrap text-break apiKeyCell" style="max-width: 100px;">
                                                <i class="bi bi-eye viewApiKeyIcon"></i>
                                                <input type="hidden" name="hidden_key" class="hiddenKeyInput" value="{{ $row->apiKey }}">
                                                
                                            </td>                                            
                                            <td>
                                                {{ \Carbon\Carbon::parse($row->createdAt)->format('Y-m-d H:i:s') }}
                                            </td>
                                        </tr>
                                 @endforeach
                                 @else
                                 <tr>
                                     <td colspan="6" class="text-center">No records</td>
                                 </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-3">
                

                <aside class="detail-card">
                    <h2 class="h5 mb-3">Recent activity</h2>

                    <div class="timeline-item pt-0 mt-0 border-0">
                        <div class="fw-semibold">Sender ID approved</div>
                        <div class="muted-label">CLICKINFO added </div>
                        <div class="small text-secondary mt-1">09:04</div>
                    </div>

                    <!-- <div class="timeline-item">
                        <div class="fw-semibold">Retry queue triggered</div>
                        <div class="muted-label">42 Zambia messages re-routed after timeout</div>
                        <div class="small text-secondary mt-1">08:57</div>
                    </div> -->

                    <div class="timeline-item">
                        <div class="fw-semibold">Campaign completed</div>
                        <div class="muted-label">[campaign name] batch finished</div>
                        <div class="small text-secondary mt-1">08:41</div>
                    </div>
                </aside>
            </div>
        </section>
@endsection
@section('page-js')
    <script>
        $(document).ready(function(){
            $('.viewApiKeyIcon').click(function(){
                var actualApiKey = $(this).siblings('.hiddenKeyInput').val();
                console.log(actualApiKey);
                // $.alert(actualApiKey);

                $.dialog({
                    title: 'API Key',
                    type: 'green',
                    // content: actualApiKey ,
                    content: '<div class="wrap-text text-break">' + actualApiKey + '</div>',
                    boxWidth: '500px',
                });
            });

        });
      
    </script>

@endsection