{{View::make('layout.header')}}
<style>
@media (min-width: 576px){
.modal-dialog {
    max-width: 670px;
}
.modal-content
{
    padding:10px;
}
}
</style>

<!-- Modal -->
<div class="modal fade text-left" id="inlineForm11" tabindex="-1" role="dialog" aria-labelledby="myModalLabel33" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" >
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel33">Update Schedule</h4>              
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="col-md-6">
                      <h6 class="modal-title" id="Empname"></h6>
                        <input type="hidden" name="username" id="username" value="">
                        <label>Select Schedule :</label>
                     
                        <select class="form-control" name="scheduled_id" id="scheduled_id">
                            @foreach($schedules as $value)
                            <!-- <option selected value="">select</option> -->
                            <option value="{{$value->id}}">{{$value->name}}</option>
                            @endforeach
                        </select>
                    </div>                                  
                    <div class='col-md-6'>
                        <a onclick='updateAssignschedule()' style='margin-top:23px;' class='edcc btn btn-info'>Update</a>
                    </div>
                    </div>
                </div>   
                </div>             
            </div>
        </div>
    </div>
</div>
    <!-- BEGIN: Content-->

    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('setupHr')}}">Setup</a>
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('empSchedule')}}">Schedule to Employee</a>
                                    </li>

                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">

                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header ptitle" style="padding:1rem; color:#fff;">
                                <h4 class="card-title" style="color:#fff;">Assign Schedule to Employee</h4>
                            </div>

                            <div class="card-body">

                                <article class="">
                                    <div class="left2c">
                                      <div class="activity " style="min-height:396px">
                                        <div class="leave row empdata">

                                            <div class="col-md-6" style="margin-top:10px">
                                                <label class="applyleaveleft">Select Schedule Type</label>
                                                <div class="applyleaveright col-md-12" style="padding:0px;">
                                                  <select class="select form-control" name="schedule_id" id="schedule_id" ></select>
                                                </div>
                                              </div>

                                          <div class="col-md-6" style="margin-top:10px">
                                            <label class="applyleaveleft">Select Branch &nbsp;:&nbsp;</label>
                                            <div class="applyleaveright col-md-12" style="padding:0px;">
                                              <select class="select form-control" name="branch" id="branch" onchange="empselect();"></select>
                                            </div>
                                          </div>
                                          <div class="col-md-6" style="margin-top:10px">
                                            <label class="applyleaveleft">Select Department &nbsp;:&nbsp;</label>
                                            <div class="applyleaveright col-md-12" style="padding:0px;">
                                              <select class="select form-control" name="department" id="department" onchange="empselect();"></select>
                                            </div>
                                          </div>
                                          <div class="col-md-6" style="margin-top:10px">
                                            <label class="applyleaveleft">Select Category &nbsp;:&nbsp;</label>
                                            <div class="applyleaveright col-md-12" style="padding:0px;">
                                              <select class="select form-control" name="category" id="category" onchange="empselect();"></select>
                                            </div>
                                          </div>
                                          <div class="col-md-12" style="margin-top:10px">
                                            <label class="applyleaveleft">Select Employees &nbsp;:&nbsp;</label>
                                            <div class="applyleaveright col-md-12" style="padding:0px;">
                                              <input type="text" placeholder="Search" id="staffnamenum" name="staffnamenum" class="inptxt  form-control" onkeyup="searchemp();" />
                                            </div>
                                          </div>
                                        </div>
                                        <div class="leave">

                                          <div class="applyleaveright">
                                            <span id="message"></span>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </article>
                            </div>
                        </div>
                    </div>



                </div>



                 <div class="card">
                            <div class="card-header" style="">
                              <div class="d-flex align-items-center">
                                <h4 class="card-title" style="margin-bottom:0px;">Employee Data</h4>
                              </div>
                              <div class="d-flex align-items-right">
                                <div class="row" style="margin-top: 20px;">
                                    <div class="col-md-5">
                                    <button type="button" class="btn btn-danger waves-effect waves-float waves-light  reject-visible-btn" disabled>Delete</button>
                                    </div>
                                    <div class="col-md-3">
                                    <button type="button" class="btn btn-primary waves-effect waves-float waves-light  edit-visible-btn appDialog-model"  data-toggle="modal" data-target="#inlineForm11"  disabled>Edit</button>
                                    </div>
                                </div>                                                
                              <div>
                                <span class="align-items-right">Select Schedule</span>
                                <select class="select form-control" name="schedule_type" id="schedule_type" onchange="filterdata(this.value)">
                                </select>
                             </div>

                            </div>
                            <div class="card-body" style="padding-top:0px !important; ">
                              <div class="table-responsive " style="overflow-x: unset !important;">
                                <table class="table table-striped" id="reporttable" style=" font-size:12px;">
                                  <thead>
                                    <tr>
                                      <th style="text-transform: capitalize;" width="35%">Name</th>
                                      <th width="30%" style="text-transform: capitalize;">Schedule</th>
                                      <th width="20%" style="text-transform: capitalize;">Edit</th>
                                      <th width="20%" style="text-transform: capitalize;">Delete</th>  
                                      <th style="text-transform:capitalize; text-align:center;white-space: nowrap; border: none;" width="6%"><input type="checkbox" id="checkAll"></th>
                                    </tr>
                                  </thead>
                                  <tbody></tbody>
                                </table>
                              </div>
                            </div>
                          </div>

              </section>


        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}

