<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  
  <!-- MOTOR DE BUSQUEDA GOOGLE -->
 <!-- <meta name="google-site-verification" content="ToxlKKSDA1u4hWfeT2pT70pAkHXifYF1Vwblu1mEsmk" />-->
  <meta name="robots" content="ugelsanta, ugel santa, ugel santa mesa de partes, sistema de tramite ugel santa, mesa de partes ugel santa, mesa de partes virtual ugel santa">
  
  <base href="<?= BASE_URL ?>">
  <meta name="author" content="">
  <link rel="icon" type="image/png" href="<?= BASE_HREF ?>public/assets/favicon.png">
  <title>Sistema de Mesa de Partes Virtual</title>
  <!-- Simple bar CSS -->
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/simplebar.css">
  <!-- Fonts CSS -->
  <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  <!-- Icons CSS -->
  <link rel="stylesheet" href="<?= BASE_HREF ?>public/css/feather.css">
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/select2.css">
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/dropzone.css">
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/uppy.min.css">
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/jquery.steps.css">
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/jquery.timepicker.css">
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/quill.snow.css">

  <!-- Date Range Picker CSS -->
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/daterangepicker.css">
  <!-- App CSS -->
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/app-light.css" id="lightTheme">
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/app-dark.css" id="darkTheme" disabled>

  <!-- DataTables CSS -->
  <link rel="stylesheet" href="<?= BASE_HREF ?>css/dataTables.bootstrap4.css">

  <script src="<?= BASE_SRC ?>js/jquery.min.js"></script>
  <script src="<?= BASE_SRC ?>js/popper.min.js"></script>
  <script src="<?= BASE_SRC ?>js/bootstrap.min.js"></script>
  <script src="<?= BASE_SRC ?>js/dropzone.min.js"></script>
  <script>
    const USER_ROLE = "<?php echo $_SESSION['role']; ?>";
    const BASE_HREF = "<?= BASE_HREF ?>";
  </script>
  <script src="<?= BASE_SRC ?>js/notifications.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

</head>

