@extends('layouts.master')
@section('title', 'Meta Flow List Detail')
<style>
    .step-header {
        display: flex;
        justify-content: space - between;
        align-items: center;
    }

    .green-tick {
        color: green;
        font-size: 1.5 rem;
        margin: 2px;
    }

    .red-cross {
        color: rgb(224, 75, 15);
        font-size: 1.5 rem;
        margin: 2px;
    }


    /*  Custom Select */
    .custom-select {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 45px;
    }

    .custom-select div {
        background: #ddd;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0px 13px 0;
        border-radius: 5px;
        cursor: pointer;
    }

    .custom-select div p {
        margin: 0
    }

    .custom-select.bg_success div {
        background-color: green;
        color: #fff;
    }

    .custom-select.bg_warning div {
        background-color: rgb(255, 138, 29);
        color: #fff;
    }

    .custom-select.bg_danger div {
        background-color: red;
        color: #fff;
    }

    .mySelect {
        list-style-type: none;
        padding: 0;
        margin: 0;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        display: none;
    }

    .mySelect li {
        padding: 10px;
        background-color: #f9f9f9;
    }

    .mySelect li:hover {
        background-color: #ddd;
    }

    .tab_section {
        border-radius: 5px;
        padding: 1px;
    }

    #myTabContent{
        border-left:0.5px solid;
        border-color: #e3e3e3;
    }
    /* .tab_section .nav-item .active {
        background: #8f85f3;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        color: white !important;
    } */

    .tab_section .nav-item .active a {
        color: white !important;
    }

    .tab_section .nav-item {
        background: #e6e6e6;
        border-radius: 15px;
        margin-bottom: 1.5px;
        margin-top: 1.5px;
        transition: background 0.3s ease;
    }

    .tab_section .nav-item a {
        color: #333;
        text-decoration: none;
    }

    .tab_section .nav-item:hover {
        background: #d4d4d4;
    }
