@extends('layouts.app')

@section('content')
<div class="card">
	<form id="form-edit" action="{{ route('products.update') }}" method="POST">
		<div class="card-header">
			<h5 class="card-title">Edit Product</h5>

			<button type="submit" class="btn btn-dark"><i class="fas fa-save"></i> Save</button>
		</div>

		<div class="card-body">
			<div class="container-fluid">
				<div class="form-group row">
					<label class="col-md-2 col-form-label">Name</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="name" value="{{ $product->name }}">
						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">SPU</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="spu" value="{{ $product->spu }}">
						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Available Unit</label>

					<div class="col-md-10">
						<input type="text" class="form-control" name="unit" value="{{ $product->unit }}">
						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Unit Price(Points)</label>

					<div class="col-md-10">
						<input type="number" class="form-control" name="unit_price" value="{{ $product->unit_price }}">
						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Subcategory</label>

					<div class="col-md-10">
						<select class="form-control" name="subcategory_id">
							<option selected disabled>Please select</option>
							@foreach ($subcategories as $subcategory)
							<option value="{{ $subcategory->id }}" @if ($subcategory->id == $product->subcategory_id) selected @endif>{{ $subcategory->name }}</option>
							@endforeach
						</select>

						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Brief Description</label>

					<div class="col-md-10">
						<textarea class="form-control" name="brief_description" rows="4">{{ $product->brief_description }}</textarea>
						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Full Description</label>

					<div class="col-md-10">
						<textarea class="form-control" name="full_description" rows="10">{{ $product->full_description }}</textarea>
						<small class="small text-muted">required | recommended to use some basic html tags.</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Type</label>

					<div class="col-md-10">
						<input type="radio" id="voucher" name="type" value="1" @if($product->type == 1) checked @endif>
						<label for="voucher">Voucher</label><br>
						<input type="radio" id="product" name="type" value="2" @if($product->type == 2) checked @endif>
						<label for="product">Product</label><br>
						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2">Show Product At Main Page</label>
					<div class="col-md-10">
						<input type="checkbox" id="main_page" name="main_page" value="1" @if($product->main_page) checked @endif @if($main_page_total >= 6 && !$product->main_page) disabled @endif>
						<small class="form-text text-muted">maximum 6 products at main page.</small> 
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Available From</label>

					<div class="col-md-10">
						<input type="datetime-local" id="start_date" name="start_date" value="{{ $product->start_date }}">
						<small class="form-text text-muted">required</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">End From</label>

					<div class="col-md-10">
						<input type="datetime-local" id="end_date" name="end_date" value="{{ $product->end_date }}">
						<small class="form-text text-muted">required</small>
					</div>
				</div>
			</div>
		</div>

		<input type="hidden" name="id" value="{{ $product->id }}">
	</form>
</div>
@endsection

@section('js')
<script>
	$('#form-edit').submit(function(e)
	{
		$.Event(e).preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(data)
		{
			showNoty(data);
		});
	});
</script>
@endsection