<x-admin.header />
<x-admin.sidebar />
<style>
	.input-field .img-upload-btn
	{
		margin: 10px;
	}
	td.col-img
	{
		display: flex;
	}
	td.col-img h6
	{
		position: relative;
		margin: 10px 0px 0px 10px !important;
	}

</style>

<main>
						<div class="main-content">
							<div class="row">
	                           	<div class="col-lg-12 col-12">
	                                <form id="EditBannerForm">
	                                	@csrf
	                                    <div class="login-form form-content">
	                                        <h4>Add Inner Banners</h4>
											<div class="input-field">
	                                            <label for="">Banner Title</label>
	                                            <div class="input-field">
                                                    <input type="hidden" name="BannerId" id="BannerId" value="{{ $banner->banner_id }}">
	                                                <input class="custom-input" type="text" name="UpdtBannerTitle" id="UpdtBannerTitle" value="{{ $banner->banner_title }}">
	                                            </div>
	                                        </div>
	                                        <div class="input-field">
	                                            <label for="">Banner Heading</label>
	                                            <div class="input-field">
                                                    <input type="hidden" name="BannerId" id="BannerId" value="{{ $banner->banner_id }}">
	                                                <input class="custom-input" type="text" name="UpdtBannerHead" id="UpdtBannerHead" value="{{ $banner->banner_heading }}">
	                                            </div>
	                                        </div>
											<div class="input-field">
	                                            <label for="">Banner Sub Heading</label>
	                                            <div class="input-field">
                                                    <input type="hidden" name="BannerId" id="BannerId" value="{{ $banner->banner_id }}">
	                                                <input class="custom-input" type="text" name="UpdtBannerSub" id="UpdtBannerSub" value="{{ $banner->banner_sub_heading }}">
	                                            </div>
	                                        </div>
	                                        <div class="input-field">
	                                            <label for="">Banner Description</label>
	                                            <div class="input-field">
	                                                <textarea class="custom-input ckeditor" type="text" name="UpdtBannerDesc" id="UpdtBannerDesc">{{ $banner->banner_description }}</textarea>
	                                                
	                                            </div>
	                                        </div>
											<div class="input-field">
	                                            <label for="">Banner Price</label>
	                                            <div class="input-field">
	                                                <textarea class="custom-input ckeditor" type="text" name="UpdtBannerPrice" id="UpdtBannerPrice">{{ $banner->banner_price }}</textarea>
	                                                
	                                            </div>
	                                        </div>
	                                        <br>
                                            @php
                                            	$images = json_decode($banner->banner_image);
                                            @endphp
                                            @if(!empty($images))
                                            <div class="input-field">
	                                        	<label>Previous Banner Image</label>
	                                        	<div class="img-upload-wrapper">
	                                        		@foreach($images as $image)
	                                        		<img src="{{ asset('storage/images/'.$image) }}" >
	                                        		@endforeach
	                                        		<input type="hidden" name="PrevBannerImage[]" id="PrevBannerImage[]" value="{{ $banner->banner_image }}">
	                                        	</div>
	                                        </div>
	                                        <div class="custom-checkbox">
		                                		<label for="">Remove Banner Image</label> 
		                                        <input type="checkbox" id="RemoveBannerImage" name="RemoveBannerImage">
		                                        <span class="checkmark"></span>
		                                    </div>
		                                    @endif
                                            <div class="input-field">
                                                <label>Change Banner Images</label>
                                                <div class="img-upload-wrapper">
                                                    <input class="img-upload" type="file" name="EditBannerImage[]" id="EditBannerImage" accept="image/png, image/jpeg" multiple>
                                                </div>
                                                <div class="btn-wrapper">
                                                    <label class="btn img-upload-btn" for="EditBannerImage">Select
                                                        Image</label>
                                                </div>
                                            </div>
                                            <!-- <div class="input-field">
                                                <label>Banner Video</label>
                                                <div class="img-upload-wrapper">
                                                    <input class="img-upload" type="file" name="BannerVideo" id="BannerVideo">
                                                </div>
                                                <div class="btn-wrapper">
                                                    <label class="btn img-upload-btn" for="BannerVideo">Select
                                                        Video</label>
                                                </div>
                                            </div> -->
                                            <div class="input-field">
                                                <label for="">Banner Status</label>
                                                <div class="custom-switch checked">
                                                    <input checked type="checkbox" name="BannerStatus">
                                                    <span class="circle"></span>
                                                    <span class="no"><i class="fa-light fa-xmark"></i></span>
                                                    <span class="yes"><i class="fa-light fa-check"></i></span>
                                                </div>
                                            </div>

	                                        <!-- <h6>* Required Fields</h6> -->
	                                        <div class="form-footer">
	                                            <button type="submit">Update Banner</button>
	                                        </div>
	                                    </div>
	                                </form>
	                            </div>
                            </div>
                        </div>


                        <!-- Insert Banners -->

                        <script>
                        	$(document).ready(function(){
                        		$("#EditBannerForm").on('submit',function(e){
                        			e.preventDefault();

                        			for ( instance in CKEDITOR.instances )
    								CKEDITOR.instances[instance].updateElement();

    								var data = new FormData(this);

    								$.ajax({
    									url: "{{ url('/update') }}",
    									method: "POST",
    									data: data,
    									cache: false,
    									contentType: false,
    									processData: false,
    									success:function(data)
    									{
    										if($.isEmptyObject(data.error))
											{
												toastr.success(data.success,"Updated",{timeOut: 1500});
												window.location = "{{ url('banner') }}";
											}
											else if(data.error.UpdtBannerHead)
											{
												toastr.error(data.error.UpdtBannerHead,"Error",{timeOut: 1500});
												return false;
											}
    									},
    									error:function()
    									{
    										toastr.error("SomeThing Went Wrong...","Error");
											return false;
    									},
    								});
                        		});
                        	});
                        </script>

                        <!-- Insert Banners Ends Here -->

<x-admin.footer />