<?php
session_start();
if (!isset($_SESSION['usuario']) || empty($_SESSION['usuario'])) {
    header('Location: ../../index.php');
    exit();
}
$usuario = $_SESSION['usuario'];
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>URBANVIEW</title>
<link rel="shortcut icon" href="../../resources/img/logour.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- FontAwesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
<!-- DataTables CSS -->
<link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet" />

<style>
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}
body {
  display: flex;
  flex-direction: column;
}
.topbar {
  height: 60px;
  background: #343a40;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
.wrapper {
  display: flex;
  flex-grow: 1;
  margin-top: 60px;
  height: calc(100vh - 60px);
  overflow: hidden;
}
.sidebar {
  width: 250px;
  background: #343a40;
  padding: 20px;
  overflow-y: auto;
  flex-shrink: 0;
  transition: width 0.3s ease;
}
.sidebar.collapsed {
  width: 80px;
}
.sidebar a {
  color: #fff;
  text-decoration: none;
  padding: 12px;
  display: flex;
  align-items: center;
}
.main-content {
  flex-grow: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-left: 250px;
  padding: 20px;
  transition: margin-left 0.3s ease;
  overflow-y: auto;
}
.sidebar.collapsed ~ .main-content {
  margin-left: 80px;
}
.info {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    height: calc(100% - 60px);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    width: 250px;
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0 !important;
  }
  .wrapper {
    flex-direction: column;
  }
}
</style>
<style>
	.switch-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.switch-custom {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 34px;
}

.switch-custom input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-custom {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 16px;
  color: white;
}

.slider-custom .icon-on,
.slider-custom .icon-off {
  opacity: 0;
  transition: opacity 0.3s ease;
}

input:checked + .slider-custom {
  background-color: #28a745; /* verde */
}

input:checked + .slider-custom .icon-on {
  opacity: 1;
}

input:checked + .slider-custom .icon-off {
  opacity: 0;
}

input:not(:checked) + .slider-custom .icon-off {
  opacity: 1;
}

input:not(:checked) + .slider-custom .icon-on {
  opacity: 0;
}


</style>

</head>
<body>
<header class="topbar">
  <button class="btn btn-dark" onclick="toggleSidebar()" aria-label="Toggle sidebar">
    <i class="fas fa-bars"></i>
  </button>
  <span>URBANVIEW</span>
  <div class="info">
    <span><?=htmlspecialchars($usuario, ENT_QUOTES, 'UTF-8');?></span>
    <span id="fechaActual"></span>
    <span id="horaActual"></span>
    <button class="btn btn-sm btn-danger" onclick="cerrarSesion(event)">
      <i class="fas fa-sign-out-alt"></i>
    </button>
  </div>
</header>

<div class="wrapper">
  <nav class="sidebar"><?php include "menu.php"; ?></nav>
  <div class="main-content">
    <div class="row mb-3">
      <div class="col-md-3">
        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#agregarMarcaModal">
          <i class="fas fa-plus"></i> Agregar Marca
        </button>
      </div>
    </div>

    <div class="table-responsive">
      <table id="marca" class="table table-striped table-bordered" style="width:100%">
        <thead class="table-dark">
          <tr>
            <th>MARCA</th>
            <th>DIRECCIÓN</th>
            <th>TELEFONO</th>
            <th>EMAIL</th>
            <th>CONTACTO</th>
            <th>TELEFONO CONTACTO</th>
			<th>FORMA PAGO</th>        <!-- NUEVO -->
			<th>TIEMPO</th>        <!-- NUEVO -->
			<th>VALOR</th>       <!-- NUEVO -->
            <th>ACTIVO</th>
            <th>ACCIÓN</th>
          </tr>
        </thead>
        <tbody>
          <!-- Aquí puedes cargar los datos dinámicamente usando AJAX o PHP -->
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Modal Agregar Zona -->
<div class="modal fade" id="agregarMarcaModal" tabindex="-1" aria-labelledby="agregarMarcaModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="formAgregarMarca" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="agregarMarcaModalLabel">Agregar Nueva Marca</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="marcas" class="form-label">Marca*</label>
          <input type="text" class="form-control" id="marcas" name="marcas" required>
        </div>
		<div class="mb-3">
          <label for="direccion" class="form-label">Direccion*</label>
          <input type="text" class="form-control" id="direccion" name="direccion" required>
        </div>
		<div class="row">		  
		  <div class="col-md-4 mb-3">
			<label for="telefono" class="form-label">Teléfono*</label>
			<input type="text" class="form-control" id="telefono" name="telefono" required>
		  </div>
		  <div class="col-md-8 mb-3">
			<label for="email" class="form-label">Email*</label>
			<input type="text" class="form-control" id="email" name="email" required>
		  </div>
		</div>
		<div class="row">
			<div class="col-md-8 mb-3">
			  <label for="contacto" class="form-label">Contacto*</label>
			  <input type="text" class="form-control" id="contacto" name="contacto" required>
			</div>		
			  <div class="col-md-4 mb-3">
				<label for="telefonoc" class="form-label">Teléfono*</label>
				<input type="text" class="form-control" id="telefonoc" name="telefonoc" required>
			  </div>		  
		</div>
		<div class="row">
		  <div class="col-md-6 mb-3">
			<label for="plan" class="form-label">Forma de Pago*</label>
			<select class="form-select" id="plan" name="plan" required>
			  <option value="">Seleccione...</option>
			  <option value="Diario">Diario</option>
			  <option value="Semanal">Semanal</option>
			  <option value="Mensual">Mensual</option>
			  <option value="Trimestral">Trimestral</option>
			  <option value="Semestral">Semestral</option>
			  <option value="Semestral">Anual</option>
			</select>
		  </div>
		  <div class="col-md-3 mb-3">
			<label for="tiempo" class="form-label">Tiempo*</label>
			<input type="number" step="1" min="0" class="form-control" id="tiempo" name="tiempo" required>
		  </div>
		  <div class="col-md-3 mb-3">
			<label for="valor" class="form-label">Valor (USD)*</label>
			<input type="number" step="0.01" min="0" class="form-control" id="valor" name="valor" required>
		  </div>
		</div>

        
      </div>
      <div class="modal-footer">
        <button type="button" onclick="guardar()" class="btn btn-primary">Agregar</button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
      </div>
    </form>
  </div>
