@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/plugins/bootstrap/css/bootstrap.min.css') }}">
@section('content')
<style>
    .modal-title {
        margin-top: -7px;
    }
    .align_modal{
        margin-left: auto;
        margin-right: auto;
        max-width: 500px;
    }
    .modal-header{
        height: 29px !important;
    }
    .mui_placeholder_color::placeholder {
        color: transparent !important;
    }
    .margin_top_ten{
        margin-top: 13px !important;
    }
    .modal_content{
        width: 549px !important;
        height: 272px !important;
    }
    .search_btn {
        margin-right: -8px;
        margin-left: 3px;
    }
    .table_dropdown {
        margin-left: 4px;
    }
    .datepicker {
        /*left: 40% !important;*/
        position: absolute !important;
        z-index: 9999;
    }
    .datepicker_size {
        padding: 9px 10px;
    }
    ::placeholder {
      color: blue;
    }
    .tbl_header {
        width: 150px;
    }
    .update_inp {
        width: 250px; 
    }
    .modal_table {
        margin-top: 0px; 
        width: 800px !important; 
        margin-left: 0px !important;
    }
    .upd_footer{
        padding-top: 0px;
        display: block;
        position: relative;
        background: #e6e6e6;
        padding: 6px 10px 4px;
        font: 12px/1em Verdana, Arial, Tahome;
        color: #333333;
        height: 28px;
        margin-top: -7px !important;
    }
    .upd_footer #button-list{
        margin-top: 0px;
        text-align: right;
        width: 100% !important;
        list-style: none;
        display: inline-block;
    }
    #button-list a {
        position: relative;
        padding: 2px 6px 2px 6px;
        border: 1px solid #e6e6e6;
        background: #fcfcfc url(/assets/images/backgrounds/btn_bgtile.gif) repeat-x;
        font: 12px Tahoma, Arial, Verdana;
        color: #0078bd;
        margin: 5px -1 5px 2px;
        text-decoration: none;
    }
    td .error {
        border: 1px solid #F44437;
        border-top-color: #F44437;
        border-top-style: solid;
        border-top-width: 1px;
        border-right-color: #F44437;
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-color: #F44437;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-left-color: #F44437;
        border-left-style: solid;
        border-left-width: 1px;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
        /*background: none repeat scroll 0 0 #F8E9E9;*/
    }
    /*Allign columns and rows of table*/
    .table tr th, .table tr td {
        width: 74px !important;
        padding: 7px 15px;
    }
    .table table tr {
        display: table;
        width: 1208px !important;
        box-sizing: border-box;
    }
    .table table thead {
        display: table;
        width: 100%;
    }
    .table table tbody {
        display: block;
        max-height: 550px;
        overflow-y: auto;
        width: 1208px;
        overflow-x: hidden !important;
    }
    table:first-child td:first-child ,table:first-child th:first-child {
        padding-left: 10px !important;
    }
    .error_label
    {
        background: transparent !important;
        color: #F44437 !important;
    }
    .validation_error
    {
        font-family: Roboto, sans-serif !important;
        /*font-family: Regular !important;*/
        position: absolute;
        margin-left:-48px !important;
    }
    .validation_remove
    {
                font-family: Roboto, sans-serif !important;
        /*font-family: Regular !important;   */
    }
</style>
@php 
    $header = $data['header'];
    unset($header[0]);
    unset($header[1]);
    unset($header[2]);
    $header = array_values($header);
@endphp
<div class="breadcrum">
    HR Services / Attendance & Leave / <span class="text-primary">Individual Leave Quota</span>
