var Servicios = []

//fetch Servicios from database

function LoadServicios(element) {
if (Servicios.length == 0) {
//ajax function for fetch data
$.ajax({
type: "GET",
url: '/SPA_Encabezado_Reserva/getServicios',
success: function (data) {
Servicios = data;
//render catagory
renderServicios(element);
}
})
}
else {
//render Servicios to the element
renderServicios(element);
}
}

function renderServicios(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Seleccione un elemento'));
$.each(Servicios, function (i, val) {
$ele.append($('<option/>').val(val.CodSer.trim()).text(val.DesSer));
})
}

var Terapeutas = []
//fetch Terapeutas from database
function LoadTerapeutas(element) {
if (Terapeutas.length == 0) {
//ajax function for fetch data
$.ajax({
type: "GET",
url: '/SPA_Encabezado_Reserva/getTerapeutas',
success: function (data) {
Terapeutas = data;
//render catagory
renderTerapeutas(element);
}
})
}
else {
//render Terapeutas to the element
renderTerapeutas(element);
}
}

function renderTerapeutas(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Seleccione un elemento'));
$.each(Terapeutas, function (i, val) {
$ele.append($('<option/>').val(val.CodTerap).text(val.NomTerap));
})
}
var Salas = []
//fetch Salas from database
function LoadSalas(element) {
if (Salas.length == 0) {
//ajax function for fetch data
$.ajax({
type: "GET",
url: '/SPA_Encabezado_Reserva/getSalas',
success: function (data) {
Salas = data;
//render catagory
renderSalas(element);
}
})
}
else {
//render Salas to the element
renderSalas(element);
}
}

function renderSalas(element) {
var $ele = $(element);
$ele.empty();
$ele.append($('<option/>').val('0').text('Seleccione un elemento'));
$.each(Salas, function (i, val) {
$ele.append($('<option/>').val(val.CodSala).text(val.DesSala));
})
}

//Actualizando precio
$('#Servicios').change(function () {
$.ajax({
async: true,
url: "/SPA_Encabezado_Reserva/getPrecioServicio",
datatype: "json",
data: {
Servicios: $('#Servicios').val()
},
success: function (data) {
$("#Precio").val(data.PreSer);
}
})
});

