@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="deshbord">
    <div class="signup-form">
        <div class="pro-pic">{!! fileShow('/uploads/pharmacies/photo/', $user->pharmacist->photo) !!}</div>
            <h1>Hi, {{$user->firstname}} {{$user->lastname}}</h1>
            <form action="#" method="post">
                <div class="form-group">
                    <h3>My Availability</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('pharmacist.add-availability')}}" class="add-btn fr">Add</a>
                </div>
                @if (!empty($vacancyArr))
                    <div class="form-group">
                        <label class="v1"><strong>Vacancies</strong></label>
                        <ul class="v-list">
                            @foreach($vacancyArr as $vacancy)
                                <li>
                                    {{$vacancy['name']}}<br>{{$vacancy['location']}}<br>{{$vacancy['date']}}
                                </li>
                            @endforeach
                            <li><a href="{{route("pharmacist.job")}}" class="add-btn fl">See all jobs</a></li>
                        </ul>
                    </div>
                @endif
                <div class="sign-footer">
                    <div class="form-group">
                        <label> Name <br> <span class="ins">{{$user->firstname}} {{$user->lastname}}</span></label>
                        <label>Preferred Name<br> <span class="ins">{{$user->pharmacist->known_as}}</span></label>
                        <label>Email  <br> <span class="ins">  {{$user->email}}</span></label>
                        <div class="divider-wh"></div>
                    </div>
                    <div class="form-group">
                        <label>
                            @if ($user->pharmacist->is_pharmacist == 1)
                            <span class="ins">
                                <img src="{{  asset('front/images/check-icon.png')}}"> Pharmacist
                            </span>
                            @endif
                            @if ($user->pharmacist->annual_practicing_certificate)
                            <span class="ins">
                                <img src="{{  asset('front/images/check-icon.png')}}"> Annual Practicing Certificate
                            </span>
                            @endif
                        </label>
                        {{--<label><span class="ins">Bank Account:<br>{{$user->pharmacist->bank_account}}</span></label>--}}
                    </div>
                    @if ($user->pharmacist->is_pharmacist == 1)
                        <div class="form-group">
                            <label>Skills</label>
                            <ul class="v-list">
                                @foreach($user->pharmacistSkill as $pharmacistSkill)
                                    <li><span class="ins"><img src="{{  asset('front/images/check-icon.png')}}">{{$pharmacistSkill->skill->name}}</span></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    @if ($user->pharmacist->is_pharmacist == 2)
                        <div class="form-group">
                            <label>Levels</label>
                            <ul class="v-list">
                                <li><span class="ins"><img src="{{  asset('front/images/check-icon.png')}}">{{$user->pharmacist->level->name}}</span></li>
                            </ul>
                        </div>
                    @endif
                    <div class="form-group">
                        <label>Area for work:</label>
                        <ul class="v-list">
                            @foreach($user->pharmacistRegion as $pharmacistRegion)
                                <li>
                                    <span><i class="fa fa-angle-right"></i> {{$pharmacistRegion->region->name}}</span>
                                    <ul>
                                        <li><span class="ins">{{$pharmacistRegion->getAccommodation()}}</span></li>
                                        <li><span class="ins">{{$pharmacistRegion->getTravelCosts()}}</span></li>
                                        <li><span class="ins">$ {{$pharmacistRegion->rate_expectation}}</span></li>
                                    </ul>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="form-group">
                        <div class="owl-carousel owl-theme">
                            <div class="item">
                                {!! fileShow('/uploads/pharmacies/photo/', $user->pharmacist->photo) !!}
                            </div>
                        </div>
                    </div>
                    <div class="form-group" style="padding-top: 25px;">
                        <a href="{{route('pharmacist.edit')}}" class="edit-button" style="float: unset;">Edit profile</a>
                        <a href="{{route('faqs')}}" class="edit-button" style="float: unset;">FAQS</a>
                    </div>
                </div>
            </form>
            <div class="btm-iconbar">
                @include('front.pharmacist-menu')
            </div>
        </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']) : ''}}"
                },
                @endforeach
            }
        });
      });
        $(document).ready(function() {
          $('.owl-carousel').owlCarousel({
            loop: true,
             items:1,
             nav:true,
            margin:0,
            responsiveClass: true,
          })
        })
</script>
@endsection