@extends('front.layouts.app')

@section('title') Welcome to  @endsection
@section('head')
<style type="text/css">
    .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;
    }

    .active-day {
        background-color: blue !important;
    }
</style>
@endsection
@section('content')
<div class="signup-form" style="margin-top:0; padding-bottom:0;">
    <form id="quickForm" method="post">
        <div class="form-group">
            <h1>Booking Request</h1>
        </div>
        <div class="form-group">
            <h3 class="sp1">Required Dates</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="sign-footer">
            <div class="form-group">
                <label>Pharmacy Name<br> <span class="ins">{{$pharmacy->pharmacy_name}}</span></label>
                <label>Address<br> <span class="ins">{{$pharmacy->address}}</span></label>
                <label>Owner's Name <span class="ins">{{$pharmacy->owner_name}}</span></label>
                <div class="divider-wh"></div>
            </div>
            <div class="form-group">
                <label><span class="ins">Contact Phone:<br>{{$pharmacy->contact_phone}}</span></label>
            </div>
            <div class="form-group">
                <label><span class="ins">Contact Email:<br>{{$pharmacy->email}}</span></label>
            </div>
            <div class="form-group">
                <div class="owl-carousel owl-theme">
                    <div class="item">
                         {!! fileShow('/uploads/pharmacy/uploads_license/', $pharmacy->uploads_license) !!}
                    </div>
            {{--
            <div class="item">  
              <img src="{{  asset('/uploads/pharmacy/uploads_shop_photo/'.$pharmacy->uploads_shop_photo)}}">
            </div>
            --}}
                </div>
            </div>
        </div>
    
        @csrf
        <input type="hidden" name="user_id" value="{{$pharmacy->user_id}}">
        <input type="hidden" name="created_by" value="{{auth()->user()->id}}">
        <input type="hidden" name="pharmacy_id" value="{{$pharmacy->id}}">
        <div class="date-div">
            
        </div>
        
        
        <div class="form-group">
            <h3>Applicant's Request Notes</h3>
                <textarea class="text-area" name="notes"></textarea>
         </div>
        <div class="form-group"><input type="submit" value="Submit Request" class="blue-btn sv-btn fl"></div>
    </form>
    <div class="btm-iconbar">
        @include('front.pharmacist-menu')
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    $(".required-calendar").responsiveCalendar({
        events: {
            @foreach($availabilityOrVacancy as $av)
            "{{$av['date']}}" : {
                'class' : "{{$av['class']}}",
            },
            @endforeach
        },
    });
    
    $(document).on("click", ".date-green a",function() {
        if ($(this).hasClass("active-day")) {
            $(this).removeClass("active-day");
        } else {
            $(this).addClass("active-day");  
        }
        $(".date-div").html('');
        $(".date-green a").each(function() {
            if ($(this).hasClass("active-day")) {
                $(".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('pharmacist.request-sent') }}";
                        window.location.href = redirectUrl;
                    }  , 1000 );
                    
                } else {
                    showToaster("error", res.msg);
                }
                hideLoader();
            }
        });
    })
</script>
@endsection