@if( $sitios != null)
<form class="form pb-5" id="frmEditSitio">
	<input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="hidden" name="sitios" value="{{$sitios->web_id}}"> 
	<input type="hidden" name="accion" value="editar">
	<input type="hidden" name="activo" value="{{$sitios->active}}">

	<div class="row pt-1 pb-2 pb-3">
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="nombre">Nombre</label>
                <small class="text-muted pb-2">Edita el nombre del sitio.</small>
			</div>
			<input name="nombre_del_sitio" maxlength="200" id="nombre_sitio" required="yes" class="form-control" value="{{$sitios->web_name}}">
		</div>
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="titulo">Titulo</label>
				<small class="text-muted pb-2">Edita el titulo de la pestaña del sitio.</small>            
			</div>
			<input name="titulo_del_sitio" maxlength="200" id="titulo_sitio" required="yes" class="form-control" value="{{$sitios->web_title}}">
		</div>
	</div>
	<div class="row pt-1 pb-2">
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="pagina_web">Pagina Web</label>
                <small class="text-muted pb-2">Edite la URL sitio.</small>
			</div>
			<input name="pagina_del_sitio" maxlength="200" id="pagina_sitio" required="yes" class="form-control" value="{{$sitios->http_host}}">
		</div>
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="servicio_contratados">Servicios contratados</label>
				<small class="text-muted pb-2">Edita el servicio contratado del sitio.</small>
			</div>
			<select name="serv_contratado_del_sitio" id="serv_contratado_sitio" class="form-control form-select">
				<option value="" @if(empty($sitios->servicio_contratado)) selected @endif>Sin valor</option>
				<option value="47" @if($sitios->servicio_contratado == '47') selected @endif>LED</option>
				<option value="73" @if($sitios->servicio_contratado == '73') selected @endif>IMPERIUM</option>
				<option value="10" @if($sitios->servicio_contratado == '10') selected @endif>INQUIRO</option>
			</select>
		</div>
	</div>
	<div class="row pt-1 pb-2">
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="boostrap">Boostrap</label>
                <small class="text-muted pb-2">Edite el PATH de Boostrap para el sitio.</small>
			</div>
			<input name="boostrap_del_sitio" maxlength="200" id="boostrap_sitio" class="form-control" value="{{$sitios->uri_css2}}">
		</div>
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="css">CSS</label>
                <small class="text-muted pb-2">Edite el PATH del CSS para el sitio.</small>
			</div>
			<input name="css_del_sitio" maxlength="200" id="css_sitio" class="form-control" value="{{$sitios->uri_css1}}">
		</div>
	</div>
	<div class="row pt-1 pb-2">
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="logo">Logo</label>
				<small class="text-muted pb-1">Edite la URL del logo para el sitio. Por ejemplo: <i class="bi bi-info-circle" title="https://www.avaldigital.com/img/aval_sm_box.png"></i></small>
			</div>
			<input name="logo_del_sitio" maxlength="200" id="logo_sitio" class="form-control" value="{{$sitios->uri_logo}}">
		</div>
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="icono">Icono</label>
                <small class="text-muted pb-2">Edite el PATH del icono para el sitio.</small>
			</div>
			<input name="icono_del_sitio" maxlength="200" id="icono_sitio" class="form-control" value="{{$sitios->uri_icon}}">
		</div>
	</div>
	<div class="row pt-1 pb-2">
		<div class="col-md-6 form-group">
			<div class="row">
            	<label for="id_plataforma">ID PLataforma</label>
                <small class="text-muted pb-2">Edite los dos caracteres de la ID Plataforma.</small>
			</div>
            <input name="id_plataforma_del_sitio" maxlength="200" id="id_plataforma_sitio" required="yes" class="form-control" value="{{$sitios->id_plataforma}}">
		</div>
		<div class="col-md-6 form-group">
			<div class="row">
            <label for="app_idd">App ID</label>
			<small class="text-muted pb-2">Edite los digitos para el App ID.</small>
			</div>
            <input name="app_id_del_sitio" maxlength="200" id="app_id_sitio" required="yes" class="form-control" value="{{$sitios->app_id}}">
		</div>
	</div>
	<div class="row pt-1 pb-2">
		<div class="col-md-6 form-group">
            <div class="row">
				<label for="copyright">Copyright</label>
				<small class="text-muted pb-2">Edite el Copyright mostrado en el footer.</small>
			</div>
			<input name="copyright_del_sitio" maxlength="200" id="copyright_sitio" class="form-control" value="{{$sitios->copyright}}">
		</div>
		<div class="col-md-6 form-group">
			<div class="row">
				<label for="plataforma_id_menu">ID Menu Plataforma</label>
				<small class="text-muted pb-2">Edite la plataforma del sitio.</small>
			</div>
			<select name="plataforma_id_menu" id="plataforma_id_menu" class="form-control form-select">
				<option value="" @if( is_null($sitios->id_menu_plataforma) )selected @endif>Sin valor</option>
				<option value="FIDEBACK" @if( $sitios->id_menu_plataforma == "FIDEBACK" )selected @endif>FIDEBACK</option>
				<option value="PRODBACK" @if( $sitios->id_menu_plataforma == "PRODBACK" )selected @endif>PRODBACK</option>				
			</select>
		</div>
    </div>						
	<div class="row pt-3 pd-3 mt-3 mr-5 justify-content-end text-end">
        <div class="">
            <button type="button" class="btn btn-success editarSitioporSubmit"><i class="bi bi-check-circle-fill"></i> Aceptar</button>
            <button type="button" class="btn btn-fidelitas" data-bs-dismiss="modal"><i class="bi bi-x-circle-fill"></i> Cancelar</button>
        </div>
		<div class="alert alert_editar_sitio" role="alert">
		</div>
    </div>
