@extends('layouts.app')

@section('content')
<div class="card">
	<form id="form-create" action="{{ route('slideshows.store') }}" method="POST">
		<div class="card-header">
			<h5 class="card-title">New Slideshow</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">Category</label>

					<div class="col-md-10">
						<select class="form-control" name="product_category_id">
							<option selected value="">Select one</option>
							@foreach ($categories as $category)
							<option value="{{ $category->id }}" data-category="{{ $category }}">{{ $category->name }}</option>
							@endforeach
						</select>
						<small class="form-text text-muted">optional</small>
					</div>
				</div>

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

					<div class="col-md-10">
						<select class="form-control" name="product_id">
							<option selected value="">Select one</option>
							@foreach ($products as $product)
							<option value="{{ $product->id }}" data-product="{{ $product }}">{{ $product->name }}</option>
							@endforeach
						</select>
						<small class="form-text text-muted">optional | select a category or a product to link the slideshow to them. The name and description will be auto filled into the header and heading fields below.</small>
					</div>
				</div>

				<hr>

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

					<div class="col-md-10">
						<input type="text" class="form-control" name="topic">
						<small class="form-text text-muted">optional | example: New Arrivals</small>
					</div>
				</div>

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

					<div class="col-md-10">
						<input type="text" class="form-control" name="header">
						<small class="form-text text-muted">optional | example: White Comfy Sweater</small>
					</div>
				</div>

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

					<div class="col-md-10">
						<textarea class="form-control" name="heading" rows="4"></textarea>
						<small class="form-text text-muted">optional | example: Winter is coming, come and grab this comfy sweater that will keep you warm now!</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Image (Web)</label>

					<div class="col-md-10">
						<img class="img-fluid d-none mb-2">
						<input type="file" class="d-none" name="image_web">

						<div class="input-group">
							<div class="input-group-prepend">
								<button type="button" class="btn btn-dark btn-browse"><i class="fas fa-folder-open"></i></button>
							</div>

							<input type="text" class="form-control" disabled>
						</div>

						<small class="form-text text-muted">required | at least width of 1920px | use same height for all slideshow images for web</small>
					</div>
				</div>

				<div class="form-group row">
					<label class="col-md-2 col-form-label">Image (Mobile)</label>

					<div class="col-md-10">
						<img class="img-fluid d-none mb-2">
						<input type="file" class="d-none" name="image_mobile">

						<div class="input-group">
							<div class="input-group-prepend">
								<button type="button" class="btn btn-dark btn-browse"><i class="fas fa-folder-open"></i></button>
							</div>

							<input type="text" class="form-control" disabled>
						</div>

						<small class="form-text text-muted">required | at least 992px | use same height for all slideshow images for mobile | use larger height to fit more content</small>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
@endsection

@section('js')
<script>
	$('[name="product_id"]').change(function()
	{
		let product = $(this).find('option:selected').data('product');

		if (product)
		{
			$('[name="header"]').val(product.name);
			$('[name="heading"]').val(product.brief_description);

			$('[name="product_category_id"]').find('option').first().prop('selected', true);
		}
	});

	$('[name="product_category_id"]').change(function()
	{
		let category = $(this).find('option:selected').data('category');

		if (category)
		{
			$('[name="header"]').val(category.category);
			$('[name="heading"]').val(category.description);

			$('[name="product_id"]').find('option').first().prop('selected', true);
		}
	});

	$('#form-create').submit(function(e)
	{
		$.Event(e).preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: new FormData(this),
			contentType: false,
			processData: false,
			dataType: 'json'

		}).done(function(data)
		{
			showNoty(data);

			if (data.status == 'success')
			{
				form[0].reset();
				form.find('img').attr('src', '').addClass('d-none');
			}
		});
	});
</script>
@endsection