@extends('layouts.app2') 
@section('badcome')

@endsection 

@section('dynamic_css')
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="{!! asset('/css/table_style.css') !!}" media="all" rel="stylesheet" type="text/css" />
<style>
    label {

        margin-bottom: 0.4rem;
        padding-left: .5rem;
        background-color: #3f51b5;
        color: white;

        border-bottom-left-radius: .3rem;
        border-top-left-radius: .3rem;
    }

    .f30 {
        font-size: 30px;
    }

    .display_flex {
        display: flex;
    }

    .display_flex label {
        padding-right: 10px;
        padding-top: 8px;
    }

    .form-control {
        border-radius: .0001rem;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        padding: 10px 18px;
        border-bottom: 7px solid #f3f3f3;

    }

    table.dataTable.no-footer {
        border-bottom: 1px solid white;
    }

    .btn.btn-xsm {
        padding: 0.2rem .6rem;
        font-size: 0.54rem;
    }

    @media (max-width: 768px) {
        .col {
            -ms-flex-preferred-size: 0;
            flex-basis: auto;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
        }

        .display_flex label {
            width: 100px;
        }

        .display_flex {
            margin-bottom: 10px;
        }

        .btn_align {
            float: right;
        }
        label {
            margin-bottom: 0.0rem;
        }
    }
</style>
@endsection @section('content')
<div class="container">
    <div class="row container_layout">
        <div class="col-md-12 pl0 pr0 mobile_view">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('adminhome')}}">
                            <i class="material-icons">home</i>
                        </a>
                    </li>
                     <li class="breadcrumb-item"><a href="{{route('employees')}}">Employees</a></li>
                    <li class="breadcrumb-item active"><a href="{{ route('employeecontract')}}">Employee Contract</a></li>
                </ol>
            </nav>
        </div>
        <div class="col-md-12 pl0 pr0 mt5">
            <div class="card">
                <div class="card-body">

                    <form method="" id="" role="form" class="form-horizontal row justify-content-center">
                        <div class="col-md-4 display_flex ">
                            <label class="control-label" style="width: 160px;"><i class="fa fa-map-marker" aria-hidden="true"></i><strong> DISTRICT </strong></label>
                            <select class="form-control input-md" id="district" name="district" @if($level!=1) {{ 'disabled' }} @endif>
                                  <option value="" disabled>=== Select A Location ===</option>
						       @foreach($districts as $district)
                                    <option value="{{$district['district_code']}}" @if($location_code==$district['district_code']) {{'selected'}} @endif >{{$district['district_name']}} </option>
                                @endforeach
                              </select>
                        </div>
                        <div class="col-md-3 display_flex">
                            <label class="control-label " style="width: 160px;">
                                <i class="fa fa-map-marker" aria-hidden="true"></i><strong> BLOCK </strong>
                            </label>
                            <select class="form-control input-md" id="block" name="block" @if(($level!=1) && ($level!=2)) {{ 'disabled' }} @endif>
                                @if(!empty($block_data))
                                   @foreach($block_data as $block)
                                       <option value="{{$block['block_id']}}" @if($selected_block==$block['block_id']) {{'selected'}} @endif >{{$block['block_name']}} </option>
                                   @endforeach
                                @else
                                  <option value="1" selected>All</option>
                                @endif
                            </select>
                        </div>
                        <div class="col-md-3 display_flex">
                            <label class="control-label" style="width: 160px;"><i class="fa fa-indent" aria-hidden="true"></i><strong> STATUS</strong> </label>
                            <select class="form-control input-md text-center" id="status" name="status">
                  <!--                <option value="" selected disabled>= Select A Option=</option>-->
                                  <option value="5" selected>All</option>
                                  <option value="0">Pending</option>
                                  <option value="1">Approved</option>
                                  <option value="2">Rejected</option>
                           </select>
                        </div>

                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary  btn-md mt0 btn_align" id="data_search"><i class="fa fa-search" aria-hidden="true"></i> Search</button>
                            <!--<button type="reset" class="btn btn-warning  btn-md mt0">Reset</button>-->
                        </div>
                    </form>

                </div>

            </div>

        </div>
    <!--</div>-->

    <input type="hidden" name="image_url" id="image_url" value="{{ $global_data['config']->image_url }}">
    <!-- <input type="hidden" name="location" id="location" value="@if($level==1){{1}}@else{{$location_code}}@endif" >-->

