@extends('layouts.app')
@section('content')
<div class="container">
    <div>
        <div class="row hide_on_mobile">
            <div>
                <h1 class="navy_blue_header">
                    @if ($provider_svc->id === 1)
                        Our <strong>Editors</strong>
                    @elseif ($provider_svc->id === 2)
                        Best Professional Writers
                    @endif
                </h1>
            </div>
        </div>
        <div class="col-sm-4 col-md-2 service-checkbox" id="checkboxes">
            
                <aside class="sidebar nav-list primary editors-services">
                    @if ($provider_svc->id === 1)
                        @include('public.editors.sidebar')
                    @endif
                </aside>
            
        </div>
        <!--#checkboxes-->
        <div class="col-sm-8 col-md-10">
            @if ($provider_svc->id === 1)
                <div class="filtersearch" id="searchbar">
                    <ul style="display: inline-flex; list-style: none; padding-left: unset;">
                        <li>
                            <form id="searchForm" action="{{ $form_action }}"
                                
                                method="get" novalidate="novalidate" autocomplete="off"
                                style="width: fit-content; margin-right: 5px;">
                                {{ csrf_field() }}
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control knowmad_input valid" value="{{ $editorsearch }}" name="editorsearch" id="editorsearch" data-form_action="{{ $form_action }}" placeholder="Search...">
                                    <!--<span class="input-group-btn">-->
                                    <div class="input-group-append">
                                        <button class="btn knowmad_btn_blue knowmad_btn width_fitContent" type="submit" id="btnSearch" style="margin-top: 5px; height: unset;">
                                            <span class="glyphicon glyphicon-search" aria-hidden="true"> Search</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </li>
                        <li>
                            <form name="filterProviders" id="filterProviders" action="{{ $form_action }}" method="GET" autocomplete="off" style="width: fit-content;">
                                {{ csrf_field() }}
                                <select name="filter" id="filter" class="form-control" onchange="$(filterProviders).submit()" style="appearance: auto">
                                    <option value="Default" name="default" >Default</option>
                                    <option value="Rating Highest-Lowest" name="rating" >Ratings Highest-Lowest</option>
                                    @if ($provider_svc->id === 1)
                                    <option value="Number of Pages Edited" name="pages" >Number of Pages Edited</option>
                                    @endif
                                    <option value="Username A-Z" name="a-z" >Username A-Z</option>
                                    <option value="Username Z-A" name="z-a" >Username Z-A</option>
                                </select>

                            </form>
                        </li>

                    </ul>



                </div>
            @endif
            @if ($provider_svc->id === 2)
            <div class="filtersearch" id="searchbar">
                <ul style="display: inline-flex; list-style: none; padding-left: unset;">
                    <li>
                        <form id="searchForm" action="{{ $form_action }}"
                            
                            method="get" novalidate="novalidate" autocomplete="off"
                            style="width: fit-content; margin-right: 5px;">
                            {{ csrf_field() }}
                            <div class="input-group mb-3">
                                <input type="text" class="form-control knowmad_input valid" value="{{ $editorsearch }}" name="editorsearch" id="editorsearch" data-form_action="{{ $form_action }}" placeholder="Search...">
                                <!--<span class="input-group-btn">-->
                                <div class="input-group-append">
                                    <button class="btn knowmad_btn_blue knowmad_btn width_fitContent" type="submit" id="btnSearch" style="margin-top: 5px; height: unset;">
                                        <span class="glyphicon glyphicon-search" aria-hidden="true"> Search</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </li>
                    <li>
                        <form name="filterProviders" id="filterProviders" action="{{ $form_action }}" method="GET" autocomplete="off" style="width: fit-content;">
                            {{ csrf_field() }}
                            <select name="filter" id="filter" class="form-control" onchange="$(filterProviders).submit()" style="appearance: auto">
                                <option value="Default" name="default" >Default</option>
                                <option value="Rating Highest-Lowest" name="rating" >Ratings Highest-Lowest</option>
                                @if ($provider_svc->id === 1)
                                <option value="Number of Pages Edited" name="pages" >Number of Pages Edited</option>
                                @endif
                                <option value="Username A-Z" name="a-z" >Username A-Z</option>
                                <option value="Username Z-A" name="z-a" >Username Z-A</option>
                            </select>

                        </form>
                    </li>

                </ul>



            </div>
            @endif
        </div>
        <div>
            <div id="all_editors_text">
                <h2 style="margin: auto;">
                    @if ($available_filter === 'unavailable')
                    @if (!empty($editorsearch) || !empty($specialties))
                    Unavailable {{$provider_title}}
                    @else
                    All Unavailable {{$provider_title}}
                    @endif
                    @elseif($available_filter === 'available')
                    @if (!empty($editorsearch) || !empty($specialties))
                    Available {{$provider_title}}
                    @else
                    All Available {{$provider_title}}
                    @endif
                    @endif
                </h2>
            </div>

        </div>
        @if ($provider_svc->id === 1)
        <div class="col-sm-12 col-md-10" id="tags">
        @else
        <div style="display: flex; justify-content: center">
            <div class="col-sm-12 col-md-10" id="tags">
        @endif

            <ul class="horizontal-filters tags margin-top-3 col-md-12" id="service_tags">
                @if ($provider_svc->id === 1)
                    @foreach ($specialties as $specialty)
                    <li>
                        <a href="#" data-id="{{ $specialty->id }}" style="text-decoration: unset !important;">
                            <span class="label boxclose editor-tags">{{ $specialty->name }}</span>
                        </a>
                    </li>
                    @endforeach
                @endif
            </ul>
            <br>
            <div id="editor-master" per-page={{ $perPage }}>
                                @if (count($editors) == 0)
                <div class="col-md-12 height-main">
                    <p>No {{$provider_title}} were found using the selected filters.</p>
                </div>
                @else
                <div class="row" style="width: 100%;">
                    @foreach ($editors as $provider_user_acct)
                    <div class="col-md-6 height-main" id="details{{ $loop->iteration }}">

                        @include('partials.single_editor', ['user' => $provider_user_acct, 'profile_base_url' => $form_action, 'provider_svc_id' => $provider_svc->id])
                    </div>
                    @if ($loop->iteration % 2 === 0)
                </div>
                <div class="row" style="width: 100%;">
                    @endif
                    @endforeach
                </div>

                @endif


            </div>
        </div>

    </div>