<!-- /// select employees javascript starts///-->
<script type="text/javascript">
    function sureTransfer(from, to, all) {
        if ( from.getElementsByTagName && to.appendChild ) {
            while ( getCount(from, !all) > 0 ) {
                transfer(from, to, all);
            }
        }
    }
    function getCount(target, isSelected) {
        var options = target.getElementsByTagName("option");
        if ( !isSelected ) {
            return options.length;
        }
        var count = 0;
        for ( i = 0; i < options.length; i++ ) {
            if ( isSelected && options[i].selected ) {
                count++;
            }
        }
        return count;
    }
    function transfer(from, to, all) {
        if ( from.getElementsByTagName && to.appendChild ) {
            var options = from.getElementsByTagName("option");
            for ( i = 0; i < options.length; i++ ) {
                if ( all ) {
                    to.appendChild(options[i]);
                } else {
                    if ( options[i].selected ) {
                        to.appendChild(options[i]);
                    }
                }
            }
        }
    }

    function sureTransfer1(from1, to1, all1) {
        if ( from1.getElementsByTagName && to1.appendChild ) {
            while ( getCount1(from1, !all1) > 0 ) {
                transfer1(from1, to1, all1);
            }
        }
    }
    function getCount1(target, isSelected) {
        var options = target.getElementsByTagName("option");
        if ( !isSelected ) {
            return options.length;
        }
        var count = 0;
        for ( i = 0; i < options.length; i++ ) {
            if ( isSelected && options[i].selected ) {
                count++;
            }
        }
        return count;
    }
    function transfer1(from1, to1, all1) {
        if ( from1.getElementsByTagName && to1.appendChild ) {
            var options = from1.getElementsByTagName("option");
            for ( i = 0; i < options.length; i++ ) {
                if ( all1 ) {
                    to1.appendChild(options[i]);
                } else {
                    if ( options[i].selected ) {
                        to1.appendChild(options[i]);
                    }
                }
            }
        }
    }
</script>
<!-- /// select employees javascript ends ///-->

<script type="text/javascript" >

$(document).ready(function(){
	getDepartment();
    getScheduleId('schedule');
    employeescheduleData("");
    getuser();
   
});

function getDepartment(){
    $.ajax({
            type:'get',
            url:'{{ route('getdepartmentList')}}',
            success:function(data) {
                var resObj = data;
                var html11 = "";
                html11 += '<option value="">Click to Choose one</option>';
                for(var i = 0; i < resObj.length; i++){
                    html11 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
                }
                $("#department").html(html11);

                getCategory();
            }
    });
}

