@extends('admin.layouts.layout')
@section('title', $pagePayload->title)

@push('js')
	<script>
		function onSubmit(event) {
			event.preventDefault()

			const formData = new FormData(document.getElementById('myForm'))
			myDropzone.forEach(dz => dz.files.forEach(file => file.upload && formData.append(dz.element.dataset.name, file)))

			fetch(document.getElementById('myForm').action, {
				method: 'POST',
				headers: {},
				body: formData,
			})
				.then(response => response.json())
				.then(data => {
					if (data.status) {
						alert('Salvo com sucesso!')
						window.location.href = '{{ route('admin.siteManagement.index') }}'
					} else {
						alert('Erro ao salvar!')
					}
				})
				.catch(error => {
					console.error('error', error)
					alert('Erro ao salvar!')
				})
		}
	</script>
@endpush

@section('content')
	<div class="row wrapper border-bottom white-bg page-heading">
		<div class="col-lg-10">
			<h2>{{ $pagePayload->title }}</h2>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
				<li class="breadcrumb-item"><a href="{{ route('admin.siteManagement.index') }}">Lista</a></li>
				<li class="breadcrumb-item active"><strong>Formulário</strong></li>
			</ol>
		</div>
		<div class="col-lg-2 col-md-2 col-sm-2" style="padding-top: 30px; text-align: right"></div>
	</div>

	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="col-lg-12">
			<div class="ibox">
				<div class="ibox-content">
					<form id="myForm" name="myForm" method="POST" action="{{ route($pagePayload->route->name, $pagePayload->route->params ?? []) }}" enctype="multipart/form-data" class="form-horizontal" onsubmit="onSubmit(event)">
						@method($pagePayload->route->method)
						@csrf
						<input type="hidden" name="id" value="{{ $pagePayload->data->id ?? null }}"/>

						<div class="row">
							<div class="form-group col-12">
								<label class="control-label">Título</label>
								<input name="title" type="text" class="form-control" value="{{ old('data.title') ?? $pagePayload->data->title ?? null }}">
							</div>
						</div>

						@foreach ($pagePayload->components as $components)
							<hr/>
							<h3>{{ $components->label }}:</h3>
							@foreach ($components->fields as $fieldKey => $field)
								<h4>&nbsp;&nbsp;{{ $field->label }}:</h4>
								@if ($field->type === 'text')
									<div class="row">
										<div class="form-group col-12">
											<input name="components[{{$components->id}}][{{$field->id}}][{{$field->typeId}}][value]" type="text" class="form-control" value="{{ $field->fields->value }}">
										</div>
									</div>
								@elseif ($field->type === 'link')
									<div class="row">
										<div class="form-group col-6">
											<label class="control-label">URL</label>
											<input name="components[{{$components->id}}][{{$field->id}}][{{$field->typeId}}][href]" type="text" class="form-control" value="{{ $field->fields->href }}">
										</div>
										<div class="form-group col-6">
											<label class="control-label">Texto</label>
											<input name="components[{{$components->id}}][{{$field->id}}][{{$field->typeId}}][value]" type="text" class="form-control" value="{{ $field->fields->value }}">
										</div>
									</div>
								@elseif ($field->type === 'textarea')
									<div class="row">
										<div class="form-group col-12">
											<textarea name="components[{{$components->id}}][{{$field->id}}][{{$field->typeId}}][value]" class="form-control">{{ $field->fields->value }}</textarea>
										</div>
									</div>
								@elseif ($field->type === 'image')
									<div class="row">
										<div class="form-group col-12">
											<div id="{{$fieldKey}}_file" class="dropzone" data-name="components[{{$components->id}}][{{$field->id}}][{{$field->typeId}}][image]"></div>
											<div id="{{$fieldKey}}_file-thumbnails" class="dropzone-thumbnails"></div>
											<script>
												document.addEventListener('DOMContentLoaded', function() {
													const keyId = '{{$fieldKey}}_file'
													createMyDropzone(keyId, document.getElementById(keyId))
												})

												@if ($field->fields->src)
													document.addEventListener('DOMContentLoaded', function() {
														const dz = myDropzone[myDropzone.length - 1]
														const file = { name: '{{$field->fields->alt}}', size: 0, status: 'success' }
														dz.emit('addedfile', file)
														dz.emit('thumbnail', file, '{{ asset($field->fields->src) }}')
														dz.emit('complete', file)
													})
												@endif
											</script>
										</div>
									</div>
								@endif
							@endforeach
						@endforeach

						<div class="hr-line-dashed"></div>
						{{-- <pre>{{ collect($pagePayload)->toJson(JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
						<div class="hr-line-dashed"></div> --}}

						<div class="form-group">
							<div class="col-sm-12 text-right">
								<button class="btn btn-primary" type="submit">Salvar</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
