@extends('layouts.app')

@section('content')
<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item">
			<a href="{{ route('products.index') }}" class="text-decoration-none fw-bold">Products</a>
		</li>

		<li class="breadcrumb-item">
			<a href="{{ route('products.edit', ['id' => $product->id]) }}" class="text-decoration-none fw-bold">{{ $product->name }}</a>
		</li>
		
		<li class="breadcrumb-item active" aria-current="page">Images</li>
	</ol>
</nav>

<div class="card">
	<div class="card-header d-flex align-items-center justify-content-between">
		<h5 class="mb-0">Product Images</h5>

		<a href="{{ route('products.images.create', ['product_id' => $product->id]) }}" class="btn btn-outline-secondary">
			<i class="fas fa-plus"></i> New
		</a>
	</div>
	
	<div class="card-body">
		<div class="row">
		@if ($images->count())
			@foreach ($images as $image)
			<div class="col-md-4">
				<div class="position-relative">
					<div class="ratio ratio-4x3 mb-2">
						<img src="{{ $image->image }}" class="img-fluid img-thumbnail" alt="image #{{ $image->id }}">
					</div>

					<div class="position-absolute top-0 end-0">
						<a href="{{ route('products.images.edit', ['id' => $image->id]) }}" class="btn btn-sm btn-secondary text-white" title="Edit">
							<i class="far fa-edit"></i>
						</a>

						<button type="button" class="btn btn-sm btn-secondary text-white" data-bs-target="#modal-delete" data-id="{{ $image->id }}">
							<i class="far fa-trash-alt"></i>
						</button>
					</div>
				</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="btn-close" data-bs-dismiss="modal" aria-label="Close">
		  			<span aria-hidden="true">&times;</span>
				</button>
			</div>

			<div class="modal-body">

			</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)
	{
		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(res)
		{
			showNoty(res);

			if (res.status == 'success')
			{
				setTimeout(function()
				{
					location.reload();
				}, 1000);
			}
		});
	});

	$('[data-bs-target="#modal-delete"]').click(function()
	{
		const modal = $($(this).data('bs-target'));
		const id    = $(this).data('id')

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