{{ Form::open(array('url' => $action, 'method' => $method, 'files' => true,'enctype'=>'multipart/form-data')) }}

@if (isset($errors->all()[0]))
	<div class="alert alert-danger">
		{{ $errors->all()[0] }}
	</div>
@endif
<div class="row">
	<div class="col-md-6 col-12">
		{{ Form::defName('title', "Nama Event", $item->title, ['required', 'id' => 'title']) }}
	</div>
	<div class="col-md-6 col-12">
		{{ Form::defDropdown('status', "Status", $status, $item->status, ['required']) }}
	</div>
</div>
<div class="row">
	 <div class="col-sm-3">
	 	{{ Form::defDate('start_date', "Tanggal Mulai Event", $item->start_date, ['required']) }}
	 </div>
     <div class="col-sm-3">
        {{ Form::defDate('end_date', "Tanggal Berakhir Event", $item->end_date, []) }}
    </div>
	<div class="col-sm-3">
		{{ Form::deftimeBetween('start_time','end_time', "Waktu Event", $item->start_time,$item->end_time, ['required']) }}
	</div>
	<div class="col-sm-3">
		{{ Form::defName('sks', "Jumlah SKS", $item->sks, ['required']) }}
	</div>
</div>
<div class="row">
	<div class="col-md-12 col-12">
		{{ Form::defdescription('description', "Deksripsi", $item->description, ['required']) }}
	</div>
	<div class="col-md-12 col-12">
		{{ Form::defName('location', "Lokasi/Gedung", $item->location, ['required']) }}
	</div>
</div>
<div class="row">
	<div class="col-md-6 col-12">
		<button type="button" class="btn btn-info btn-sm" id="btn-add-moderator">Tambah Moderator</button>
		<input type="hidden" name="moderator" id="moderator" value="{{$item->moderator}}" readonly="">
		<table class="table" id="table-moderator">
			<thead>
				<tr>
					<th width="75px">Foto</th>
					<th>Nama</th>
					<th>Deskripsi</th>
					<th width="45px">Action</th>
				</tr>
			</thead>
			<tbody>
			@if(isset($moderator))

				@foreach($moderator as $key => $value)
				<tr id="moderator-{{$key}}">
					<td><img class="avatar-img rounded-circle" src="{{$value->image}}" /></td>
					<td>{{$value->name}}</td>
					<td>{{$value->description}}</td>
					<td>
						<button type="button" data-id="{{$key}}" class="btn btn-sm btn-outline-danger btn-icon btn-delete">
							<i class="mdi mdi-delete"></i>
						</button>
					</td>
				</tr>
				@endforeach

			@endif
			</tbody>
		</table>
	</div>
	<div class="col-md-6 col-12">
		<button type="button" class="btn btn-info btn-sm" id="btn-add-narasumber">Tambah Narasumber</button>
		<input type="hidden" name="narasumber" id="narasumber" value="{{$item->narasumber}}" readonly="">
		<table class="table" id="table-narasumber">
			<thead>
				<tr>
					<th width="75px">Foto</th>
					<th>Nama</th>
					<th>Deskripsi</th>
					<th width="45px">Action</th>
				</tr>
			</thead>
			<tbody>
			@if(isset($narasumber))

				@foreach($narasumber as $key => $value)
				<tr id="narasumber-{{$key}}">
					<td><img class="avatar-img rounded-circle" src="{{$value->image}}" /></td>
					<td>{{$value->name}}</td>
					<td>{{$value->description}}</td>
					<td>
						<button type="button" data-id="{{$key}}" class="btn btn-sm btn-outline-danger btn-icon btn-delete">
							<i class="mdi mdi-delete"></i>
						</button>
					</td>
				</tr>
				@endforeach

			@endif
			</tbody>
		</table>

	</div>
	<div class="col-12"><hr /></div>
	<div class="col-md-6 col-12">
		{{ Form::defImageUpload('image',"Foto Event", $item->attachments)}}

	</div>
	<div class="col-md-6 col-12">
		<h4>Harga Agenda</h4>
		{{ Form::defCurrency('price_member', "Harga Member", (isset($item->price_member)) ? $item->price_member : 0, ['required','id="price_member"'],true) }}
		{{ Form::defCurrency('price_nonmember', "Harga NonMember", (isset($item->price_nonmember)) ? $item->price_nonmember : 0, ['required','id="price_nonmember"'],true) }}
        {{ Form::defCurrency('price_special', "Harga Khusus", (isset($item->price_special)) ? $item->price_special : 0, ['required','id="price_special"'],true) }}
	</div>
</div>

{{ Form::defSubmitDefault('SIMPAN') }} <a href="{{url()->previous()}}" class="btn btn-danger btn-rounded">Batal</a>

{{ Form::close() }}

<x-modal.search-user />
<x-modal.search-user :idData="'moderator-model'" :classData="'moderator'" />

@push('scripts')
<script src="{{ asset('libraries/input-mask/inputmask.js') }}"></script>
<script src="{{ asset('libraries/input-mask/jquery.inputmask.js') }}"></script>
<script src="{{ asset('libraries/input-mask/inputmask.extensions.js') }}"></script>

