@extends('layouts.app')
@section('content')
    <div class="container">
        <div>
            <div class="row hide_on_mobile">
                <div>
                    <h1 class="navy_blue_header">Our <strong>Providers</strong></h1>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 service-checkbox" id="checkboxes">
                <aside class="sidebar nav-list primary editors-services">
                    @include('public.editors.sidebar')
                </aside>
            </div>
            <!--#checkboxes-->
            <div class="col-sm-8 col-md-10">
                <div class="filtersearch" id="searchbar">
                    <ul style="display: inline-flex; list-style: none; padding-left: unset;">
                        <li>
                            <form id="searchForm" action="{{ route('public.providers.editors') }}" 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" 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="filterDocument" action="{{ route('public.editors.filter') }}" method="GET"
                                autocomplete="off" style="width: fit-content;">
                                {{ csrf_field() }}
                                <select name="filter[]" id="filter" class="form-control" onchange="sendFilter()" style="appearance: auto">
                                    <option value="Default" name="default" >Default</option>
                                    <option value="Rating Highest-Lowest" name="rating" >Ratings Highest-Lowest</option>
                                    <option value="Number of Pages Edited" name="pages" >Number of Pages Edited</option>
                                    <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>
            </div>
            <div>
                <div id="all_editors_text">
                    <h2 style="margin: auto;">
                        @if ($available_filter === 'unavailable')
                            @if (!empty($editorsearch) || !empty($specialties))
                                Unavailable Editors
                            @else
                                All Unavailable Editors
                            @endif
                        @elseif($available_filter === 'available')
                            @if (!empty($editorsearch) || !empty($specialties))
                                Available Editors
                            @else
                                All Available Editors
                            @endif
                        @endif
                    </h2>
                </div>

            </div>
            <div class="col-sm-12 col-md-10" id="tags">


                <ul class="horizontal-filters tags margin-top-3 col-md-12" id="service_tags">
                    @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
                </ul>
                <br>
                <div id="editor-master" per-page={{ $perPage }}>
                                        @if (count($editors) == 0)
                        <div class="col-md-12 height-main">
                            <p>No editors 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, 'isWriter' => $isWriter])
                                </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>
        </div>
    </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.editors.filter') !!}',
                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