 @extends('admin.layouts.main-layout')
 @section('content')
   <div class="container">
        <div class="justify-content-center">
            <div class="">
                <div class="card">
                    <div class="card-header">Create Banner</div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                         <form role="form" method="post" onsubmit="return validateForm('addsstatus')" class="addsstatus" action="{{url('admin/banner')}}" autocomplete="off" enctype="multipart/form-data">
                             @csrf
                       

                            <div class="form-group">
                                <label for="title">Name <span class="require label-mandatory">*</span></label>
                                <input type="text" class="form-control input-mandatory"
                                       name="name" id="name"  placeholder="">
                            </div>
                            
                             <div class="form-group">
                                <label for="title">Banner <span class="require label-mandatory">*</span></label>
                                <input type="file" class="form-control input-mandatory" name="logo" id="image" placeholder="" onchange="previewImage(event, 'imagePreview')">
                                <img id="imagePreview" src="#" alt="Image Preview" style="display: none; max-width: 100%; height: auto;">
                            </div>

                          
                            <br>
                            <div class="form-group">

                                <button type="submit"  class="btn btn-primary" >Submit</button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script>
    function previewImage(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function() {
            var imgElement = document.getElementById('imagePreview');
            imgElement.src = reader.result;
            imgElement.style.display = 'block'; // Show the image
        };
        reader.readAsDataURL(input.files[0]);
    }
</script>
