@extends('front.layouts.app')

@section('title') Welcome to  @endsection
@section('content')
<div class="signup-form" style="margin-top:0; padding-bottom:0;">
    <div class="form-group">
        <h1>Pharmacist Profile</h1>
    </div>
    <div class="form-group req">
        <div class="text-center">
            <div class="pro-pic">{!! fileShow('/uploads/pharmacies/photo/', $user->pharmacist->photo) !!}</div>
        </div>
        <div class="fl"><span>{{$user->firstname}}</span><span>{{$user->lastname}}</span><span>{{$user->pharmacist->known_as}} - {{$user->pharmacist->is_pharmacist ? ($user->pharmacist->is_pharmacist == 2 ? 'Technician' : 'Pharmacist') : ''}}</span><span>{{$user->email}}</span></div>

    </div>
    <div class="form-group">
        <h3>My Availability</h3>
        <div class="responsive-calendar availability-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>
    </div>
    <div class="form-group sp2">
        <label>Availability Notes<br><br>
        {{$user->pharmacist->availability_notes}}</label>
    </div>
    <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}} - {{$user->pharmacist->is_pharmacist ? ($user->pharmacist->is_pharmacist == 2 ? 'Technician' : 'Pharmacist') : ''}}</span></label>
            <label>Email  <br> <span class="ins">  {{$user->email}}</span></label>
            <div class="divider-wh"></div>
        </div>
        <div class="form-group">
            <label><span class="ins"><img src="{{  asset('front/images/check-icon.png')}}"> Pharmacist</span><span class="ins"><img src="{{  asset('front/images/check-icon.png')}}"> Annual Practicing Certificate</span></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>Select Areas 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">
            <label><span class="ins">History of Bookings</span><br>
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</span></label>
        </div>
        --}}
    </div>
    <form id="quickForm" method="post">
        @csrf
        <input type="hidden" name="user_id" value="{{$user->id}}">
        <input type="hidden" name="is_invite" value="1">
        <input type="hidden" name="created_by" value="{{auth()->user()->id}}">
        <input type="hidden" name="pharmacy_id" value="{{auth()->user()->pharmacy_id}}">
        <div class="date-div">

        </div>
        <div class="form-group">
            <h3 class="sp1">Offer a Position</h3>
            <div class="responsive-calendar sp required-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>
        </div>
        <div class="form-group">
            <h3>Request Notes</h3>
                <textarea class="text-area" name="notes"></textarea>
         </div>
        <div class="form-group"><input type="submit" value="Invite" class="blue-btn sv-btn fl"></div>
    </form>
    <div class="btm-iconbar">
        @include('front.pharmacy-menu')
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    $(".availability-calendar").responsiveCalendar({
        events: {
            @foreach($availabilityOrVacancy as $av)
            "{{$av['date']}}" : {
                'class' : "{{$av['class']}}",
            },
            @endforeach
        }
    });

    $(".required-calendar").responsiveCalendar({
        events: {
        },
        onDayClick : function() {
            if ($(this).hasClass("active-day")) {
                $(this).removeClass("active-day");
            } else {
                $(this).addClass("active-day");
            }

            $(".date-div").html('');
            $(".active-day").each(function() {
                 $(".date-div").append('<input type="hidden" class="date-input" name="date[]" value="'+($(this).data("year")+"-"+$(this).data("month")+"-"+$(this).data("day"))+'">');
            });
        },
    });

    $(document).ready(function() {
      $('.owl-carousel').owlCarousel({
        loop: true,
         items:1,
         nav:true,
        margin:0,
        responsiveClass: true,
      })
    })


    $('#quickForm').submit(function(event) {
        event.preventDefault();
        event.stopPropagation();
        if ($(".date-input").length <= 0) {
            showToaster("error", "Please select date.");
            return false;
        }
        showLoader();
        var formData = new FormData($("#quickForm")[0]);
        $.ajax({
            type: "POST",
            url: "{{ route('booking.save') }}",
            data: formData,
            processData: false,
            contentType: false,
            success: function( res ) {
                if (res.code == 200 || res.code == 0) {
                    msg = res.msg;
                    showToaster("success", msg);
                    setTimeout( function(){
                        redirectUrl = "{{ route('pharmacy.offer-sent') }}";
                        window.location.href = redirectUrl;
                    }  , 1000 );

                } else {
                    showToaster("error", res.msg);
                }
                hideLoader();
            }
        });
    })
</script>
@endsection