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

@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.company.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 name="form" method="POST" action="{{ route($pagePayload->route->name, $pagePayload->route->params ?? []) }}" enctype="multipart/form-data" class="form-horizontal">
						@method($pagePayload->route->method)
						@csrf
						<input type="hidden" name="id" value="{{ $pagePayload->data->id ?? null }}"/>

						<div class="row">
							<div class="form-group col-4">
								<label class="control-label">Categoria</label>
								<select name="blog_category_id" class="form-control">
									<option value="">Selecione</option>
									@foreach ($pagePayload->comboBox->blogCategories as $category)
										<option value="{{ $category->id }}" {{ $category->id == (old('data.blog_category_id') ?? $pagePayload->data->blog_category_id ?? null) ? 'selected' : '' }}>{{ $category->name }}</option>
									@endforeach
								</select>
							</div>

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

							<div class="form-group col-4">
								<label class="control-label">Subtítulo</label>
								<input type="text" name="subtitle" maxlength="127" class="form-control" value="{{ old('data.subtitle') ?? $pagePayload->data->subtitle ?? null }}">
							</div>

							<div class="form-group col-4">
								<label class="control-label">Data de agendamento</label>
								<div class="input-group date">
									<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
									<input type="text" name="scheduling_date" class="form-control" value="{{ old('data.scheduling_date') ?? $pagePayload->data->scheduling_date ?? null }}" />
								</div>
							</div>

							<div class="form-group col-4">
								<div id="image_file" class="dropzone" data-name="image" style="height: 85px;"></div>
								<div id="image_file-thumbnails" class="dropzone-thumbnails"></div>
								<script>
									document.addEventListener('DOMContentLoaded', function() {
										const keyId = 'image_file'
										createMyDropzone(keyId, document.getElementById(keyId))
									})

									@if ($pagePayload->data->image ?? null)
										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($pagePayload->data->image) }}')
											dz.emit('complete', file)
										})
									@endif
								</script>
							</div>

							<div class="form-group col-12">
								<label class="control-label">Descrição</label>
								<textarea name="descr" class="form-control" maxlength="511">{{ old('data.descr') ?? $pagePayload->data->descr ?? null }}</textarea>
							</div>

							<div class="form-group col-12">
								<label class="control-label">Conteúdo</label>
								<textarea name="content" class="form-control" maxlength="16777215">{{ old('data.content') ?? $pagePayload->data->content ?? null }}</textarea>
							</div>
						</div>

						<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
