@extends('portal.layout.app')
<link rel="stylesheet" href="{{ URL::asset('assets/css/global.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/input.css') }}">
<link rel="stylesheet" href="{{ URL::asset('assets/css/multi-select.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}">
@php
   $data=(object)$data;
@endphp
@section('content')
<style type="text/css">
    .alert-dismissible .close {
        right: 8px !important;
        top: 2px !important;
    }
   .notification_custom {
      bottom: 5% !important;
      margin-top: 0px !important;
      margin-right: auto !important;
      /* margin-left: 125px !important; */
      font-size: 12px !important;
   }

    .msg_list {
        margin: 2px !important;
    }
    .expense_table{
        box-shadow: 0px 3px 6px 0px #d6d6d6;
    }
    .filter-option {
        margin-left: 3px;
    }
    .ml_thirteen {
        margin-left: 13px;
    }
    .la_list_footer {
        margin-top: unset !important;
    }
    button span:nth-child(1) {
        font-size: 11px;
    }
    .shift_option {
        color: black;
    }
    .shift_check_div {
        margin-left:22px !important;
        display: flex;
    }
    .shift_check {
        font-size: 11px;
        margin-left: 195px;
        font-family: Roboto,sans-serif;
        margin-top:5px;
        color: #3080EA;
    }
    .dropdown-menu>.active>a, .dropdown-menu>.active>
    a:focus,.dropdown-menu>.active>a:hover {
        background-color: #D8DCDF;
    }
    .ml_four{
        margin-left: 5px;
    }
    .expense_header {
        margin-left:  -14px;
    }
    .employee-code::placeholder {
      color: transparent;
    }
    ::placeholder {
      color: #8D8D8D;
      opacity: 1;
    }
    .departments_ids button .filter-option {
        color: #8D8D8D;
    }
    .enable_label {
        color: blue;
        background-color: white;
    }
    .disable_label {
        color: transparent;
        background-color: transparent;
    }

    .dropdown_option_custom{
        display: block;
        /*height: 30px;*/
    }
    svg {
        margin-left:43px !important;
    }
    .common_dropdown_properties {
        height:26px;
    }
    .table_dropdown {
        width: 260px !important;
    }
    .glyphicon-ok{
        color: white !important;
        font-size: 8px !important;
        background-color: #3080EA !important;
        padding: 3px;
        border-radius: 4px;
        margin-top: 3px !important;
    }
    .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text{
        margin-left: 2px;
        font-size: 11px;
        font-family: Roboto, sans-serif;
        color: #343434;
    }
    .form-control:focus {
    border-color: #D8DCDF;
    outline: 0;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
    }
    .dropdown-menu ul li:nth-child(odd) {
        background-color: #FAFAFB;
        opacity: 1;
        color: #343434;
    }
    .dropdown-menu ul li:nth-child(even) {
        background-color: #FFFFFF;
        opacity: 1;
        color: #343434;
    }
    .dropdown-menu ul li  a:hover{
        background-color: #D8DCDF !important;
    }
    .dropdown-menu li {
        height: 24px !important;
    }
    .dropdown-menu {
        padding-bottom: unset; !important;
        width: 259px !important;
        /*height: 254px !important;*/
    }
    .save_btn {
        margin-right: -5px;
    }
    input:disabled {
        background-color: white !important;
    }
    .search_btn {
        margin-left: 6px !important;
    }
    .table-body {
        display: inline-block;
        max-height: 308px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100% !important;
    }
    .zebra {
      width: 101% !important;
    }
    .list {
        margin-top: 10px;
        margin-left: 1px;
        margin-right: 0px;
    }
    .form-check-label {
        margin-top: 14px;
        margin-left: 28px;
    }
    .checkbox_input {
        margin-left: 45px !important;
    }
    .checkbox_input
    {
        height: unset !important;
    }
   .select:after{
      top: 11px !important;
      border-top: 5px solid #333333;
   }
   .dropdown_height{
      height: 26px !important;
   }
   .text_area {
      width: 578px !important;
      margin-top: 2px;
   }
   .amortization::placeholder {
      color: white;
   }
   .terminate_modal_footer{
      margin-top: -7px;
   }
   .terminate_textarea {
       width: 558px;
       margin-top: 21px !important;
   }
   .label {
      top: 65% !important;
   }
   .termination_textarea_label {
      margin-top: 21px !important;
   }

   .attachment_label {
      margin-top: 3px !important;
   }
   .terminate-btn {
       margin-right: -2px;
       margin-top: 0px !important;
   }
   .withdraw_modal {
      width:600px !important;
      height: 212px;
      margin-left: 100px !important;
   }
   .modal-header {
      height: 29px !important;
   }
   label {
      font-size: 11px;
      font-weight: unset;
   }
   .table tbody tr td {
      padding: 7.5px;
   }
   .table thead tr th {
      padding: 6.5px;
   }
   .modal-body{
      padding-bottom: unset;
   }
   .approval_details_footer {
      height: 28px;
   }
   .margin_left_thirteen {
      margin-left:  35px !important;
   }
   .margin_left_fourteen {
       margin-left: -14px !important;
   }
  .file-input {
     cursor: pointer;
     opacity: 0;
     margin-left: -179px;
   }
   .select:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #333333;
        position: absolute;
        top: 11px !important;
        right: 9px;
     }

    .bs-caret
    {
        display: none;
    }
 .file-btn {
     background: url('../../assets/images/backgrounds/Attachment.svg') no-repeat left top !important;
     text-align: right;
     background-size: cover !important;
     width: 21px;
     height: 21px;
     background-position: right center;
     display: inline-block;
     margin-bottom: -6px;
     overflow: hidden;
     cursor: pointer;
     margin-left: -25px;
   }
   .dropdown-toggle
    {
        border: unset !important;
        padding: unset !important;
    }
    .multi-lable
    {
        top: 6%;
    }
    .dropdown-toggle
    {
        box-shadow: unset !important;
        background-color: unset !important;
        outline: unset !important;
    }
    .dropdown-toggle:focus
    {
        outline: none !important;
        outline-offset: unset !important;
    }
   .modal-header .close{
      padding: 4px;
      padding-right: 5px;
   }
   .select-text{
      padding: 6px 5px 5px 5px !important;
   }
  .label {
    top: 60%;
    left: 19px;
   }
   .day
   {
    width: 9% !important;
    text-align: center;
   }
   .dow
   {
    padding-left: 14px !important;
    padding-right: 13px !important;
   }

    .multiselect_width {
        width: 250px !important;
    }

    .select:after {
        right: 18px;
    }

    .dropdown-toggle::after {
        display : none !important;
    }
