@include('components/uheader')
@include('components/usidebar')
<!--  Begin CONTENT AREA  -->
<style>

#chartdiv {
  width: 100%;
  height: 500px;
}
.ui-datepicker-week-end {
  background: #ddd !important;
  pointer-events: none !important;
}
.ui-datepicker-week-end  a{
  background: #ddd !important;
  pointer-events: none !important;
}
</style>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Employee OD</h2>
        <div class="viewAll mr-4">
            <a href="/employee_dashboard" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left">
                <line x1="19" y1="12" x2="5" y2="12"></line>
                <polyline points="12 19 5 12 12 5"></polyline>
                </svg> Back</button>
            </a>
        </div>
    </div>
    <div class="layout-px-spacing ">
        <div class="layout-top-spacing">
            <div class="modal-footer"></div>
            <div class="card mb-3">
                <div class="card-body">
                    <div class="box-widget widget-user">
                        <div class="widget-user-image d-sm-flex">
                            <span class="avatar">
                                @if($employee_data->profile_picture == '')
                                    <img width="100px" accept="image/*"  style = "border: 8px solid #ADD8E6;" height="100px" src='{{asset("design/img/profiles/default.svg")}}' class="image">
                                @else
                                    <img width="100px" accept="image/*" style = "border: 8px solid #ADD8E6;" height="100px" src='{{asset("root/documents/$employee_data->id/profile/$employee_data->profile_picture")}}' class="image">
                                @endif
                            </span>
                            <span class="avatar pl-4 pt-2">
                                <div class="p-1">
                                    <h6><b>Name :</b> {{$employee_data->first_name}} {{$employee_data->middle_name}} {{$employee_data->last_name}}</h6>
                                </div>
                                <div class="p-1">
                                    <h6><b>Email : </b>{{$employee_data->official_email}}</h6>
                                </div>
                                <div class="p-1">
                                    <h6><b>Phone No. : </b>{{$employee_data->phone_number}}</h6>
                                </div>
                            </h6>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-between layout-top-spacing">
            <div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 col-12 mb-4 applyLeaves-col">
                <div class="card">
                    <div class="card-header  border-0">
                        <h6 class="card-title">Apply OD</h6>
                    </div>
                    <form class="applyLeaveForm" method="post" action="{{ route('employee_od_store') }}" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="card-body">
                            <div class="row">
                                <input type="hidden" name="e_id" value="{{$employee_data->id}}">
                                <input type="hidden" name="emp_name"
                                    value="{{$employee_data->first_name}} {{$employee_data->last_name}}">
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="leaveDates">Employee Email</label>
                                        <input type="text" class="form-control" name="emp_email" value=" {{$employee_data->official_email}}" readonly>
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="leaveDates">Phone Number</label>
                                        <input type="text" class="form-control" name="phone_no" value=" {{$employee_data->phone_number}}" readonly>
                                    </div>
                                </div>
                                <span class="text-danger">
                                    @if($errors->has('phone_no'))
                                        @foreach($errors->get('phone_no') as $error)
                                            {{$error}}
                                        @endforeach
                                    @endif
                                </span>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group weekends-disabled">
                                        <label for="startDate">Start Date</label>
                                        <div class="date-field-with-icon">
                                            <input type="text" placeholder="Start Date" class="form-control datepicker" name="start_date" id="startDate"onkeypress="return false;" value="{{old('start_date')}}" autocomplete="off">
                                            <div class="date-icon">
                                                <img src="{{ asset('design/img/date-icon.svg') }}" alt="date" />
                                            </div>
                                        </div>
                                        <span class="text-danger">
                                            @if($errors->has('start_date'))
                                            @foreach($errors->get('start_date') as $error)
                                            {{$error}}
                                            @endforeach
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group  weekends-disabled">
                                        <label for="endDate">End Date</label>
                                        <div class="date-field-with-icon">
                                            <input type="text" placeholder="End Date" class="form-control datepicker" name="end_date" onkeypress="return false;" id="endDate" value="{{old('end_date')}}" autocomplete="off">
                                            <div class="date-icon">
                                                <img src="{{ asset('design/img/date-icon.svg') }}" alt="date" />
                                            </div>
                                        </div>
                                        <span class="text-danger">
                                            @if($errors->has('end_date'))
                                            @foreach($errors->get('end_date') as $error)
                                            {{$error}}
                                            @endforeach
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group weekends-disabled">
                                        <label for="startDate">Start Time</label>
                                        <div class="date-field-with-icon">
                                            <input type="time" placeholder="Start time" class="form-control" name="arr_time" value="{{old('arr_time')}}" autocomplete="off">
                                        </div>
                                        <span class="text-danger">
                                            @if($errors->has('arr_time'))
                                                @foreach($errors->get('arr_time') as $error)
                                                    {{$error}}
                                                @endforeach
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                                    <div class="form-group weekends-disabled">
                                        <label for="startDate">End Time</label>
                                        <div class="date-field-with-icon">
                                            <input type="time" placeholder="End time" class="form-control" name="dep_time" value="{{old('dep_time')}}" autocomplete="off">
                                        </div>
                                        <span class="text-danger">
                                            @if($errors->has('dep_time'))
                                                @foreach($errors->get('dep_time') as $error)
                                                    {{$error}}
                                                @endforeach
                                            @endif
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="form-group">
                                        <label for="reasons">Reason:</label>
                                        <textarea name="reason" class="form-control" rows="4" maxlength="300" id="reasons" style="resize: none;" placeholder="Enter Leave Reason">{{old('reason')}}</textarea>
                                    </div>
                                    <span class="text-danger">
                                        @if($errors->has('reason'))
                                        @foreach($errors->get('reason') as $error)
                                        {{$error}}
                                        @endforeach
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="daysBtnGrp">
                                <div class="btnGroup col-xl-12 col-lg-8 col-md-6 pr-0 row justify-content-between">
                                    <div class="col-6 pr-0">
                                        <a href="/employee_dashboard" class="btn btn-outline-primary col-12">Close</a>
                                    </div>
                                    <div class="col-6 pr-0">
                                        <button class="btn btn-primary col-12" type="submit">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 col-12 mb-4 calendar-col">
                <div class="card">
                    <div class="card-header  border-0">
                        <h4 class="card-title">CALENDER</h4>
                    </div>
                    <div class="card-body">
                        <div id='calendar'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    @if(session('done'))
    <script type="text/javascript">
    swal.fire({
        title: "{{ session('done') }}",
        type: 'success',
        padding: '2em'
    })
    </script>
    @elseif(session('edit'))
    <script type="text/javascript">
    swal.fire({
        title: 'Profile Edited Successfully!',
        type: 'success',
        padding: '2em'
    })
    </script>
    @elseif(session('error'))
    <script type="text/javascript">
    swal.fire({
        title: "{{ session('error') }}",
        type: 'error',
        padding: '2em'
    })
    </script>
    @endif
    @include('components/ufooter')
    
