@extends('admin.layout')
@section('style')

@parent
<style>
    #watermarked::before {
	position: fixed;
	top: -75%;
	left: -75%;
	display: block;
	width: 300%;
	height: 300%;
	transform: rotate(-45deg);
	content: attr(data-watermark);
	font-size: 30px;
	opacity: 0.15;
	line-height: 4em;
	letter-spacing: 2px;
	color: #ff0523;
	z-index:0;
	}
	.content-wrapper, .right-side{
		background: #FFF;
	}
	.box {
		background: transparent;
		z-index: 1; 
	}
    th:nth-child(n+2), td:nth-child(n+2) {
        text-align:center;
    }
    .weekoff,.holiday{
        font-size: 16px;
        font-weight: 700;
        color:#a94442;
    }
    .datepicker table tr td span.active{
        background: #04c!important;
        border-color: #04c!important;
    }
    .datepicker .datepicker-days tr td.active {
        background: #04c!important;
    }
    .datepicker .datepicker-days tr td.active~td, .datepicker .datepicker-days tr td.active {
        color: #fff;
        background-color: #04c;
        border-radius: 0;
    }

    .datepicker .datepicker-days tr:hover td, .datepicker table tr td.day:hover, .datepicker table tr td.focused {
        color: #000!important;
        background: #e5e2e3!important;
        border-radius: 0!important;
    }
    table td{
        position:relative;
    }
    .editDaySchedule{
        position: absolute;right: 0;top: 0;color: #e5144e;
       
    }
</style>
@stop
@section('content')
<div class="search-list">
    <div class="content-wrapper search-result-list">
          @php
        $getUserRoleData = userRoleData();
        $schedulesPermission = explode(",",$getUserRoleData->schedules);
        @endphp
        @php
        $weekScheduleDays = array(
            date( "Y-m-d", strtotime($result['schedulestart'])),
            date( "Y-m-d", strtotime('+1 day '.$result['schedulestart'])),
            date( "Y-m-d", strtotime('+2 day '.$result['schedulestart'])),
            date( "Y-m-d", strtotime('+3 day '.$result['schedulestart'])),
            date( "Y-m-d", strtotime('+4 day '.$result['schedulestart'])),
            date( "Y-m-d", strtotime('+5 day '.$result['schedulestart'])),
            date( "Y-m-d", strtotime('+6 day '.$result['schedulestart'])),

        );
        @endphp
        <section class="content-header box">
     
            <h1 style="float: left; margin-right:50px"> {{ trans('Schedule ') }} <small> {{ trans('Schedule') }}...</small> </h1>
                                       <h4 style="margin-top:0px; padding-right:20px;" class="">Current Schedule {{date('M d', strtotime($result['schedulestart']))}} - {{date('M d, Y', strtotime('+6 day '.$result['schedulestart']))}}
                                       @if(in_array("Add",$schedulesPermission )) 
                                            @if(isset(request()->filter_date_range))
                                            <a href="{{route('add_schedule')}}?filter_date_range={{request()->filter_date_range}}" class="btn btn-primary" style="margin-left:10px">Add/Update Schedule</a>
                                            @else
                                            <a href="{{route('add_schedule')}}" class="btn btn-primary" style="margin-left:10px">Add/Update Schedule</a>
                                            @endif
                                       @endif
                                       </h4>
            <ol class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i>
                        {{ trans('labels.breadcrumb_dashboard') }}</a></li>
                <li class="active"> {{ trans('Schedule') }}</li>
                <li class="active"> {{ trans('Shifts') }}</li>
            </ol>
        </section>
      
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                    <div class="box-body">
                            <div class="row">
                                <div class="col-sm-5">
                                <div class="row">
                                        <div class="col-xs-12">
                                            <div class="form-group" id="week-picker-wrapper" >
                                                <label for="week" class="control-label">Select Week</label>
                                                <div class="row">
                                                <div class="col-sm-6">
                                                <div class="input-group">
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-rm week-prev">&laquo;</button>
                                                    </span>
                                                    <input type="text" class="form-control week-picker" placeholder="Select a Week" value="{{date('m/d/Y', strtotime($result['schedulestart']))}} - {{date('m/d/Y', strtotime('+6 day '.$result['schedulestart']))}}">
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-rm week-next">&raquo;</button>
                                                    </span>
                                                </div>
                                                </div>
                                                <div class="col-sm-6">
                                                  <a href="#" class="btn btn-primary" id="copyschedule">Copy Schedule to next week</a>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>
                                </div>
                      <div class="col-sm-7">
                            <div class="row">
                                <form action="{{url('admin/schedules')}}" class="filter " id="schedule_filter">
                                    @if(isset(request()->filter_date_range))
                                    <input type="hidden" name="filter_date_range" value="{{request()->filter_date_range}}">
                                    @endif
                                    <input type="hidden" name="myschedule" value="{{request()->myschedule}}">