$(document).ready(function () {
//Add button click event
$('#Agregar').click(function () {
//validation and add order items
var isAllValid = true;
if ($('#NombreHuesped').val().trim() == '') {
isAllValid = false;
$('#NombreHuesped').siblings('span.error').css('visibility',
'visible');
}
else {
$('#NombreHuesped').siblings('span.error').css('visibility', 'hidden');
 }

if (($('#Servicios').val() == "0")) {
isAllValid = false;
$('#Servicios').siblings('span.error').css('visibility', 'visible');
}
else {
$('#Servicios').siblings('span.error').css('visibility', 'hidden');
}

if (!($('#Precio').val().trim() != '' && !isNaN($

('#Precio').val().trim()))) {
isAllValid = false;
$('#Precio').siblings('span.error').css('visibility', 'visible');
}
else {
$('#Precio').siblings('span.error').css('visibility', 'hidden');
}

if (($('#Terapeutas').val() == "0")) {
isAllValid = false;
$('#Terapeutas').siblings('span.error').css('visibility', 'visible');
}
else {
$('#Terapeutas').siblings('span.error').css('visibility', 'hidden');
}

if (($('#Salas').val() == "0")) {
isAllValid = false;
$('#Salas').siblings('span.error').css('visibility', 'visible');
}
else {
$('#Salas').siblings('span.error').css('visibility', 'hidden');
}

if (isAllValid) {
var $newRow = $('#mainrow').clone().removeAttr('id');
$('.servicios', $newRow).val($('#Servicios').val());
$('.terapeutas', $newRow).val($('#Terapeutas').val());
$('.salas', $newRow).val($('#Salas').val());

//Replace add button with remove button

$('#Agregar',
$newRow).addClass('remove').val('Remover').removeClass('btn-
success').addClass('btn-danger');

//remove id attribute from new clone row

$
('#NombreHuesped,#fechahora,#Servicios,#Precio,#Terapeutas,#Salas,#Agregar',
$newRow).removeAttr('id');
$('span.error', $newRow).remove();
//append clone row
$('#orderdetailsItems').append($newRow);

//clear select data

$('#Servicios,#Terapeutas,#Salas').val('0');
$('#NombreHuesped,#Precio,#fechahora').val('');
$('#SpaItemError').empty();
 }

})

//remove button click event

$('#orderdetailsItems').on('click', '.remove', function () {
$(this).parents('tr').remove();
});

$('#submit').click(function () {
var isAllValid = true;

//validate order items

$('#SpanItemError').text('');
var list = [];//Arreglo para obtener los detalles
var numeroErrores = 0;//Variable para conteo de número de errores por
detalle
$('#orderdetailsItems tr').each(function (index, ele) {//Iterando en cada
"row" de la tabla #orderdetailsItems
if (//Validando los detalles de la tabla
$('.hn', this).val() == "" ||
$('.fh', this).val() == "" ||
$('select.servicios', this).val() == "0" ||
$('select.terapeutas', this).val() == "0" ||
$('select.salas', this).val() == "0"
) {
numeroErrores++;
$(this).addClass('error');
} else {
var DetReserva = {
FecHoraRes: $('.fh', this).val(),
CodSer: $('select.servicios', this).val().trim(),
CodSala: $('select.salas', this).val().trim(),
CodTerap: parseInt($('select.terapeutas', this).val()),
Notas: '',
NomHues: $('.hn', this).val()
}
list.push(DetReserva);
}
})

if (numeroErrores > 0) {
$('#SpanItemError').text("Se han encontrado " + numeroErrores + "
errores");
isAllValid = false;
}

if (list.length == 0) {
$('#SpanItemError').text('Se debe agregar por lo menos un detalle a la
reserva');
isAllValid = false;
}

//if ($('#NombreHuesped').val().trim() == '') {

// $('#NombreHuesped').siblings('span.error').css('visibility',
'visible');
// isAllValid = false;
//}
//else {
 // $('#NombreHuesped').siblings('span.error').css('visibility',
'hidden');
//}

//if ($('#orderDate').val().trim() == '') {

// $('#orderDate').siblings('span.error').css('visibility', 'visible');
// isAllValid = false;
//}
//else {
// $('#orderDate').siblings('span.error').css('visibility', 'hidden');
//}

if (isAllValid) {
var data =
{
ReservaOpera: $('#ReservaOpera').val().trim(),
NomHuesped: $('#NomHuesped').val().trim(),
NumRoom: $('#NumRoom').val().trim(),
Checkin: $('#Checkin').val().trim(),
Checkout: $('#Checkout').val().trim(),
FecReg: $('#FecReg').val().trim(),
Alergias: $('#Alergias').val().trim(),
Observaciones: $('#Observaciones').val().trim(),
NotasCliente: $('#NotasCliente').val().trim(),
Email: $('#Email').val().trim(),
SPA_Detalle_Reserva: list
}

$(this).val('Please wait...');

$.ajax({
type: 'POST',
url: '/SPA_Encabezado_Reserva/GuardarReserva',
data: JSON.stringify(data),
contentType: 'application/json',
success: function (data) {
if (data.status) {
alert('Successfully saved');
//here we will clear the form
list = [];
$('#Servicios,#Terapeutas,#Salas').val('0');
$('#NombreHuesped,#Precio,#fechahora').val('');
}
else {
alert('Error');
}
$('#submit').text('Save');
},
error: function (error) {
console.log(error);
$('#submit').text('Save');
}
});
}

});

});
LoadServicios($('#Servicios'));
LoadTerapeutas($('#Terapeutas'));
LoadSalas($('#Salas'));