</form>
@else
<h5 class="text-fidelitas text-center">Ocurrió un error, cierre el modal e intente nuevamente</h5>
@endif
<script>
	$('.alert_editar_sitio').addClass('d-none')
	$('.editarSitioporSubmit').on('click', function (e) {
		e.preventDefault();
		//sección de variables para validar inputs
		var nameRegex = /^[A-Za-z0-9\s]+$/; 
		var titleRegex = /^[a-zA-Z\s]+$/; 
		var logoRegex = /^\/.*\.png$/; 
		var cssRegex = /^\/.*\.css$/; 
		var bootstrapRegex = /^\/.*\.css$/; 
		var iconRegex = /^\/.*(\.ico|\.png)$/; 
		var appIdRegex = /^[0-9]+$/; 
		var copyrightRegex = /^[a-zA-Z ]{1,30}$/ 
		var idPlataformaRegex = /^[a-zA-Z ]{1,10}$/; 
		//variables de inputs a enviar 
		var nameInput = $('#modal-body form input[name="nombre_del_sitio"]');
		var titleInput = $('#modal-body form input[name="titulo_del_sitio"]');
		var logoInput = $('#modal-body form input[name="logo_del_sitio"]');
		var cssInput = $('#modal-body form input[name="css_del_sitio"]');
		var bootstrapInput = $('#modal-body form input[name="boostrap_del_sitio"]');
		var iconInput = $('#modal-body form input[name="icono_del_sitio"]');
		var appIdInput = $('#modal-body form input[name="app_id_del_sitio"]');
		var servicioContratadoInput = $(
			'#modal-body form select[name="serv_contratado_del_sitio"]');
			var copyrightInput = $('#modal-body form input[name="copyright_del_sitio"]');
			var idPlataformaInput = $('#modal-body form input[name="id_plataforma_del_sitio"]');
           //
		   var name = nameInput.val();
            if (!nameRegex.test(name)) {                
                nameInput.addClass('is-invalid');

            }else{
                nameInput.removeClass('is-invalid');                
            }
            //
            var title = titleInput.val();
            if (!titleRegex.test(title)) {
                // 
                titleInput.addClass('is-invalid');

            }else{
                titleInput.removeClass('is-invalid');                
            }
            // 
            var logo = logoInput.val();
            if (!logoRegex.test(logo)) {
                logoInput.addClass('is-invalid');

            }else{
                logoInput.removeClass('is-invalid');                
            }
            // 
            var css = cssInput.val();
            if (!cssRegex.test(css)) {
                cssInput.addClass('is-invalid');

            }else{
                cssInput.removeClass('is-invalid');
            }
            // 
            var bootstrap = bootstrapInput.val();
            if (!bootstrapRegex.test(bootstrap)) {                 
                bootstrapInput.addClass('is-invalid');

            }else{
                bootstrapInput.removeClass('is-invalid');
            }
            // 
            var icon = iconInput.val();
            if (!iconRegex.test(icon)) {                 
                iconInput.addClass('is-invalid');
                
            }else{
                iconInput.removeClass('is-invalid');
            }
            // 
            var appId = appIdInput.val();
            if (!appIdRegex.test(appId)) {                 
                appIdInput.addClass('is-invalid');
                
            }else{
                appIdInput.removeClass('is-invalid');
            }
            //
            var servicioContratado = servicioContratadoInput.val();
            if(!(servicioContratado == '47' || servicioContratado == '10' || servicioContratado == '73'|| servicioContratado == "")){
                    servicioContratadoInput.addClass('is-invalid');
                    
                }else{
                    servicioContratadoInput.removeClass('is-invalid');
            }
            // 
            var copyright = copyrightInput.val();
            if (!copyrightRegex.test(copyright)) {
                copyrightInput.addClass('is-invalid');
                
            }else{
                copyrightInput.removeClass('is-invalid');
            }
            //
            var idPlataforma = idPlataformaInput.val();
            if (!idPlataformaRegex.test(idPlataforma)) {                
                idPlataformaInput.addClass('is-invalid');
                
            }else{
                idPlataformaInput.removeClass('is-invalid');
            }
			var classCount = document.getElementsByClassName("is-invalid").length;
            if (classCount >= 1) {
            }else{
                $.ajax({
				type: "POST",
				url: "/configuracion-sitios/adm-config-sitios-actualizar",
				data: $('#frmEditSitio').serialize(),
				success: function (data) {
					let respuesta = JSON.parse(data)
					if(respuesta.error == 0){
						$('.alert_editar_sitio').removeClass('d-none')
						$('.alert_editar_sitio').addClass('alert-success')
						$('.alert_editar_sitio').text(respuesta.mensaje)
						setTimeout(() => {
							$('.alert_editar_sitio').addClass('d-none')
							location.reload()
						}, 2000);
					}
				}
				});
            } 
	})
</script>