@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;
    }

    .custom-options.custom-option:before{
        display: none  !important;
    }

    .responsive-calendar .day.active a {
        background-color: green !important;
    }
  </style>
@endsection
@section('content')
    <div class="signup-form" style="margin-top:0;">
        <div class="form-group"><a href="{{route('profile.dashboard')}}" class="closebtn">&times;</a></div>
        <div class="form-group">
            <h1>Add Vacancy</h1>
        </div>
        <form id="quickForm" method="post">
            @csrf
            <input type="hidden" name="id" value="{{$availabilityOrVacancy->id}}">
            @if ($availabilityOrVacancy->id)
                <input type="hidden" name="user_id" value="{{$availabilityOrVacancy->user_id}}">
                <input type="hidden" name="pharmacy_id" value="{{$availabilityOrVacancy->pharmacy_id}}">
            @else
                <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
                <input type="hidden" name="pharmacy_id" value="{{auth()->user()->pharmacy_id}}">
            @endif
            @if (auth()->user()->roles->first()->id == '2')
            <div class="form-group">
                 <div class="select-wrapper">
                    <select  name="region_id" id="region_id" required>
                       <option value=""> Select Areas for work</option>
                       @foreach($region as $value)
                        <option value="{{$value->region_id}}" data-rate-expectation="${{$value->rate_expectation}} per hour"  data-accommodation="{{$value->getAccommodation()}}" data-travel-costs="{{$value->getTravelCosts()}}" {{$value->region_id == $availabilityOrVacancy->region_id ? 'selected' : ''}}>{{$value->region->name}}</option>
                       @endforeach
                    </select>
                 </div>
            </div>
            <div class="form-group">
                <div class="container">
                    <div class="custom-select-wrapper">
                        <div id="pharmacist_region" class="custom-select open">
                        </div>
                    </div>
                </div>
            </div>
            @endif
            <div class="form-group ch1" style="font-size: 13px;">
                <div class="form-check form-check-inline" style="display: inline-block; padding-right: 10px;">
                    <label class="checkbox" for="date">Date
                    <input type="radio" name="recurring" id="date" value="0" {{$availabilityOrVacancy->recurring  == 0 ? 'checked' : ''}}>
                    <span class="checkmark"></span>
                    </label>
                </div>
                <div class="form-check form-check-inline" style="display: inline-block; padding-right: 10px;">
                    <label class="checkbox" for="recurring">Recurring
                    <input type="radio" name="recurring" id="recurring" value="1" {{$availabilityOrVacancy->recurring  == 1 ? 'checked' : ''}}>
                    <span class="checkmark"></span>
                    </label>
                </div>
                <div class="form-check form-check-inline" style="display: inline-block;">
                    <label class="checkbox" for="date_range">Date  Range
                    <input type="radio" name="recurring" id="date_range" value="2" {{$availabilityOrVacancy->recurring  == 2 ? 'checked' : ''}}>
                    <span class="checkmark"></span>
                    </label>
                </div>
            </div>
            @if (auth()->user()->roles->first()->id == '3')
            <div class="form-group">
                 <div class="select-wrapper">
                    <select  name="vacancy_for" id="vacancy_for">
                       <option value="1" {{'1' == $availabilityOrVacancy->vacancy_for ? 'selected' : ''}}> Pharmacist </option>
                       <option value="2" {{'2' == $availabilityOrVacancy->vacancy_for ? 'selected' : ''}}> Technician </option>
                    </select>
                 </div>
            </div>
            @endif
            <div class="form-group recurring-div" style="display: none;">
                <div class="grp recurring_day_of_week">
                    <span class="lab">Every</span>
                    <span class="ipt">
                        <div class="select-wrapper">
                            <select  name="recurring_day_of_week">
                                <option value="Monday" {{$availabilityOrVacancy->recurring_day_of_week  == 'Monday' ? 'selected' : ''}}>Monday</option>
                                <option value="Tuesday" {{$availabilityOrVacancy->recurring_day_of_week  == 'Tuesday' ? 'selected' : ''}}>Tuesday</option>
                                <option value="Wednesday" {{$availabilityOrVacancy->recurring_day_of_week  == 'Wednesday' ? 'selected' : ''}}>Wednesday</option>
                                <option value="Thursday" {{$availabilityOrVacancy->recurring_day_of_week  == 'Thursday' ? 'selected' : ''}}>Thursday</option>
                                <option value="Friday" {{$availabilityOrVacancy->recurring_day_of_week  == 'Friday' ? 'selected' : ''}}>Friday</option>
                                <option value="Saturday" {{$availabilityOrVacancy->recurring_day_of_week  == 'Saturday' ? 'selected' : ''}}>Saturday</option>
                                <option value="Sunday" {{$availabilityOrVacancy->recurring_day_of_week  == 'Sunday' ? 'selected' : ''}}>Sunday</option>
                            </select>
                        </div>
                    </span>
                </div>
                <div class="grp">
                    <span class="lab">From</span><span class="ipt"><input type="date" name="recurring_from" value="{{$availabilityOrVacancy->recurring_from}}" placeholder="Date"></span>
                </div>
                <div class="grp">
                    <span class="lab">Until</span><span class="ipt"><input type="date" name="recurring_until" value="{{$availabilityOrVacancy->recurring_until}}" placeholder="No end date"></span>
                </div>
            </div>
            <div class="form-group select-date-div">
                 <div class="divider" style="margin-bottom: 0px; padding-top: 0px;"></div>
                <label >Select dates</label>
                @if ($availabilityOrVacancy->id)
                    <input type="hidden" name="date" id="dates" value="{{$availabilityOrVacancy->date}}">
                @endif

                <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>
            </div>
            <div class="form-group">
                <label>Availability Notes</label>
                <textarea class="text-area" name="notes">{{$availabilityOrVacancy->notes}}</textarea>
            </div>
            <div class="form-group"><input type="submit" value="{{$availabilityOrVacancy->id ? 'Update' : 'Add'}}" class="blue-btn ad"></div>
        </form>
    </div>