function getCategory(){

    $.ajax({
        type:'get',
        url:'{{ route('getcategoryList')}}',
        success:function(data) {
            var resObj = data;
            var html22 = "";
			html22 += '<option value="">Click to Choose one</option>';
			for(var i = 0; i < resObj.length; i++){
				html22 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
			}
			$("#category").html(html22);

			getBranch();
        }
    });
}

function getBranch(){
    $.ajax({
        type:'get',
        url:'{{ route('getbranchList')}}',
        success:function(data) {
            var resObj = data;
            var html33 = "";
			html33 += '<option value="">Click to Choose one</option>';
			for(var i = 0; i < resObj.length; i++){
				html33 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
			}
			$("#branch").html(html33);

			
        }
    });
}
    function getScheduleId(eattendance_type){
    $.ajax({
        type:'get',
        url:'{{ route('getScheduleType')}}',
        data: {eattendance_type:eattendance_type},
        success:function(data) {
            var resObj = data;
            var html33,html34 = "";
			html33 += '<option value="">Click to Choose one</option>';
			 html34 += '<option value="not_assign_schedule">Not Assign</option>';

			for(var i = 0; i < resObj.length; i++){
				html33 += '<option value="'+resObj[i].id+'">'+resObj[i].name+'</option>';
			}
			$("#schedule_id").html(html33);
			$("#schedule_type").html(html33+html34);
        }
    });
    }


function empselect(){
    $.ajax({
        type:'get',
        url:'{{ route('getGroupedUsers')}}',
        data:{
            department_id:$("#department").val(),
			branch_id:$("#branch").val(),
			category_id:$("#category").val(),
        },
        success:function(data) {
            var resObj = data;
            var html = "";

			for(var i = 0; i < resObj.length; i++)
				html += '<option value="'+resObj[i].username+'">'+resObj[i].name+'</option>';

			$("#source").html(html);
        }
    });

}



function getuser(){

    $.ajax({
        type:'get',
        url:'{{ route('empscheduledata')}}',
        data:{
            keyword:"",
        },
        success:function(data) {
            var resObj = data.data;
            var html = "";
			html += '<div class="col-md-6" style="margin-top:10px"><label class="applyleaveleft">Select Employee &nbsp;:&nbsp;</label><select name="source" id="source" size="8" MULTIPLE class="select form-control" style="width:100%; overflow:scroll;">';

			for(var i = 0; i < resObj.length; i++){
				html += '<option value="'+resObj[i].username+'">'+resObj[i].name+'</option>';
			}
			html += '</select></div><div class="col-md-6" style="margin-top:10px"><label class="applyleaveleft">Selected Employee &nbsp;:&nbsp;</label><select name="target" id="target" size="8" MULTIPLE class="select form-control" style="width:100%; overflow:scroll;"></select></div>';
			html += '<div class="col-md-12" style="margin-top:10px"><div class="row d-flex justify-content-between card-body">';

            html +=  '<div class=""><input type="button" class="add btn btn-success waves-effect waves-float waves-light" id="src2TargetAll" name="src2TargetAll" value="Add >>" style="margin-bottom:5px"></div>';
            html += '<div class=""><input type="button" class="add btn btn-success waves-effect waves-float waves-light" id="src2Target" name="src2Target" value="Add >" style="margin-bottom:5px"></div>';
            html += '<div class=""><input type="button" value="Apply" onclick="mapAttendance()" class="apply btn btn-primary waves-effect waves-float waves-light"></div>';
            html += '<div class=""><input type="button" class="remove btn btn-danger waves-effect waves-float waves-light" id="target2Src" name="target2Src" value="< Remove" style="margin-bottom:5px"></div>';
            html += '<div class=" text-right"><input type="button" class="remove btn btn-danger waves-effect waves-float waves-light" id="target2SrcAll" name="target2SrcAll" value="<< Remove"></div></div></div>';

			$(".empdata").append(html);
			selempsec();


        }
    });

}



