@extends('adminlayout.admin')
@section('content')
<style >
   .cursor{
   cursor: pointer;
   }
   .nk-content-fluid{
   margin-top: 65px;
   position: relative;
   }
   .team-info li{
   font-size: .7900rem !important;
   }
   .margin-top{
        margin-top: 10px;
   }
</style>
<div class="nk-content nk-content-fluid">
   <div class="container-xl wide-lg">
      <div class="nk-content-body">
         <div class="nk-block-head nk-block-head-sm">
            <div class="nk-block-between">
               <div class="nk-block-head-content">
                  <h3 class="nk-block-title page-title">Upload Selfie</h3>
                  <div class="nk-block-des text-soft">
                     <!-- @if($errors->any())
                     <p class="text-danger">
                        {{ implode('', $errors->all(':message')) }}
                     </p>
                     @endif -->
                  </div>
               </div>
               <!-- .nk-block-head-content -->
            </div>
            <!-- .nk-block-between -->
         </div>
         <!-- .nk-block-head -->

         <form method="post" action="{{ route('save_slider') }}" enctype="multipart/form-data">
            @csrf
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group ">
                            <label for="exampleInputEmail1">Image</label>
                            <input type="file" name="image" onchange="loadFile(event)" accept="image/*" class="form-control">
                            <span class="text-danger">@if ($errors->has('image')){{ $errors->first('image') }}@endif</span>
                            <span class="text-danger">Image dimentions should be: width=850,height=478.</span> 
                        </div>
                    </div> 
                </div>
                <button type="submit" class="btn btn-primary margin-top">Submit</button>
                </div>
            </div>
         </form>
                  <p style="margin-top: 25px;margin-left: 15%;"><img id="output" width="200" {{ !empty($image) ? 'src='.url("public/slider")."/".$image : '' }} /></p>
         <!-- .nk-block -->
      </div>
   </div>
</div>
<script>
var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
@endsection