@extends('layouts.app')
@section('content')
<div>
    <h1 class="page-header text-overflow">{{ translate('Edit Banner') }}</h1>
</div>
<div class="row">
        <div class="col-sm-12">
            <a href="{{route('generalsettings.bannerhome')}}" class="btn btn-rounded btn-info pull-right">{{translate('Manage Templates')}}</a>
        </div>
    </div>

   <br>
<div class="row">
	<div class="col-lg-8 col-lg-offset-2">
		<form class="form form-horizontal mar-top" action="{{route('generalsettings.updatebanner')}}" method="POST" enctype="multipart/form-data" id="choice_form">
			<input name="_method" type="hidden" value="POST">
			<input type="hidden" name="id" value="{{ $product->id }}">
			<input type="hidden" name="published" value="{{ $product->published }}">
			@csrf
			<div class="panel">
				<div class="panel-heading bord-btm">
					<h3 class="panel-title">{{translate('Template Information')}}</h3>
				</div>
				<div class="panel-body">
					<div class="form-group" id="category">
		                <label class="col-sm-3">{{translate('Category')}}*</label>
		                <div class="col-sm-9">
		                    <select class="form-control demo-select2-placeholder" name="category_id" id="category_id" required>
		                        @foreach($categories as $category)
		                            <option value="{{$category->id}}" {{$product->category==$category->id?'selected':''}}>{{$category->name}}</option>
		                        @endforeach
		                    </select>
		                </div>
		            </div>

		            <div class="form-group" id="subcategory">
                        <label class="col-sm-3">{{translate('Subcategory')}}</label>
                        <div class="col-lg-9">
                            <select class="form-control demo-select2-placeholder" name="subcategory_id"
                                    id="subcategory_id" required>

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

					<div class="form-group">
                        <label class="col-sm-3">{{translate('URL')}}*</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" name="name" placeholder="{{translate('Product Name')}}" value="{{$product->url}}" required>
                        </div>
                    </div>

                    <div class="form-group">
	                <label class="col-sm-3" for="url">{{translate('Image')}}<strong>(310px*310px)*</strong></label>    <div class="col-sm-9">
	                        <input type="file" id="banner" name="banner" class="form-control">
	                    </div>
	                    <br>
	                    <img loading="lazy" class="img-md" src="{{ my_asset($product->photo)}}" alt="banner Image">
	                </div>
                    

			
			
			
					
				</div>
			</div>
			<div class="mar-all text-right">
				<button type="submit" name="button" class="btn btn-info">{{ translate('Update') }}</button>
			</div>
		</form>
	</div>
</div>

@endsection

@section('script')

<style type="text/css">
	.select2-selection__choice[title="Weight"] .select2-selection__choice__remove {
    display: none;
}
</style>

<script type="text/javascript">
	$(document).ready(function(){
		get_subcategories_by_category();
		
	});

	$('#category_id').on('change', function () 
		{
        	// alert('check');
            get_subcategories_by_category();
        });
	
	 	function get_subcategories_by_category() {
	 		// alert('d');
	            var category_id = $('#category_id').val();
	            $.post('{{ route('subcategories.get_subcategories_by_category') }}', {
	                _token: '{{ csrf_token() }}',
	                category_id: category_id
	            }, function (data) {
	            	// console.log(data);
	                $('#subcategory_id').html(null);
	                for (var i = 0; i < data.length; i++) {
	                    $('#subcategory_id').append($('<option>', {
	                        value: data[i].id,
	                        text: data[i].name
	                    }));
	                }
	                $("#subcategory_id > option").each(function () {
	                    if (this.value == '{{$product->subcategory}}') {
	                        $("#subcategory_id").val(this.value).change();
	                    }
	                });

	                $('.demo-select2').select2();

	 
	            });
	        }
        
    </script>
@endsection