@extends('admin.layouts.main-layout')

@section("content")


<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <h2>Edit New Banner</h2>
            </div>
        </div>
    </div>
        <div class="row">
                        <div class="col-xl-9 mx-auto">
                            <!-- <h6 class="mb-0 text-uppercase">Create  New Astrologer</h6> -->
                            <hr/>
                            <div class="card border-top border-0 border-4 border-info">
                                <div class="card-body">
                                    <div class="border p-4 rounded">
                                        <div class="card-title d-flex align-items-center">
                                            <div><i class="bx bxs-user me-1 font-22 text-info"></i>
                                            </div>
                                            <h5 class="mb-0 text-info">Edit Banner</h5>
                                        </div>
                                        <hr/>
                                        <form method="post" action="{{ url('admin/banner/'.$detail->id) }}"  onsubmit="    return validateForm('addsstatus')" class="addsstatus" autocomplete="off" enctype="multipart/form-data">
                             @csrf
             {{ method_field('PATCH') }}
                                        <div class="row mb-3">
                                            <label for="Name" class="col-sm-3 col-form-label">Banner Name</label>
                                            <div class="col-sm-9">
                                  <input type="text" class="form-control input-mandatory" id="name" name="name" value="{{$detail->name}}" placeholder="Banner Name">
                                            </div>
                                        </div>
                                         
                                         <div class="form-group">
                                                <label for="title">Banner <span class="require label-mandatory">*</span></label>
                                                <input type="file" class="form-control" name="logo" id="image" placeholder="" onchange="previewImage(event)">
                                                <img id="imagePreview" src="{{$detail->logo}}" alt="Image Preview" style="max-width: 100%; height: auto;">
                                            </div>

                                        <div class="row">
                                            <label class="col-sm-3 col-form-label"></label>
                                            <div class="col-sm-9">
                                                <button type="submit" class="btn btn-info px-5">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end row-->
</section>
@endsection
<script>
    function previewImage(event) {
            var input = event.target;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var imgElement = document.getElementById('imagePreview');
                    imgElement.src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
</script>