<body class="vertical  light  ">
  <div class="wrapper">
    <nav class="topnav navbar navbar-light">
      <button type="button" class="navbar-toggler text-muted mt-2 p-0 mr-3 collapseSidebar">
        <i class="fe fe-menu navbar-toggler-icon"></i>
      </button>
      <!-- <form class="form-inline mr-auto searchform text-muted">
        <input class="form-control mr-sm-2 bg-transparent border-0 pl-4 text-muted" type="search" placeholder="Type something..." aria-label="Search">
      </form> -->
      <span class="text-sm text-gray-500">
        ROL ACTUAL: <strong><?= htmlspecialchars($_SESSION['role']) ?></strong>
      </span>

      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link text-muted my-2" href="#" id="modeSwitcher" data-mode="light">
            <i class="fe fe-sun fe-16"></i>
          </a>
        </li>
        <li class="nav-item nav-notif">
          <a class="nav-link text-muted my-2" href="./#" data-toggle="modal" data-target=".modal-notif">
            <span class="fe fe-bell fe-16"></span>
            <span class="dot dot-md bg-success notif-count" style="display: none;"></span>
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle text-muted pr-0" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="avatar avatar-sm mt-2">
              <img src="<?= BASE_SRC ?>assets/profile/user_<?= $_SESSION['user_id'] ?>.jpg"
                onerror="this.onerror=null; this.src='<?= BASE_SRC ?>assets/profile/default.jpg';"
                class="avatar-img rounded-circle"
                alt="Foto de perfil"
                style="width: 20; height: 20; object-fit: cover; aspect-ratio: 1/1;">
            </span>
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="<?= BASE_HREF ?>profile">Perfil</a>
            <?php if (isset($_SESSION['available_roles']) && count($_SESSION['available_roles']) > 1): ?>
                <a class="dropdown-item" href="<?= BASE_HREF ?>select-role">Cambiar de rol</a>
            <?php endif; ?>
            <a class="dropdown-item" href="<?= BASE_HREF ?>logout">Cerrar Sesión</a>
          </div>
        </li>
      </ul>
    </nav>
    <aside class="sidebar-left border-right bg-white shadow" id="leftSidebar" data-simplebar>
      <a href="#" class="btn collapseSidebar toggle-btn d-lg-none text-muted ml-2 mt-3" data-toggle="toggle">
        <i class="fe fe-x"><span class="sr-only"></span></i>
      </a>
      <nav class="vertnav navbar navbar-light">
        <!-- nav bar -->
        <div class="w-100 mb-4 d-flex">
          <a class="navbar-brand mx-auto mt-2 flex-fill text-center" href="<?= BASE_NAV ?>dashboard">
            <img src="<?= BASE_SRC ?>assets/favicon.png" alt="Logo del sistema" class="navbar-brand-img brand-sm logo-img">
          </a>

        </div>
        <ul class="navbar-nav flex-fill w-100 mb-2">
          <li class="nav-item w-100">
            <a class="nav-link" href="<?= BASE_NAV ?>dashboard">
              <i class="fe fe-home fe-16"></i>
              <span class="ml-3 item-text">Dashboard</span>
            </a>
          </li>
        </ul>

        <?php if ($_SESSION['role'] === 'ADMIN'): ?>
          <p class="text-muted nav-heading mt-4 mb-1">
            <span>Gestión</span>
          </p>
          <ul class="navbar-nav flex-fill w-100 mb-2">

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>areas">
                <i class="fe fe-book fe-16"></i>
                <span class="ml-3 item-text">Areas</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>grouptypes">
                <i class="fe fe-layout fe-16"></i>
                <span class="ml-3 item-text">Tipos de Grupo</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>persontypes">
                <i class="fe fe-tag fe-16"></i>
                <span class="ml-3 item-text">Tipos de Persona</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>modalities">
                <i class="fe fe-monitor fe-16"></i>
                <span class="ml-3 item-text">Modalidades</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>procedures">
                <i class="fe fe-aperture fe-16"></i>
                <span class="ml-3 item-text">Procedimientos</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>responsetypes">
                <i class="fe fe-message-circle fe-16"></i>
                <span class="ml-3 item-text">Tipos de Respuesta</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>states">
                <i class="fe fe-flag fe-16"></i>
                <span class="ml-3 item-text">Estados de Trámite</span>
              </a>
            </li>

            <li class="nav-item dropdown">
              <a href="#users" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle nav-link">
                <i class="fe fe-users fe-16"></i>
                <span class="ml-3 item-text">Usuarios</span>
              </a>
              <ul class="collapse list-unstyled pl-4 w-100" id="users">
                <li class="nav-item">
                  <a class="nav-link pl-3" href="<?= BASE_NAV ?>ugel-users"><span class="ml-1 item-text">Ugel</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-3" href="<?= BASE_NAV ?>comunity-users"><span class="ml-1 item-text">Comunidad</span></a>
                </li>
              </ul>
            </li>
          </ul>
        <?php endif; ?>

        <p class="text-muted nav-heading mt-4 mb-1">
          <span>Trámites</span>
        </p>
        <ul class="navbar-nav flex-fill w-100 mb-2">

          <li class="nav-item w-100">
            <?php
            $role = $_SESSION['role'];
            $group = $_SESSION['group'] ?? null;
            $canCreate = false;

            if ($role === 'ADMIN' || $role === 'COMUNITY') {
              $canCreate = true;
            } elseif ($role === 'UGEL' && $group === 'MESA DE PARTES') {
              $canCreate = true;
            }
            ?>
            <?php if ($canCreate): ?>
              <a class="nav-link" href="<?= BASE_NAV ?>processes/create">
                <i class="fe fe-file-plus fe-16"></i>
                <span class="ml-3 item-text">Crear Trámite</span>
              </a>
            <?php endif; ?>
          </li>

          <?php if ($_SESSION['role'] !== 'COMUNITY'): ?>
            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>processes/show-processes">
                <i class="fe fe-archive fe-16"></i>
                <span class="ml-3 item-text">Trámites</span>
              </a>
            </li>
          <?php endif; ?>

          <li class="nav-item w-100">
            <a class="nav-link" href="<?= BASE_NAV ?>processes/search">
              <i class="fe fe-eye fe-16"></i>
              <span class="ml-3 item-text">Seguimiento de Trámite</span>
            </a>
          </li>
        </ul>
        <?php if ($_SESSION['role'] === 'COMUNITY'): ?>
          <p class="text-muted nav-heading mt-4 mb-1">
            <span>Casilla Electrónica</span>
          </p>
          <ul class="navbar-nav flex-fill w-100 mb-2">
            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>processes/my-processes">
                <i class="fe fe-folder fe-16"></i>
                <span class="ml-3 item-text">Mis Trámites</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>processes/my-resolutions">
                <i class="fe fe-file-text fe-16"></i>
                <span class="ml-3 item-text">Resoluciones</span>
              </a>
            </li>

            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>inbox">
                <i class="fe fe-mail fe-16"></i>
                <span class="ml-3 item-text">Casilla Electrónica</span>
              </a>
            </li>
          </ul>
        <?php endif; ?>

        <p class="text-muted nav-heading mt-4 mb-1">
          <span>Formato Único de Trámite</span>
        </p>
        <ul class="navbar-nav flex-fill w-100 mb-2">
          <li class="nav-item w-100">
          <a class="nav-link" href="<?= BASE_HREF ?>public/docs/fut.xlsx" download>
            <i class="fe fe-download fe-16"></i>
            <span class="ml-3 item-text">Descargar FUT</span>
          </a>
          </li>
        </ul>

        <?php if ($_SESSION['role'] !== 'COMUNITY'): ?>
          <p class="text-muted nav-heading mt-4 mb-1">
            <span>Reportes</span>
          </p>
          <ul class="navbar-nav flex-fill w-100 mb-2">
            <li class="nav-item w-100">
              <a class="nav-link" href="<?= BASE_NAV ?>search">
                <i class="fe fe-bar-chart-2 fe-16"></i>
                <span class="ml-3 item-text">Búsqueda y Reportes</span>
              </a>
            </li>
          </ul>
        <?php endif; ?>

        <?php if ($_SESSION['role'] === 'ADMIN'): ?>
          <p class="text-muted nav-heading mt-4 mb-1">
            <span>Congiguración</span>
          </p>
          <ul class="navbar-nav flex-fill w-100 mb-2">
            <li class="nav-item dropdown">
              <a href="#settings" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle nav-link">
                <i class="fe fe-settings fe-16"></i>
                <span class="ml-3 item-text">Configuración</span>
              </a>
              <ul class="collapse list-unstyled pl-4 w-100" id="settings">
                <li class="nav-item">
                  <a class="nav-link pl-3" href="<?= BASE_NAV ?>settings"><span class="ml-1 item-text">Configuraciones Básicas</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-3" href="<?= BASE_NAV ?>settings/expedient-counters"><span class="ml-1 item-text">Numeración de Trámites</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-3" href="<?= BASE_NAV ?>holidays"><span class="ml-1 item-text">Días Feriados</span></a>
                </li>
              </ul>
            </li>
          </ul>
        <?php endif; ?>

      </nav>
    </aside>
    <main role="main" class="main-content">
      <div class="container-fluid">
        <div class="row justify-content-center">
          <div class="col-12">
            <div class="row align-items-center mb-2">
            </div>
            <!-- Contenido dinámico de la vista -->
            <?php if (isset($_SESSION['message'])): ?>
              <div class="alert alert-<?= $_SESSION['message_type'] ?> alert-dismissible fade show" role="alert">
                <?= $_SESSION['message'] ?>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <?php unset($_SESSION['message'], $_SESSION['message_type']); ?>
            <?php endif; ?>
            <?= $content ?>
          </div>
        </div>
      </div>
      <div class="modal fade modal-notif modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="defaultModalLabel">Notificaciones</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="list-group list-group-flush my-n3">
              </div>
            </div>

            <div class="modal-footer">
              <?php if ($_SESSION['role'] === 'UGEL') : ?>
                <button type="button" class="btn btn-primary btn-block" id="acceptAllBtn" data-dismiss="modal">
                  Recibir todos
                </button>
              <?php elseif ($_SESSION['role'] === 'COMUNITY'): ?>
                <button type="button" class="btn btn-primary btn-block" id="clearNotificationsBtn" data-dismiss="modal">
                  Limpiar
                </button>
              <?php endif; ?>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
  <!-- <script src="js/jquery.min.js"></script> -->

  <script src="<?= BASE_SRC ?>js/moment.min.js"></script>

  <script src="<?= BASE_SRC ?>js/simplebar.min.js"></script>
  <script src='<?= BASE_SRC ?>js/daterangepicker.js'></script>
  <script src='<?= BASE_SRC ?>js/jquery.stickOnScroll.js'></script>
  <script src="<?= BASE_SRC ?>js/tinycolor-min.js"></script>
  <script src="<?= BASE_SRC ?>js/config.js"></script>
  <script src="<?= BASE_SRC ?>js/d3.min.js"></script>
  <script src="<?= BASE_SRC ?>js/topojson.min.js"></script>
  <script src="<?= BASE_SRC ?>js/datamaps.all.min.js"></script>
  <script src="<?= BASE_SRC ?>js/datamaps-zoomto.js"></script>
  <script src="<?= BASE_SRC ?>js/datamaps.custom.js"></script>
  <script src="<?= BASE_SRC ?>js/Chart.min.js"></script>

  <script>
    /* defind global options */
    Chart.defaults.global.defaultFontFamily = base.defaultFontFamily;
    Chart.defaults.global.defaultFontColor = colors.mutedColor;
  </script>
  <script src="<?= BASE_SRC ?>js/gauge.min.js"></script>
  <script src="<?= BASE_SRC ?>js/jquery.sparkline.min.js"></script>
  <script src="<?= BASE_SRC ?>js/apexcharts.min.js"></script>
  <script src="<?= BASE_SRC ?>js/apexcharts.custom.js"></script>
  <script src='<?= BASE_SRC ?>js/jquery.mask.min.js'></script>
  <script src='<?= BASE_SRC ?>js/select2.min.js'></script>
  <script src='<?= BASE_SRC ?>js/jquery.steps.min.js'></script>
  <script src='<?= BASE_SRC ?>js/jquery.validate.min.js'></script>
  <script src='<?= BASE_SRC ?>js/jquery.timepicker.js'></script>

  <script src='<?= BASE_SRC ?>js/uppy.min.js'></script>
  <script src='<?= BASE_SRC ?>js/quill.min.js'></script>

  <script src='<?= BASE_SRC ?>js/jquery.dataTables.min.js'></script>
  <script src='<?= BASE_SRC ?>js/dataTables.bootstrap4.min.js'></script>


  <script>
    $('.select2').select2({
      theme: 'bootstrap4',
    });
    $('.select2-multi').select2({
      multiple: true,
      theme: 'bootstrap4',
    });
    $('.drgpicker').daterangepicker({
      singleDatePicker: true,
      timePicker: false,
      showDropdowns: true,
      locale: {
        format: 'MM/DD/YYYY'
      }
    });
    $('.time-input').timepicker({
      'scrollDefault': 'now',
      'zindex': '9999' /* fix modal open */
    });
    /** date range picker */
    if ($('.datetimes').length) {
      $('.datetimes').daterangepicker({
        timePicker: true,
        startDate: moment().startOf('hour'),
        endDate: moment().startOf('hour').add(32, 'hour'),
        locale: {
          format: 'M/DD hh:mm A'
        }
      });
    }
    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
      $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
    $('#reportrange').daterangepicker({
      startDate: start,
      endDate: end,
      ranges: {
        'Today': [moment(), moment()],
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        'This Month': [moment().startOf('month'), moment().endOf('month')],
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
      }
    }, cb);
    cb(start, end);
    $('.input-placeholder').mask("00/00/0000", {
      placeholder: "__/__/____"
    });
    $('.input-zip').mask('00000-000', {
      placeholder: "____-___"
    });
    $('.input-money').mask("#.##0,00", {
      reverse: true
    });
    $('.input-phoneus').mask('(000) 000-0000');
    $('.input-mixed').mask('AAA 000-S0S');
    $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ', {
      translation: {
        'Z': {
          pattern: /[0-9]/,
          optional: true
        }
      },
      placeholder: "___.___.___.___"
    });
    // editor
    var editor = document.getElementById('editor');
    if (editor) {
      var toolbarOptions = [
        [{
          'font': []
        }],
        [{
          'header': [1, 2, 3, 4, 5, 6, false]
        }],
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{
            'header': 1
          },
          {
            'header': 2
          }
        ],
        [{
            'list': 'ordered'
          },
          {
            'list': 'bullet'
          }
        ],
        [{
            'script': 'sub'
          },
          {
            'script': 'super'
          }
        ],
        [{
            'indent': '-1'
          },
          {
            'indent': '+1'
          }
        ], // outdent/indent
        [{
          'direction': 'rtl'
        }], // text direction
        [{
            'color': []
          },
          {
            'background': []
          }
        ], // dropdown with defaults from theme
        [{
          'align': []
        }],
        ['clean'] // remove formatting button
      ];
      var quill = new Quill(editor, {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow'
      });
    }
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function() {
      'use strict';
      window.addEventListener('load', function() {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
          form.addEventListener('submit', function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
  </script>
  <script>
    var uptarg = document.getElementById('drag-drop-area');
    if (uptarg) {
      var uppy = Uppy.Core().use(Uppy.Dashboard, {
        inline: true,
        target: uptarg,
        proudlyDisplayPoweredByUppy: false,
        theme: 'dark',
        width: 770,
        height: 210,
        plugins: ['Webcam']
      }).use(Uppy.Tus, {
        endpoint: 'https://master.tus.io/files/'
      });
      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      });
    }
  </script>
  <script src="<?= BASE_SRC ?>js/apps.js"></script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-56159088-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-56159088-1');
  </script>
</body>

</html>