</div>
<div class="text-center" id="paginate_links">
    {!! $paginate_links !!}
</div>

@stop
@push('footer_js')
<script>
    var editor_svcs_toggle = $('#editor_svcs_label'),
        editor_svcs = $('#editor_svcs');

    // console.log(editor_svcs_toggle);
    if (editor_svcs_toggle) {
        editor_svcs_toggle.on('click', function(e) {
            e.preventDefault();
            // console.log(editor_svcs);
            if (editor_svcs) {
                if (editor_svcs.hasClass('show')) {
                    editor_svcs.removeClass('show');
                } else {
                    editor_svcs.addClass('show');
                }
            }

        });
    }

    // equalizeEditorProfileHeight();

    function sendFilter() {
        var e = document.getElementById("filter");
        var filter_pick = e.options[e.selectedIndex].value;


        $.ajax({
            type: 'GET',
            url: '{!! route('public.providers.editors') !!}',
            data: ({
                filter: filter_pick
            }),
            success: function(data) {
                //$(".cartData").html(data);
                $('body').html(data);
                // console.log(data);
            }
        });
    }


    function equalizeEditorProfileHeight() {
        var perPageLimit = $('#editor-master').attr('per-page');
        perPageLimit = parseInt(perPageLimit);
        var editorCards = $('dl');
        var editorCardHeights = [];
        for (var i = 0; i < perPageLimit; i++) {
            editorCardHeights.push($(editorCards[i]).height());

        }
        editorCardHeights.sort(function(a, b) {
            return b - a;
        });
        for (var i = 0; i < perPageLimit; i++) {
            $(editorCards[i]).height(editorCardHeights[0]);

        }
    }
</script>
@endpush