@extends('front.patient.inner-layout.app')
@section('page_tab_title' ,"My Service Providers")
@section('content')
<div class="page-content dashboard-wrapper mdashboard-wrapper space-bttm-n client-dahsboardfamily">
    <div class="row align-items-center">
        <div class="col-lg-6 col-md-6 col-sm-4">
            <h1 class="page-title eagle-font font-400"><span class="arca-font">My</span> Service Providers</h1>
        </div>
        @include('front.patient.inner-layout.header')
    </div>
    <div class="brdr-bttm mb-0"></div>
    <div id="tab-menu" class="mydashboard-upcoming-area tab-menu service-provider-area service-provider-widtharea mt-45">
        
        <div class="row">
            <div class="col-xl-8">
                <ul class="nav nav-tabs border-0" id="myTab" role="tablist">
                                        @foreach ($servicePro as $row)

                       
                        <script>
                            $(document).ready(function(e) {
                                GetSP()
                            });
                        </script>   
                    
                    <li class="nav-item" >
                        <a data-clientid="{{$client_id}}" class="nav-link {{$active}}" id="home-tab" data-toggle="tab" href="#" onclick="GetSP({{$client_id}})"  aria-selected="true"> {{ $row['name'] }}</a>
                    </li>

                                            
                    @endforeach
                    @if($count >=1)
                    <li class="nav-item" >
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#" onclick="GetSP('all')"    aria-selected="false">Everyone</a>
                    </li>
                    @endif
                </ul>
            </div>
        </div>

        <div id="SPDATA">

        </div>    

        @if( isset($servicePro) && count($servicePro)==0)

        <div class="mydashboard-upcoming-area appoint-box-center serviceprovider-empty">
            <div class="appointment-empty-box appoint-emptybox-mob orderarea-com">
                <div class="img-calenderbox">
                    <img src='{{asset("assets/images/Service_Providers_Colour.svg")}}' style="width:130px !important;top:-73px !important" alt="" class="img-fluid">
                </div>
                <h3 class="sub-title">You have no Service Providers</h3>
                <span style="color:#24303f">Your service providers will display here once <br>
                     they add you or you book online.</span>
                <!-- <form action="{{route('patient.serviceproviders.add')}}" method="POST">
                    @csrf
                    <div style="border: none;" class="order-area pl-0  mt-20 mb-10">
                        <div class="form-group serviceprovider-box">
                            <select  name="service_provider_id" class="form-control selectboxli select2-single-select" data-placeholder="Search Service Providers" required>
                                <option value="">Search Service Providers</option>
                                @foreach ($providers->whereNotIn('id', $client->serviceProviders()->pluck('practitioner_id') ) as $serviceProvider)
                                <option value="{{$serviceProvider->id}}">{{$serviceProvider->full_name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="modal-footer" style="border-top: 1px solid #CCCCCA;">
                            <button type="submit" style="background: #68afb5 !important;" class="save-btn save-btn-bg h-33 mt-0 w-100">Save</button>
                        </div>
                    </div>
                </form> -->

            </div>
        </div>
        @endif
    </div>

@endsection

@section('modals')
<div id="load-modal"></div>

@include('front.patient.family.modals.invoice-filter')

@endsection
@section('css')
<style rel="stylesheet">
    .min-w-100 {
        min-width: 100px !important;
    }

    #invoiceslistmodal .media {
        padding-left: 10px;
    }

    /* .modal-body{
        min-height:  500px !important;
   } */
   

 </style>
@endsection

@section('js')

<script>
    const message = Swal.mixin({
        customClass: {
            confirmButton: 'btn btn-success shadow-sm mr-2',
            cancelButton: 'btn btn-danger shadow-sm'
        },
        buttonsStyling: false,
    });
    $('.swal2-icon swal2-question').show();
    $(document).on('click', '#serviceProvidercall', function() {
        $(".practitionercallname").text('Call ' + $(this).data('practitionerbusinessname'));
        $('#telofficephone').parent().parent().css('display','block');
        // $('#telmobilephone').parent().parent().css('display','block');
        $('#phoneEmpty').parent().parent().css('display','none');


        $("#officephone").text($(this).data('officephone'));
        // $("#mobilephone").text($(this).data('mobilephone'));
        if ($(this).data('officephone') == '-') {
            $('#telofficephone').parent().parent().css('display', 'none');
        } else {
            $('#telofficephone').attr('href', 'tel:' + $(this).data('officephone'));
        }
        /*if ($(this).data('mobilephone') == '-') {
            $('#telmobilephone').parent().parent().css('display', 'none');
        } else {
            $('#telmobilephone').attr('href', 'tel:' + $(this).data('mobilephone'));
        }
        if ($(this).data('officephone') == '-' && $(this).data('mobilephone') == '-') {
            $('#phoneEmpty').parent().parent().css('display', 'block');
        }*/
        if ($(this).data('officephone') == '-' ) {
            $('#phoneEmpty').parent().parent().css('display', 'block');
        }


        $("#callPractitionerModal").modal('show');
    });
    $(document).on('click', '.delete-confrim', function(e) {
        e.preventDefault();
        var el = $(this);
        var url = el.attr('url-data');
        var id = el.data('id');
        message.fire({
            icon: 'question',
            title: 'Delete Service Provider?',
            type: 'warning',
            customClass: {
                confirmButton: 'btn btn-success shadow-sm mr-2',
                cancelButton: 'btn btn-danger shadow-sm'
            },
            buttonsStyling: false,
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'Cancel',
        }).then((result) => {
            if (result.value) {
                $(".loading").addClass("d-block");
                $.ajax({
                    type: "GET",
                    url: url,
                    data: {
                        id: id,
                        _method: 'GET'
                    }
                }).done(function(respons) {
                    $(".loading").removeClass("d-block");
                    if (!respons.status) {
                        message.fire({
                            type: 'error',
                            title: 'Error',
                            text: respons.message
                        });
                    } else {
                        $('.serviceProvider_'+id).remove();
                        message.fire({
                            icon: 'success',
                            title: 'Service Provider Deleted',
                            //text: "Service provider deleted successfully.",
                        });

                        setTimeout(function(){
                        location.reload(true);
                        }, 2500);

                    }
                }).fail(function(respons) {
                    $(".loading").removeClass("d-block");
                    var res = respons.responseJSON;
                    var msg = 'something went wrong please try again !';
                    if (res.errormessage) {
                        msg = res.errormessage
                    }
                    message.fire({
                        type: 'error',
                        title: 'Error',
                        text: msg
                    });
                });
            }
        });

    });
//     $('#rightbox-close').on('click', function(){
//     $('.rightbox').css({ 'display' : 'none' });
//     // $(this).addClass('current');
// });
</script>
<!-- custom scrollbar stylesheet -->
<!-- <link rel="stylesheet" href="{{ URL::asset('admin_assets/css/jquery.mCustomScrollbar.css') }}"> -->
<script src="{{ asset('assets/patient/js/service-provider/main.js')}}"></script>
<script src='{{ asset("assets/patient/js/jquery.mCustomScrollbar.concat.min.js")}}'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.11/jquery.lazy.min.js" integrity="sha512-eviLb3jW7+OaVLz5N3B5F0hpluwkLb8wTXHOTy0CyNaZM5IlShxX1nEbODak/C0k9UdsrWjqIBKOFY0ELCCArw==" crossorigin="anonymous"></script>

<script>
    $(document).ready(function(e) {
        $(function() {
        $('.lazy').lazy();
    });

    $(document).on('click', '.recomm-history', function(event) {
        $(this).siblings('.service-prov-noti').find('.notification-txt').addClass('d-none');
        $('.rightbox').hide();
        $(this).parents('.appointbox-whitecard').find('.rightbox').toggle();
        $(this).siblings('.service-prov-noti').find('.notification-txt').text("0");
        var client_id = $(this).data('client-id');
        var practitioner_id = $(this).data('practitioner-id');
        formData = new FormData();
        formData.append('client_id', client_id);
        formData.append('practitioner_id', practitioner_id);
        $.ajax({
            url: baseUrl + '/patient/read-recommendations',
            data: formData,
            dataType: 'JSON',
            type: "POST",
            contentType: false,
            processData: false,
            done: function(response) {}
        });
    });
  });

function GetSP(id){

    $(".loading").addClass("d-block");
   
   $.ajax({
      url:"{{route('patient.serviceprovider.GetserviceprovidersData')}}",
      data:{id:id,
         _token: "{{csrf_token()}}"},
      method:"POST"
   }).done(function(response) {
      $(".loading").removeClass("d-block");
      
      if(response.status == "success"){

         $("#SPDATA").html(response.data);
      }
   
   }).fail(function(respons) {
      $(".loading").removeClass("d-block");
               
   });

}

//   $("#recommendation-file").hover(function() {
//   $('#recommendation-filehover').removeClass('d-block');
// }, function() {
//   $('#recommendation-filehover').addClass('d-none');
// });


// $("#recommendation-file").hover(function(){
//     $('#recommendation-filehover').show();
// },function(){
//     $('#recommendation-filehover').hide();
// });
  </script>
@endsection