@extends('layout')

@section('title','Dashboard')
@section('css')
 <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css" rel="stylesheet">
    
    <style>
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .btn-submit {
            background: #28a745;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
        }
        .btn-submit:hover {
            background: #218838;
        }
        .note-editor {
            margin-top: 10px;
        }
    </style>
@endsection

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4><span class="font-weight-semibold">Dashboard</span></h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

    <div class="content">

		<div class="card">
			<div class="card-header header-elements-inline">
			</div>
			<div class="card-body">
				<form id="submit-form" class="form-validate-jquery" action="{{ route('articles.store') }}" method="post">
					@csrf
					<fieldset class="mb-3">
						<legend class="text-uppercase font-size-sm font-weight-bold">Data</legend>

                        <div class="form-group row">
							<label class="col-form-label col-lg-2">Judul Artikel: <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<input type="text" id="title" name="title" class="form-control border-teal border-1 @error('title') is-invalid @enderror" placeholder="title" required autocomplete="off" value="{{ old('title') }}">
							</div>
						</div>
                        <div class="form-group row">
							<label class="col-form-label col-lg-2">Konten: <span class="text-danger">*</span> </label>
							<div class="col-lg-10">
								<textarea id="content" name="content"></textarea>
							</div>
						</div>

					</fieldset>
					<div class="text-right">
						<a href="{{ url('/users')}}" class="btn btn-light">Kembali <i class="icon-undo"></i></a>
						<button type="submit" class="btn btn-primary submitBtn">Simpan <i class="icon-paperplane ml-2"></i></button>
					</div>
				</form>
			</div>

		</div>
    </div>

@endsection

@section('js')

<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3_tooltip.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/bootstrap_multiselect.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js') }}"></script>
<script src="{{asset('global_assets/js/plugins/editors/summernote/summernote.min.js') }}"></script>
{{-- <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script> --}}
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js') }}"></script>

<script src="{{asset('assets/js/app.js') }}"></script>
<!-- /theme JS files -->

<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/visualization/d3/d3.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/visualization/c3/c3.min.js')}}"></script>
<!-- /Theme JS files -->

<script>
	$(document).ready(function() {
		$('#content').summernote({
			height: 400,
			toolbar: [
				['style', ['style']],
				['font', ['bold', 'underline', 'clear']],
				['fontname', ['fontname']],
				['color', ['color']],
				['para', ['ul', 'ol', 'paragraph']],
				['table', ['table']],
				['insert', ['link', 'picture', 'video']],
				['view', ['fullscreen', 'codeview', 'help']]
			],
			callbacks: {
				onImageUpload: function(files) {
					uploadSummernoteImage(files[0]);
				},
				onMediaDelete: function(target) {
					deleteSummernoteImage(target[0].src);
				}
			}
		});

		function uploadSummernoteImage(file) {
			const formData = new FormData();
			formData.append('image', file);
			
			$.ajax({
				url: '{{ route("summernote.upload") }}',
				method: 'POST',
				data: formData,
				processData: false,
				contentType: false,
				headers: {
					'X-CSRF-TOKEN': '{{ csrf_token() }}'
				},
				success: function(response) {
					if (response.success) {
						$('#content').summernote('insertImage', response.url);
					} else {
						alert('Upload gambar gagal: ' + response.message);
					}
				},
				error: function(xhr, status, error) {
					alert('Error uploading image: ' + error);
				}
			});
		}

		function deleteSummernoteImage(src) {
			if (confirm('Hapus gambar ini?')) {
				$.ajax({
					url: '{{ route("summernote.delete") }}',
					method: 'DELETE',
					data: {
						src: src
					},
					headers: {
						'X-CSRF-TOKEN': '{{ csrf_token() }}'
					},
					success: function(response) {
						console.log(src)
						console.log(response)
						console.log('Gambar berhasil dihapus');
					},
					error: function(xhr, status, error) {
						console.log('Error deleting image: ' + error);
					}
				});
			}
		}
	});
</script>

<script type="text/javascript">
	$( document ).ready(function() {

		// Default style
		@if(session('error'))
		new PNotify({
			title: 'Error',
			text: '{{ session('error') }}.',
			icon: 'icon-blocked',
			type: 'error'
		});
		@endif
		@if ( session('success'))
		new PNotify({
			title: 'Success',
			text: '{{ session('success') }}.',
			icon: 'icon-checkmark3',
			type: 'success'
		});
		@endif

	});
</script>
@endsection