</style>
@section('content-header')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-start mb-0">Flow List</h2>
                    <div class="breadcrumb-wrapper">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a>
                            </li>
                            <li class="breadcrumb-item active">Metaflow Detail {{ $metaFlow->flow_id }}
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">
                            User Details
                        </h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <p>
                                    <strong>Name:</strong> {{ $metaFlow->user->name }}
                                </p>
                                <p>
                                    <strong>Email:</strong> {{ $metaFlow->user->email }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Flow Details</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-9">
                                <p><strong>Flow ID:</strong> {{ $metaFlow->flow_id }}</p>
                                <p><strong>Event Time:</strong> {{ $metaFlow->event_time ?? 'N/A' }}</p>
                                <hr>
                                <br>
                                <h4 class="card-title">Device Info</h4>
                                @if ($metaFlow->device_finger_print)
                                    @php
                                        $deviceInfoData = json_decode($metaFlow->device_finger_print, true);
                                    @endphp
                                    <p><strong>Device Name:</strong>{{ $deviceInfoData['name'] }}</p>
                                    <p><strong>Device Version:</strong> {{ $deviceInfoData['version'] ?? 'N/A' }}</p>
                                @else
                                    <p>N/A</p>
                                @endif
                                {{-- </div> --}}
                                {{-- <div class="col-md-6"> --}}
                                <p><strong>IP Address:</strong> {{ $metaFlow->ip ?? 'N/A' }}</p>
                                <p><strong>Identity Status:</strong> {{ ucfirst($metaFlow->identity_status) ?? 'N/A' }}</p>
                                {{-- <p><strong>Event Data:</strong> {{ $metaFlow->event_data ?? 'N/A' }}</p> --}}
                                <p><strong>Created At:</strong> {{ $metaFlow->created_at->format('d-m-Y h:i A') }}</p>

                            </div>
                            @if (isset($metaFlow->verification_id))
                                <div class="col-md-3">
                                    <label for=""><b>Choose Status</b></label>
                                    <form id="update-meta-flow-status-form"
                                        action="{{ route('admin.update-meta-flow-status') }}" method="post">
                                        @csrf
                                        <input type="text" hidden name="meta_flow_verification_id"
                                            value="{{ $metaFlow->verification_id }}">
                                        <input type="text" hidden name="meta_flow_status" id="meta_flow_status">

                                        {{-- <select name="meta_flow_status" hidden id="meta_flow_status">
                                            @foreach (config('constants.meta_flow_status') as $status)
                                                <option class="bg-default" value="{{ $status }}"
                                                    {{ $metaFlow->identity_status == $status ? 'selected' : '' }}>
                                                    @if ($status == config('constants.meta_flow_status.REVIEW_NEEDED'))
                                                        Review Needed
                                                    @else
                                                        {{ ucwords($status) }}
                                                    @endif
                                                </option>
                                            @endforeach
                                        </select> --}}
                                        <div class="custom-select {{ $metaFlow->identity_status != null ? config('constants.meta_flow_status_style_class.' . $metaFlow->identity_status) : 'bg-secondary' }}"
                                            id="customSelect">
                                            <div>
                                                <p id="selected-status">
                                                    @if ($metaFlow->identity_status == null)
                                                        Please Choose
                                                    @elseif($metaFlow->identity_status == config('constants.meta_flow_status.REVIEW_NEEDED'))
                                                        Review Needed
                                                    @else
                                                        {{ ucwords($metaFlow->identity_status) }}
                                                    @endif
                                                </p>
                                            </div>
                                            <ul class="mySelect" id="statusOptions">
                                                @foreach (config('constants.meta_flow_status') as $status)
                                                    <li data-status="{{ $status }}">
                                                        @if ($status == config('constants.meta_flow_status.REVIEW_NEEDED'))
                                                            Review Needed
                                                        @else
                                                            {{ ucwords($status) }}
                                                        @endif
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <button type="submit" hidden></button>
                                    </form>
                                    <div id="confirmationModal" class="modal" tabindex="-1" role="dialog">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Confirmation</h5>
                                                    {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button> --}}
                                                </div>
                                                <div class="modal-body">
                                                    <p>Are you sure you want to proceed with this status?</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-dismiss="modal">Cancel</button>
                                                    <button type="button" class="btn btn-primary"
                                                        id="confirmButton">Proceed</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <div class="row">
                            <div class="col-md-2 tab_section">
                                <ul class="nav nav-tabs flex-column" id="myTab" role="tablist">
                                    @foreach ($metaFlow->metaFlowSteps as $index => $step)
                                        {{-- <div class="col-12 mb-2"> --}}
                                        <li class="nav-item p-2 {{ $index == 0 ? 'active' : '' }}">
                                            <a class="nav-link"
                                                id="step-{{ $step->id }}-tab" data-toggle="tab"
                                                href="#step-{{ $step->id }}" role="tab"
                                                aria-controls="step-{{ $step->id }}"
                                                aria-selected="{{ $index == 0 ? 'true' : 'false' }}">
                                                {{ ucwords(str_replace('_', ' ', str_replace('-', ' ', $step->step_name))) }}
                                            </a>
                                        </li>
                                        {{-- </div> --}}
                                    @endforeach
                                </ul>
                            </div>
                            <div class="col-md-9">
                                <div class="tab-content" id="myTabContent">
                                    @foreach ($metaFlow->metaFlowSteps as $index => $step)
                                        <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}"
                                            id="step-{{ $step->id }}" role="tabpanel"
                                            aria-labelledby="step-{{ $step->id }}-tab">
                                            <div class="p-1">
                                                @switch($step->step_name)
                                                    @case(config('constants.meta_flow_steps.ip_validation'))
                                                        @php
                                                            $ipData = json_decode($step->data, true);
                                                        @endphp
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <p><strong>Zip Code:</strong> {{ $ipData['zip'] }}</p>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <p><strong>City:</strong> {{ $ipData['city'] }}</p>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <p><strong>Region:</strong> {{ $ipData['region'] }}</p>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <p><strong>Country:</strong> {{ $ipData['country'] }}</p>
                                                            </div>
                                                        </div>
                                                        <p><strong>Platform:</strong>
                                                            {{ ucfirst(str_replace('_', ' ', $ipData['platform'])) }}</p>
                                                        <hr>
                                                        {{-- <div class="col-md-6"> --}}
                                                        <div id="map" style="height: 400px; width: inherit"></div>
                                                        {{-- </div> --}}
                                                    @break

                                                    @case(config('constants.meta_flow_steps.email_check'))
                                                        @php
                                                            $emailData = json_decode($step->data, true);
                                                        @endphp
                                                        <p><strong>Email:</strong> {{ $emailData['emailAddress'] ?? 'N/A' }}</p>
                                                        <p><strong>Status:</strong>
                                                            @if ($metaFlow->identity_status == 'reviewNeeded')
                                                                Review Needed
                                                            @else
                                                                {{ ucfirst(str_replace('_', ' ', $metaFlow->identity_status)) }}
                                                            @endif
                                                        </p>
                                                    @break

                                                    @case(config('constants.meta_flow_steps.document_check'))
                                                        @php
                                                            $documents = json_decode($step->data, true);
                                                        @endphp
                                                        {{-- <div class="m-1"> --}}
                                                        <div class="accordion" id="documentsAccordion">
                                                            @foreach ($documents as $index => $document)
                                                                <div class="accordion-item">
                                                                    <h1 class="accordion-header" id="heading{{ $index }}">
                                                                        <strong>
                                                                            <button class="accordion-button" type="button"
                                                                                data-bs-toggle="collapse"
                                                                                data-bs-target="#collapse{{ $index }}"
                                                                                aria-expanded="true"
                                                                                aria-controls="collapse{{ $index }}">
                                                                                Document #{{ $index + 1 }}

                                                                            </button>
                                                                        </strong>
                                                                    </h1>
                                                                    <div id="collapse{{ $index }}"
                                                                        class="accordion-collapse collapse show"
                                                                        aria-labelledby="heading{{ $index }}"
                                                                        data-bs-parent="#documentsAccordion">
                                                                        <div class="accordion-body">
                                                                            @if (isset($document['fields']))
                                                                                <div class="row">
                                                                                    <div class="col-md-12">
                                                                                        <h4 class="mb-6">Fields</h4>
                                                                                        <div class="row">
                                                                                            @if (isset($document['fields']['fullName']))
                                                                                                <div class="col-md-6">
                                                                                                    <p><strong>Full Name:</strong>
                                                                                                        {{ $document['fields']['fullName']['value'] }}
                                                                                                    </p>
                                                                                                </div>
                                                                                            @endif
                                                                                            @if (isset($document['fields']['dateOfBirth']))
                                                                                                <div class="col-md-6">
                                                                                                    <p><strong>Date of
                                                                                                            Birth:</strong>
                                                                                                        {{ $document['fields']['dateOfBirth']['value'] }}
                                                                                                    </p>
                                                                                                </div>
                                                                                            @endif
                                                                                        </div>
                                                                                        <div class="row">
                                                                                            @if (isset($document['fields']['documentNumber']))
                                                                                                <div class="col-md-6">
                                                                                                    <p><strong>ID Number:</strong>
                                                                                                        {{ $document['fields']['documentNumber']['value'] }}
                                                                                                    </p>
                                                                                                </div>
                                                                                            @endif
                                                                                            @if (isset($document['fields']['expirationDate']))
                                                                                                <div class="col-md-6">
                                                                                                    <p><strong>Expiration
                                                                                                            Date:</strong>
                                                                                                        {{ $document['fields']['expirationDate']['value'] }}
                                                                                                    </p>
                                                                                                </div>
                                                                                            @endif
                                                                                        </div>
                                                                                        <div class="row">
                                                                                            <div class="col-md-6">
                                                                                                @if (isset($document['fields']['address']))
                                                                                                    <p><strong>Address:</strong>
                                                                                                        {{ $document['fields']['address']['value'] }}
                                                                                                    </p>
                                                                                                @endif
                                                                                            </div>
                                                                                            <div class="col-md-6">
                                                                                                @if (isset($document['fields']['emissionDate']))
                                                                                                    <p><strong>Emission
                                                                                                            Date:</strong>
                                                                                                        {{ $document['fields']['emissionDate']['value'] }}
                                                                                                    </p>
                                                                                                @endif
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-md-12">
                                                                                        <h4>Photos</h4>
                                                                                        @foreach ($document['photos'] as $photo)
                                                                                            <img src="{{ $photo }}"
                                                                                                width="300px"
                                                                                                alt="Document Photo"
                                                                                                class="img-fluid m-2 p-2">
                                                                                        @endforeach
                                                                                    </div>
                                                                                    <div class="col-md-4">
                                                                                        <h4>Additional Info</h4>
                                                                                        @if (isset($document['region']))
                                                                                            <p><strong>Region:</strong>
                                                                                                {{ $document['region'] }}</p>
                                                                                        @endif
                                                                                        <p><strong>Country:</strong>
                                                                                            {{ $document['country'] }}</p>
                                                                                    </div>
                                                                                </div>
                                                                            @endif
                                                                            <div class="row mt-3">
                                                                                <h4>Steps</h4>
                                                                                @foreach ($document['steps'] as $stepIndex => $step)
                                                                                    <div class="accordion-item">
                                                                                        <h2 class="accordion-header"
                                                                                            id="stepHeading{{ $index }}-{{ $stepIndex }}">
                                                                                            <button
                                                                                                class="accordion-button collapsed"
                                                                                                type="button"
                                                                                                data-bs-toggle="collapse"
                                                                                                data-bs-target="#stepCollapse{{ $index }}-{{ $stepIndex }}"
                                                                                                aria-expanded="false"
                                                                                                aria-controls="stepCollapse{{ $index }}-{{ $stepIndex }}">
                                                                                                <div class="step-header">
                                                                                                    <span>Step
                                                                                                        {{ $stepIndex + 1 }}:
                                                                                                        {{ ucfirst(str_replace('-', ' ', $step['id'])) }}</span>
                                                                                                    @if (is_null($step['error']))
                                                                                                        <span
                                                                                                            class="green-tick">&#10003;</span>
                                                                                                    @else
                                                                                                        <span class="red-cross">
                                                                                                            X
                                                                                                        </span>
                                                                                                    @endif
                                                                                                </div>
                                                                                            </button>
                                                                                        </h2>
                                                                                        <div id="stepCollapse{{ $index }}-{{ $stepIndex }}"
                                                                                            class="accordion-collapse collapse"
                                                                                            aria-labelledby="stepHeading{{ $index }}-{{ $stepIndex }}"
                                                                                            data-bs-parent="#stepAccordion{{ $index }}">
                                                                                            <div class="accordion-body">
                                                                                                <p><strong>Status:</strong>
                                                                                                    @if ($step['status'] == 200)
                                                                                                        <span
                                                                                                            class="badge bg-success">
                                                                                                            {{ $step['status'] }}
                                                                                                            OK
                                                                                                        </span>
                                                                                                    @elseif($step['status'] == 404)
                                                                                                        <span
                                                                                                            class="badge bg-danger">
                                                                                                            {{ $step['status'] }}
                                                                                                            Not Found
                                                                                                        </span>
                                                                                                    @endif
                                                                                                </p>
                                                                                                <p><strong>Cache Hit:</strong>
                                                                                                    {{ $step['cacheHit'] ? 'Yes' : 'No' }}
                                                                                                </p>
                                                                                                <p><strong>Reused:</strong>
                                                                                                    {{ $step['reused'] ? 'Yes' : 'No' }}
                                                                                                </p>
                                                                                                @if (isset($step['data']) && count($step['data']) > 0)
                                                                                                    <div class="row">
                                                                                                        @foreach ($step['data'] as $dataKey => $dataValue)
                                                                                                            @if (isset($dataValue['label']))
                                                                                                                <div
                                                                                                                    class="col-md-6">
                                                                                                                    <p><strong>{{ $dataValue['label'] }}:</strong>
                                                                                                                        {{ $dataValue['value'] }}
                                                                                                                    </p>
                                                                                                                </div>
                                                                                                            @endif
                                                                                                        @endforeach
                                                                                                    </div>
                                                                                                @endif
                                                                                                @if (isset($step['data']['age']))
                                                                                                    <div class="col-md-6">
                                                                                                        <p><strong>Age:</strong>
                                                                                                            {{ $step['data']['age'] }}
                                                                                                        </p>
                                                                                                    </div>
                                                                                                @endif
                                                                                                {{-- @if (isset($step['id']) == 'age-check')
                                                                                        @dd($step['id'])
                                                                                        @endif --}}
                                                                                                @if (isset($step['error']))
                                                                                                    <p><strong>Error:</strong>
                                                                                                        {{ $step['error']['message'] }}
                                                                                                    </p>
                                                                                                @endif
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                @endforeach
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    @break

                                                    @case(config('constants.meta_flow_steps.selfie'))
                                                        @php
                                                            $selfieData = json_decode($step->data, true);
                                                        @endphp
                                                        @if (isset($selfieData['selfiePhotoUrl']))
                                                            <h3>Selfie Photo</h3>
                                                            <img src="{{ $selfieData['selfiePhotoUrl'] }}" width="150"
                                                                alt="">
                                                        @endif
                                                    @break

                                                    @default
                                                        <p>No Data Found</p>
                                                @endswitch
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="row mt-2 p-1 mb-1">
                        {{-- <div class="mb-2"> --}}
                        <div class="col-8">
                            <input type="text" id="searchInput" class="form-control" placeholder="Search..."
                                onkeyup="debounceSearch()">
                        </div>
                        <div class="col-4">
                            <select class="form-select" id="statusSelect" onchange="performSearch()">
                                <option value="">All Statuses</option>
                                @foreach (config('constants.webhook_logs_status') as $webhookStatus)
                                    <option value="{{ $webhookStatus }}">{{ ucwords($webhookStatus) }}</option>
                                @endforeach
                            </select>
                        </div>
                        {{-- all statuses in select --}}
                        {{-- </div> --}}
                    </div>
                    <div class="card-header">
                        <h4 class="card-title">Webhook Logs</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Event Name</th>
                                        <th>Status</th>
                                        <th>User</th>
                                        <th>Webhook URL</th>
                                        <th>Flow ID</th>
                                        <th>Created At</th>
                                        <th>Last Tried</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($webhookLogs as $log)
                                        <tr>
                                            <td>{{ $log->id }}</td>
                                            <td>{{ $log->event_name ?? 'N/A' }}</td>
                                            <td>
                                                @if ($log->status == 'success')
                                                    <span class="badge bg-success text-white">Success</span>
                                                @elseif($log->status == 'failure' || $log->status == 'failed' || $log->status == 'failed_permanently')
                                                    <span class="badge bg-danger text-white">Failure</span>
                                                @endif
                                            </td>
                                            <td>{{ $log->user->name ?? 'N/A' }}</td>
                                            <td>{{ $log->webhook_url ?? 'N/A' }}</td>
                                            <td>{{ $log->flow_id ?? 'N/A' }}</td>
                                            <td>{{ $log->created_at->format('d-m-Y h:i A') }}</td>
                                            <td>{{ $log->updated_at->format('d-m-Y h:i A') }}</td>
                                            <td>
                                                {{-- create a modal trigger button called Show --}}
                                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                    data-bs-target="#logModal{{ $log->id }}">
                                                    Show
                                                </button>
                                            </td>
                                        </tr>
                                        <!-- Modal -->
                                        <div class="modal fade" id="logModal{{ $log->id }}" tabindex="-1"
                                            aria-labelledby="logModalLabel{{ $log->id }}" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="logModalLabel{{ $log->id }}">Log
                                                            Details | {{ $log->id }}</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <h3>Event Name</h3>
                                                        <p>{{ $log->event_name }}</p>
                                                        <h3>Request Body</h3>
                                                        <pre>{{ json_encode(json_decode($log->request_body), JSON_PRETTY_PRINT) }}</pre>
                                                        <br>
                                                        <h3>Response Returned</h3>
                                                        <pre>
                                                            {{ $log->response_body }}
                                                        {{-- @php
                                                            $responseBody = json_decode($log->response_body, true);
                                                            if (json_last_error() === JSON_ERROR_NONE) {
                                                                $responseBody = json_decode($responseBody, true);
                                                                if (json_last_error() === JSON_ERROR_NONE) {
                                                                    echo json_encode($responseBody, JSON_PRETTY_PRINT);
                                                                    // dd(json_encode($responseBody, JSON_PRETTY_PRINT));
                                                                } else {
                                                                    echo htmlspecialchars($log->response_body);
                                                                    // dd(htmlspecialchars($log->response_body));
                                                                }
                                                            } else {
                                                                echo htmlspecialchars($log->response_body);
                                                                // dd(htmlspecialchars($log->response_body));
                                                            }
                                                        @endphp --}}
                                                        </pre>
                                                        <br>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close</button>
                                                        @if ($log->status == 'failure' || $log->status == 'failed' || $log->status == 'failed_permanently')
                                                            <a href="{{ route('admin.resend-webhook-call', ['webhookLogId' => $log->id]) }}"
                                                                class="btn btn-warning retry-btn"
                                                                data-log-id="{{ $log->id }}">Retry</a>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center">No Logs Found</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            {{-- Pagination Links --}}
                            {{ $webhookLogs->links() }}
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwFT_-Nu4o5mPG8cFMNFgm9lMa-b6QJfE&callback=initMap">
    </script>
    <script>
        var mapData = @json($mapData);
        var metaFlowId = @json($metaFlow->id);

        function initMap() {
            if (mapData && mapData.latitude && mapData.longitude) {
                const myLatLng = {
                    lat: parseFloat(mapData.latitude),
                    lng: parseFloat(mapData.longitude)
                };
                const map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 8,
                    center: myLatLng,
                });
                new google.maps.Marker({
                    position: myLatLng,
                    map,
                    title: 'Location Here',
                });
            } else {
                console.log('Map data is incomplete or unavailable.');
            }
        }
        initMap();

        function showCustomPrompt() {
            $('#confirmationModal').modal('show');
        }

        document.getElementById('confirmButton').addEventListener('click', function() {
            document.getElementById('update-meta-flow-status-form').submit();
        });

        let searchTimeout;

        function debounceSearch() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                performSearch();
            }, 300); // Wait 300ms after the last key press to make the search request
        }

        function performSearch() {
            const searchQuery = document.getElementById('searchInput').value;
            const status = document.getElementById('statusSelect').value;
            const url = new URL('{{ route('admin.integration.search-flow-logs') }}');
            const params = {
                search: searchQuery,
                status: status,
                isAjax: true,
                metaFlowId: metaFlowId,
                verificationId: '{{ $metaFlow->verification_id }}'
            };
            url.search = new URLSearchParams(params).toString();

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    renderMetaFlows(data.webHookLogs);
                })
                .catch(error => console.log('Error:', error));
        }

        function renderMetaFlows(metaFlows) {
            console.log("Meta flows", metaFlows.data)
            let tbody = document.querySelector('table.table tbody');
            tbody.innerHTML = ''; // Clear existing rows
            if (metaFlows.data.length === 0) {
                tbody.innerHTML = '<tr><td colspan="100" class="text-center">No Flow Data Found</td></tr>';
                return;
            }
            metaFlows.data.forEach(log => {
                let row = `
                    <tr>
                        <td>${log.id}</td>
                        <td>${log.event_name ?? 'N/A'}</td>
                        <td>${log.status == 'success' ? '<span class="badge bg-success text-white">Success</span>' : '<span class="badge bg-danger text-white">Failure</span>'}</td>
                        <td>${log.user?.name ?? 'N/A'}</td>
                        <td>${log.webhook_url ?? 'N/A'}</td>
                        <td>${log.flow_id ?? 'N/A'}</td>
                        <td>${new Date(log.created_at).toLocaleDateString()} ${new Date(log.created_at).toLocaleTimeString()}</td>
                        <td>${new Date(log.updated_at).toLocaleDateString()} ${new Date(log.updated_at).toLocaleTimeString()}</td>
                        <td>
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#logModal${log.id}">
                                Show
                            </button>
                        </td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        $(document).ready(function() {
            // Toggle the dropdown when the trigger is clicked
            $('.custom-select div').on('click', function() {
                $(this).siblings('.mySelect').toggle();
            });

            // Update the selected option and hide the dropdown when an option is clicked
            $('.mySelect li').on('click', function() {
                var selectedOption = $(this).text();
                $('.custom-select div p').text(selectedOption);
                $('.mySelect').hide();
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const customSelect = document.getElementById('customSelect');
            const statusOptions = document.getElementById('statusOptions');
            const selectedStatus = document.getElementById('selected-status');
            const metaFlowStatus = document.getElementById('meta_flow_status');
            const confirmationModal = new bootstrap.Modal(document.getElementById('confirmationModal'));
            let selectedValue;

            statusOptions.addEventListener('click', function(event) {
                if (event.target.tagName === 'LI') {
                    selectedValue = event.target.getAttribute('data-status');
                    selectedStatus.textContent = event.target.textContent.trim();
                    metaFlowStatus.value = selectedValue;
                    confirmationModal.show();
                }
            });
            document.getElementById('confirmButton').addEventListener('click', function() {
                metaFlowStatus.value = selectedValue;
                console.log("Metaflow status", metaFlowStatus.value);
                document.getElementById('update-meta-flow-status-form').submit();
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            var triggerTabList = [].slice.call(document.querySelectorAll('#myTab li'))
            console.log("Trigger Tab List", triggerTabList)
            triggerTabList.forEach(function(triggerEl) {
                var tabTrigger = new bootstrap.Tab(triggerEl)

                triggerEl.addEventListener('click', function(event) {
                    event.preventDefault()
                    tabTrigger.show()
                })
            })
        });
    </script>
@endsection