@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' => $image->product->id]) }}" class="text-decoration-none fw-bold">{{ $image->product->name }}</a>
		</li>

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

<div class="card">
	<form id="form-edit" action="{{ route('products.images.update') }}" method="POST">
		<div class="card-header d-flex align-items-center justify-content-between">
			<h5 class="mb-0">Edit Image</h5>

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

		<div class="card-body">
			<div class="container-fluid">
				<div class="row mb-3">
					<label class="col-lg-2 col-form-label">Image</label>

					<div class="col-lg-10">
						<img src="{{ $image->image }}" class="img-fluid img-thumbnail mb-2">
						<input type="file" class="d-none" name="image">

						<div class="input-group">
							<button type="button" class="btn btn-secondary text-white btn-browse"><i class="fas fa-folder-open"></i></button>
							<input type="text" class="form-control" disabled>
						</div>

						<div class="form-text">required | use same dimensions for all image->product images</div>
					</div>
				</div>

				<div class="row mb-3">
					<label class="col-lg-2 col-form-label">YouTube ID</label>

					<div class="col-lg-10">
						<input type="text" class="form-control" name="youtube_id" value="{{ $image->youtube_id }}">
						<div class="form-text">optional | example: https://www.youtube.com/watch?v=9r8VtP5kdoo "9r8VtP5kdoo" is the ID</div>
					</div>
				</div>
			</div>
			</div>

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

@section('js')
<script>
	$('#form-edit').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);
		});
	});
</script>
@endsection