@extends('front.layouts.app')

@section('title') Welcome to  @endsection
@section('head')
<style type="text/css">
    .error {
      color: red;
  }
  .sp-btn:hover {
      color: #313484 !important;
      background: #fff !important;
  }
  .responsive-calendar .day a {
        color: #fff;
    }
    
    .responsive-calendar .day.not-current a {
        color: #807e7e;   
    }
    
    .days .day{
        background-color: red;
    }

    .days .date-green{
        background-color: green !important;
    }

    .days .date-yellow{
        background-color: yellow !important;
    }

    .date-yellow a {
        color: #000 !important;
    }

    .days .date-orange{
        background-color: orange !important;
    }
</style>
@endsection
@section('content')
<div class="signup-form" style="padding-bottom:0;">
    <h1>Hi, {{auth()->user()->pharmacy->pharmacy_name}}</h1>
    <div class="form-group">
        <div class="select-wrapper regi">
            <select class="short-by switch-pharmacy-location" name="switch_pharmacy_location">
                @foreach($pharmacyLocation as $pl)
                <option value="{{$pl->id}}" {{$pl->id == auth()->user()->pharmacy_id ? 'selected' : ''}}>{{$pl->pharmacy_name}}</option>
                @endforeach
            </select>
        </div>
        <a href="{{route("pharmacy.switchbaord")}}" class="add-btn fr" style="margin-top:0px;">Switch</a>
    </div>
    <div class="form-group th">
        <h3>My Vacancies</h3>
        <div class="responsive-calendar">
            <div class="controls">
                <h4><span data-head-month></span> <span data-head-year></span></h4>
                <a class="pull-right" data-go="next">
                    <div class="btn btn-primary" style="background: none;"><i class="fa fa-angle-right"></i></div>
                </a>
                <a class="pull-right" data-go="prev">
                    <div class="btn btn-primary" style="background: none;"><i class="fa fa-angle-left"></i></div>
                </a>
            </div>
            <div class="day-headers">
                <div class="day header">Mo</div>
                <div class="day header">Tu</div>
                <div class="day header">W</div>
                <div class="day header">Th</div>
                <div class="day header">F</div>
                <div class="day header">Sa</div>
                <div class="day header">Su</div>
            </div>
            <div class="days" data-group="days">
            </div>
        </div>
        <a href="{{route('pharmacy.add-vacancy')}}" class="add-btn fr">Add</a>
    </div>
    
    <div class="form-group">
        <label class="v1"><h3>Who’s Available</h3></label>
        <ul class="v-list">
            @if (!empty($suggestedPersonArr) )
                @foreach($suggestedPersonArr as $sp)
                <li>
                    {{$sp['name']}}<br>{{$sp['location']}}<br>{{$sp['date']}}
                </li>
                @endforeach
                <li><a href="{{route('pharmacy.pharmacist', $sp['id'])}}" class="add-btn fl">See Profiles</a></li>
            @endif
        </ul>
    </div>
    
    <div class="sign-footer">
        <div class="form-group">
            <label>Pharmacy Name<br> <span class="ins">{{auth()->user()->pharmacy->pharmacy_name}}</span></label>
            <label>Address<br> <span class="ins">{{auth()->user()->pharmacy->address}}</span></label>
            <label>Owner's Name <span class="ins">{{auth()->user()->pharmacy->owner_name}}</span></label>
            <div class="divider-wh"></div>
        </div>
        <div class="form-group">
            <label><span class="ins">Contact Phone:<br>{{auth()->user()->pharmacy->contact_phone}}</span></label>
        </div>
        <div class="form-group">
            <label><span class="ins">Contact Email:<br>{{auth()->user()->pharmacy->email}}</span></label>
        </div>
        <div class="form-group">
            <div class="owl-carousel owl-theme">
                <div class="item">
                    {!! fileShow('/uploads/pharmacy/uploads_license/', auth()->user()->pharmacy->uploads_license) !!}
                </div>
                {{-- 
                <div class="item">  
                  <img src="{{  asset('/uploads/pharmacy/uploads_shop_photo/'.auth()->user()->pharmacy->uploads_shop_photo)}}">
                </div>
                --}}
            </div>
        </div>
        <div class="form-group"  style="padding-top: 25px;">
            <a href="{{route('pharmacy.edit')}}" class="edit-button"  style="float: unset;">Edit profile</a>
            <a href="{{route('faqs')}}" class="edit-button"  style="float: unset;">FAQS</a>
        </div>
    </div>
    <div class="btm-iconbar">
        @include('front.pharmacy-menu')
    </div>
</div>
@endsection


@section('script')
<script type="text/javascript">
    $(document).ready(function () {
        $(".responsive-calendar").responsiveCalendar({
            events: {
               @foreach($availabilityOrVacancy as $av)
                "{{$av['date']}}" : {
                    'class' : "{{$av['class']}}",
                    'url' : "{{$av['class'] == 'date-green' ? route('pharmacist.edit-availability', $av['id']) : ''}}",
                    'title' : "{{$av['title']}}",
                },
                @endforeach
            }
        });

        $(document).ready(function() {
          $('.owl-carousel').owlCarousel({
            loop: true,
             items:1,
             nav:true,
            margin:0,
            responsiveClass: true,
          })
        })
        
        $(".switch-pharmacy-location").change(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                }
            });
            $.ajax({
                type: "POST",
                url: "{{ route('pharmacy.change-location') }}?pharmacy_id="+$(this).val(),
                processData: false,
                contentType: false,
                success: function( res ) {
                    if (res.code == 200 || res.code == 0) {
                        msg = res.msg;
                        showToaster("success", msg);
                        setTimeout( function(){ 
                            window.location.reload()
                        }  , 1000 );
                        
                    } else {
                        showToaster("error", res.msg);
                    }
                    hideLoader();
                }
            });
        });
    });
</script>
@endsection