@extends('layouts.default', ['appTopMenu' => true])
@section('title', 'Employee Details')
<script src="/assets/plugins/select2/dist/js/select2.min.js" defer></script>
@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> -->

<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 mb-5">
    
    
            @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-center justify-content-center" 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">
                                @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="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>
                    @if($option=="Update")
                    <div class="col-sm-3 m-2">
                        <div class="sm-form">
                        <label for="user" class=""><span>Select User</span>
                            <input type="text" id="user" name="user" autocomplete="off" class="form-control form-control-sm @error('user') is-invalid @enderror" value='{{ old("user") }}'/>
                            </label>
                    @error('user')
                    <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('P')">Get Details</button>
                        </label>
                        </div>
                    </div>
                    @endif
                </div>
                
                <div id='postingDiv'></div>
            </form>

</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(){
    $("#imageName").change(function(){
                   readURL(this);
                    });
    $("#dob").datepicker({
        format: "dd/mm/yyyy",
    todayHighlight: true,
    autoclose: true
  });
    $("#jdate").datepicker({
        format: "dd/mm/yyyy",
    todayHighlight: true,
    autoclose: true
  });
    $("#cdate").datepicker({
        format: "dd/mm/yyyy",
    todayHighlight: true,
    autoclose: true
  });
$(".multiple-select2").select2({ placeholder: "Select Qualification" });
$('.multiple-select2').val([