<script type="text/javascript">
	$(document).ready(function(){
		// $(".slug-mask").inputmask({alias: "slugs"})

		$("#title").blur(function(){
			var title = $(this).val()
			var slug = title.replace(/ /g, '-').toLowerCase()

			$("#slug").val(slug)
		})

		$("#table-narasumber").on('click','.btn-delete',function(){
			var id = $(this).attr('data-id');
			var narasumber = JSON.parse($("#narasumber").val());

			// narasumber = narasumber.filter(function(e) { return e.name !== parseInt(id) })
			narasumber.splice(id,1);

			// narasumber.push(parseInt(id));
			$("#narasumber").val(JSON.stringify(narasumber));
			initNarasumber();
			initModerator();
		})

		$("#table-moderator").on('click','.btn-delete',function(){
			var id = $(this).attr('data-id');
			var narasumber = JSON.parse($("#moderator").val());

			// narasumber = narasumber.filter(function(e) { return e.name !== parseInt(id) })
			narasumber.splice(id,1);

			// narasumber.push(parseInt(id));
			$("#moderator").val(JSON.stringify(narasumber));
			initModerator();
		})

		$("#btn-add-narasumber").click(function(){
			// $("#search_user").val(null);
			// $("#search_user").focus();
			$("#narasumber-image").val(null);
			$("#narasumber-name").val(null);
			$("#search-user-modal img").attr('src','http://localhost:8000/images/no-image-avatar.png');
			$("#search-user-modal").modal('show');
		})

		$("#btn-add-moderator").click(function(){
			// $("#search_user").val(null);
			// $("#search_user").focus();
			$("#moderator-image").val(null);
			$("#moderator-name").val(null);
			$("#moderator-model img").attr('src','http://localhost:8000/images/no-image-avatar.png');
			$("#moderator-model").modal('show');
		})

		$("#btn-set-narasumber").click(function(){
			var image = $("#narasumber-image").val();
			var name = $("#narasumber-name").val();
			var description = $("#narasumber-description").val();
			var validate = true;
			if(image == ""){
				validate = false;
				toastr.warning("image masih kosong");
			}
			if(name.length == 0){
				validate = false;
				toastr.warning("nama masih kosong");
			}

			if(description.length == 0){
				validate = false;
				toastr.warning("deskripsi masih kosong");
			}

			if(validate){
				if($("#narasumber").val() == ""){
					var narasumber = JSON.parse("[]");
				}else{
					var narasumber = JSON.parse($("#narasumber").val());
				}

				var data = {name:name, image:image,description:description};
				narasumber.push(data);
				$("#narasumber").val(JSON.stringify(narasumber));
				$("#search-user-modal").modal('hide');
				initNarasumber();
			}

		})

		$("#btn-set-moderator").click(function(){
			var image = $("#moderator-image").val();
			var name = $("#moderator-name").val();
			var description = $("#moderator-description").val();
			var validate = true;
			if(image == ""){
				validate = false;
				toastr.warning("image masih kosong");
			}
			if(name.length == 0){
				validate = false;
				toastr.warning("nama masih kosong");
			}

			if(description.length == 0){
				validate = false;
				toastr.warning("deskripsi masih kosong");
			}

			if(validate){
				if($("#moderator").val() == ""){
					var moderator = JSON.parse("[]");
				}else{
					var moderator = JSON.parse($("#moderator").val());
				}

				var data = {name:name, image:image,description:description};
				moderator.push(data);
				$("#moderator").val(JSON.stringify(moderator));
				$("#moderator-model").modal('hide');
				initModerator();
			}

		})
	})

	function initNarasumber(){
		if($("#narasumber").val() == ""){
			var narasumber = JSON.parse("[]");
		}else{
			var narasumber = JSON.parse($("#narasumber").val());
		}

		$("#table-narasumber tbody").empty();

		for(var i = 0; i<narasumber.length; i++){
			var image = '<img class="avatar-img rounded-circle" src="'+narasumber[i].image+'" />';
			var name = narasumber[i].name;
			var description = narasumber[i].description;
			var button = '<button type="button" data-id="'+i+'" class="btn btn-sm btn-outline-danger btn-icon btn-delete"><i class="mdi mdi-delete"></i></button>';
			$("#table-narasumber tbody").append("<tr><td>"+image+"</td><td>"+name+"</td><td>"+description+"</td><td>"+button+"</td></tr>");
		}
	}

	function initModerator(){
		if($("#moderator").val() == ""){
			var moderator = JSON.parse("[]");
		}else{
			var moderator = JSON.parse($("#moderator").val());
		}

		$("#table-moderator tbody").empty();

		for(var i = 0; i<moderator.length; i++){
			var image = '<img class="avatar-img rounded-circle" src="'+moderator[i].image+'" />';
			var name = moderator[i].name;
			var description = moderator[i].description;
			var button = '<button type="button" data-id="'+i+'" class="btn btn-sm btn-outline-danger btn-icon btn-delete"><i class="mdi mdi-delete"></i></button>';
			$("#table-moderator tbody").append("<tr><td>"+image+"</td><td>"+name+"</td><td>"+description+"</td><td>"+button+"</td></tr>");
		}
	}
</script>
@endpush