<!-- Chart code -->
<script>
    @php
        $data = []; 
        $datas = implode(',',$data);

        $holidays_dates = [];
        foreach($holiday as $h){
            $holidays_dates[date('m/d/Y',strtotime($h->date))] = $h->holiday_name;
        }@endphp

        var holly = [];

        @php
        foreach($holiday as $h){@endphp
        holly.push('@php echo $h->date @endphp');
       
    @php } @endphp
      
    var holidays_dates = @php echo json_encode($holidays_dates); @endphp;

    var value = "@php print_r($datas); @endphp";

    var array = value.split(',');
    var counter = 0;
    setInterval(function() {
        counter++;

        if (counter === 2) {
            $('body').find('.custome-event').each(function() {
                $(this).parent().addClass('custome-event');
            });
        }
    }, 5000);
    $(document).ready(function() {
        var calendar = $('#calendar').fullCalendar({
            events: "{{url('holiday_get')}}",
            displayEventTime: true,
            selectable: true,
            selectHelper: true
        });

        $(function() {            
            disabledDates = [];

            function available(date) {
                var moth = String(date.getMonth() + 1);
                if (moth.length == 1) {
                    moth = "0" + moth;
                }

                var dat = String(date.getDate());
                if (dat.length == 1) {
                    dat = "0" + dat;
                }
                dmy = moth + "/" + dat + "/" + date.getFullYear();

                if ($.inArray(dmy, availableDates) != -1) {
                    return [true, ""];
                } else if (dmy in holidays_dates) {
                    return [false, "Highlighted", holidays_dates[dmy]];
                } else {
                    return [false, ""];
                }
            }

            //this function gets the dates from holidays_dates and makes array of disabled dates.
            function disabled() {
                for (var date in holidays_dates) {
                    disabledDates.push(date);
                }
            }

            disabled();
            $(".datepicker").datepicker({
                beforeShowDay: function(date) {
                    var day = date.getDay();
                    var formattedDate = $.datepicker.formatDate('mm/dd/yy', date),
                        checkDisable = disabledDates.indexOf(formattedDate) == -1;
                    if (checkDisable == true) {
                        return [checkDisable] ;
                    } else {
                        //add ui-datepicker-unselectable class to the disabled date.
                        return [!checkDisable, 'ui-datepicker-unselectable', holidays_dates[
                            formattedDate != 0 && formattedDate != 6, 'weekends-disabled' ]];
                    }
                },
                onChangeMonthYear: function() {
                    setTimeout(function() {
                        changeDisableDateColor();
                    });
                },
                changeMonth: true,
                changeYear: true,
                dateFormat : "dd/mm/yy",

                onSelect: function(dateText) {
                    var start_date = $('#startDate').datepicker('getDate');
                    var end_date = $('#endDate').datepicker('getDate');                    

                    $("#endDate").attr('readonly', false);
                    $("#endDate").removeClass("hide_cal");
                }
            });
        
            $('.datepicker').click(function() {
                changeDisableDateColor();
            });

            //change the css of the disable date.
            function changeDisableDateColor() {
                var unselectableDate = $('.ui-datepicker-unselectable a');

                unselectableDate.css({
                    background: '#ADD8E6',
                    color : 'white',
                    cursor: 'context-menu',
                    border: 0
                });
            }
        });

        var session = $("#session").val();
        var day = $("#set_day").val();
    });
    $(function() {
        $('.leave-calendar').pignoseCalendar();
    });

</script>