@extends("la.layouts.app")

@section("contentheader_title", "Configuración")
@section("contentheader_description", "")
@section("section", "Configuración")
@section("sub_section", "")
@section("htmlheader_title", "Configuración")

@section("headerElems")
@endsection

@section("main-content")

@if (count($errors) > 0)
	<div class="alert alert-danger">
		<ul>
			@foreach ($errors->all() as $error)
				<li>{{ $error }}</li>
			@endforeach
		</ul>
	</div>
@endif

<form id="editForm">
	<div class="box box-warning">
		<div class="box-header with-border">
			{{--  <h3 class="box-title">GUI Settings</h3>  --}}
			<h3 class="box-title">Configuraciones de Correo</h3>

		</div>
		<div class="box-body conf-border" id="data"></div>
		<div class="box-footer">
			<button class="unstyled-buttom fr control-btn mr0" type="submit" title="Guardar Cambios"><i class="fa fa-floppy-o" aria-hidden="true"></i></button>
			{{--<button type="submit" class="btn btn-primary">Save Changes</button>--}}
		</div>
	</div>
</form>

<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<form id="addForm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">Add Environment Variables</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>Key</label>
						<input type="text" class="form-control" placeholder="Key..." name="inputKey" required>
					</div>
					<div class="form-group">
						<label>Value</label>
						<input type="text" class="form-control" placeholder="Value..." name="inputValue" required>
					</div>
					<div class="form-group">
						<label>Section</label>
						<select name="inputSection" id="inputSection" class="form-control" required></select>
					</div>
					<div class="alert alert-danger" role="alert">
						<p>
							<b>NOTE:</b>
							The blank spaces will be replaced by underscore (_) when Save Changes button clicked
						</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">Save Changes</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</form>
	</div>
</div>

<div class="modal fade" id="addSectionModal" tabindex="-2" role="dialog">
	<div class="modal-dialog" role="document">
		<form id="addSectionForm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">Add Section</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>Name</label>
						<input type="text" class="form-control inputSection" placeholder="Section..." name="inputSectionAdd" required>
					</div>
					<div class="alert alert-danger" role="alert">
						<p>
							<b>NOTE:</b>
							The blank spaces will be replaced by underscore (_) when Save Changes button clicked
						</p>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" id="btnSaveChangesSection" class="btn btn-primary">Save Changes</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</form>
	</div>
</div>

@endsection

@push('styles')
<!-- <link rel="stylesheet" type="text/css" href="{{ asset('la-assets/plugins/datatables/datatables.min.css') }}"/> -->
@endpush

@push('scripts')
<!-- <script src="{{ asset('la-assets/plugins/datatables/datatables.min.js') }}"></script> -->
<script src="{{ asset('la-assets/js/pages/configuration.js') }}"></script>
<script type="text/javascript">

	var sectionTemp = '';
	var url = '';
	var urlLoadData = "{{ url(config('laraadmin.adminRoute') . '/getDataConfiguration2') }}";

	function ChangeState(key){
		if($('#' + key).is(":checked")) {
			$('[name="' + key + '"]').val("true");
		}else{
			$('[name="' + key + '"]').val("false");
		}
	}

	function DeleteConfigurationConfirmation(key, value){
		swal({
			title: "Are you sure?",
			html: `Removing the "${key}" environment variable can cause system problems!`,
			type: "warning",
			showCancelButton: true,
			closeOnConfirm: false,
			showLoaderOnConfirm: true
		}).then(function(){
			url = "{{ url(config('laraadmin.adminRoute') . '/deleteConfiguration') }}";
			urlLoadData = "{{ url(config('laraadmin.adminRoute') . '/getDataConfiguration2') }}";
			DeleteConfiguration(key, value, url, 'data', urlLoadData);
			swal("Finished!");
		});
	}

	$('#editForm').submit(function(e){
    	e.preventDefault();
		
		var serializeData = $(this).serializeArray();
    	var obj = JSON.stringify(serializeData);

		url = "{{ url(config('laraadmin.adminRoute') . '/updateConfiguration') }}";
		
		EditConfiguration(obj, url, 'data', urlLoadData);
	});

	$('#addForm').submit(function(e){
    	e.preventDefault();

		var newKey = $('[name="inputKey"]').val();
    	var newValue = $('[name="inputValue"]').val();
    	var section = $('[name="inputSection"]').val();

		url = "{{ url(config('laraadmin.adminRoute') . '/addConfiguration') }}";

		AddConfiguration(newKey, newValue, section, url, 'data', urlLoadData);
		$('#addModal').modal('toggle');

		$('[name="inputKey"]').val('');
    	$('[name="inputValue"]').val('');
		$('[name="inputSection"]').val('');
	});

	// Sections
	$('#btnSaveChangesSection').click(function(e){
    	e.preventDefault();

    	var section = $('[name="inputSectionAdd"]').val();

		if(sectionTemp != ''){
			url = "{{ url(config('laraadmin.adminRoute') . '/editSection') }}";
			EditSection(sectionTemp, section, url, 'data', urlLoadData);
		}else{
			url = "{{ url(config('laraadmin.adminRoute') . '/addSection') }}";
			AddSection(section, url, 'data', urlLoadData);
		}

		$('#addSectionModal').modal('toggle');
		$('[name="inputSectionAdd"]').val('');
		sectionTemp = '';
		FillDropDownSectionHelper();
	});

	function DeleteSectionConfirmation(section){
		swal({
			title: "Are you sure?",
			text: `If you continue, you will delete all the environment variables that are within the "${section.split('_').join(' ')}"!`,
			type: "warning",
			showCancelButton: true,
			closeOnConfirm: false,
			showLoaderOnConfirm: true
		}).then(function(){
			url = "{{ url(config('laraadmin.adminRoute') . '/deleteSection') }}";
			DeleteSection(section, url, 'data', urlLoadData);
			swal("Finished!");
			FillDropDownSectionHelper();
		});
	}

	function EditSectionConfirmation(oldSection){
		sectionTemp = oldSection;

		$('[name="inputSectionAdd"]').val(sectionTemp.split('_').join(' '));
		$('#addSectionModal').modal('toggle');
	}

	function FillDropDownSectionHelper(){
		url = "{{ url(config('laraadmin.adminRoute') . '/getDataSection') }}";
		FillDropDownSection(url);
	}

	$(document).ready(function(){
		url = "{{ url(config('laraadmin.adminRoute') . '/getDataConfiguration2') }}";
		LoadData(url, 'data');

		FillDropDownSectionHelper();
	});

</script>

@endpush