</div>
<section class="expense">
    <div class="row">
        <div class="container-fluid">
            <div class="expense_header reason_box_width margin_left_one">
                <div class="expense_table">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="expense_table_hader">
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="header_left">
                                            Employee Individual Leave Quota
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <table class="float-right" style="margin-top:-3px;">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties find_by" 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 style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <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">
                                                                <a class="dropdown-item dropdown_option_custom" key-value="emp_code">Employee Code</a>
                                                                 <a class="dropdown-item dropdown_option_custom" key-value="emp_name">Employee Name</a>
                                                          </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div padding-right">
                                                            <input type="text" class="table_dropdown common_dropdown_properties datepicker_size" id="keyword"/>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="dropdown_custom table_dropdown common_dropdown_properties find_by" 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 style="margin-left: 18px !important;margin-top: 3px;position: absolute;">
                                                                <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">
                                                                @foreach($quota_years as $key=>$value)
                                                                    <a class="dropdown-item dropdown_option_custom" key-value="{{$key}}">{{$key}}</a>
                                                                @endforeach
                                                                
                                                          </div>
                                                        </div>
                                                       <!--  <div class="main_dropdown_div padding_four_right">
                                                            <select class="table_dropdown common_dropdown_properties" name="" id="fiscal_year_select">
                                                                @foreach($quota_years as $key=>$value)
                                                                    @if($key==date('Y',strtotime($quota_start_year)).'-'.date('Y',strtotime($quota_end_year)))
                                                                        <option value="{{$key}}" selected>{{$key}}</option>
                                                                    @else
                                                                        <option value="{{$key}}">{{$key}}</option>
                                                                    @endif
                                                                @endforeach
                                                            </select>
                                                        </div> -->
                                                    </td>
                                                    <td>
                                                        <div class="main_dropdown_div">
                                                            <button class="search_btn align_search_btn submit_btn_leaves">Search</button>
                                                        </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="table" id="sorting_table">
                                <table>
                                    <thead>
                                        <tr>
                                            @foreach($data['header'] as $key=>$value)
                                                <th class="sortTable">
                                                    {{$value}}
                                                    <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                                </th>
                                            @endforeach()
                                            <th class="sortTable">
                                                Total
                                                <i class="fas fa-arrow-down ml-1 fa-xs"></i>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="leave_quota_data">
                                        @php
                                            $data=$data['data'];
                                            $data = (object)$data;
                                        @endphp
                                        @if(count($data->data) > 0)
                                        @foreach($data->data as $key=>$value)
                                        @php 
                                            $value = (object)$value; 
                                            $emp_id = $value->emp_id;
                                            unset($value->attendance_record);
                                            unset($value->emp_id);
                                            unset($value->fdate);
                                            $total_leaves = 0;
                                        @endphp
                                        <tr>
                                            @foreach($value as $info=>$index)
                                                @if($info == 'name')
                                                    <td><a href="javascript:;" class="add-quota-popup" title="Edit Employee Leave Quota" employee-id="{{$emp_id}}">{{$index}}</a></td>
                                                @else
                                                    @if($info != 'empcode')
                                                        @php $total_leaves += $index; @endphp
                                                    @endif
                                                    <td>{{$index}}</td>
                                                @endif
                                            @endforeach()
                                            <td>{{$total_leaves}}</td>
                                            @php $total_leaves = 0; @endphp
                                        </tr>
                                        @endforeach()
                                        @else
                                            <tr>
                                                <td colspan="12" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                            <div class="expense_table_footer" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@php
array_unshift($header,'Quota Year');
@endphp
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelupdateModal" aria-hidden="true">
    <div class="modal-dialog modal-lg align_modal" role="document">
        <div class="modal-content modal_content" style="height: auto !important;">
            <div class="modal-header">
                <span class="modal-title modal_title w-100" id="myModalLabelupdateModal"></span>
                <a class="close close_btn" data-dismiss="modal" aria-label="Close" style="padding-top: 5px;">
                    <span class="test" aria-hidden="true" style="padding-top: 10px !important;">&times;</span>
                </a>
            </div>
            <div class="modal-body modal_body" style="width: 400px !important; padding-bottom: 0px; min-height: 166px; height: auto;">
                <form action="{{url('leave/utility/hr/leave_quota')}}" method="POST" id="add-quota-form">
                    @csrf
                    <input type="hidden" value="" id="emp-id" name="emp_id">
                    <input type="hidden" value="{{date('Y',strtotime($quota_start_year))}}" name="quota_start_year">
                        <input type="hidden" value="{{date('Y',strtotime($quota_end_year))}}" name="quota_end_year">
                    <div class="quota_year">
                        <!-- <b> &nbsp;Quota Year :</b> &nbsp;{{$quota_start_year}} To {{$quota_end_year}} -->
                    </div>
                    <table class="emp_modal_table" id="quota-update-modal">
                        <tbody>
                            @foreach($header as $key=>$value)
                                @if(($key)%2 == 0)
                                <tr>
                                @endif
                                    <td>
                                        <div class="material-textfield margin_left_five margin_top_ten"  @if(($key)%2 != 0) style="margin-top: 7px" @endif>
                                            <input type="{{($value === 'Quota Year')?'text':'number'}}" {{($value === 'Quota Year')?'readonly':''}}  placeholder="{{$value}}" id="annual-leaves" {{($value === 'Quota Year')?' ':'name=leaves_quota[]'}}  class="validation_remove update_inp mui_placeholder_color" value="@if($value === 'Quota Year') {{$quota_start_year}} To {{$quota_end_year}} @endif" autocomplete="off">
                                            <label  @if($value === 'Quota Year') style="color:#343434 !important" @endif >{{$value}}</label>
                                            @if($value != 'Quota Year')
                                                <input type="hidden" name="leaves_id[]" value="{{$value}}">
                                            @endif
                                        </div>
                                        <div class="float-right" style="font-size: 10px;display: none;">
                                            <span class="text-danger validation_error">Required *</span>
                                        </div>
                                    </td>
                                @if(($key)%2 == 1)
                                </tr>
                                @endif
                            @endforeach()
                        </tbody>
                    </table>   
                </form>
            </div>
            <input type="hidden" name="credentials" id="credentials" value="1" />
            <div class="modal-footer upd_footer">
                <div id="button-list" style="width:95%">
                    <a href="javascript:void(0);" class="search_btn btn-default quota-update-btn">Update</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="{{ URL::asset('assets/plugins/bootstrap/js/bootstrap.min.js') }}"></script>