function showMessage(message){
	$("#message").html("<span style='color:green;'>" + message + "</span>");
}

function showError(message){
	$("#message").html("<span style='color:red;'>" + message + "</span>");
}

/*/// map approver ends ///*/


/*/// select box starts ///*/
function selempsec() {
	document.getElementById("src2TargetAll").onclick = function() {
		sureTransfer(document.getElementById("source"), document.getElementById("target"), true);
	};
	document.getElementById("src2Target").onclick = function() {
		sureTransfer(document.getElementById("source"), document.getElementById("target"), false);
	};
	document.getElementById("target2SrcAll").onclick = function() {
		sureTransfer(document.getElementById("target"), document.getElementById("source"), true);
	};
	document.getElementById("target2Src").onclick = function() {
		sureTransfer(document.getElementById("target"), document.getElementById("source"), false);
	};
}


/*/// select box ends ///*/
function searchemp(){
    $.ajax({
                type:'get',
                url:'{{ route('getUserList')}}',
                data:{
                    current:1,
                    department_id:$("#department").val(),
                    branch_id:$("#branch").val(),
                    category_id:$("#category").val(),
                    name: $("#staffnamenum").val(),
                },
                success:function(data) {
                    var resObj = data;
                    var html = "";
                    for(var i = 0; i < resObj.length; i++){
                        html += '<option selected="selected" value="'+resObj[i].username+'">'+resObj[i].name+'</option>';
                    }
                    $("#source").html(html);
                    selempsec();
                }
        });
}


var emp_arr = [];
function mapAttendance(){
	var options = document.getElementById("target").options;
	for(var i = 0; i < options.length; i++){
	    emp_arr.push(options[i].value);

	}
		 $.ajax({
            type:'get',
            url:'{{ route('schedulemapAttendance')}}',
            data:{
                employee_id: emp_arr,
                eattendance_type: 'schedule',
                schedule_id: $('#schedule_id').val()
            },
            success:function(data) {
                console.log(data+"-----");
                var resObj = data;
                var messege = resObj;
				if(messege ==  true){
					showMessage("Schedule mapped successfully");
                  setInterval(redirect,1500);
				}
				else{
                    showError("Error Occured");
                }
            }
        });
emp_arr = [];
}
function redirect(){
	window.location.reload();
}

//Update Assigned Schedule
 ///update Schedule
 var empUsername  = null;
 $(document).on("click", ".appDialog-model", function() {
         empUsername = $(this).data('id');
    
          name = $(this).data('name');
          schedule_id =  $(this).data('schedule');
     if(name!== 'undefined')
          {
            $('#Empname').text(name);
          }
       
        $("#username").val(empUsername);    
        $("#scheduled_id > option").removeAttr("selected");
        $("#scheduled_id > [value='"+schedule_id+"']").attr("selected", "true");          
    });
    
    
    //Unassign  schedule
    
    $(document).on('click', '.reject-visible-btn', async function() {
        
        var val = await unassignschedule();
        window.location.reload();
        
    });
  
  //Delete Schedule

    $(document).on('click', '.delete', async function() {
        var val = await unassignschedule();
     
        
    });


    function updateAssignschedule()
    {
      
       var usernames =  $('.username_checkbox');
       schedule_id = $('#scheduled_id').val(); 
       if(empUsername == null)
       {
          var completed = 0;
           var  checked = 0;
            for(var i = 0; i < usernames.length; i++){
                if($(usernames[i]).is(':checked')){
                  checked++;
                    $.ajax({
                url:"{{ route('updateAssignschedule')}} ",
                method:'POST',
                data:{
                    _token : '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/schedule/schedule_to_emp.blade.php:546
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/E-Attendance/schedule/schedule_to_emp.blade.php</b> on line <b>546</b><br />