@extends('admin.admin_master')
@section('admin')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">

/*  ==========================================
    SHOW UPLOADED IMAGE
* ========================================== */
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#imageResult')
                .attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

$(function () {
    $('#upload').on('change', function () {
        readURL(input);
    });
});

/*  ==========================================
    SHOW UPLOADED IMAGE NAME
* ========================================== */
var input = document.getElementById( 'upload' );
var infoArea = document.getElementById( 'upload-label' );

input.addEventListener( 'change', showFileName );
function showFileName( event ) {
  var input = event.srcElement;
  var fileName = input.files[0].name;
  infoArea.textContent = 'File name: ' + fileName;
}

</script>
<style>
  #upload {
    opacity: 0;
}

#upload-label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
   /* border: 2px dashed rgba(255, 255, 255, 0.7); */
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: 'Uploaded image result';
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}
</style>
<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                            Create New Employee
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('employee.store') }}" id="myForm">
                             @csrf
                        <div class="row"> 
                            <div class="col-12 col-md-8">
                               <div class="row">
                                  <div class="col-md-12">
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-3 col-form-label">Employee Id </label>
                                        <div class="form-group col-sm-9">
                                            <input name="emp_id" class="form-control" type="text">
                                        </div>
                                    </div> 
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-3 col-form-label">Employee Name </label>
                                        <div class="form-group col-sm-9">
                                            <input name="emp_name" class="form-control" type="text">
                                        </div>
                                    </div> 
                                    <div class="row mb-3">
                                        <label for="example-text-input" class="col-sm-3 col-form-label">Address </label>
                                        <div class="form-group col-sm-9">
                                            <textarea name="address" class="form-control"></textarea>
                                        </div>
                                    </div> 
                                  </div>
                               </div> 
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <div class="image-area mt-4">
                                        <img width="100" id="imageResult" src="/backend/assets/images/picture.png" alt="" class="img-fluid rounded shadow-sm mx-auto d-block" />
                                    </div>

                                    <div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
                                        <input name="profile_img" id="upload" type="file" onchange="readURL(this);" class="form-control border-0">
                                        <label id="upload-label" for="upload" class="font-weight-light text-muted">Employee Photo</label>
                                        <div class="input-group-append">
                                            <label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Email Id </label>
                            <div class="form-group col-sm-10">
                                <input name="email_id" class="form-control" type="text">
                            </div>
                        </div>  
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Phone </label>
                            <div class="form-group col-sm-10">
                                <input name="phone" class="form-control" type="text">
                            </div>
                        </div>  
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Date of Birth </label>
                            <div class="form-group col-sm-10">
                                <input name="dob" class="form-control" type="date">
                            </div>
                        </div>  
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Date of Joining</label>
                            <div class="form-group col-sm-10">
                                <input name="doj" class="form-control" type="date">
                            </div>
                        </div>           
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Department </label>
                            <div class="form-group col-sm-10">
                                <select name="department_id" class="form-control">
                                    <option value="">Select Department</option>
                                    @foreach ($department as $key => $item)
                                      <option value="{{$item->id}}">{{$item->department_name}} </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Bank Account </label>
                            <div class="form-group col-sm-10">
                                <input name="bank_ac" class="form-control" type="text">
                            </div>
                        </div>    
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Bank Name </label>
                            <div class="form-group col-sm-10">
                                <input name="bank_name" class="form-control" type="text">
                            </div>
                        </div>  
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">IFSC Code</label>
                            <div class="form-group col-sm-10">
                                <input name="bank_ifsc" class="form-control" type="text">
                            </div>
                        </div> 
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Login Id</label>
                            <div class="form-group col-sm-10">
                                <input name="login_id" class="form-control" type="text">
                            </div>
                        </div> 
                        <div class="row mb-3">
                            <label for="example-text-input" class="col-sm-2 col-form-label">Password</label>
                            <div class="form-group col-sm-10">
                                <input name="password" class="form-control" type="password">
                            </div>
                        </div>  

                        <input type="submit" class="btn btn-info waves-effect waves-light" value="Add Employee">
                        </form> 
                    </div>
                </div>
            </div>
        </div>                    
    </div>    
@endsection