</style>
<section class="expense">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12 display_inline">
                <div class="expense_header reason_box_width">
                    <div class="expense_table">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="expense_table_hader">
                                    <div class="row">
                                        <div class="col-md-7">
                                            <div class="header_left">
                                                Create Roster For General Employees
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <form class="container_custom" noValidate autoComplete="off">
                                    <div class="row col-md-12">
                                        <div class="col-md-12 input_div display_item_flex ml_four">
                                            <input checked name="radio" value="branches" id="branch_radio" type="radio" style="width:15px; margin-top:9px; margin-right: 4px;" >
                                            <div class="select select_width margin_left_five margin_top_ten select_box">
                                                <select class="select-text selectpicker select_width dropdown_height branches_ids" id="branches_ids" multiple data-live-search="true" data-actions-box="true" title="Not Set">
                                                   @foreach($data->branches as $key=>$value)
                                                      @php
                                                         $value=(object)$value;
                                                      @endphp
                                                         <option value="{{$value->loc_id}}">{{$value->loc_desc}}</option>
                                                   @endforeach
                                                </select>
                                                <label class="branch_label select-label multi-lable font_weight">
                                                   Branch
                                                </label>
                                            </div>
                                            <input name="radio" id="dept_radio" value="departments" type="radio" style="width:15px; margin-left: 52px; margin-right: -26px; margin-top:9px;" >
                                            <div class="select select_width margin_left margin_top_ten select_box">
                                                <select class="select-text dropdown_height select_width selectpicker departments_ids"  id="departments_ids" multiple data-live-search="true" data-actions-box="true" title="Not Set">
                                                   @foreach($data->departments as $key=>$value)
                                                      @php
                                                         $value=(object)$value;
                                                      @endphp
                                                         <option value="{{$value->id}}">{{$value->department_name}}</option>
                                                   @endforeach
                                                </select>
                                                <label class="dept_label disable_label select-label multi-lable font_weight">
                                                    Department
                                                </label>
                                            </div>
                                            <input name="radio" value="emp_code" id="emp_code_radio" type="radio" style="width:15px; margin-left:52px; margin-right:-26px; margin-top:9px;" >
                                            <div class="material-textfield margin_left" style="margin-top: 10px;">
                                              <input name="empcode" id="employee_code" class="employee_code" type="text" placeholder="Employee Code">
                                              <label class="code_label disable_label" style="font-size:11px; top: 2.4px;">Employee Code</label>
                                            </div>
                                        </div>
                                        <div class="col-md-12 input_div display_item_flex" style="margin-left: 19px;">
                                            <div class="material-textfield margin_left_five margin_top_ten" style="margin-left:10px !important;">
                                              <input class="dateselect" value="{{isset($data->from_date)?Carbon\Carbon::parse($data->from_date)->format('01-M-Y'):''}}" name="from" id="from" type="text" >
                                              <label style="font-size:11.7px; top: 2.4px;">From</label>
                                            </div>
                                            <div class="material-textfield margin_top_ten" style="margin-left:77px !important;">
                                              <input class="dateselect" value="{{isset($data->to_date)?Carbon\Carbon::parse($data->to_date)->format('30-M-Y'):''}}" name="to" id="to" type="text">
                                              <label style="font-size:11.7px; top: 2.4px;">To</label>
                                            </div>
                                   <!--          <div class="select select_width margin_left margin_top_ten select_box">
                                                <select class="select-text dropdown_height select_width" id="shifts_ids">
                                                    <option value="">Not Set</option>
                                                    @foreach($data->all_shifts as $key=>$value)
                                                      @php
                                                         $value=(object)$value;
                                                      @endphp
                                                        <option value="{{$value->id}}">{{$value->shift_name}}</option>
                                                    @endforeach
                                                </select>
                                                <label class="select-label font_size_twelve">
                                                   Change Shift
                                                </label>
                                            </div> -->
                                            <div class="material-textfield margin_left_five margin_top_ten checkbox_employee shift_check_div">
                                                <div style="margin-left:-138px; margin-top: 2px;">
                                                    <input class="form-check-input checkbox_input" name="checkbox_input" type="checkbox">
                                                </div>
                                                 <div class="shift_check">
                                                    Update Employee Shift Also
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                           <div class="col-md-12">
                                                <div class="approval_header">
                                                    <div class="approval_header_text">Update Shifts</div>
                                                </div>
                                           </div>
                                        </div>
                                        <div class="row">
                                           <div class="col-md-12">
                                              <div class="universal_box">
                                                 <div class="table universal_table" id="universal_table">

                                                    <div class="branches shifts_table" style="display:none">
                                                        <!-- <div class="col-md-12 input_div display_item_flex" style="margin-left:19px;"> -->
                                                            <div class="table">
                                                                <table class="  table-striped" style="margin-left:0px; margin-top:0px; width:1166px;">
                                                                  <thead>
                                                                    <tr>
                                                                      <th><div style="margin-left: 13px;">Departments</div></th>
                                                                      <th><div style="margin-left:130px;">Shifts</div></th>
                                                                    </tr>
                                                                  </thead>
                                                                   <tbody class="shifts_data">
                                                                   </tbody>
                                                                </table>
                                                            </div>
                                                        <!-- </div> -->
                                                    </div>
                                                 </div>
                                              </div>
                                           </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="col-md-12 mt-5 approval_details_footer">
                                    <button type="@if(env('APP_ENV') == 'production' && env('APP_SECURE') == true) button @else submit @endif" class="search_btn setup_save_btn @if(env('APP_ENV') == 'production' && env('APP_SECURE') == true) save_btn @else save_btnn @endif">Save</button>
                                    <button type="submit" class="search_btn setup_save_btn log_btn">Show Log</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="expense_table list" style="display:none;">
        <div class="row">
            <div class="col-md-12">
                <div class="expense_table_hader">
                    <div class="row">
                        <div class="col-md-7">
                            <div class="header_left">
                                Roster Log
                            </div>
                        </div>
                    </div>
                </div>
                 <div class="table-body modal_body">
                 <div class="table ">
                <table class="zebra" style="border: 0px;" >
                    <thead>
                            <tr>
                                <th><div style="margin-left: 13px;">Description</div></th>
                                <th>From </th>
                                <th>To </th>
                                <th>Created At </th>
                            </tr>
                        </thead>
                        <tbody class="logs_data">
                    </tbody>
                </table>
              </div>
            </div>
                <div class="col-md-12 mt-5 approval_details_footer la_list_footer">
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="optModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelreasonModal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content modal_content" style="width: 800px !important;margin-left: 0px !important;">
          <div class="modal-header" style="padding: 8px;">
            <span class="modal-title modal_title w-100" id="myModalLabelreasonModal"><b>One Time Password</b></span>
            <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="margin-top: -5px !important;">
              <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
            </a>
          </div>
            <form>
                @csrf
                <input type="hidden" id="submit_type">
                <div class="modal-body modal_body" style="width: 800px !important; height:115px;">
                    <div class="row" style="margin-bottom: 1.5rem;">
                        <div class="col-lg-4">
                            <div class="select select_width margin_left_five margin_top_ten select_box">
                                <select class="select-text selectpicker multiselect_width dropdown_height" name="phone" id="phone"  data-actions-box="true">
                                    @foreach($numbers as $key => $nmbr)
                                    <option value="{{$key}}">{{$nmbr}}</option>
                                    @endforeach
                                </select>
                                <label class="branch_label select-label multi-lable font_weight">
                                   Select Number
                                </label>
                            </div>
                            {{-- <div class="input_div">
                                <div class="material-textfield margin-top-three">
                                    <input placeholder="Phone" type="text" name="phone" id="phone" value="{{Auth::user()->cell_number}}" style="width: 100%;">
                                    <label>Phone</label>
                                </div>
                            </div> --}}
                        </div>
                        <div class="col-lg-4">
                            <div class="input_div">
                                <div class="material-textfield margin-top-three">
                                    <input placeholder="Enter OTP" type="text" name="otp" id="otp" style="width: 100%;"  form="bulk_insert_form">
                                    <label>Enter OTP</label>
                                </div>
                            </div>
                            <small id="messageBoxOtp" style="color: red;display: none;">Please enter the OTP</small>
                        </div>
                        <div class="col-lg-4" id="generate">
                            <button type="button" id="generateBtn" class="search_btn" onclick="generateOtp()" style="margin-right: 3px; margin-top: 9px;">Generate</button><span id="timer"></span>
                        </div>
                    </div>
                    <p style="font-size: 12px;">One - Time Password (OTP) will be send to your registered mobile number. Please enter it on the screen to get verify.</p>
                </div>
            </form>
            <div class="modal-footer py-2" style="border-top: 0 none; padding-bottom: 0px !important;">
                <div class="disbursement_modal_footer" style="width: 798px;margin-left: -15px">
                    <div class="footr float-right">
                        <button id="submit_request"  class="search_btn btn_download_credentials save_btnn" style="margin-right: 3px; margin-top: 5px;">Confirm</button>
                        <button class="search_btn mt-1" onclick="closePopUpOtp()" style="margin-right: 10px;" >Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('notification')
