@extends('layouts.app')
@section('content')
    <div class="container">
        <h1>Order Now</h1>
      <br>
      <div style="display: flex; justify-content: center;">
        <a style="margin-right: 8px" class="btn knowmad_btn knowmad_btn_blue" href="{{ route('public.providers.editors') }}">View Editor Profiles</a>
        <a style="margin-left:  8px" class="btn knowmad_btn knowmad_btn_blue" href="{{ route('public.providers.writers') }}">View Writer Profiles</a>
      </div>
      <div>Select a service to get started.</div>
        <div class="align-items-start mt-3">
            <div class="nav nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="horizontal">
                @foreach ($provider_svcs as $key => $svc)
                    <a class="btn knowmad_btn @if ($svc->id === $provider_svc_id) active knowmad_btn_blue @else knowmad_btn_blue_border @endif" id="v-pills-{{ $svc->id }}-tab"
                        type="button" role="tab" aria-controls="v-pills-{{ $svc->id }}" aria-selected="true"
                        href="{{ route('admin.recenteditors.index', [$svc->id]) }}">{{ $svc->service }}</a>
                @endforeach
            </div>

            {{-- tab content --}}
            <div class="tab-content" id="v-pills-tabContent" style="width: 100%;">
                @foreach ($provider_svcs as $key => $svc)
                    <div class="tab-pane fade @if ($svc->id === $provider_svc_id) show active @endif "
                        id="v-pills-{{ $svc->id }}" role="tabpanel" aria-labelledby="v-pills-{{ $svc->id }}-tab">

                        <h2 style="display: inline;">{{ $svc->service }} Providers
                        </h2>

                        <input type="text" class="form-control" style="max-width: 211px; float: right; margin-right: 15px;" id="providerSearch" placeholder="Search Providers" onkeyup="filterProviders()">
                        <hr>
                        <ul class="list-group favorites-list" id="providersList">
                            @foreach ($providers as $p)
                                <li class="list-group-item">
                                    <span>
                                        {{ $p->username }} ({{ $p->stars2() }} &nbsp; 
                                        <span class="userstar user-favorite-stars" style="float: unset; display: inline-block;"></span>)
                                    </span>
                                    <a href="{{ route('public.document.create', ['providerUsername' => $p->username, 'provider_svc_id' => $provider_svc_id]) }}"
                                        class="btn knowmad_btn_blue knowmad_btn flex-right" aria-label="Left Align">
                                        Order Now
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        </div>

    </div>
@endsection
@push('footer_js')

    <script type="text/javascript">
        function filterProviders() {
            let $input = $("#providerSearch");
            let $list = $('#providersList');
            
            let $input_val = $input.val().toLowerCase();
            /** 
             * finding each span tag that's nested in li and then comparing everything before '(' to match the search
            */
            let options = $list.find("li>span").filter(function () {
                let name = $(this).html().split('(')[0].toLowerCase();
                if (name.includes($input_val)) {
                    /** parent is the 'li' tag */
                    $(this).parent().show();
                } else {
                    $(this).parent().hide();
                }
                // return $(this).val().toLowerCase() == ;
            });
        }
    </script>
@endpush