@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Employee Details')
@push('head')
<link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> -->
<script src="/assets/plugins/select2/dist/js/select2.min.js" defer></script>
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>
<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>
<style>
    /*Custom CSS*/
span {
  transition: color 0.5s ease-in;
}

label:focus-within span {
  color: blue;
}

input {
  display: block;
  width: 100%;
}

label,
select { 
  
  display: block;
  width: 100%;
  max-width: 100%;
}
/*Profile Pic Start*/
.picture-container{
    position: relative;
    cursor: pointer;
    text-align: center;
}
.picture{
    width: 106px;
    height: 106px;
    background-color: #999999;
    border: 4px solid #CCCCCC;
    color: #FFFFFF;
    border-radius: 50%;
    margin: 0px auto;
    overflow: hidden;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}
.picture:hover{
    border-color: #2ca8ff;
}
.picture input[type="file"] {
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0 !important;
    position: absolute;
    top: 0;
    width: 100%;
}

.picture-src{
    width: 100%;

}
/*Profile Pic End*/
.form-control:focus, .form-select:focus, .form-check-input:focus, .select2:focus-within{
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
    </style>
@endpush
@php
// echo $option; 
// $option="Update";
@endphp
@section('content')
@if(!empty($empid))
@php
// $option="Update";
$qdata=[];
@endphp
@else
@php
// $option="New";
// session()->put('_old_input', []);
$qdata=[];
@endphp
@endif

@php 
/*use App\Http\Controllers\Hrms\DaCounterController; 
echo $da = DaCounterController::get_da(); 
DaCounterController::update_da($da);*/
@endphp
<!--Section: Contact v.2-->
<section class="mb-2 bg-white">
    <!--Section heading-->
    <!--<h3 class="h3-responsive font-weight-bold text-center p-3">-->
       <!--  EMPLOYEE DETAILS {{ $option=="Update" ? ' UPDATION ' : '' }}FORM-->
    <!--</h3> -->
    <!--Section description-->
    <script>
@if(Session::has('success'))
swal("{{Session::get('success')}}").then(function() {
    @if($option=='New')
    window.location = "/userProfile";
    @endif
    @if($option=='Update')
    window.location = "/userProfileEdit";
    @endif
});
@endif


</script>

    <form method="POST" action="{{url('/userProfile')}}" method="POST" enctype="multipart/form-data">
        <div class="row">
            <!--Grid column-->
           
            <div class="col-md-12">
    
    
            @if(Session::has('error'))
                <div class="alert alert-success text-center">
                    {{Session::get('error')}}
                </div>
            @endif
    @csrf
    <input type="hidden" name="option" id="option" value='{{ $option }}'/>
    <input type="hidden" name="id" id="id" value='{{ old("id") }}'/>
    <input type="hidden" name="tpid" id="tpid" value=''/>
                <!--Grid row-->
                <div class="row d-flex align-items-left justify-content-left" style="float:none;margin:auto;">
                    <!--Grid column-->
                   <div class="col-sm-2 m-2">
                        <div class="sm-form">
                        <label for="estb_code" class=""><span>Establisment</span>
                            <select id="estb_code" name="estb_code" class="form-control form-select form-select-sm @error('estb_code') is-invalid @enderror" aria-label="Establisment">
                                <option value="" {{ ( old("estb_code") == '' ) ? 'selected' : '' }}>
                                    ALL
                                </option>
                                @foreach ($establishmentData as $key => $value)
                                <option value="{{ $key }}" {{ ( $key == old("estb_code")) ? 'selected' : '' }}>
                                    {{ $value }}
                                </option>
                            @endforeach
                              </select>
                            </label>
                    @error('estb_code')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>
                    <div class="col-sm-2 m-2">
                        <div class="sm-form">
                        <label for="user_type" class=""><span>Type of User</span>
                            <select id="user_type" name="user_type" class="form-control form-select form-select-sm @error('user_type') is-invalid @enderror" aria-label="Type of User">
                                @foreach ($userTypeData as $key => $value)
<option value="{{ $key }}" {{ ( $key == old("user_type")) ? 'selected' : '' }}>{{ $value }}</option>
                            @endforeach
                              </select>
                            </label>
                    @error('user_type')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>
                    <div class="col-sm-2 m-2">
                        <div class="sm-form">
                        <label for="cadre" class=""><span>Cadre</span>
                            <select id="cadre" name="cadre" class="form-control form-select form-select-sm @error('cadre') is-invalid @enderror" aria-label="Type of User">

                              </select>
                            </label>
                    @error('cadre')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>
                    <div class="col-sm-2 m-2">
                        <div class="sm-form">
                        <label for="designation" class=""><span>Designation</span>
                            <select id="designation" name="designation" class="form-control form-select form-select-sm @error('designation') is-invalid @enderror" aria-label="Type of User">

                              </select>
                            </label>
                    @error('designation')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>
                    <div class="col-sm-2 m-2">
                        <div class="sm-form">
                        <label for="post" class=""><span>Post</span>
                            <select id="post" name="post" class="form-control form-select form-select-sm @error('post') is-invalid @enderror" aria-label="Type of User">

                              </select>
                            </label>
                    @error('post')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>
                    <div class="col-sm-2 m-2">
                        <div class="sm-form">
                        <label for="section" class=""><span>Section</span>
                            <select id="section" name="section" class="form-control form-select form-select-sm @error('section') is-invalid @enderror" aria-label="Section">
                                @foreach ($sectionData as $key => $value)
                                <option value="{{ $key }}" {{ ( $key == old("section")) ? 'selected' : '' }}>
                                    {{ $value }}
                                </option>
                            @endforeach
                              </select>
                            </label>
                    @error('section')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>
                    <div class="col-sm-2 m-2">
                        <div class="sm-form">
                        <label for="wr" class=""><span>Working/Retired</span>
                            <select id="wr" name="wr" class="form-control form-select form-select-sm @error('wr') is-invalid @enderror" aria-label="Working/Retired">
<option value="W" 'selected'>Working</option>
<option value="R">Retired</option>
                              </select>
                            </label>
                    @error('wr')
                    <span class="invalid-feedback d-inline" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                        </div>
                    </div>
           
                    <div class="col-sm-2 m-2">
                        <div class="sm-form">
                            <label class=""><span>&nbsp;</span>
                            <button type="button" id="getButton" class="btn btn-primary d-inline" onclick="getData()">Get Details</button>
                        </label>
                        </div>
                    </div>
                
                </div>
            </div> </div>
                <div id='eosDiv'></div>
            </form>
            <div class="panel-body tabledata">
            </div>
</section>
<!--Section: Contact v.2-->
@endsection
@push('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<script>
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
function readURL(input) {
                    if (input.files && input.files[0]) {
                        var reader = new FileReader();
                                reader.onload = function (e) {
                                                $('#imagePreview').attr('src', e.target.result).fadeIn('slow');
                                                   }
                                                           reader.readAsDataURL(input.files[0]);
                                                            }
                                                        }
$(document).ready(function(){
    $(document).on("change", '#user_type', function () {
            var url = "{{ url('getCadre')}}";

            $.get(url,
            {userType: ($(this).val()=='' ? '{{old("user_type")}}' : $(this).val()) },
                    function (data) {
                        var model = $('#cadre');
                        model.empty();
                        model.append("<option></option>");
                        $.each(data, function (index, element) {
                            if(element.cadre_code=='{{ old("cadre")}}')
                            var selOption=" selected=selected ";
                            else
                            var selOption='';
                            model.append("<option value='" + element.cadre_code + "'" + selOption + ">" + element.cadre_name + "</option>");
                        });
                    }
            );
        });

        $(document).on("change", '#cadre', function () {
            var url = "{{ url('getDesignation')}}";

            $.get(url,
            {userType: ($('#user_type').val()), cadre: ($(this).val()=='' ? '{{old("cadre")}}' : $(this).val()) },
                    function (data) {
                        var model = $('#designation');
                        model.empty();
                        model.append("<option></option>");
                        $.each(data, function (index, element) {
                            if(element.desig_code=='{{ old("designation")}}')
                            var selOption=" selected=selected ";
                            else
                            var selOption='';
                            model.append("<option value='" + element.desig_code + "'" + selOption + ">" + element.desig_name + "</option>");
                        });
                    }
            );
        });

        $(document).on("change", '#designation', function () {
            var url = "{{ url('getPost')}}";

            $.get(url,
            {userType: ($('#user_type').val()), cadre: ($('#cadre').val()), designation: ($(this).val()=='' ? '{{old("designation")}}' : $(this).val()) },
                    function (data) {
                        var model = $('#post');
                        model.empty();
                        model.append("<option></option>");
                        $.each(data, function (index, element) {
                            if(element.post_code=='{{ old("post")}}')
                            var selOption=" selected=selected ";
                            else
                            var selOption='';
                            model.append("<option value='" + element.post_code + "'" + selOption + ">" + element.post_name + "</option>");
                        });
                    }
            );
        });
$('#user_type').trigger('change'); 
$('#cadre').trigger('change'); 
$('#designation').trigger('change'); 

});
$("#user").autocomplete({
    minLength: 3,
    source: function(query, result)
  {
   $.ajax({
    url:"auto_user_profile",
    method:"POST",
    data:{query:query,usertype:$("#user_type").val(),wr:$("#wr").val()},
    dataType:"json",
    success:function(data)
    {
     result($.map(data, function(item)
	 {
      return item;
     }));
    }
   })
  },
  autoFocus: true,
  select: function(event, ui) { 
    $(event.target).val(ui.item.value);
    $('#user').val(ui.item.value);
    $idval=ui.item.value.split('#');
    $('#id').val($idval[1].trim());
        },
  });

  
function getData() {
var estb_code=$('#estb_code').val();
var user_type=$('#user_type').val();
var cadre=$('#cadre').val();
var designation=$('#designation').val();
var post=$('#post').val();
var section=$('#section').val();
var wr=$('#wr').val();

$.ajax({
    url:"getUserReport",
    type:"GET",
    data:{estb_code: estb_code, user_type:user_type, cadre:cadre, designation:designation, post:post, section:section, wr:wr},
    success:function(data, status)
    {
        $(".tabledata").html("");
            $(".tabledata").html(data);
            // $('#data-table-combine').DataTable(options);
            $('#data-table-default').DataTable({
                "pageLength": 50,
                responsive: {
                    details: false
                }
            });

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
        alert("Status: " + textStatus); alert("Error: " + errorThrown); 
    } 
});






}

 </script>
 @endpush