@stop
@section('scripts')
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<script src="{{ URL::asset('assets/js/calendar.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> -->
<script>
    $( document ).ready(function() {
        $('#departments_ids, #employee_code').prop('disabled', true);
        loadMoreData(page);
    });
    $('.selectpicker').selectpicker({
        'actionsBox' : false,
        'tickIcon' : 'glyphicon-ok',
        'size' : 20
    });
    $('.dateselect').datepicker({
        format: 'dd-MM-yyyy',

        // startDate: '-3d'
    }).on('changeDate', function(e) {
        console.log($('.datepicker').hide());
    });

    $('body').on('change', '.employee_code', function() {

        var getEmpCodes = document.getElementById('employee_code').value;
        if(getEmpCodes == ''){
            $('.shifts_table').css('display', 'none');
        }
        if(getEmpCodes != ''){
            $('.shifts_table').css('display', 'block');
        }

        if ($(this).val().length === 0) return;
      settCountForMutliple('.employee_code');

    });

    $('body').on('change', '.departments_ids', function()
    {
        if($('.departments_ids').find(":selected").text() == ''){
            $('.shifts_table').css('display', 'none');
        }
        if($('.departments_ids').find(":selected").text() != '' && $('.checkbox_input').is(":checked")){
            $('.shifts_table').css('display', 'block');
        }
        if ($(this).val().length === 0) return;
      settCountForMutliple('.departments_ids');
    });
    $('body').on('change', '.branches_ids', function()
    {
        if($('.branches_ids').find(":selected").text() == ''){
            $('.shifts_table').css('display', 'none');
        }
        if($('.branches_ids').find(":selected").text() != '' && $('.checkbox_input').is(":checked")){
            $('.shifts_table').css('display', 'block');
        }

      if ($(this).val().length === 0) return;
      settCountForMutliple('.branches_ids');
    });

    $('body').on('click', '.save_btn', function()
    {
        //var value = $("#phone").val();
        //var maskedValue = value.slice(0, -3).replace(/./g, '*') + value.slice(-3);
        //$("#phone").val(maskedValue);\
        $('#optModal').modal('show');
    });
    function generateOtp(){
        $("#otp").val("");
        $("#generateBtn").text("Resend");
        $("#generateBtn").attr("disabled");
        var display = document.getElementById('timer');
        display.textContent = "";
        startTimer(300, display);
        $.ajax({
            type: "POST",
            url: $('.base_url').val()+'api/org/generateOtp',
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data: {number: $("#phone").val()},
            success: function (response) {

            }
        });
    }

    var interval = null;

    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        interval = setInterval(function () {
            minutes = parseInt(timer / 60, 10);
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            // Display the timer in the specified HTML element
            display.textContent = minutes + ":" + seconds;

            // Decrease timer by 1 second
            if (--timer < 0) {
                clearInterval(interval);
                console.log(timer);
                display.textContent = "";
            }
        }, 1000); // Update the timer every 1 second (1000 milliseconds)
    }

    $('body').on('click', '.save_btnn', function()
    {
        var empcode = $('#employee_code').val();
        var updateShift = $('.checkbox_input').is(":checked");
        var to_date=$('#to').val();
        // to_date = new Date(to_date);
        var from_date=$('#from').val();
        // from_date= new Date(from_date);
        var branches=[];
        $('.branches_ids').find(":selected").each(function(index) {
            branches.push(parseInt($(this).val()));
        });
        var departments=[];
        $('.departments_ids').find(":selected").each(function(index) {
            departments.push(parseInt($(this).val()));
        });

        var shifts=[];
        $.each( $('.common_dropdown_properties'), function( k, v ) {
        shifts.push(v.value);
        });

        // var shifts=[];
        // $('.shifts_ids').find(":selected").each(function(index) {
        //     shifts.push($(this).val());
        // });

        var shift = $('#shifts_ids').find(":selected").val();
        var radio = $("input[name='radio']:checked").val()
        var otp = $("#otp").val();
        if(radio == 'branches'){
            var button = 'branches';
            var form_data = {to_date:to_date, from_date:from_date, branches:branches,shift:shift,updateShift:updateShift,shifts:shifts, button:button , otp:otp};
        }
        else if(radio == 'departments'){
            var button = 'departments';
            var form_data = {to_date:to_date, from_date:from_date, departments:departments, shift:shift,updateShift:updateShift,shifts:shifts, button:button , otp:otp};
        }
        else if(radio == 'emp_code'){
            var button = 'emp_code';
            var form_data = {empcode:empcode, to_date:to_date, from_date:from_date, shift:shift,updateShift:updateShift,shifts:shifts, button:button , otp:otp};
        }
        // var form_data = {empcode:empcode, to_date:to_date, from_date:from_date, departments:departments, branches:branches,shift:shift,updateShift:updateShift,shifts:shifts };

        var url=($('.base_url').val())+'api/general/roster/create';
        //var url=($('.base_url').val())+'api/general/roster/store';
        var req_type = 'POST';
        callAjax(url, form_data, req_type);
   });
    function callAjax(url, form_data=null, req_type=null)
    {


        type = req_type;
        $( ".loader-wrapper" ).show();
        var loading='<div id="loader-body1" class="loading"><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div><div class="loading-bar"></div></div></div>';
        $(".loader-wrapper").html(loading);

        $.ajax({
            url: url,
             headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            type:type,
            data: form_data,
            success:function(response){
                $( ".loader-wrapper" ).hide();
                if(response) {
                  if (response['error']) {
                     var html = '';
                     Object.keys(response['error']).map((index) => {
                        if (response['error'][index][0]) {
                           html = html + '<li>' + response['error'][index][0] + '</li>';
                        }
                    });
                    $('.error_message').css('display', 'block');
                    $('.error_message').removeClass('fade')
                    $('.error_message_text').html(html);
                    setInterval(function() {
                        $('.error_message').css('display', 'none');
                        $('.error_message').addClass('fade');
                        $('.error_message_text').html("");
                    }, 5000);
                  }
                  else
                  {
                    $('#optModal').modal('hide');
                    $("#generateBtn").text("Generate");
                    $("#timer").html("");
                    $("#otp").html("");
                    clearInterval(interval);
                        console.log(response);
                     var class_name = '.success';
                     if (response['status'] == "failed") {
                        var class_name = '.error';
                     }
                     $(class_name + '_message').css('display', 'block');
                    $(class_name + '_message').removeClass('fade');
                    $(class_name + '_message_text').html(response['message']);
                    setInterval(function() {
                        $(class_name + '_message').css('display', 'none');
                        $(class_name + '_message').addClass('fade');
                        $(class_name + '_message_text').html("");
                    }, 5000);
                    if(class_name == '.success')
                    {
                        // location.reload();
                    }

                  }
                }
            },
       });
    }

    function settCountForMutliple(class_name)
    {
       // alert(class_name);
        var selected_count=0;
        var radioButton = $('input[name="radio"]:checked').val();
        var ids = [];
        if(radioButton == 'branches'){

        $(class_name).find(":selected").each(function(index) {
            selected_count++;
            console.log(selected_count);

            ids.push($(this).val());
        });
        var selected_data=$(class_name).children().find('.filter-option').html();
        ajaxCall(ids, radioButton);
        }

        else if (radioButton == 'departments'){
      //  var dept_ids = [];
        $(class_name).find(":selected").each(function(index) {
            selected_count++;

            ids.push($(this).val());
        });
        var selected_data=$(class_name).children().find('.filter-option').html();
        ajaxCall(ids, radioButton);
        }

        else if (radioButton == 'emp_code'){
            var empIds = document.getElementById('employee_code').value;
            var ids = [];
            ids.push(empIds);
            ajaxCall(ids, radioButton);
        }


        var style='';
        if(selected_count.toString().length> 2)
        {
            // console.log(selected_count);
            var width=30;
            var addition=5;
            var number=selected_count.toString().length/3;
            if(number>0)
            {
                for (var i = number; i >= 0; i--) {
                    number=number+addition;
                }
            }
            style='style="width: '+width+'px !important;margin-left: unset"';
        }
        var html='<span class="custom-title">'+selected_data+'</span><span class="custom-count badge badge-secondary" '+style+'>'+selected_count+'</span>'
        if(selected_count>1){
            $(class_name).find('.filter-option').empty();
            $(class_name).find('.filter-option').html(html);
        }
    }

    function ajaxCall(ids, radioButton)
    {
        //alert('sssss');
       $.ajax({
              // url: $('.base_url').val()+'api/common/get_shifts',
               url: $('.base_url').val()+'api/general/roster/getShifts',
               type: "GET",
               headers: {
                  'Authorization':localStorage.getItem("laravel_token")
               },
               data:{
                   ids:ids,
                   radioButton:radioButton
                },
               success:function(response){
                 console.log(response);
                displayShiftsDropdown(response);
            }
        });
    }

    function displayShiftsDropdown(response)
    {
        var data = response['data'];
        $(".shifts_data").empty();
        var count=0;
        $.each( data, function( key, value ) {
            count=count+1;
          new_section = '<tr>'+
                           '<td><div style="margin-left: 12px;">'+
                              key+
                           '</div></td>'+
                            '<td>'+
                                '  <div class="dropdown" style="margin-left: 129px;">'+
                                      '<button class="dropdown_custom table_dropdown common_dropdown_properties shifts_ids'+count+'" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >'+
                                        '<span style="'+
                                            'display: inline-block; width: 73%; margin-left: 0px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;'+
                                        '">Not Set</span>'+
                                        '<span class="ggg" style="margin-left: 9px !important;margin-top: 4px; position: fixed;">'+
                                            '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6">'+
                                              '<path id="Down_Arrow" data-name="Down Arrow" d="M5,0l5,6H0Z" transform="translate(10 6) rotate(180)" fill="#343434"/>'+
                                            '</svg>'+
                                        '</span>'+

                                      '</button>'+
                                      '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="width: 260px;">'+
                                      '<a class="dropdown-item dropdown_option_custom" key-value=""><div class="shift_option" style="height:20px; padding-top: 3px;">None</div></a>';
                                        $.each( value, function( k, v ) {
                                            // var html='<a class="dropdown-item dropdown_option_custom" key-value="'+v['shift_id']+'">';
                                            // html=html+v['shift_name'];
                                            // html=html+'</a>';
                                            // new_section=new_section+html;
                                            new_section=new_section+'<a class="dropdown-item dropdown_option_custom" key-value="'+v['dept_id']+'-'+v['shift_id']+'"><div class="shift_option" style="height:20px; padding-top: 3px;">'+v['shift_name']+'</div></a> ';
                                        });
                                      new_section=new_section+'</div>'+
                                    '</div>'
                            '</td>'+
                        '</tr>';
            $(".shifts_data").append(new_section);
        });
    }

    $('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true && $('.departments_ids').find(":selected").text() != ''){
             $(".shifts_table").css('display', 'block');
        }
        if($(this).prop("checked") == true && $('.branches_ids').find(":selected").text() != ''){
             $(".shifts_table").css('display', 'block');
        }
        else if($(this).prop("checked") == false){
            $(".shifts_table").css('display', 'none');
        }
    });

    $("#branch_radio, #dept_radio, #emp_code_radio").change(function(event){
        var target = event.target.value;
        if(target == 'departments'){
            $(".dept_label").removeClass("disable_label");
            $(".branch_label, .code_label").addClass("disable_label");
            $(".departments_ids button span").css("color", "#343434");
            $(".branches_ids button span, .employee_code").css("color", "#8D8D8D");
            $(".employee_code").removeClass("employee-code");
        }
        else if(target == 'branches'){
           $(".branch_label").removeClass("disable_label");
           $(".dept_label, .code_label").addClass("disable_label");
           $(".departments_ids button span, .employee_code").css("color", "#8D8D8D");
           $(".branches_ids button span").css("color", "#343434");
           $(".employee_code").removeClass("employee-code");
        }else if(target == 'emp_code')
        {
            $(".code_label").removeClass("disable_label");
            $(".dept_label, .branch_label").addClass("disable_label");
            $(".branches_ids button span").css("color", "#8D8D8D");
            $(".departments_ids button span").css("color", "#8D8D8D");
            $(".employee_code").css("color", "#343434");
            $(".employee_code").addClass("employee-code");
        }

        $("#branches_ids, #departments_ids, #employee_code").attr("disabled",true);
        if($("#branch_radio").is(":checked")){
            $("#branches_ids").attr("disabled",false);
            $("#departments_ids option:selected").prop("selected", false)
            $(".shifts_table").css('display', 'none');

        }
        else if($("#dept_radio").is(":checked")){
            $("#departments_ids").attr("disabled",false);
        }
        else if($("#emp_code_radio").is(":checked")){
            $("#employee_code").attr("disabled",false);
        }
    });

    var page = 1;
     $(".table-body").scroll(function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            page++;
            loadMoreData(page);
        }
    });
    function loadMoreData(page){
    $.ajax(
        {
            url: $('.base_url').val()+'api/general/roster/list?page='+page,
            type: "GET",
            headers: {
             'Authorization':localStorage.getItem("laravel_token")
            }
        })
        .done(function(data)
        {

            $(".logs_data").append(data.html);
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
         alert('server not responding...');
        });
    }
    $(".log_btn").click(function() {
        $(".list").toggle();
    });

    $('body').on('click', '.shift_option', function()
    {
        // $('.shift_option').css('margin-top', '5px');
        // $('.dropdown button span:nth-child(2)').css('margin-top', '10px');
    });
</script>
@endsection