<script>
     @if ($upd_status)
        $('.success_message').show();
        $('.success_message_text').html('Record updated successfully.');
        HideMessage('.success_message');
    @endif
    $(document).ready(function () {
        setInterval(function() {
            $('.alert').css('display', 'none');
        }, 3000);
    });
    var find_by=null;
    var keyword=null;
    var fiscal_year=null;
    var page = 1;
    var flag=false;
    var load_table = true;
    $('body').on('click', '.submit_btn_leaves', function() {
        keyword = $("#keyword").val();
        find_by = $(".find_by").val();
        fiscal_year=$('#fiscal_year_select').val();
        flag=true;
        page = 1;
        loadMoreData();
    });
    $('.table tbody').scroll(function() {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight && load_table) {
            load_table = false;
            page++;
            loadMoreData();
        }
    });
    $(document).on('click', '.validation_remove', function () {
        $(this).removeClass('error');
        $(this).siblings().removeClass('error_label');
        $(this).parent().siblings().css("display",'none');
    });
    
    function loadMoreData(){
        if(fiscal_year!=null){
            var years = fiscal_year.split('-');
            $(".quota_year").html("<b> Quota Year :</b> "+years[0]+"-07-01 To "+years[1]+"-06-30");
            $("input[name='quota_start_year']").val(years[0]);
            $("input[name='quota_end_year']").val(years[1]);
        }
        $.ajax(
        {
            url: $('.base_url').val()+'api/leave/report/balance?page='+page,
            type: "POST",
            headers: {
                'Authorization':localStorage.getItem("laravel_token")
            },
            data:{find_by:find_by,keyword:keyword,fiscal_year:fiscal_year,page:page,data_type:'leave_quota'},
            beforeSend: function()
            {
                if(flag)
                {
                    $('#leave_quota_data').empty();
                }
            }
        })
        .done(function(data)
        {
            flag=false;
            if(data.html.length == 0){
                $('.ajax-load').html("No more records found");
                    if (!$(".no_record").is(":visible")) {
                        $("#leave_quota_data").append('<tr><td colspan="12" class="no_record" style="letter-spacing: 0px; color: #8D8D8D; opacity: 1; text-align: center; font-size: 16px;">No Data Found</td></tr>');
                    }
                return;
            }
            $("#leave_quota_data").append(data.html);
            load_table = true;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
            load_table = true;
            alert('server not responding...');
        });
    }
    $(document).on('click', '.add-quota-popup', function () {
        var title = $(this).text();
        $('#myModalLabelupdateModal').html("<b>"+title+"</b>");
        $('#emp-id').val($(this).attr('employee-id'));
        $('#updateModal').modal('show');
    });
    $(document).on('click', '.quota-update-btn', function () {
        var validator = true;
        $('#quota-update-modal tbody tr input[type="number"]').each(function () {
            var quota_val = parseInt($(this).val());
            if (isNaN(quota_val)) {
                quota_val = 0;
            }

            if (quota_val <= 0) {
                validator = false;
                $(this).addClass('error');
                $(this).siblings().addClass('error_label');
                $(this).parent().siblings().css("display",'block');

            } else {
                $(this).removeClass('error');
                $(this).siblings().removeClass('error_label');
                $(this).parent().siblings().css("display",'none');
            }
        });
        if (validator) {
            $('#add-quota-form').submit();
        }
    });
</script>
@endsection