<!--                                 <div class="col-xs-5"></div>
 -->                                <div class="col-xs-12"><label for="user">Search By:</label></div>
                                <div class="col-xs-6">
                                    <div class="fomr-group">
                                        <select name="user" id="user" class="form-control select2">
                                            <option value="">Select User</option>
                                            @foreach($result['filterusers'] as $shift)
                                            <option value="{{$shift->myid}}"  @if(request()->user == $shift->myid) selected @endif >{{$shift->first_name}} {{$shift->last_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                    <div class="col-xs-6">
                                        <div class="input-group" style="display: flex;">
                                            <select name="shift" id="shift" class="form-control">
                                                <option value="">Select Shift</option>
                                                @foreach($result['shifts'] as $shift)
                                                <option value="{{$shift->shift_id}}" @if(request()->shift == $shift->shift_id) selected @endif >{{ucwords($shift->shift_name)}}</option>
                                                @endforeach
                                            </select>
                                            <div class="input-group-append ">
												<button class="btn btn-sidebar btn-warning btn-flat">
												    <i class="fa fa-search fa-fw"></i>
												</button>
                                            </div>
                                            <div class="input-group-append ">
                                                <a href="{{url('admin/schedules')}}" class="btn btn-primary btn-flat "><span class="glyphicon glyphicon-refresh"></span> </a>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                            </div>  
                            <div class="col-xs-12">
                                <div class="row">
                                    @if(session()->has('message'))
                                    <div class="alert alert-success alert-dismissible">
                                        <button aria-hidden="true" data-dismiss="alert" class="close"
                                            type="button">×</button>
                                        <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
                                        {{ session()->get('message') }}
                                    </div>
                                    @endif
                                    @if(session()->has('error'))
                                    <div class="alert alert-warning alert-dismissible">
                                        <button aria-hidden="true" data-dismiss="alert" class="close"
                                            type="button">×</button>
                                        <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
                                        {{ session()->get('error') }}
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="row" style="margin-top: 10px;">
                                <div class="col-xs-12 ">
                                    @if(in_array("View",$schedulesPermission ))
                                    <table id="example1" class="table table-bordered ">
                                        <thead>
                                            <tr>
                                                <th>User<br/>
                                                    <label for="myschedule" class="radio-inline">
                                                        <input type="radio"  name="myschedule_check" id="myschedule" value="myschedule" class="myschedule"  @if(request('myschedule') == 'myschedule' || request('myschedule') != 'all' ) checked @endif>
                                                            My Schedule
                                                    </label>
                                                    <label for="allschedule" class="radio-inline">
                                                        <input type="radio"  name="myschedule_check" id="allschedule" value="all" class="myschedule"  @if(request('myschedule') == 'all' ) checked @endif>
                                                            All Schedules
                                                    </label>
                                                </th>
                                                @foreach($weekScheduleDays as $key => $weekDay)
                                                <th class="@if( date('Y-m-d', strtotime($weekDay)) == date('Y-m-d', time()) ) bg-gray @endif">
                                                    {{date('D', strtotime($weekDay))}}, {{date('M d', strtotime($weekDay))}}
                                                    
                                                </th>
                                                @endforeach
                                        </thead>
                                        <tbody>
                                            @if($result['users']->count() > 0)
                                            @foreach($result['users'] as $user)
                                            @php 
                                            //$schedule_date = !empty($user->schedule_date) ? unserialize($user->schedule_date) : [];
                                            $schedules = !empty($user->schedules) ? $user->schedules : [];
                                            $schedule_date =  [];
                                            //dd($schedules);
                                            foreach($schedules as $row){
                                                $schedule_date[$row->schedule_date] = $row ;
                                            }
                                            //dd($schedule_date);
                                            @endphp
                                            <tr >
                                                <th>{{$user->first_name}} {{$user->last_name}}<br/>{{$user->email}}</th>
                                                @foreach($weekScheduleDays as $key => $weekDay)
                                                <td class="">
                                                    <div class="name_{{$weekDay}}_{{$user->myid}}">
                                                        @if(isset($schedule_date[$weekDay]) && $schedule_date[$weekDay]->shift_id)
                                                        <div class="bg-success">
                                                            <span >{{ucwords($schedule_date[$weekDay]->shift_name)}}<br/>
                                                            <small class=" " >{{date('h:i A', strtotime($schedule_date[$weekDay]->shift_in))}}-{{date('h:i A', strtotime($schedule_date[$weekDay]->shift_out))}}</small></span>
                                                        </div>
                                                    @elseif($schedule_date[$weekDay]->is_holiday == 1)
                                                        <div class="bg-warning"><span class="holiday ">Holiday</span></div>
                                                        @else
                                                        <div class="bg-gray"><span class="weekoff ">Week OFF</span></div>
                                                        @endif
                                                        @if(in_array("Edit",$schedulesPermission ))
                                                        <span class="editDaySchedule " role="button" data-user="{{$user->myid}}" data-day="{{$weekDay}}" data-shift="{{isset($schedule_date[$weekDay]->shift_id) ?  $schedule_date[$weekDay]->shift_id : ''}}" data-is_holiday="{{$schedule_date[$weekDay]->is_holiday}}"  data-is_weekoff="{{$schedule_date[$weekDay]->is_weekoff}}"><i class="fa fa-pencil"></i></span>
                                                        @endif
                                                    </div>
                                                </td>
                                                @endforeach
                                            </tr>
                                            @endforeach
                                            @else
                                            <tr>
                                                <td colspan="8" align="center" >No user schedule for this week</td>
                                            </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                    @else
                                    <p> <strong>Please contact with SuperAdmin</strong></p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>


                    <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
                    </div>
    
                </div>
            </div>
        </section>
    </div>
                            </div>

<!-- Modal -->
<div id="changeScheduleModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h5 class="modal-title text-bold">Change schedule for day <span id="sday"></span></h5>
      </div>
      <div class="modal-body">
        <form name="user_shift_assign" id="user_shift_assign">
            <div class="row">
                <input type="hidden" name="userId" id="userId"/>
                <input type="hidden" name="scheduleDay" id="scheduleDay"/>
                <div class="col-xs-8" >
                    <select name="pupupshift" id="pupupshift" class="form-control" style="margin-bottom: 10px;">
                        <option value="">Select Shift</option>
                        @foreach($result['shifts'] as $shift)
                        <option value="{{$shift->shift_id}}" >{{ucwords($shift->shift_name)}}</option>
                        @endforeach
                    </select>  
                    <label for="is_weekoff" class="radio-inline">
                        <input type="radio" name="day_type" id="is_weekoff" value="is_weekoff"  >
                        Is Weekoff
                    </label>
                     
                    <label for="is_holiday" class="radio-inline">
                        <input type="radio" name="day_type" id="is_holiday" value="is_holiday">
                        Is Holiday
                    </label>  
                </div>

                <div class="col-xs-4" >
                    <button type="button"  class="btn btn-success pull-right user_shift_assign_save" >Save</button>
                </div>
            </div>
            
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>

  </div>
</div> 

<style>
    #crmLoader .spinner {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 90px;
    height: 90px;
    animation: spin 2s linear infinite;
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
</style>
<div id="crmLoader" class="crmLoading  " style=" display: none; height: 100%;z-index: 9999999;position: fixed;top:0;width: 100%;background: #000;opacity: .4;">
  <div class="spinner-border spinner " role="status" style="position: absolute;top: 50%;left: 50%;">
    <span class="visually-hidden" style="opacity: 1;">Loading...</span>
  </div>
</div>
<div class="notification alert alert-success" style="position:fixed;top: 25%;right: 5%;z-index:999;display: none;min-width: 300px;"></div>

@endsection

@section('scripts')
@parent
<script src="https://adminlte.io/themes/v3/plugins/daterangepicker/daterangepicker.js"></script>

<script type="text/javascript">
function notificationError(message) {

    $('.notification').html(message);
    $('.notification').removeClass('alert-success').addClass('alert-danger').show();
    setTimeout(function() {
        $('.notification').hide();
        $('.notification').html('');
    }, 3000)
}

function notificationSuccess(message) {

    $('.notification').html(message);
    $('.notification').removeClass('alert-danger').addClass('alert-success').show();
    setTimeout(function() {
        $('.notification').hide();
        $('.notification').html('');
    }, 4000)
}
</script>
<script>


var weekpicker, start_date, end_date;

start_date = new Date('{{date('m/d/Y', strtotime($result['schedulestart']))}}') ;
end_date = new Date('{{date('m/d/Y', strtotime('+6 day '.$result['schedulestart']))}}');

function set_week_picker(date) {
    
    start_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() );
    end_date = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
    weekpicker.datepicker('update', start_date);
    weekpicker.val((start_date.getMonth() + 1) + '/' + start_date.getDate() + '/' + start_date.getFullYear() + ' - ' + (end_date.getMonth() + 1) + '/' + end_date.getDate() + '/' + end_date.getFullYear());
    
}
$(document).ready(function() {
    weekpicker = $('.week-picker');
    //console.log(weekpicker);
    weekpicker.datepicker({
        autoclose: true,
        forceParse: false, 
        weekStart: 1,
        container: '#week-picker-wrapper',
    }).on("changeDate", function(e) {
        var currD = new Date(e.date.getTime());
        currD.setDate(currD.getDate() - currD.getDay() + 1);
        console.log(currD);
        set_week_picker(currD );
        redirectPage();
    });
    $('.week-prev').on('click', function() {
        var prev = new Date(start_date.getTime());
        prev.setDate(prev.getDate() - 7);
        set_week_picker(prev);
        redirectPage();
    });
    $('.week-next').on('click', function() {
        var next = new Date(end_date.getTime());
        next.setDate(next.getDate() + 1);
        set_week_picker(next);
        redirectPage();
       
    });

    set_week_picker(start_date);


    /**
     * Edit day schedule
     */
    $(document).on('click', '.editDaySchedule', function(){
        $('#is_holiday').prop('checked', false);
        $('#is_weekoff').prop('checked', false);
        let sheduleUser = $(this).attr('data-user');
        let sheduleDay = $(this).attr('data-day');
        let DayShift = $(this).attr('data-shift');
        let is_holiday = $(this).attr('data-is_holiday');
        let is_weekoff = $(this).attr('data-is_weekoff');
        $("#userId").val(sheduleUser);
        $("#scheduleDay").val(sheduleDay);
        $("#sday").html(sheduleDay);
        $("#pupupshift").val(DayShift);
        if(is_holiday == 1){
            $('#is_holiday').prop('checked', true);
        }
        if(is_weekoff == 1){
            $('#is_weekoff').prop('checked', true);
        }
        $("#changeScheduleModal").modal('show');
    });

    $("#is_holiday, #is_weekoff").on('click', function(){
        $("#pupupshift").val('');
    });

    
    $("#pupupshift").on('change', function(){
        $('#is_holiday').prop('checked', false);
        $('#is_weekoff').prop('checked', false);
    });

    

    $(document).on('change', 'input[name=myschedule_check]', function(){
        $('input[name=myschedule]').val($(this).val());
        $("#schedule_filter").submit();
    });
});

function redirectPage(){
    window.location = '{{route("schedules")}}?filter_date_range='+$(".week-picker").val();
}


$(document).ready(function(){
    $('.user_shift_assign_save').on('click', function(){
        
        if(!confirm('Are you sure to change shift for this schedule?')){
            return false;
        }
        
       
        $("#crmLoader").show();
        $.ajax({
            url:'{{route("update_schedule_day")}}',
            type: 'POST',
            data: $("form#user_shift_assign").serialize(),
            success: function (data,status,xhr) {   // success callback function
                
                if(data.status == 1){
                    $(".name_"+data.requestinput.scheduleDay+"_"+data.requestinput.userId).html(data.shiftHtml);
                    notificationSuccess(data.message);
                    $("#changeScheduleModal").modal('hide');
                }else{
                    notificationError(data.message);
                }
                $("#crmLoader").hide();
            },
            error: function (jqXhr, textStatus, errorMessage) { // error callback 
                
                notificationError(errorMessage);
                $("#crmLoader").hide();
            }
        })
    })



start_date1 = new Date('{{date('Y-m-d', strtotime($result['schedulestart']))}}') ;
end_date1 = new Date('{{date('Y-m-d', strtotime('+6 day '.$result['schedulestart']))}}');
    
        $('#copyschedule').on('click', function(){

     $("#crmLoader").show();
     $.ajax({
         url:'{{route("copy_schedule")}}?schedule_range='+$(".week-picker").val(),
         type: 'get',
        data: '',
         success: function (data,status,xhr) { 
         notificationSuccess(data.message);
             $("#crmLoader").hide();
        },
         error: function (jqXhr, textStatus, errorMessage) { // error callback 
            
             notificationError(errorMessage);
             $("#crmLoader").hide();
             
         }
     })
})


})


// function loadTable(){
//     $("#crmLoader").show();
//     $.ajax({
//         url:'{{route("add_schedule")}}?filter_date_range='+$(".week-picker").val(),
//         type: 'get',
//         data: $("#scheduleFrm").serialize(),
//         success: function (data,status,xhr) {   // success callback function
//             $(".tableData").html(data)
//             $("#crmLoader").hide();
//         },
//         error: function (jqXhr, textStatus, errorMessage) { // error callback 
            
//             notificationError(errorMessage);
//             $("#crmLoader").hide();
//         }
//     })
// }



</script>
<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>


@stop