@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
Service Provider
@endsection


@section('admin_dashboard_css')
<style>
    .modalb {
        background: #29aae3;
        color: white;
    }

    .modalb:hover {
        background: #0293d4;
        color: white;
    }

    .custom-search1 {
        border-radius: 20px;
        background: #ecf0fa;
        border: 1px solid #ecf0fa;
    }

    .custom-search .bt {
        margin-left: -35px;
        margin-top: 12px;
    }

    .page-item.next a {
        width: 64px;
    }

    .page-item.prev a {
        width: 64px;
    }
</style>
@endsection

@section('admin_dashboard_content')
<div class="content dashboard-content h-100">
    <h1 class="dashboard-content-h1">Service Provider</h1>
    <div class="content-wrap">

        <!-- breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <nav class="breadcrumb-4">
                <ol class="breadcrumb breadcrumb-style1">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item active">Service Provider</li>
                </ol>
            </nav>
        </div>
        <!-- breadcrumb -->

        @php
            $status_array = ['Pending', 'Inactive', 'Active'];
            $badge_array = ['bg-warning', 'bg-danger', 'bg-success'];
        @endphp

        <!-- row opened -->
        <div class="row" id="PaginationData">
            @if(count($users) > 0)
                @foreach($users as $user)
                <div class="col-sm-12 col-xl-4 col-lg-6 col-md-6 ">
                    <div class="card user-wideget user-wideget-widget widget-user">
                        <div class="widget-user-header modalb">
                            <h3 class="widget-user-username">{{ ucwords($user->first_name) }} {{ $user->last_name }}
                                <span style="float:right; font-size:12px;">
                                    {{-- @if ($role->hasPermissionTo('clients show')) --}}
                                        <a href="{{ url('service-provider/view',$user->id) }}" target="_blank" title=" Client Detail" class=" text-white ">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                    {{-- @endif --}}
                                </span>
                            </h3>
                            <h6 class="widget-user-desc">&nbsp;
                                <span style="float:right">&nbsp;</span>
                            </h6>
                            <span class="badge rounded-pill {{ $badge_array[$user->status] }}">{{ $status_array[$user->status] }}</span>
                            <p class="pt-3" style="float:right"> <i class="fas fa-calendar-week"></i> {{ $user->created_at->format('M d Y') }}</p>
                        </div>
                        <div class="widget-user-image">
                            <img src="{{ !empty($user->images) ? 'images/product/'.$user->images : 'assets/img/faces/6.jpg' }}" class="brround" alt="User Avatar" style="object-fit: cover;height: 88px; margin-top: 7px;">
                        </div>
                        <div class="user-wideget-footer">
                            <div class="row">
                                <div class="col-sm-5 border-right">
                                    <div class="description-block">
                                        <span class="description-text">{{ $user->roles[0]->name }}</span>
                                    </div>
                                </div>
                                <div class="col-sm-7">
                                    <div class="description-block" style="text-align: left !important">
                                        <span class="description-text">Review:
                                            <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                            <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                            <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                            <i class="fa fa-star" aria-hidden="true" style="color:yellow;"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i> (5)
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                <div class="row mt-2">
                    <div class="col-12">
                        {{ $users->render("pagination::bootstrap-4") }}
                    </div>
                </div>
            @else
                <div class="row card mt-3" style="min-height: 62vh;position: relative; ">
                    <div class="col-12 text-center" style="margin: 0;
                    position: absolute;
                    top: 50%;
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);">
                        <h1 class="h3">No Service Provider Found</h1>
                    </div>
                </div>
            @endif
            <input type="hidden" name="hidden_page" id="hidden_page" value="1">
        </div>
        <!-- row closed -->

    </div>
</div>

@endsection

@section('admin_dashboard_script')
<script>
    $(document).ready(function(){
        //start pagination and searching
        if ($(".page-link")[0]){
            $("a.page-link").each(function(index){
                var next_route = '{{url()->current()}}'+"/paginate-more-service-provider-ajax/?page="+(index+2);
                $(this).attr("href", next_route);
            });
        }

        $(document).on('click','.pagination a',function(e){
            e.preventDefault();
            //  var pageNumbervar
            pageNumber = $(this).attr('href').split('page=')[1];
            //  alert(pageNumber);
            $("#hidden_page").val(pageNumber);
            getMorePage(pageNumber)
        });

        function getMorePage(pageNumber){
            $.ajax({
                type:"GET",
                url:'{{url()->current()}}'+"/paginate-more-service-provider-ajax/?page="+pageNumber,
                data:{},
                    success: function(data){
                        $('#PaginationData').html(data)
                    },
            })
        }

        getMorePage(1);
    });
</script>
@endsection