@push('js')
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script type="module" src="{{ asset('components/summernote/summernote-bs4.js') }}"></script>
@endpush
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset('components/summernote/summernote-bs4.css') }}">
<div class="header">
    @include('core::admin._button-back', ['url' => $model->indexUrl(), 'title' => __('Chapters')])
    @include('core::admin._title', ['default' => __('New chapter')])
    @component('core::admin._buttons-form', ['model' => $model])
    @endcomponent
</div>

<div class="content">
    @include('core::admin._form-errors')

    <file-manager related-table="{{ $model->getTable() }}" :related-id="{{ $model->id ?? 0 }}"></file-manager>
    <file-field type="image" field="image_id" :init-file="{{ $model->image ?? 'null' }}"></file-field>
    <files-field :init-files="{{ $model->files }}"></files-field>

    @include('core::form._title-and-slug')
    <div class="mb-3">
        {!! TranslatableBootForm::hidden('status')->value(0) !!}
        {!! TranslatableBootForm::checkbox(__('Published'), 'status') !!}
		
		{!! BootForm::hidden('international')->value(0) !!}
        {!! BootForm::checkbox(__('International'), 'international') !!}
    </div>
	
	<div class="row">
		<div class="col-sm-4">
			{!! BootForm::select(__('Parent Chapter (if you want to make sub-chapter then choose chapter here)'), 'parent_id')->options([''=>'Select']+TypiCMS\Modules\Chapters\Models\Chapter::published()->pluck('title','id')->toArray())->selected(!!$model->id ? $model->parent_id : '') !!}
		</div>
	</div>
	<div id="additionalFields">
		<div id="fieldsContainer">
			@if (is_array($model->staffs))
			@if ($model->staffs)
				@foreach ($model->staffs as $staff)
					<div class="row mb-3 field-row">
						<div class="col-sm-4">
							<input type="text" name="staffs[]" class="form-control" placeholder="Please make Team Id here" value="{{$staff}}">
						</div>
						<div class="col-sm-4">
							<button type="button" class="btn btn-danger remove-row">Remove</button>
						</div>
				
					</div>
				@endforeach
			@else 
			<div class="row mb-3 field-row">
				<div class="col-sm-4">
					<input type="text" name="staffs[]" class="form-control" placeholder="Please make Team Id here">
				</div>
				<div class="col-sm-4">
					<button type="button" class="btn btn-danger remove-row">Remove</button>
				</div>
				
			</div>
			@endif	
			@endif	
		</div>
			<button type="button" id="addRow" class="btn btn-primary">Add Team</button>
		
	</div>
	{!! BootForm::textarea(__('Summary'), 'summary')->addClass('summernote') !!}
	{!! BootForm::text(__('Meta title'), 'meta_title') !!}
	{!! BootForm::textarea(__('Meta description'), 'meta_description')->rows(4) !!}
	</div>
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script>
	$(document).ready(function () {
		$('.summernote').summernote({
			height: 300, // Set editor height
		});
		$('#addRow').on('click', function () {
			const newRow = '<div class="row mb-3 field-row"><div class="col-sm-4"><input type="text" name="staffs[]" class="form-control" placeholder="Please make Staff Id here"></div><div class="col-sm-4"><button type="button" class="btn btn-danger remove-row">Remove</button></div></div>';
			$('#fieldsContainer').append(newRow);
		});
		// Remove a row
		$(document).on('click', '.remove-row', function () {
			$(this).closest('.field-row').remove();
		});
		
	});
</script>