<!--    <div class="row">-->
        <div class="col-md-12 pl0 pr0 mt10">
            <div class="card">
                <div class="card-body row">
                    <div class="col-md-12">
                        <h7><strong>Employee Contract Details <i class="fa fa-angle-double-right fa-lg" aria-hidden="true"></i></strong> </h7>
                        <hr>
                    </div>
                    <div class="col-md-12" style="min-height:100px;">
                        <div id="employee_contract_details_request_div">
                            <table class="table table-responsive gfg" cellspacing="10" id="employee_contract_details_request">
                                <thead>
                                    <tr class="note note-primary">
                                        <th scope="col" class="note-dange">#</th>
                                        <th scope="col">Employee Code</th>
                                        <th scope="col">Employee Name</th>
                                        <th scope="col">Contract Form</th>
                                        <th scope="col">Contract Upto</th>
                                        <th scope="col">Contract Sign With</th>
                                        <th scope="col">Contract Document</th>
                                        <th scope="col">Status</th>
                                        <th scope="col" style="width: 85px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="employee_contract_details_request_body">
                                </tbody>
                            </table>
                        </div>
                          
                        <h4 class=" text-center no-data-found">No Data Found</h4>

                    </div>
                 </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="docView" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document" style="">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><strong><i class="fa fa-file" aria-hidden="true"></i>  Bank Document</strong></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
            </div>
            <div class="modal-body" style="background-color:#a2a2a2;">
                <div class="text-center" style="padding:0px 50px 0px 50px;" id="documentContainer">
                    <!--<img src="" class="img-fluid imgUrl" id="imgUrl" style="height: 500px;">-->
                    <!--<iframe class="pdf-iframe" id="iframe" width="100%" height="500px" src=""></iframe>-->
                </div>
            </div>
            <div class="modal-footer text-center" style="justify-content: center;">
                <button type="button" class="btn btn-light" onClick="zoomin();" style="border-radius: 50px;"><i class="fa fa-plus" aria-hidden="true"></i>
</button>
                <button type="button" class="btn btn-light" onClick="zoomout();" style="border-radius: 50px;"><i class="fa fa-minus" aria-hidden="true"></i>
</button>
                
                <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius: 50px;">Ok</button>
            </div>
        </div>
    </div>
</div>



