@extends('layouts.app')
@section('title') {{'Employee Information'}} @endsection

@section('content')
<script>
	function ShowFormDiv() {
		var x = document.getElementById("form");
		if (x.style.display === "none") {
			x.style.display = "block";
		} else {
			x.style.display = "none";
		}
	}
</script>
<style>

    table#myTable thead#myHeader{
        background: #D9E5D8;
        font-size: 16px !important;
    }
    div#myTablePrint table#myTable tbody tr td {
        font-size: 16px!important;
        border: 1px solid;
    }
</style>
@php
    $users_name = DB::table('users')->select('id','name')->orderBy('name','asc')->get();
            
@endphp 
<div class="col-md-12">
    <div class="panel panel-default">
        <div class="panel-heading">Employee Information
            <a href="{{ url('EmployeeInformation') }}" class="pull-right"> Back </a>
        </div>
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <!-- Main content -->
        <div class="panel-body">
            <form action="" method="GET">
                <div class="col-lg-6">
                    <div class="form-group col-lg-6">
                        <label for="inputState">
                            <h4>Employee Name</h4>
                        </label>
                        <select id="emp_id" name="emp_id" class="form-control selectpicker" data-live-search="true">
                            <option value=""> Select... </option>
                            @if(isset($users_name))
                                @foreach($users_name as $val)
                                    <option value="{{ $val->id}}" @if(isset($_GET['emp_id']) && $_GET['emp_id'] == $val->id) selected="selected" @endif>  {{ $val->name }} </option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="form-group col-lg-6">
                        <label for="name">
                            <h4> &nbsp;</h4>
                        </label> <br />
                        <button type="submit" class="btn btn-success">Search</button>
                    </div>
                </div>
            </form>
            <!-- Small boxes (Stat box) -->
            <div class="col-lg-12 p-3">
            <button type="button" class="btn btn-primary" onclick="ShowFormDiv()" style="float:right;">+ Add New</button>
            <br>
            @php
            if (isset($data_set->id)) {                   
                $date_of_joining = $data_set->date_of_joining;                        
                $fathers_name = $data_set->fathers_name;                        
                $mothers_name = $data_set->mothers_name;                        
                $present_address = $data_set->present_address;                        
                $permanent_address = $data_set->permanent_address;                        
                $date_of_birth = $data_set->date_of_birth;                        
                $education_qualification = $data_set->education_qualification;                        
                $nid_no = $data_set->nid_no;                        
                $passport_no = $data_set->passport_no;             
                $blood_group = $data_set->blood_group;                        
                $display = 'block';
            } else {
                $display = 'none';
            }      
            @endphp
            
            <div id="form" style="display:{{ $display }}; margin-bottom:15px;">
                <form action="" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        @php $Employee_list =  DB::table('users')->select('users.*')->orderBy('name', 'ASC')->get();@endphp
                        <!-- RSM Name Dropdown -->
                        <div class="col-md-2">
                            Employee Name
                            <select name="emp_id" id="emp_id" class="form-control selectpicker" data-live-search="true" autofocus >
                                <option value=""> Select </option>
                                @if(isset($Employee_list))
                                    @foreach($Employee_list as $row)
                                        <option value="{{ $row->id }}"  @if(isset($data_set->emp_id) && $data_set->emp_id == $row->id) selected="selected" @endif >{{ $row->name }} </option>
                                    @endforeach
                                @endif
                            </select> 
                        </div>
                        <div class="col-md-2">
                            Date of Joining 
                            <input type="date" class="form-control" name="date_of_joining" value="{{ @$date_of_joining }}" >
                        </div>	
                        <div class="col-md-2">
                            Father’s Name 
                            <input type="text" class="form-control" name="fathers_name" value="{{ @$fathers_name }}" placeholder="Father’s Name">
                        </div>	
                        <div class="col-md-2">
                            Mother’s Name 
                            <input type="text" class="form-control" name="mothers_name" value="{{ @$mothers_name }}" placeholder="Mother’s Name">
                        </div>	
                        <div class="col-md-2">
                            Present Address 
                            <input type="text" class="form-control" name="present_address" value="{{ @$present_address }}" placeholder="Present Address">
                        </div>	
                        <div class="col-md-2">
                            Permanent Address 
                            <input type="text" class="form-control" name="permanent_address" value="{{ @$permanent_address }}" placeholder="Permanent Address">
                        </div>	
                        <div class="col-md-2">
                            Date of Birth 
                            <input type="date" class="form-control" name="date_of_birth" value="{{ @$date_of_birth }}" >
                        </div>	
                        <div class="col-md-2">
                            Education Qualification 
                            <input type="text" class="form-control" name="education_qualification" value="{{ @$education_qualification }}" placeholder="Education Qualification">
                        </div>	
                        <div class="col-md-2">
                            NID No 
                            <input type="text" class="form-control" name="nid_no" value="{{ @$nid_no }}" placeholder="NID No">
                        </div>	
                        <div class="col-md-2">
                            Passport No 
                            <input type="text" class="form-control" name="passport_no" value="{{ @$passport_no }}" placeholder="Passport No">
                        </div>	
                        <div class="col-md-2">
                            Blood Group 
                            <input type="text" class="form-control" name="blood_group" value="{{ @$blood_group }}" placeholder="Blood Group">
                        </div>	
                        <div class="col-md-2"><br/> &nbsp;
                            {{ csrf_field() }}

                            @if(isset($data_set->id))
                            <input type="hidden" name="id" value="{{ $data_set->id }}">
                            <input type="submit" class="btn btn-primary" name="submit" value="Update">
                            @else
                            <input type="submit" class="btn btn-primary" name="submit" value="Submit">
                            @endif
                        </div>
                    </div>
                </form>
                <br /><br />
                <br /><br />
            </div>
            <div class="panel-body" id="myTablePrint">
                <div class="form-group mt-1" style="width:100%; overflow: scroll;" >
                    <table id="myTable" cellpadding="6" cellspacing="0" width="100%" class="table table-striped table-hover">
                        <thead class="header" id="myHeader">
                            <tr>
                                <th>Sl No.</th>
                                <th>EMP ID</th>
                                <th>Employee Name</th>
                                <th>Designation</th>
                                <th>Date of Joining </th>
                                <th>Father’s Name</th>
                                <th>Mother’s Name</th>
                                <th>Present Address</th>
                                <th>Permanent Address</th>
                                <th>Date of Birth</th>
                                <th>Education Qualification</th>
                                <th>NID No</th>
                                <th>Passport No</th>
                                <th>Blood Group</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($data as $k=>$row)
                            @php			
                                $emp_id = $row->emp_id;
                                $name = $row->name;
                                $designation = $row->designation;
                                $date_of_joining = $row->date_of_joining;
                                $fathers_name = $row->fathers_name;
                                $mothers_name = $row->mothers_name;
                                $present_address = $row->present_address;
                                $permanent_address = $row->permanent_address;
                                $date_of_birth = $row->date_of_birth;
                                $education_qualification = $row->education_qualification;
                                $nid_no = $row->nid_no;
                                $passport_no = $row->passport_no;
                                $blood_group = $row->blood_group;
                            @endphp
                            <tr>
                                <td>{{ ++$k }}</td>
                                <td>{{ $emp_id }}</td>                                
                                <td>{{ $name }}</td>                                
                                <td>{{ $designation }}</td>                     
                                <td>{{ date('d-m-Y', strtotime($date_of_joining)) }}</td>                                
                                <td>{{ $fathers_name }}</td>                                
                                <td>{{ $mothers_name }}</td>                                
                                <td>{{ $present_address }}</td>                                
                                <td>{{ $permanent_address }}</td>  
                                <td>{{ date('d-m-Y', strtotime($date_of_birth)) }}</td>      
                                <td>{{ $education_qualification }}</td>                                
                                <td>{{ $nid_no }}</td>                                
                                <td>{{ $passport_no }}</td>                                
                                <td>{{ $blood_group }}</td>                                
                                <td class="p-1 border border-gray-300 text-center text-sm sm:text-base"><button data-id="{{ $row->id }}" class="btn {{ $row->status == 1 ? "btn-success" : "btn-danger"}} change-status"  > {{ $row->status == 1 ? "On" : "Off"}} </button></td>
                                <td style="width: 10%;">
                                    <a href="{!! url('EmployeeInformation/?action=edit&id='.$row->id) !!}" class="table-link">
                                        <span class="fa-stack">
                                            <i class="fa fa-square fa-stack-2x"></i>
                                            <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
                                        </span>
                                    </a>
                                    @if (Auth::user()->id == "2")
                                    <a href="{{ url('EmployeeInformation/?action=delete&id='.$row->id) }}" class="table-link danger" onclick="return confirm('Do you want to delete?')">
                                        <span class="fa-stack">
                                            <i class="fa fa-square fa-stack-2x"></i>
                                            <i class="fa fa-trash-o fa-stack-1x fa-inverse"></i>
                                        </span>
                                    </a>                                    
                                    @endif
                                </td>
                            </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div><!-- /.container-fluid -->
            </div>
            <div class="flex justify-center">
                {{ $data->appends(request()->query())->links() }}
            </div>
        </div>
        <!-- /.content -->
    </div>
