@extends('layouts.app')

@section('content')
<div class="card">
	<div class="card-header">
		<h5 class="card-title">{{ $product->name }}'s Images</h5>

		<a href="{{ route('products.images.create', ['product_id' => $product->id]) }}" class="btn btn-outline-dark">
			<i class="fas fa-plus"></i> New
		</a>
	</div>
	
	<div class="card-body">
		@if ($images->count())
		<div class="grid gap-3 large-4">
			@foreach ($images as $image)
			<div>
				<div class="overlay">
					<img src="{{ $image->image }}" class="img-fluid overlay-image" alt="image #{{ $image->id }}">

					<div class="overlay-body">
						<div data-image="{{ $image }}">
							<a href="{{ route('products.images.edit', ['id' => $image->id]) }}" class="btn btn-sm btn-dark" title="Edit">
								<i class="far fa-edit"></i>
							</a>

							<button type="button" class="btn btn-sm btn-dark" data-target="#modal-delete">
								<i class="far fa-trash-alt"></i>
							</button>
						</div>
					</div>
				</div>
				<div>
					@if($image->main_image) <label>Main Image</label> @endif
				</div>
			</div>
			
			
			@endforeach
		</div>
		@else
		<p class="mb-0">No record</p>
		@endif
	</div>
</div>

<div id="modal-delete" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Confirm Deletion</h5>

				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
		  			<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<form id="form-delete" action="{{ route('products.images.destroy') }}" method="POST">
				<div class="modal-footer">
					<input type="hidden" name="id">
					<button type="submit" class="btn btn-red">Confirm</button>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection

@section('js')
<script>
	$('#form-delete').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')
			{
				setTimeout(function()
				{
					location.reload();
				}, 1000);
			}
		});
	});

	$('[data-target="#modal-delete"]').click(function()
	{
		let modal = $($(this).data('target'));
		let image = $(this).parent().data('image');

		modal.find('[name="id"]').val(image.id).end()
			 .modal('show');
	});
</script>
@endsection