@extends('layouts.admin') 
@section('content-title')
	{{ __('data.New Entity') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.data.new.entity')}}
@endsection
@section('css')
<link href="/assets/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style type="text/css">
	/* Select2 Categories */
    .select2 {
        /*width: 100% !important;*/
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #0f9df7;
        border-color:  #0f9df7;
        color: white;
        padding-bottom: 4px;
        font-weight: 700;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        color: white;
    }
</style>
@endsection
@section('content')
<div class="card-box tilebox-one noradius">
	<form autocomplete="off" action="{{route('admin.data.entity.store')}}" method="post" class="entityForm" id="entityForm" enctype="multipart/form-data">
		@csrf
		<input type="hidden" name="parent_id" value="{{$parent_id}}">
		<div class="form-group row">
			<div class="col-md-3"></div>
			<div class="col-md-1">
				<label for="datatype ">Type</label>
			</div>
			<select class="form-control select2 col-md-4" id="datatype" name="type"> 
			@foreach($dataTypes as $dataType)  
				<option value="{{$dataType->name}}">{{$dataType->name}}</option>
			@endforeach
			</select>
		</div>
		<div id="reste"></div>
	</form>

</div>
@endsection
@section('js')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script src="/assets/plugins/select2/js/select2.min.js"></script>
<script type="text/javascript">
	$(function() {
	    $('.select2').select2();
	    $('.select2').on('change', function () {
	    	var datatypeName = $(this).val();
	    	$.ajax({
			  type: "POST",
			  url: '{{route("admin.data.entity.form")}}',
			  data: { name: datatypeName},
			  success: function (data) {
			  	$("#reste").html(data);
			  	$('.select3').select2({
		            tags: true,
		        });
		        $('.date').daterangepicker({
		            buttonClasses: ['btn btn-default'],
		            applyClass: 'btn-small btn-primary',
		            cancelClass: 'btn-small',
		            singleDatePicker: true,
		    		showDropdowns: true,
		            autoUpdateInput: false,
		            // minDate: moment(),
		            locale: {
		                cancelLabel: 'Clear',
		                format: 'DD/M/Y hh:mm A',
		                daysOfWeek: [
		                    '{{ __("daysOfWeek.Su")}}',
		                    '{{ __("daysOfWeek.Mo")}}',
		                    '{{ __("daysOfWeek.Tu")}}',
		                    '{{ __("daysOfWeek.We")}}', 
		                    '{{ __("daysOfWeek.Th")}}', 
		                    '{{ __("daysOfWeek.Fr")}}',
		                    '{{ __("daysOfWeek.Sa")}}'],
		                monthNames: [
		                    '{{ __("months.January")}}',
		                    '{{ __("months.February")}}',
		                    '{{ __("months.March")}}',
		                    '{{ __("months.April")}}',
		                    '{{ __("months.May")}}',
		                    '{{ __("months.June")}}',
		                    '{{ __("months.July")}}',
		                    '{{ __("months.August")}}',
		                    '{{ __("months.September")}}',
		                    '{{ __("months.October")}}',
		                    '{{ __("months.November")}}',
		                    '{{ __("months.December")}}'],
		            },
		        }, function(start, end) {
		            $('.date').val(start.format('YYYY/MM/DD'));
		        });
			  },
			  dataType: "html"
			});
	    });

	});
</script>
@endsection