<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Ventas">
        <meta name="author" content="Edu FX">
        <base href="<?php echo base_url(); ?>">
        <meta http-equiv="Pragma" content="no-cache">
        <meta http-equiv="Expires" content="-1">

        <title><?php echo !empty($title) ? $title : 'Ventas DeMente Games: ';?></title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/solid.css" integrity="sha384-ioUrHig76ITq4aEJ67dHzTvqjsAP/7IzgwE7lgJcg2r7BRNGYSK0LwSmROzYtgzs" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/fontawesome.css" integrity="sha384-sri+NftO+0hcisDKgr287Y/1LVnInHJ1l+XC7+FOabmTTIK0HnE2ID+xxvJ21c5J" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="<?php echo css('style.css'); ?>">

        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

    </head>
    <body <?php echo ENVIRONMENT == 'development' ? 'style="background-color: #BDECB6;"' : '';?>>
        <header class="navbar navbar-light navbar-expand flex-column flex-lg-row bd-navbar">
            <!-- Solo MOBILE -->
            <form action="/busquedas" method="get" class="form-inline my-2 my-lg-0 d-lg-none">
                <div class="text-right" style="font-size: 12px; font-weight: 600; margin-top: -10px;">
                    <?php echo date('H:i:s d/m/Y'); ?> | 
                    <?php echo $_SESSION['usuario']['alias']; ?> 
                    <?php echo $_SESSION['usuario']['admin'] ? '(Admin)' : ''; ?>
                    <div class="d-none">[<?php echo $_SESSION['usuario']['perfil']; ?>]</div>
                    <a href="/logout">[Salir]</a>
                </div>
                <input class="form-control mr-sm-2" type="search" name="s" placeholder="Buscar" aria-label="Buscar" autocomplete="off">
                <button class="btn btn-outline-success my-2 my-xs-0" type="submit">Buscar</button>
            </form>
            <!-- PC -->
            <div class="navbar-nav-container">
                <button class="navbar-toggler fx-toggler mr-2" type="button" data-toggle="collapse" data-target="#principal-menu" aria-controls="principal-menu" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
				<div id="recarga-alertas" style="display: contents">
					<?php
						$this->load->view('alertas');
					?>
				</div>
                <form action="/busquedas" method="get" class="form-inline my-2 my-lg-0 d-none d-lg-block">
                    <div class="text-right" style="font-size: 12px; font-weight: 600; margin-top: -10px;"><?php echo date('H:i:s d/m/Y'); ?> | 
                        <?php echo $_SESSION['usuario']['alias']; ?> 
                        <?php echo $_SESSION['usuario']['admin'] ? '(Admin)' : ''; ?> 
                        <div class="d-none">[<?php echo $_SESSION['usuario']['perfil']; ?>]</div>
                        <a href="/logout">[Salir]</a>
                    </div>
                    <input class="form-control mr-sm-2" type="search" name="s" placeholder="Buscar" aria-label="Buscar">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
                </form>
                
            </div>
        </header>

        <div class="container-grid">
            <aside class="menu-aside-container navbar navbar-expand-lg">
                <div id="principal-menu" class="collapse navbar-collapse menu-aside">
                    <?php 
                    $data = [];
                    $this->load->view('menu', $data); 
                    ?>
                </div>
            </aside>
            <div class="main-right">
                <?php echo $content; ?>
            </div>
        </div>

         <div class="modal fade" id="modalToken" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="saveToken" aria-hidden="true">
            <div class="modal-dialog modal-l" role="document">
                <div class="modal-content">
                    <div class="modal-wait">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editVentaLabel">Guardar Token</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="formToken" method="get" class="form-inline">
                                <p>
                                    <input id="psToken" style="width: 370px;" class="form-control mr-sm-2" type="text" placeholder="Token" aria-label="Token" value="<?php echo !empty($_SESSION['token']) ? $_SESSION['token'] : '';?>">
                                </p>
                                <p>
                                    <input id="psProductToken" style="width: 370px;" class="form-control mr-sm-2" type="text" placeholder="Token Productos" aria-label="Token Productos" value="<?php echo !empty($_SESSION['productToken']) ? $_SESSION['productToken'] : '';?>">
                                </p>
                                <p>
                                    <button id="saveToken" class="btn btn-outline-success my-2 my-sm-0">Guardar</button>
                                </p>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


		<?php if (isset($_SESSION['req_pv'])) { ?>
			<div class="modal fade" id="modalPuntoVenta" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="savePuntoVenta" aria-hidden="true">
				<div class="modal-dialog modal-l" role="document">
					<div class="modal-content">
						<div class="modal-wait">
							<div class="modal-header">
								<h5 class="modal-title">Seleccionar Punto de Venta</h5>
							</div>
							<div class="modal-body">
								<form id="formPuntoVentaToken" method="get">
									<div class="form-group row">
										<label for="pvIdCanal" class="col-lg-4 col-form-label">Ubicación</label>
										<div class="col-lg-8">
											<select id="pvIdCanal" name ="pv_id_canal" class="form-control select-pv-id-canal">
												<?php
													foreach($_SESSION['pv_canales'] as $k => $v) {
														echo '<option value="' . $k . '">' . $v . '</option>';
													}
												?>
											</select>
										</div>
									</div>
									<div class="form-group row div-punto-venta">
										<label for="pvIdPuntoVenta" class="col-lg-4 col-form-label">Punto de Venta</label>
										<div class="col-lg-8">
											<select id="pvIdPuntoVenta" name ="pv_id_punto_venta" class="form-control select-pv-id-pv">
											</select>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary btn-pv-guardar">Guardar</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<?php
		}
		?>

        <script>
            $(document).ready(function() {

				<?php if (isset($_SESSION['req_pv'])) { ?>
					// Inicio PV
					$('#modalPuntoVenta').modal('show');
					let id_canal = $('.select-pv-id-canal').val();
					actualizaPuntosVentas(id_canal);

					// Al cambiar ubicacion actualiza select de puntos de venta
					$(document).on('change', '.select-pv-id-canal', function() {
						let id_canal = $('.select-pv-id-canal').val();
						actualizaPuntosVentas(id_canal);
					});

					// Escuchar cambio en el select de punto de venta
					$(document).on('change', '.select-pv-id-pv', function() {
						let valor = $(this).val();
						if (valor !== "") {
							$('.btn-pv-guardar').removeAttr('disabled');
						} else {
							$('.btn-pv-guardar').attr('disabled', true);
						}
					});

					$(document).on('click', '.btn-pv-guardar', function(e) {
						e.preventDefault();

						let id_canal = $('.select-pv-id-canal').val();
						let id_pv = $('.select-pv-id-pv').val();

						$.ajax({
							url: 'usuarios/guardar_pv_canal', // Ajusta si tu ruta es diferente
							method: 'POST',
							data: {
								id_canal: id_canal,
								id_punto_venta: id_pv
							},
							dataType: 'json',
							success: function(res) {
								if (res.success) {
									//alert('Datos guardados correctamente');
									location.reload(); // o redirige a otra vista si prefieres
									//$('#modalPuntoVenta').modal('hide');
								}
								else {
									alert('Error al guardar: ' + res.message);
								}
							},
							error: function(xhr) {
								alert('Error al guardar datos. Intenta de nuevo.');
								console.error(xhr.responseText);
							}
						});
					});
					// FIN PV
				<?php } ?>

                $("#formToken").submit(function( event ) {
                    event.preventDefault();
                    //$('#editarVenta').click();
                });

                $("#saveToken" ).click(function() {
                    var button = $(this);
                    var token = $('#psToken').val();
                    var productToken = $('#psProductToken').val();
                    var parametros = {
                        token: token,
                        productToken: productToken
                    }
                    $.ajax({
                        data:  parametros,
                        url:   '/usuarios/save_token',
                        type:  'post',
                        beforeSend: function () {
                        },
                        success:  function (response) {
                            $('#modalToken').modal('hide');
                        }
                    });
                });

				setInterval(
                    function(){
                        $('#recarga-alertas').load('/ventas/alertas');
                    }, 15000
                );
            });

			function toggleDropdown(e) {
				e.preventDefault();
				const dropdown = document.getElementById('dropdownNotificaciones');
				if (dropdown.style.display === 'block') {
					dropdown.style.display = 'none';
				} else {
					dropdown.style.display = 'block';
				}
			}

			// Cerrar dropdown al hacer clic afuera
			document.addEventListener('click', function(event) {
				const dropdown = document.getElementById('dropdownNotificaciones');
				const toggle = document.getElementById('notificacionesDropdown');
				if (!dropdown.contains(event.target) && !toggle.contains(event.target)) {
					dropdown.style.display = 'none';
				}
			});

			
			<?php 
			if (isset($_SESSION['req_pv'])) {
				// Inicio PV
				echo 'var puntos_ventas = ' . json_encode($_SESSION['pv_puntos']) . ';
				';
			?>

				function actualizaPuntosVentas(id_canal, id_punto_venta){
					let puntos_ventas_canal = puntos_ventas[id_canal];
					//console.log(puntos_ventas_canal);

					// Verificar si el canal tiene puntos de ventas
					if (typeof puntos_ventas_canal == 'undefined') {
						//console.log('No encuentra puntos de venta para el canal, esconde select');
						// Oculta seccion de PV y elimina opciones
						$('.div-punto-venta').hide();
						$('.select-pv-id-pv').html('');
						
						// Habilita el botón porque no hay puntos que seleccionar
						$('.btn-pv-guardar').removeAttr('disabled');
					}
					else {
						console.log('Encuentra puntos de venta, carga opciones en select');
						$('.select-pv-id-pv').html('<option value="">Seleccionar</option>');
						for (let pvc in puntos_ventas_canal) {
							console.log(pvc);
							console.log(puntos_ventas_canal[pvc]);
							let option = '<option value="' + pvc +'">' + puntos_ventas_canal[pvc] + '</option>';
							$('.select-pv-id-pv').append(option);
						}
						if (typeof id_punto_venta != 'undefined') {
							$('.select-pv-id-pv').val(id_punto_venta);
						}

						// Oculta el botón hasta que se seleccione un punto válido
						$('.btn-pv-guardar').attr('disabled', true);
						$('.div-punto-venta').show();
					}
				}
				// FIN PV
			<?php } ?>
        </script>

        <script src="<?php echo base_url(); ?>js/jquery-ui.1.13.2.js"></script>
        <script src="<?php echo js('functions.js'); ?>"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>