@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;
    }
    .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 tbody td  label{
        width: 100%;
        /* display: block;
        min-height: 100%;
        height: 100%;
        padding: 10px; */
    }
    .table-responsive {
        max-height:65vh;
    }
    .table tbody td .tdblock{
        padding:5px;
    }
    .table-header {
        position: sticky;
        top:-1px;
        background: #efefef;
        box-shadow:0 4px 8px #ccc;
        padding-bottom:5px;
        z-index: 9;
    }
    .table-header tr th select{
        margin-bottom: 5px;
    }
    .table tr th .fa-user{
        font-size: 20px;
    }
    ::-webkit-scrollbar {
        height: 10px;              /* height of horizontal scrollbar ← You're missing this */
        width: 4px;               /* width of vertical scrollbar */
        border: 1px solid #d5d5d5;
    }
    .table th:first-child,
    .table td:first-child {
        position: sticky;
        left: 0;
        background-color: #efefef;
        color: #373737;
        z-index: 5;
    }
    .checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
        margin-right: 10px;
        margin-left:0;
    }
    
</style>
@stop
@section('content')

<div class="search-list">
    <div class="content-wrapper search-result-list">
        <section class="content-header">
            <h1> {{ trans('Schedule ') }} <small> {{ trans('Schedule') }}...</small> </h1>
            <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('Add') }}</li>
            </ol>
        </section>
        @php
        $getUserRoleData = userRoleData();
        $schedules = explode(",",$getUserRoleData->schedules);
        @endphp
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-info">
                        <div class="box-body">
                            <div class="">
                                <div class="row">

                                   
                                        <div class="col-xs-12">
                                         <div class="row">   
                                        <div class="form-group col-xs-3 " id="week-picker-wrapper" >
                                            <label for="week" class="control-label">Select Week</label>
                                            <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-xs-3 " id="week-picker-wrapper" >
                                            <div class="row">
                                            <div class="fomr-group col-sm-8">
                                            <label for="week" class="control-label">Search By:</label>
                                            <select name="user[]" id="user" class="form-control select2" multiple area label="size 3 select example" style="height:55px;">                                      
                                                <option value="">Select User</option>
                                                @foreach($result['filterusers'] as $shift)
                                                <option value="{{$shift->myid}}"  @if(isset(request()->user))
                                                    @php $userlist=explode(',',request()->user); @endphp
                                                    @if(in_array($shift->myid,$userlist)) selected @endif @endif>{{$shift->first_name}} {{$shift->last_name}}</option>
                                                @endforeach
                                            </select>
                                            <input type="hidden" name="user_select" id="user_select"/>
                                        </div>
                                        <div class="fomr-group col-sm-4 mt-3" style="margin-top: 25px; display: flex">
                                            <a href="#" class="btn btn-primary float-right" onclick="userserach();">search </a>
                                                <a style="margin-left:5px; margin-top: 10px" href="{{url('admin/schedules/add')}}" class="float-right"><span class="glyphicon glyphicon-refresh"></span> </a>

                                        </div>

                                     </div>
                                        </div>
                                        <div class="col-sm-4"><h4 class="text-center"  style="margin-top:30px;">Current Schedule {{date('M d', strtotime($result['schedulestart']))}} - {{date('M d, Y', strtotime('+6 day '.$result['schedulestart']))}}</h4></div>
                                           
                                            <div class="col-sm-2"  style="margin-top: 25px;">
                                           @if(in_array("Add",$schedules )) 
                                           <button href="{{route('add_schedule')}}" class="btn btn-info pull-right publishSchedule" style="width: 150px;">Publish Schedule</button>
                                           @endif
                                       </div>
                                           
                                           </div>
                                        </div>

                                </div>
                                
                            </div>
                            <div class="row">
                                <!-- <form action="{{url('admin/schedules')}}" class="filter ">
                                <div class="col-xs-5"></div>
                                <div class="col-xs-1"><label for="user">Search By:</label></div>
                                <div class="col-xs-3">
                                        
                                        <div class="fomr-group">
                                            
                                            <select name="user" id="user" class="form-control select2">
                                                <option value="">Select User</option>
                                                @foreach($result['users'] 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-3">
                                        
                                        <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 >{{$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 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 tableData table-responsive">
                                    @if(in_array("View",$schedules ))
                                    
                                    @include("admin.schedules.schedule-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>

<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>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.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 scheduleArray = {};
    function setShift(e){
        if(!confirm('This will change all users shift, Is it ok?')){
            return false ;
        }

        var shift =  document.getElementsByClassName('check_shift');
        var selectValue = e.value;
        for (var i = 0; i < shift.length; ++i) { 
            shift[i].value = selectValue; 
        }
        $('.day_type').prop('checked', false);
    }
    function changeSchedule(column, e){
        if(!confirm('This will change all users shift for this day, Is it ok?')){
            return false ;
        }
        var shift =  document.getElementsByClassName('check_shift_'+column);
        var selectValue = e.value;
        for (var i = 0; i < shift.length; i++) { 
            shift[i].value = selectValue; 
        }
        $('.day_type_'+column).prop('checked', false);

    }
    function setuUserShift(row, e){
        //if(!confirm('This will change whole week shift for this user, Is it ok?')){
          //  return false ;
        //}
        var shift =  document.getElementsByClassName('row_shift_'+row);
        var selectValue = e.value;
        for (var i = 0; i < shift.length; i++) { 
            shift[i].value = selectValue; 
        }
        $(this).parent().parent().find('.day_type').prop('checked', false);

    }
    // function checkSchedule(column, e){
    //     var clist =  document.getElementsByClassName('check_'+column);
    //     for (var i = 0; i < clist.length; ++i) { 
    //         clist[i].checked = e.checked; 
    //     }

    // }

    $(document).ready(function(){        
        $('.publishSchedule').on('click', function(){
            
            if(!confirm('Are you sure to publish schedule?')){
                return false;
            }
            $('.publishSchedule').text('Please Wait..');
            $("#crmLoader").show();
            $.ajax({
                url:'{{route("update_schedule")}}?schedule_week={{date('m/d/Y', strtotime($result['schedulestart']))}}',
                type: 'POST',
                data: $("form#scheduleFrm").serialize(),
                success: function (data,status,xhr) {   // success callback function
                    $('.publishSchedule').text('Publish Schedule');
                    if(data.status == 1){
                        notificationSuccess(data.message);
                    }else{
                        notificationError(data.message)
                    }
                    $("#crmLoader").hide();
                },
                error: function (jqXhr, textStatus, errorMessage) { // error callback 
                    
                    notificationError(errorMessage)
                    $('.publishSchedule').text('Publish Schedule');
                    $("#crmLoader").hide();
                }
            })
        });

        $(document).on('change', 'input[name=userType]', function(){
            redirectPage();
        })
    })

    $document.ready(function () {
        $('#user').multiselect();
    });

    function userserach()
    {
        var userselect=$('#user').val();
        redirectPage();
    }
    /*$( "#user" ).change(function() {
         var selected = $('#user option:selected').val();
        
         var selecteduser=selecteduser+','+selected;
         $('#user_select').val(selecteduser);
  
           // redirectPage();
    });*/
</script>

@endsection

@section('scripts')
@parent
<script src="https://adminlte.io/themes/v3/plugins/daterangepicker/daterangepicker.js"></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);

    $(document).on('click', '.day_type', function(){
        $(this).parent().parent().find('.check_shift').val('');
    });

    $(document).on('change', '.check_shift', function(){
        $(this).parent().parent().find('.day_type').prop('checked', false);
    })
});

function redirectPage(){
    window.location = '{{route("add_schedule")}}?filter_date_range='+$(".week-picker").val()+'&userType='+$("input[name=userType]:checked").val()+'&user='+$('#user').val();
}
// 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