@extends('admin.layouts.app')

@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">@lang('user.flows')</a></li>
                </ol>
            </div>
            @if (session('status'))
                <div class="alert alert-success" role="alert">
                    {{ session('status') }}
                </div>
            @endif
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">@lang('user.flows')</h4>
                        <a class="btn btn-success" href="{{ route('admin.reports.flows.create') }}">@lang('admin.create')</a>
                    </div>
                    <div class="card-body">
                        <!-- Add a form for filtering -->
                        <form id="filterForm" class="d-flex">
                            @csrf
                            <div class="input-group me-2">
                                <input class="form-control" type="text" name="name" placeholder="@lang('admin.search')">
                            </div>
                            <button type="submit" class="btn btn-primary">@lang('admin.filter')</button>
                        </form>
                        
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>@lang('admin.business_name')</th>
                                        <th>@lang('user.name')</th>
                                        <th>@lang('user.trigger_keywords')</th>
                                        <th>@lang('user.sent')</th>
                                        <th>@lang('user.completed')</th>
                                        <th>@lang('user.status')</th>
                                        <th>@lang('user.actions')</th>
                                    </tr>
                                </thead>
                                <tbody id="flowTableBody">
                                    @foreach ($flows as $flow)
                                    <tr>
                                        <td>{{ $flow->business->name }}</td>
                                        <td>{{ $flow->name }}</td>
                                        <td>{{ $flow->trigger_keywords }}</td>
                                        <td>{{ $flow->sent_count }}</td>
                                        <td>{{ $flow->read_count }}</td>
                                        <td>
                                            <span class="badge  text-bg-{{ $flow->status == 1 ? 'success' : 'warning' }}">
                                                @if ($flow->status == 1)
                                                    @lang('user.active')
                                                @else
                                                    @lang('user.Inactive')
                                                @endif
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="{{ route('admin.reports.flows.show', $flow->id) }}"
                                                    class="btn btn-success shadow btn-xs sharp me-1">
                                                    <i class="fa fa-project-diagram"></i></a>
                                                <a href="{{ route('admin.reports.flows.edit', $flow->id) }}"
                                                    class="btn btn-primary shadow btn-xs sharp me-1">
                                                    <i class="fa fa-pencil"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $flows->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        // Assuming you're using jQuery for simplicity
        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: 'GET',
                url: "{{route('admin.reports.flows.filter')}}",
                data: formData,
                success: function(response) {
                    // Update the table with the filtered data
                    $('#flowTableBody').html(''); // Clear the existing rows
                    $.each(response.flows, function(index, flow) {
                        var rowHtml = `
                            <tr>
                                <td>${ flow.business.name }</td>
                                <td>${ flow.name }</td>
                                <td>${ flow.trigger_keywords }</td>
                                <td>${ flow.sent_count }</td>
                                <td>${ flow.read_count }</td>
                                <td>
                                    <span class="badge  text-bg-${ flow.status == 1 ? 'success' : 'warning' }">
                                        ${ flow.status == 1 ? "@lang('user.active')" : "@lang('user.Inactive')" }
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex">
                                        <a href="{{ url('fg_whbackend/reports/flows') }}/${ flow.id }"
                                            class="btn btn-success shadow btn-xs sharp me-1">
                                            <i class="fa fa-project-diagram"></i></a>
                                        <a href="{{ url('fg_whbackend/reports/flows') }}/${ flow.id }/edit"
                                            class="btn btn-primary shadow btn-xs sharp me-1">
                                            <i class="fa fa-pencil"></i></a>
                                    </div>
                                </td>
                            </tr>`;
                        $('#flowTableBody').append(rowHtml);
                    });
                    
                    // Update pagination links
                    $('.pagination').html(generatePaginationLinks(response));
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });

         // Function to generate pagination links
         function generatePaginationLinks(response) {
            var paginationHtml = '<ul class="pagination">';
            for (var i = 1; i <= response.last_page; i++) {
                var activeClass = (i === response.current_page) ? 'active' : '';
                paginationHtml += '<li class="page-item ' + activeClass + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
            }
            paginationHtml += '</ul>';
            return paginationHtml;
        }
        // Handle pagination links click
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            var page = $(this).data('page'); // Get the page number from the data attribute
            var formData = $('#filterForm').serialize() + '&page=' + page; // Add page parameter to form data
            $.ajax({
                type: 'GET',
                url: "{{ route('admin.reports.flows.filter') }}",
                data: formData,
                success: function(response) {
                    // Clear existing rows and modals
                    $('#flowTableBody').empty();
                    $('.modal').remove(); // Clear all modals

                    $.each(response.flows, function(index, flow) {
                        // Convert the datetime string to a Date object
                        var rowHtml = `
                            <tr>
                                <td>${ flow.business.name }</td>
                                <td>${ flow.name }</td>
                                <td>${ flow.trigger_keywords }</td>
                                <td>${ flow.sent_count }</td>
                                <td>${ flow.read_count }</td>
                                <td>
                                    <span class="badge  text-bg-${ flow.status == 1 ? 'success' : 'warning' }">
                                        ${ flow.status == 1 ? "@lang('user.active')" : "@lang('user.Inactive')" }
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex">
                                        <a href="{{ url('fg_whbackend/reports/flows') }}/${ flow.id }"
                                            class="btn btn-success shadow btn-xs sharp me-1">
                                            <i class="fa fa-project-diagram"></i></a>
                                        <a href="{{ url('fg_whbackend/reports/flows') }}/${ flow.id }/edit"
                                            class="btn btn-primary shadow btn-xs sharp me-1">
                                            <i class="fa fa-pencil"></i></a>
                                    </div>
                                </td>
                            </tr>`;
                        $('#flowTableBody').append(rowHtml);

                    });

                    // Update pagination links
                    $('.pagination').html(generatePaginationLinks(response));
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });

    });
</script>
@endsection