</div>
<script>
    $(document).ready(function(){
        $('.change-status').on('click',function(event){
            event.preventDefault();
            const id=$(this).data('id');
            const employeeInfoStatus = $(this);
            const url = `/change-status-employee-information/${id}`;
            $.ajax({
                type: "GET",
                url: url,
                success: function(response){
                    if(response && response.employee_info){
                        const employee_info = response.employee_info;
                        if(employee_info.status == 1){
                            employeeInfoStatus.removeClass('btn-danger');
                            employeeInfoStatus.addClass('btn-success');
                            employeeInfoStatus.text('On');
                        }else{
                            employeeInfoStatus.removeClass('btn-success');
                            employeeInfoStatus.addClass('btn-danger');
                            employeeInfoStatus.text('Off');
                        }
                    }
                },
                error: function(xhr, status, error) {
                    alert("There was an error");
                }
            })
        })
    })
</script>
<script>
    function ChangeStatusAsOn(id)
    {
        //alert(id);
        $.ajax({
            type:'GET',
            url:'{!! url('/change-status-as-on/?id=') !!}'+id,
            success:function(data){
                //
            }
        });
    }
    function ChangeStatusAsOff(id)
    {
        //alert(id);
        $.ajax({
            type:'GET',
            url:'{!! url('/change-status-as-off/?id=') !!}'+id,
            success:function(data){
                //
            }
        });
    }
</script>

<script>
	/**
	 * Create an arrow function that will be called when an image is selected.
	 */
	const previewImage = (event) => {
		/**
		 * Get the selected files.
		 */
		const imageFiles = event.target.files;
		/**
		 * Count the number of files selected.
		 */
		const imageFilesLength = imageFiles.length;
		/**
		 * If at least one image is selected, then proceed to display the preview.
		 */
		if (imageFilesLength > 0) {
			/**
			 * Get the image path.
			 */
			const imageSrc = URL.createObjectURL(imageFiles[0]);
			/**
			 * Select the image preview element.
			 */
			const imagePreviewElement = document.querySelector("#preview-selected-image");
			/**
			 * Assign the path to the image preview element.
			 */
			imagePreviewElement.src = imageSrc;
			/**
			 * Show the element by changing the display value to "block".
			 */
			imagePreviewElement.style.display = "block";
		}
	};
</script>


@endsection