@extends('frontend.layout.main')
@section('main-container')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<style>
.tablemainsection table.table tr th{vertical-align:middle;}
#mainmenu.menu > li > a{color:#000;}
.formmaincon input[type="file"] {font-size:14px;}
div.dataTables_wrapper div.dataTables_length label{font-size: 16px;font-family: Gilroy Medium;}
div.dataTables_wrapper div.dataTables_length select{font-family: Gilroy Medium;font-size: 14px;}
div.dataTables_wrapper div.dataTables_filter input{padding: 15px 7px;min-height: auto;}
div.dataTables_wrapper div.dataTables_filter label{font-size: 14px;font-family: Gilroy Medium;}

</style>
<main class="main">
<style>
	.alert
	{
		color:white;
		text-align: center;
	}
</style>

<div class="page-content">
<section class="pageheadingsection">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1>{{ $PageHeading }}</h1>
			</div>
		</div>
	</div>
</section>

<section class="customer-section pb-10-s appear-animate bgwhite homeaboutsection">
<div class="container">
<div class="row align-items-center">

<div class="col-md-12">
	<div class="formmaincon" id="">
		@if (isset($edit->p_name))
		<form method="POST" action="{{ route('product.update') }}" class="form" enctype="multipart/form-data">
		@else
		<form method="POST" action="{{ route('product.store') }}" class="form" enctype="multipart/form-data">
		@endif
		@csrf
			@if($errors->any())
				<div class="alert alert-danger">
					<ul>
						@foreach ($errors->all() as $error)
							<li>{{ $error }}</li>
						@endforeach
					</ul>
				</div>
			@endif
			@if(session('error'))
				<div class="alert alert-danger">
					{{ session('error') }}
				</div>
			@endif
			@if(session('success'))
				<div class="alert alert-success">
					{{ session('success') }}
				</div>
			@endif
			<div class="row">
				<div class="col-sm-6">
					<label>Category</label>
					<select class="form-control" name="categories" id="categories" required="">
						<option value="-1">Select Category</option>
						@foreach($categoriesParent as $category)
							<option value="{{ $category->id }}" {{ isset($edit->cat_id) && $edit->cat_id == $category->id ? 'selected' : '' }}>
								{{ $category->cat_name }}
							</option>
						@endforeach
					</select>
				</div>
				<input name="id" value="{{ isset($edit->id) ? $edit->id : ''}}" type="hidden"/>
				<div class="col-sm-6" id="SubCatSection">
				<label>Sub Category</label>
					<select class="form-control" name="addsubcategory" id="subcategories">
						<option value="-1">Select Sub Category</option>
												<!-- Options will be dynamically loaded here -->
					</select>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<label>Product</label>
					<input type="text" class="form-control" name="p_name" placeholder="Enter Product name" required="" value="{{ isset($edit->p_name) ? $edit->p_name : ''}}">
				</div>
				<div class="col-sm-6">
					<label>Price</label>
					<input type="text" class="form-control" name="price" placeholder="Enter Price"  required="" value="{{ isset($edit->price) ? $edit->price : ''}}">
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<label>Product Image</label>
					<input type="file" class="form-control" name="p_image" required="">
				</div>
				@if(isset($edit->p_image))
					<img src="{{ asset('products/' . $edit->p_image) }}" alt="{{ $edit->p_image }}" style="margin-top:20px; width: 200px; height: 200px;">
				@endif
			</div>
			
			<div class="row">
				<div class="col-sm-12">
				<button type="submit" class="btn btn-primary">Submit</button>
				</div>
			</div>
		</form>
	</div>
</div>

<div class="col-md-12">
	<div class="tablemainsection">
	<div class="table-responsive">
<table id="example" class="table table-striped table-bordered">
	<thead>
		<tr>
			<th>Category</th>
			<th>Sub Category</th>
			<th>Product Title</th>
			<th>Product Image</th>
			<th>Price</th>
			<th>Action</th>
		</tr>
	</thead>
	<tbody>
	
	@foreach($products as $product)
		<tr>
			<td>{{ $product->category->cat_name }}</td>
			<td>
			@if($product->sub_cat_id > 0)
				{{ $product->subcategory->cat_name }}
			@else
				-
			@endif
			</td>
			<td>{{ $product->p_name }}</td>
			<td> <img src="{{ asset('products/' . $product->p_image) }}" alt="{{ $product->p_name }}"> </td>
			<td>{{ $product->price }}</td>
			<td>
				<a href="{{ route('product.edit', $product->id) }}" class="btn btn-primary">Edit</a>
				<a href="{{ route('product.delete', $product->id) }}" class="btn btn-danger">Delete</a>
			</td>
		</tr>
	@endforeach	
	</tfoot>
</table>
	</div>
	</div>
</div>
</div>
</div>
</section>


</div>
</main>

@endsection

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // On change event for the "Category" dropdown
        $('#categories').on('change', function () {
            var categoryId = $(this).val();

            // Make an Ajax request to fetch subcategories
            $.ajax({
                url: "{{ url('/get-subcategories') }}/" + categoryId, // Adjust the route URL
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    // Clear existing options
                    $('#subcategories').empty();
					$('#SubCatSection').show();
					$('#subcategories').removeAttr('disabled');
                    // Populate the "Sub Category" dropdown with new options
					console.log(data.length);
					if(data.length > 0)
					{
						$.each(data, function (key, value) {
							$('#subcategories').append('<option value="' + value.id + '">' + value.cat_name + '</option>');
						});
					}
					else
					{
						$('#SubCatSection').hide();
					}
                },
                error: function (xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });
</script>