@endsection @section('dynamic_js')
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script>
    var image_url = $('#image_url').val();
    
    
    var init_status = $('#status').val();
    var init_block = $('#block').val();
    var init_district = $('#district').val();

    get_data(init_district, init_block, init_status);  
    
    
    
    $('#district').on('change', function(e) {
        e.preventDefault()
        var selected_district = $(this).val();
        $('#block').empty();
        if((selected_district) && (selected_district!=0)){
            $('.page-loader-wrapper').fadeIn();
            $.ajax({
                type: "GET",
                url: "{{ route('get_block_list')}}",
                data: {
                    district_code: selected_district
                },
                dataType: "json",
                success: function(data) {
                    $('#block').empty();
                    $('#block').append('<option value="1" selected> All </option>');
                    if (data.msgType == true) {
                        if(data.data.length>0){
                            $.each(data.data, function(key, value) {
                                $('#block').append('<option value=" ' + value.block_id + ' ">' + value.block_name + '</option>');
                            });   
                        }
                    } else {
                        toastr.error(data.msg);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {

                    callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
                },
                complete: function(data) {
                    $('.page-loader-wrapper').fadeOut();
                }
            });
        }
    })  
    
    
    
    function get_data(district, block, status) {
        $('.page-loader-wrapper').fadeIn();
        $.ajax({
            type: "GET",
            url: "{{route('getemployeecontractdata')}}",
            data: {
                district: district,
                block: block,
                status: status
            },
            dataType: "json",
            success: function(data) {
                if (data.msgType == true) {
                   
                    if(data.data.length>0){
                        $('#employee_contract_details_request_div').siblings('.no-data-found').hide();
                        bind_request(data);
                        $('#employee_contract_details_request_div').show();
                    }else{
                       $('#employee_contract_details_request_div').siblings('.no-data-found').show(); 
                       $('#employee_contract_details_request_div').hide();
                    }
                    /*toastr.success(data.msg);*/
                } else {
                    toastr.error(data.msg);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
            },
            complete: function(data) {
                $('.page-loader-wrapper').fadeOut();
            }
        });

    }


    function bind_request(data) {
        if ($.fn.DataTable.isDataTable('#employee_contract_details_request')) {
            $('#employee_contract_details_request').dataTable().fnClearTable();
            $('#employee_contract_details_request').dataTable().fnDestroy()
        }
        var i = 1;
        var temp = i;
        $('#employee_contract_details_request_body').empty();
        $.each(data.data, function(index, value) {
            if (temp == 6) {
                temp = 1;
            }
            var color_code = '';
            if (temp == 1) {
                color_code = 'success';
            } else if (temp == 2) {
                color_code = 'info';
            } else if (temp == 3) {
                color_code = 'secondary';
            } else if (temp == 4) {
                color_code = 'primary';
            } else {
                color_code = 'warning';
            }
            var request_status='';
            if(value.status==0){
                request_status='<span class="text-warning">Pending</span>';
            }else if(value.status==1){
                request_status='<span class="text-success">Approved</span>';      
            }else{
                request_status='<span class="text-danger">Rejected</span>';      
            }
            if (value.contract_file)
                var contract_doc = '<a target="_blank" class="bankDocView" href="' + image_url + value.contract_file + '"><i class="fa fa-file-pdf-o fa-lg" aria-hidden="true"></i></a>';
            else
                var contract_doc = '';
            
            var action_btn='';
            if(value.status==0){
                var action_btn='<a class="btn btn-success btn-xsm request_accept" data-contract_id="' + value.id + '"><i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i></a><a class="btn btn-danger btn-xsm request_reject" data-contract_id="' + value.id + '"><i class="fa fa-times-circle-o fa-2x" aria-hidden="true"></i></a>';
            }
            
            

            $('#employee_contract_details_request_body').append('<tr class="note">' +
                '<th class="note-' + color_code + '">' + i + '</th>' +
                '<td>' + value.employee_code + '</td>' +
                '<td>' + value.name + '</td>' +
                '<td>' + value.contract_form + '</td>' +
                '<td>' + value.contract_to + '</td>' +
                '<td>' + value.contract_sign_with + '</td>' +
                '<td>' + contract_doc + '</td>' +
                '<td class="">' + request_status +  
                '</td>' +
                '<td>' +action_btn+'</td>' +
                '</tr>');

            i = i + 1;
            temp = temp + 1;
        });


        var table = $('#employee_contract_details_request').DataTable({
            paging: true,
            pagingType: "full_numbers",
            pageLength: 5,
            stateSave: true,
            dom: 'Bfrtip',
            buttons: [{
                    extend: 'excelHtml5',
                    title: 'Pending bank details change request',

                },
                {
                    extend: 'print',
                    title: 'Pending bank details change request',
                    orientation: 'landscape',
                    pageSize: 'LEGAL'
                }
            ]
        });
    }


    $(document).on('click', '.request_accept', function(e) {
        e.preventDefault();


        swal({
                title: "Are you sure?",
                text: "You are about to approved this.!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            })
            .then((willStore) => {
               if(willStore.value){
                  var id = $(this).data('contract_id');
                   bankChangeRequestAcceptReject(id, 1);
               }
            })
    })

    $(document).on('click', '.request_reject', function(e) {
        e.preventDefault();
        swal({
                title: "Are you sure?",
                text: "You are about to reject this.!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes'
            })
            .then((willStore) => {
                if(willStore.value){
                    var id = $(this).data('contract_id');
                    bankChangeRequestAcceptReject(id, 2);
                }
            })
    })

    function bankChangeRequestAcceptReject(id, action) {
        $('.page-loader-wrapper').fadeIn();
        $.ajax({
            type: "GET",
            url: "{{route('contractdetailschangeaction')}}",
            data: {
                id: id,
                action: action
            },
            dataType: "json",
            success: function(data) {
                if (data.msgType == true) {
                    get_data(init_district, init_block, init_status);
                    toastr.success(data.msg);
                } else {
                    toastr.error(data.msg);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {

                callAjaxErrorFunction(jqXHR, textStatus, errorThrown);
            },
            complete: function(data) {
                $('.page-loader-wrapper').fadeOut();
            }
        });
    }


    
    
    
    $(document).on('click', '#data_search', function(e) {
        e.preventDefault();
        var status = $('#status').val();
        var block = $('#block').val();
        var district = $('#district').val();

        init_status = status;
        init_block = block;
        init_district = district;

        get_data(init_district, init_block, init_status);  
    })

    

    $(document).on('click', '.bankDocView', function(e) {


        var url = $(this).attr('href');
        var extension = url.split('.').pop();
        $('#documentContainer').empty();
        if (extension != 'pdf') {
            e.preventDefault();            
            $('#documentContainer').append('<img src="'+url+'" class="img-fluid imgUrl" id="imgUrl" style="height: 500px;">');
            $('#docView').modal('show');
        }/*else{
            e.preventDefault();
            $('#documentContainer').append('<iframe class="pdf-iframe" id="imgUrl" width="100%" height="500px" src="'+url+'"></iframe>');
            $('#docView').modal('show');
            
        }*/

    })
    
    function zoomin(){
        var myImg = document.getElementById("imgUrl");

        var currHeight = myImg.clientHeight;
     
        if(currHeight == 900){
            toastr.error("Maximum zoom-in level reached.");
        } else{

            myImg.style.height = (currHeight + 50) + "px";

        } 

    }

    function zoomout(){

        var myImg = document.getElementById("imgUrl");
        var currHeight = myImg.clientHeight;
        if(currHeight ==400){
            toastr.error("Maximum zoom-out level reached.");

        } else{

            myImg.style.height = (currHeight - 50) + "px";

        }

    } 

</script>
@endsection