</div>

<!-- Modal Editar Zona -->
<div class="modal fade" id="editarMarcaModal" tabindex="-1" aria-labelledby="editarMarcaModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <form id="formEditarMarca" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editarMarcaModalLabel">Editar Marca</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="edit_id_marca" name="id">
        <div class="mb-3">
          <label for="edit_marcas" class="form-label">Marca*</label>
          <input type="text" class="form-control" id="edit_marcas" name="edit_marcas" required>
        </div>
		<div class="mb-3">
          <label for="edit_direccion" class="form-label">Direccion*</label>
          <input type="text" class="form-control" id="edit_direccion" name="edit_direccion" required>
        </div>
		<div class="row">		  
		  <div class="col-md-4 mb-3">
			<label for="edit_telefono" class="form-label">Teléfono*</label>
			<input type="text" class="form-control" id="edit_telefono" name="edit_telefono" required>
		  </div>
		  <div class="col-md-8 mb-3">
			<label for="edit_email" class="form-label">Email*</label>
			<input type="text" class="form-control" id="edit_email" name="edit_email" required>
		  </div>
		</div>
		<div class="row">
			<div class="col-md-8 mb-3">
			  <label for="edit_contacto" class="form-label">Contacto*</label>
			  <input type="text" class="form-control" id="edit_contacto" name="edit_contacto" required>
			</div>		
			  <div class="col-md-4 mb-3">
				<label for="edit_telefonoc" class="form-label">Teléfono*</label>
				<input type="text" class="form-control" id="edit_telefonoc" name="edit_telefonoc" required>
			  </div>		  
		</div>
		<div class="row">
		  <div class="col-md-6 mb-3">
			<label for="edit_plan" class="form-label">Plan*</label>
			<select class="form-select" id="edit_plan" name="edit_plan" required>
			  <option value="">Seleccione...</option>
			  <option value="Diario">Diario</option>
			  <option value="Semanal">Semanal</option>
			  <option value="Mensual">Mensual</option>
			  <option value="Trimestral">Trimestral</option>
			  <option value="Semestral">Semestral</option>
			  <option value="Semestral">Anual</option>
			</select>
		  </div>
		  <div class="col-md-3 mb-3">
			<label for="edit_tiempo" class="form-label">Tiempo*</label>
			<input type="number" step="1" min="0" class="form-control" id="edit_tiempo" name="edit_tiempo" required>
		  </div>
		  <div class="col-md-3 mb-3">
			<label for="edit_valor" class="form-label">Valor (USD)*</label>
			<input type="number" step="0.01" min="0" class="form-control" id="edit_valor" name="edit_valor" required>
		  </div>
		</div>
		
      </div>
      <div class="modal-footer">
         <button type="button" id="btnGuardarMarca" class="btn btn-primary">Guardar Cambios</button>

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
      </div>
    </form>
  </div>