@endsection


@section('script')
<script src="{{ asset('admin/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
<script type="text/javascript">

   $("input[name='recurring']").change(function () {
        if ($(this).val() == 1) {
            $(".recurring-div").show();
            $(".recurring_day_of_week").show();
            $(".select-date-div").hide();
        }else if ($(this).val() == 2) {
            $(".recurring-div").show();
            $(".select-date-div").hide();
            $(".recurring_day_of_week").hide();
        } else {
            $(".select-date-div").show();
            $(".recurring-div").hide();
        }
    });
    $("input[name='recurring']").change();
    $(".responsive-calendar").responsiveCalendar({
        @if ($availabilityOrVacancy->date)
        time: "{{$availabilityOrVacancy->date}}",
        @endif
        events: {
            @if ($availabilityOrVacancy->date)
            "{{$availabilityOrVacancy->date}}" : { 'class' : "active" },
            @endif
        },
        onDayClick : function() {
            @if ($availabilityOrVacancy->id)
                $('.day').removeClass("active");
                $(this).parent('.day').addClass("active");
                $('#dates').val($(this).data("year")+"-"+$(this).data("month")+"-"+$(this).data("day"));
            @else
                var id = $(this).data("year")+"_"+$(this).data("month")+"_"+$(this).data("day");
                if ($(this).parent('.day').hasClass("active")) {
                    $(this).parent('.day').removeClass("active");
                    $("#"+id).remove();
                } else {
                    $(this).parent('.day').addClass("active");
                    var date = $(this).data("year")+"-"+$(this).data("month")+"-"+$(this).data("day");
                    $(".select-date-div").append('<input type="hidden" id="'+id+'" name="date[]" value="'+date+'">');
                }
            @endif
        },
    });
    $.validator.setDefaults({
    submitHandler: function () {

        showLoader();
        var formData = new FormData($("#quickForm")[0]);
        $.ajax({
            type: "POST",
            url: "{{ route('availability-or-vacancy.store') }}",
            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('profile.dashboard') }}";
                        window.location.href = redirectUrl;
                    }  , 1000 );

                } else {
                    showToaster("error", res.msg);
                }
                hideLoader();
            }
        });
    }
  });
  $('#quickForm').validate({
    rules: {
    },
    messages:{
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      element.closest('.form-group').append(error);
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });
  @if (auth()->user()->roles->first()->id == '2')
    $("#region_id").change(function(){
        var html = "";
        if ($("#region_id").val() != "") {
            $("#region_id").find("option:selected").each(function(){
                html += '<div class="custom-options" style="margin-top: -20px;">';
                html += '   <span class="custom-option s1">'+$(this).data("accommodation")+'</span>';
                html += '   <span class="custom-option s1">'+$(this).data("travel-costs")+'</span>';
                html += '   <span class="custom-option s1">'+$(this).data("rate-expectation")+'</span>';
                html += '</div>';
            });
        }

        $("#pharmacist_region").html(html);
      })
    $("#region_id").change();
  @endif
</script>
@endsection