@extends('backend.layouts.app')

@section('title', 'Create Slider')

@push('styles')

    
@endpush


@section('content')

  <div class="block-header">
        <ol class="breadcrumb breadcrumb-col-pink">
                                <li><a href="/admin"><i class="material-icons">home</i> Home</a></li>
                                <li><a href="{{route('admin.banner.index')}}"><i class="material-icons">label</i> Slider </a></li>
                                <li class="active"><i class="material-icons">mode_edit</i>Edit Slider</li>
                            </ol>
    </div>


<form method="POST" action="/admin/banner/{{$banners->id}}" enctype="multipart/form-data">
    
                          @csrf
                        @method('PUT')

    <div class="row clearfix">



        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="header">
                 <a  href="/admin/banner" class="btn btn-primary  pull-right waves-effect">
                        <i class="material-icons">list</i>Slider List</a>
                    <h2>
                        Edit Slider
                    </h2>
                </div>
                <div class="body">
                    
                       <div class="form-group form-float">
                          <label class="form-label">title <span style="color:red">*</span></label>
                          <div class="form-line">
                            <input type="text" name="title" id="tag_title" class="form-control" value="{{ $banners->title }}">
                           </div>
                           </div>

                        <div class="form-group form-float">
                           <label class="form-label">subtitle <span style="color:red">*</span></label>
                          <div class="form-line">
                            <input type="text" name="subtitle" id="tag_subtitle" class="form-control" value="{{ $banners->subtitle }}">
                           
    
                           </div>
                           </div>
                         


                                 <div class="form-group form-float">
                                             <label class="col-form-label"> <strong style="color:black"> Image  </strong> :</label>               
                                                <div class="form-group form-float">
                                                    <input type="file" name="photo" id="profile-image-input" style="display:none;" accept="image/*">
                                                    <button type="button" class="btn bg-white btn-sm waves-effect m-t-15" id="profile-image-btn">
                                                        <i class="material-icons" style="color:black">image</i>
                                                        <span style="color:black">UPLOAD IMAGE</span>
                                                    </button><br><br>
                                                   
                                               </div>
                                           </div>
                                  
                                     <div class="form-group form-float">          
                                             <img src="{{asset('storage/banners/'.$banners->photo)}}" id="profile-imgsrc" class="img-responsive" style="width:130px;height:130px;">
                                           </div>




                    
                </div>
            </div>
        </div>


   
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="body">
             <button type="submit" class="btn btn-primary btn-block m-t-15 waves-effect"><i class="material-icons">edit </i> Modifier</button>
                </div>
            </div>
        </div>



    </div><!-- end row clearfix-->
</form>








@endsection

@push('scripts')
<script>
    $(function(){
        function showImage(fileInput,imgID){
            if (fileInput.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e){
                    $(imgID).attr('src',e.target.result);
                    $(imgID).attr('alt',fileInput.files[0].name);
                }
                reader.readAsDataURL(fileInput.files[0]);
            }}
        //image
        $('#profile-image-btn').on('click', function(){
            $('#profile-image-input').click();      });

        $('#profile-image-input').on('change', function(){
            showImage(this, '#profile-imgsrc');
   
       var img = document.getElementById('profile-imgsrc');
       img.style.display = 'block';  });
  })

    </script>


@endpush