</div>


<!-- JS: jQuery, Bootstrap, DataTables, SweetAlert -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="../../resources/js/menu_marca.js"></script>
<script>
let sidebar = document.querySelector('.sidebar');

function actualizarHora() {
  const ahora = new Date();
  const opF = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  const opH = { hour: '2-digit', minute: '2-digit', second: '2-digit' };
  document.getElementById('fechaActual').textContent = ahora.toLocaleDateString('es-ES', opF);
  document.getElementById('horaActual').textContent = ahora.toLocaleTimeString('es-ES', opH);
}
setInterval(actualizarHora, 1000);
actualizarHora();

function toggleSidebar() {
  if (window.innerWidth <= 768) {
    sidebar.classList.toggle('show');
  } else {
    sidebar.classList.toggle('collapsed');
  }
}
document.addEventListener('click', function(e) {
  const toggleBtn = e.target.closest('button[onclick="toggleSidebar()"]');
  if (window.innerWidth <= 768 && !sidebar.contains(e.target) && !toggleBtn) {
    sidebar.classList.remove('show');
  }
});
function cerrarSesion(e) {
  Swal.fire({
    title: '¿Cerrar sesión?',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Sí',
    cancelButtonText: 'No'
  }).then(res => {
    if (res.isConfirmed) {
      fetch('../../controllers/usuario.php', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: new URLSearchParams({boton: 'cerrar'})
      }).then(response => {
        if (response.ok) {
          window.location.href = '../../index.php';
        } else {
          throw new Error('Error al cerrar sesión');
        }
      }).catch(err => {
        Swal.fire('Error', err.message, 'error');
      });
    }
  });
}

$(document).on('change', '.toggle-switch', function() {
    let checkbox = $(this);
    let id = checkbox.data('id');
    let nuevoEstado = checkbox.is(':checked') ? 1 : 0;

    $.ajax({
        url: 'actualizar_estado_marca.php', // Archivo PHP que procesa la actualización
        method: 'POST',
        data: { id: id, activa: nuevoEstado },
        success: function(response) {
            // Puedes procesar la respuesta si quieres mostrar mensajes
            checkbox.data('estado', nuevoEstado); // Actualiza el atributo data-estado
        },
        error: function() {
            alert('Error al actualizar el estado.');
            // Opcional: revertir el checkbox si falla
            checkbox.prop('checked', !nuevoEstado);
        }
    });
});


</script>
<script>
	function guardar() {
	  const marca     = $('#marcas').val().trim();
	  const direccion = $('#direccion').val().trim();
	  const telefono  = $('#telefono').val().trim();
	  const email     = $('#email').val().trim();
	  const contacto  = $('#contacto').val().trim();
	  const telefonoc = $('#telefonoc').val().trim();
	  const plan      = $('#plan').val().trim();      // NUEVO
	  const tiempo    = $('#tiempo').val().trim();      // NUEVO
	  const valor     = $('#valor').val().trim();     // NUEVO

	  if (!marca || !direccion || !telefono || !email || !contacto || !telefonoc || !plan  || !tiempo || !valor) {
		Swal.fire({ icon:'warning', title:'Campo obligatorio', text:'Por favor completa todos los campos.'});
		return;
	  }
	  if (isNaN(parseFloat(valor)) || parseFloat(valor) < 0) {
		Swal.fire({ icon:'warning', title:'Valor inválido', text:'Ingresa un monto válido mayor o igual a 0.'});
		return;
	  }

	  const formData = new FormData();
	  formData.append('marca', marca);
	  formData.append('direccion', direccion);
	  formData.append('telefono', telefono);
	  formData.append('email', email);
	  formData.append('contacto', contacto);
	  formData.append('telefonoc', telefonoc);
	  formData.append('plan', plan);    // NUEVO
	  formData.append('tiempo', tiempo);// NUEVO
	  formData.append('valor', valor);  // NUEVO

	  const $btn = $('button[onclick="guardar()"]');
	  $btn.prop('disabled', true);

	  fetch('guardar_marca.php', { method:'POST', body: formData })
		.then(r => r.json())
		.then(data => {
		  $btn.prop('disabled', false);
		  if (data.success) {
			Swal.fire({ icon:'success', title:'Marca agregada', text: data.message || 'Guardado correcto', timer:2000, showConfirmButton:false });
			$('#agregarMarcaModal').modal('hide');
			$('#formAgregarMarca')[0].reset();
			// Refresca sin recargar toda la página si usas DataTables
			if ($.fn.DataTable.isDataTable('#marca')) {
			  $('#marca').DataTable().ajax.reload(null, false);
			} else {
			  setTimeout(() => location.reload(), 800);
			}
		  } else {
			Swal.fire({ icon:'error', title:'Error', text: data.message || 'Ocurrió un error al guardar.' });
		  }
		})
		.catch(err => {
		  console.error(err);
		  $btn.prop('disabled', false);
		  Swal.fire({ icon:'error', title:'Error del servidor', text:'No se pudo guardar la marca.' });
		});
	}
