@extends('layout.index')
@section('title','Upload Employee Image')
<!-- Dashboard Ecommerce start -->
@section('content')
<section>
   
    <div class="content-body">
        <!-- Bordered table start -->
        <div class="row" id="table-bordered">
           <div class="col-12">
              <div class="card">
                 <div class="card-header w-100" >
                    <div class="content-header-left">
                       <div class="row breadcrumbs-top">
                          <div class="col-sm-12">
                             <h2 class="content-header-title float-left mb-0">Employee Images</h2>
                          </div>
                       </div>
                    </div>
                    <div class="d-flex justify-content-end breadcrumb-wrapper">
                       <nav aria-label="breadcrumb">
                          <ol class="breadcrumb mr-1">
                             <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                             <li class="breadcrumb-item"><a href="{{ route('employee.list')}}">Employee</a></li>
                             <li class="breadcrumb-item active" aria-current="page">Employee Images</li>
                          </ol>
                       </nav>
                    </div>
                 </div>
              </div>
           </div>
        </div>
        <!-- Bordered table end -->
     </div>

    @if ($message = Session::get('success'))
        <div class="demo-spacing-0 mb-1">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <div class="alert-body">
                    {{-- <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> --}}
                        {{ $message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">

                </div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    @endif
   
    <div class="content-body">
        <!-- Basic multiple Column Form section start -->
        <section id="multiple-column-form">
           <div class="row justify-content-center">
              <div class="col-sm-7">
                 <div class="card">
                    <div class="card-body">
                       <form class="form" action="{{url('/biometric_attendance/image_upload', $Emp_id)}}" method="post" enctype="multipart/form-data">
                        {{csrf_field()}}
                          <div class="row">
                             <div class="col-md-12 col-12">
                                <div class="media justify-content-center mb-2">
                                    @if(isset($Emp_image->image_url))
                                       <img src={{ asset('/uploads/employee_images/'.$Emp_image->image_url)}} id="account-upload-img" style="border-radius:15px; object-fit:cover;" class="mr-50" alt="profile image" height="150" width="150" />
                                    @else
                                       <img src="{{ asset('app-assets/images/portrait/small/proflie-default.png') }}" alt="Profile Picture" />
                                    @endif
                                 </div>
                             </div>
                             <div class="col-sm-12">
                             <div class="media-body mt-75 ml-1 text-center">
                                                   <label for="account-upload" class="btn btn-sm btn-primary mb-75 mr-75">Upload</label>
                                                   <input type="file" name='image' id="account-upload" hidden accept=".jpg,.jpeg,.png" onchange="validateSize(this),validateFileType()"/>
                                                   {{-- <button id="resetbtn" type="button" onClick="this.form.reset()" class="btn btn-sm btn-outline-secondary mb-75">Reset</button> --}}
                                                   <p style="color:red;">Allowed JPEG, JPG or PNG. Max file size of 2 MB</p>
                                                    @error('image')<span class="text-danger">{{ $message }}</span>@enderror
                                               </div>
                                               <hr>
                                           </div>
                                <div class="col-12 text-center mt-1">
                                    <input type="submit" class="btn btn-primary mr-1" value="Submit">
                                    <a href="{{ route('employee.list') }}" class="btn btn-outline-secondary">Cancel</a>
                                </div> 
                             </div>
                          </div>
                       </form>
                    </div>
                 </div>
              </div>
           </div>
        </section>
        <!-- Basic Floating Label Form section end -->
     </div>
</section>
@endsection

<script>
   function validateSize(input) {
      const fileSize = input.files[0].size / 1024 / 1024; // in 2 MB
      if(fileSize > 2) {
         alert('File size exceeds 2 MB');
      }else{
        
      }
   }

   function validateFileType(){
        var fileName = document.getElementById("account-upload").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg, jpeg and png files are allowed!");
        }   
    }
</script>