@extends('layouts.master')
@section('title', 'Meta Flow List')
@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
                                    @if (auth()->user()->is_admin == 1) href="{{ route('admin.dashboard') }}"
                                @else
                                href="{{ route('dashboard') }}" @endif>Dashboard</a>
                            </li>
                            <li class="breadcrumb-item active">Flow List
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        {{-- <h4 class="card-title">MetaFlow Logs</h4> --}}
                    </div>
                    <div class="card-body table-responsive">
                        {{-- add a search input field --}}
                        <form class="form-group mb-2" action="{{ route('admin.integration.export-csv') }}"
                            method="post">
                            @csrf
                            <div class="d-flex flex-wrap align-items-end mb-2">
                                {{-- <div class="mb-2"> --}}
                                <div class="me-2 col-6 mb-2">
                                    <label for="searchInput">Search Input</label>
                                    <input type="text" id="searchInput" name="search" class="form-control" placeholder="Search..."
                                        onkeyup="debounceSearch()">
                                </div>
                                <div class="me-2 mb-2">
                                    <label for="fromDate">From Date</label>
                                    <input type="date" class="form-control" name="fromDate" id="fromDate" onchange="performSearch()">
                                </div>
                                <div class="me-2 mb-2">
                                    <label for="fromDate">To Date</label>
                                    <input type="date" class="form-control" name="toDate" id="toDate" onchange="performSearch()">
                                </div>
                                <div class="me-2 mb-2">
                                    <label for="">Choose Status</label>
                                    <select class="form-select" id="statusSelect" name="status" onchange="performSearch()">
                                        <option value="">All Statuses</option>
                                        <option value="pending">Pending</option>
                                        <option value="reviewNeeded">Review Needed</option>
                                        <option value="verified">Verified</option>
                                    </select>
                                </div>
                                <div class="me-2 mb-2">
                                    <button type="submit" class="btn p-1 rounded btn-warning">Export</button>
                                </div>
                                {{-- all statuses in select --}}
                                {{-- </div> --}}
                            </div>
                        </form>
                        <table class="table table-nowrap mb-0 rounded">
                            <thead class="thead-light">
                                <th>Flow ID</th>
                                <th>Verification ID</th>
                                <th>Flow Name</th>
                                <th>Identity Status</th>
                                <th>Created At</th>
                                <th>Action</th>
                            </thead>
                            <tbody>
                                @forelse($metaFlows as $metaFlow)
                                    <tr>
                                        <td>{{ $metaFlow->flow_id }}</td>
                                        <td>{{ $metaFlow->verification_id }}</td>
                                        <td>{{ $metaFlow->flow_name }}</td>
                                        <td>{{ $metaFlow->identity_status ?? 'N/A' }}</td>
                                        <td>{{ $metaFlow->created_at->format('m-d-Y h:i:a') }}</td>
                                        <td>
                                            <a href="{{ route('admin.integration.flow-list-detail', ['id' => $metaFlow->id]) }}"
                                                class="btn btn-sm btn-info">Details</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="100">
                                            <div class="alert alert-secondary text-center">No Flow Data Found</div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <div class="m-2">
                            {{ $metaFlows->links() }}
                        </div>
                    </div>
                </div>
            </div>
            <div>
            </div>
        </div>
    </div>
    <script>
        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 fromDate = document.getElementById('fromDate').value;
            const toDate = document.getElementById('toDate').value;
            const url = new URL('{{ route('admin.integration.flow-list') }}');
            const params = {
                search: searchQuery,
                status: status,
                fromDate: fromDate,
                toDate: toDate,
                isAjax: true
            };
            url.search = new URLSearchParams(params).toString();

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    renderMetaFlows(data.metaFlows);
                })
                .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(flow => {
                let row = `<tr>
                               <td>${flow.flow_id}</td>
                               <td>${flow.flow_name}</td>
                               <td>${flow.identity_status ?? 'N/A'}</td>
                               <td>${new Date(flow.created_at).toLocaleString()}</td>
                               <td><a href="/admin/system/meta/integration/flow-list/${flow.id}" class="btn btn-sm btn-info">Details</a></td>
                           </tr>`;
                tbody.innerHTML += row;
            });
        }
    </script>
@endsection