</script>


<script>
$(document).on('click', '.toggle-editar', function () {
  let id         = $(this).data('id');
  let marca      = $(this).data('marca');
  let direccion  = $(this).data('direccion');
  let telefono   = $(this).data('telefono');
  let email      = $(this).data('email');
  let contacto   = $(this).data('contacto');
  let telefonoc  = $(this).data('telefonoc');
  let plan       = $(this).data('plan') || '';
  let tiempo     = $(this).data('tiempo') || '';
  let valor      = $(this).data('valor') ?? '';

  $('#edit_id_marca').val(id);
  $('#edit_marcas').val(marca);
  $('#edit_direccion').val(direccion);
  $('#edit_telefono').val(telefono);
  $('#edit_email').val(email);
  $('#edit_contacto').val(contacto);
  $('#edit_telefonoc').val(telefonoc);
  $('#edit_plan').val(plan);          // NUEVO
  $('#edit_tiempo').val(tiempo);          // NUEVO
  $('#edit_valor').val(valor);        // NUEVO

  $('#editarMarcaModal').modal('show');
});
</script>

<script>
function actualizar() {
  const id        = $('#edit_id_marca').val().trim();
  const marca     = $('#edit_marcas').val().trim();
  const direccion = $('#edit_direccion').val().trim();
  const telefono  = $('#edit_telefono').val().trim();
  const email     = $('#edit_email').val().trim();
  const contacto  = $('#edit_contacto').val().trim();
  const telefonoc = $('#edit_telefonoc').val().trim();
  const plan      = $('#edit_plan').val().trim();     // NUEVO
  const tiempo      = $('#edit_tiempo').val().trim(); // NUEVO
  const valor     = $('#edit_valor').val().trim();    // NUEVO

  if (!id || !marca || !direccion || !telefono || !email || !contacto || !telefonoc || !plan || !tiempo || !valor) {
    Swal.fire('Campo requerido', 'Por favor completa todos los campos.', 'warning');
    return;
  }
  if (isNaN(parseFloat(valor)) || parseFloat(valor) < 0) {
    Swal.fire({ icon:'warning', title:'Valor inválido', text:'Ingresa un monto válido mayor o igual a 0.'});
    return;
  }

  const $btn = $('#btnGuardarMarca').prop('disabled', true);

  $.post('editar_marca.php', {
    id, marca, direccion, telefono, email, contacto, telefonoc, plan, tiempo, valor  // NUEVO
  }, function (data) {
    $btn.prop('disabled', false);
    if (data.success) {
      Swal.fire({ icon:'success', title:'Marca actualizada', text: data.message || 'Actualización correcta', timer:2000, showConfirmButton:false });
      $('#editarMarcaModal').modal('hide');
      $('#marca').DataTable().ajax.reload(null, false);
    } else {
      Swal.fire({ icon:'error', title:'Error', text: data.message || 'No se pudo actualizar.' });
    }
  }, 'json').fail(function (xhr, status, error) {
    $btn.prop('disabled', false);
    console.error("Error al comunicarse con el servidor:", error);
    Swal.fire('Error', 'No se pudo actualizar la marca. Intenta más tarde.', 'error');
  });
}

$(document).ready(function () {
  $('#btnGuardarMarca').on('click', function (e) {
    e.preventDefault();
    actualizar();
  });
});
</script>


<script>
$(document).on('click', '.btn-eliminar', function () {
  const id = $(this).data('id');
	
  Swal.fire({
    title: '¿Estás segura?',
    text: 'Esta acción eliminará la marca permanentemente.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Sí, eliminar',
    cancelButtonText: 'Cancelar'
  }).then((result) => {	  
    if (result.isConfirmed) {
      $.post('eliminar_marca.php', { id }, function (response) {
        if (response.success) {
			
          Swal.fire('Eliminada', 'La marca fue eliminada correctamente.', 'success');

          // Elimina visualmente la fila sin recargar
          $('button.btn-eliminar[data-id="' + id + '"]').closest('tr').remove();
        } else {
          Swal.fire('Error', response.message || 'No se pudo eliminar.', 'error');
        }
      }, 'json');
    }
  });
});

</script>



</body>
</html>
