@php
	use Illuminate\Support\Arr;
	use App\Models\Admin\Settings;
	use App\Models\Admin\PageCustomField;
@endphp

@extends('layouts.adminlayout')
@section('content')
<div class="header bg-primary pb-6">
	<div class="container-fluid">
		<div class="header-body">
			<div class="row align-items-center py-4">
				<div class="col-lg-6 col-7">
					<h6 class="h2 text-white d-inline-block mb-0">Manage Pages</h6>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Page content -->
<div class="container-fluid mt--6">
	<div class="row">
		<div class="col-xl-12 order-xl-1">
			<form method="post" action="{{ route('admin.pages.how-we-work') }}" class="form-validation">
				<div class="card">
					<!--!! FLAST MESSAGES !!-->
					@include('admin.partials.flash_messages')
					<div class="card-header">
						<div class="row align-items-center">
							<div class="col-8">
								<h3 class="mb-0">How We Work</h3>
							</div>
						</div>
					</div>
					<div class="card-body">
						{{ @csrf_field() }}
	                    <h6 class="heading-small text-muted mb-4">Section 1</h6>
						<div class="pl-lg-4">
							<div class="row">
								<div class="col-lg-12">
									<div class="form-group">
										<label class="form-control-label" for="input-first-name">Title</label>
										<input type="text" class="form-control" name="title" required placeholder="Title" value="">
										@error('title')
											<small class="text-danger">{{ $message }}</small>
										@enderror
									</div>
								</div>
								<div class="col-lg-12">
									<div class="form-group">
										<label class="form-control-label">Description</label>
										<textarea rows="2" class="form-control" placeholder="Description" name="description"></textarea>
										@error('description')
											<small class="text-danger">{{ $message }}</small>
										@enderror
									</div>	
								</div>
							</div>
						</div>
					</div>
				</div>

			  <div class="card">
				<div class="card-body">
					<h6 class="heading-small text-muted mb-4">Section 2</h6>
						<div class="pl-lg-4">
							<div class="append_addons_html how_we_work">
								<div class="add_addons_with_options">
									<div class="add_addons_dashed">
										<div class="add_menu_options_fields">
											<div class="custom_group_label">
												<div class="left_options_form">
													<div class="row">
														<div class="col-lg-6">
															<label class="form-control-label" for="input-title">Title</label>
														</div>
														<div class="col-lg-6">
															<label class="form-control-label" for="input-title">Description</label>
														</div>
													</div>
												</div>
											</div>
											@if(isset($how_we_work) && $how_we_work)
											@foreach($how_we_work as $key => $value)
											<div class="custom_group_option">
												<div class="left_options_form">
														<div class="left_f_group">
														<div class="form-group">
															<input type="text" class="form-control" name="name[how_we_work_page][{{ $key }}][title]" value="{{ $value['title'] }}" placeholder="Enter title" required><label 
															id="name[how_we_work_page][{{ $key }}][title]-error" for="name[how_we_work_page][{{ $key }}][title]" class="error"></label></div>
														</div>
														<div class="right_f_group">
														<div class="form-group"><input type="text" class="form-control"
																name="name[how_we_work_page][{{ $key }}][description]" value="{{ $value['description'] }}" placeholder="Enter Description" required><label
																id="name[how_we_work_page][{{ $key }}][description]-error" for="name[how_we_work_page][{{ $key }}][description]" class="error"></label></div>
														</div>
													</div>
													<div class="close_option remove"><a href="javascript:;" class="remove_create_addons_options" data-title="Remove" data-toggle="tooltip"><i class="far fa-times"></i></a></div>
													<div class="close_option add"><a href="javascript:;" class="btn-options create_addons_options" data-title="Add Item" data-toggle="tooltip"><i class="far fa-plus"></i></a></div>
												</div>
											@endforeach
											@else
											<div class="custom_group_option">
												<div class="left_options_form">
													<div class="left_f_group">
														<div class="form-group">
															<input type="text" class="form-control" name="name[how_we_work_page][0][title]" value="" placeholder="Enter title" required="">
															<label id="name[how_we_work_page][0][title]-error" for="name[how_we_work_page][0][title]" class="error"></label>
														</div>
													</div>
													<div class="right_f_group">
														<div class="form-group">
															<input type="text" class="form-control" name="name[how_we_work_page][0][description]" value="" placeholder="Enter url" required="">
															<label id="name[how_we_work_page][0][description]-error" for="name[how_we_work_page][0][description]" class="error"></label>
														</div>
													</div>
												</div>
												<div class="close_option remove">
													<a href="javascript:;" class="remove_create_addons_options section1_remove_addons" data-title="Remove" data-toggle="tooltip"><i class="far fa-times"></i></a>
												</div>
												<div class="close_option add">
													<a href="javascript:;" class="btn-options create_addons_options section1_create_addons" data-title="Add Item" data-toggle="tooltip"><i class="far fa-plus"></i></a>
												</div> 
											</div>
											@endif
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
			  </div>	

			  <div class="card">
				<div class="card-body">
					<h6 class="heading-small text-muted mb-4">Section 3</h6>
					<div class="pl-lg-4">
						<div class="row">
							<div class="col-lg-12">
								<div class="form-group">
									<label class="form-control-label" for="input-how_we_work_section_3_title">Title</label>
									<input type="text" class="form-control" name="name[how_we_work_section_3_title]" required placeholder="Title" value="{{ PageCustomField::get('how_we_work_section_3_title',$page->id) }}">
									@error('title')
									    <small class="text-danger">{{ $message }}</small>
									@enderror
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-12">
								<div class="form-group">
									<label class="form-control-label">Description</label>
									<textarea rows="2" class="form-control"  placeholder="Description" name="name[how_we_work_section_3_description]" required>{{ PageCustomField::get('how_we_work_section_3_description',$page->id) }}</textarea>
									@error('description')
									    <small class="text-danger">{{ $message }}</small>
									@enderror
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6">
								<div class="form-group">
									<label class="form-control-label" for="input-button_1_title">Button 1 Text</label>
									<input type="text" class="form-control" name="name[button_1_title]" required placeholder="Button Text" value="{{ PageCustomField::get('button_1_title',$page->id) }}">
									@error('title')
										<small class="text-danger">{{ $message }}</small>
									@enderror
								</div>
							</div>
							<div class="col-lg-6">
								<div class="form-group">
									<label class="form-control-label" for="input-button_1_link">Button 1 Link</label>
									<input type="text" class="form-control" name="name[button_1_link]" required placeholder="Button Link" value="{{ PageCustomField::get('button_1_link',$page->id) }}">
									@error('title')
										<small class="text-danger">{{ $message }}</small>
									@enderror
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6">
								<div class="form-group">
									<label class="form-control-label" for="input-button_2_title">Button 2 Text</label>
									<input type="text" class="form-control" name="name[button_2_title]" required placeholder="Button Text" value="{{ PageCustomField::get('button_2_title',$page->id) }}">
									@error('title')
										<small class="text-danger">{{ $message }}</small>
									@enderror
								</div>
							</div>
							<div class="col-lg-6">
								<div class="form-group">
									<label class="form-control-label" for="input-button_2_link">Button 2 Link</label>
									<input type="text" class="form-control" name="name[button_2_link]" required placeholder="Button Link" value="{{ PageCustomField::get('button_2_link',$page->id) }}">
									@error('title')
										<small class="text-danger">{{ $message }}</small>
									@enderror
								</div>
							</div>
						</div>
					</div>
					<div class="pl-lg-4">
						<div class="row">
							<div class="col-lg-6">
								<div class="form-group">
									<div 
										class="upload-image-section"
										data-type="image"
										data-multiple="false"
										data-path="pages"
										data-resize-large="1300*630"
										data-resize-medium="630*450"
										data-resize-small="450*194"
										
									>
										<div class="upload-section">
											<div class="button-ref mb-3">
												<button class="btn btn-icon btn-primary btn-lg" type="button">
									                <span class="btn-inner--icon"><i class="fas fa-upload"></i></span>
									                <span class="btn-inner--text">Upload Image</span>
								              	</button>
												  @include('admin.partials.recommended_size', ['width' => '1300', 'height' => "630 px"])
								            </div>
											<div class="progress d-none">
							                  <div class="progress-bar bg-default" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
							                </div>
							            </div>
						                <textarea class="d-none" name="image"></textarea>
						                <div class="show-section {{ !old('image') ? 'd-none' : "" }}">
						                	@include('admin.partials.previewFileRender', ['file' => old('image') ])
						                </div>
										<div class="fixed-edit-section">
											@include('admin.partials.previewFileRender', ['file' => $page->image, 'relationType' => 'pages.image', 'relationId' => $page->id ])
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<hr class="my-4" />
					<button type="submit" class="btn btn-sm py-2 px-3 btn-primary float-right">
							<i class="fa fa-save"></i> Submit
					</button>
				</div>
			  </div>
			</form>
		</div>
	</div>
</div>
@endsection