<!DOCTYPE html>
<html lang="en">
  
<?php 
if (session_status() === PHP_SESSION_NONE) {
    session_start(); 
}

// Global Authentication Wall
if(!isset($_SESSION['login_id'])) {
    header('location:login.php');
    exit; // Halt code execution processing instantly ahead of template render blocks
}

include('./header.php'); 
?>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title><?php echo isset($_SESSION['system']['name']) ? $_SESSION['system']['name'] : 'Management System' ?></title>
</head>

<style>
  body {
    background: #8080802b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Modal responsive sizing definitions overrides */
  @media (min-width: 768px) {
    .modal-dialog.large {
      width: 80% !important;
      max-width: unset;
    }
    .modal-dialog.mid-large {
      width: 60% !important;
      max-width: unset;
    }
  }
  
  /* Media document viewer styling context rules */
  #viewer_modal .btn-close {
    position: absolute;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: unset;
    font-size: 20px;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  #viewer_modal .btn-close:hover {
    background: rgba(255, 0, 0, 0.7);
  }
  #viewer_modal .modal-dialog {
    width: 85%;
    max-width: unset;
    height: 85%;
  }
  #viewer_modal .modal-content {
    background: #111;
    border: unset;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  #viewer_modal img, #viewer_modal video {
    max-height: 90%;
    max-width: 90%;
    object-fit: contain;
    border-radius: 4px;
  }
  
  /* Global preloader overlay framework */
  #preloader2 {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.75);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #preloader2::after {
    content: "";
    width: 40px; height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<body>
  <?php include 'topbar.php' ?>
  <?php include 'navbar.php' ?>
  
  <div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true" style="position: fixed; top: 20px; right: 20px; z-index: 999999;">
    <div class="toast-body text-white font-weight-bold p-3 rounded shadow"></div>
  </div>
  
  <main id="view-panel" class="p-3">
    <?php 
      $page = isset($_GET['page']) ? $_GET['page'] : 'home';
      // Basic sanitization pattern constraint filter preventing folder traversal exploits
      $page = basename($page); 
      if(file_exists($page.'.php')) {
          include $page.'.php';
      } else {
          echo "<div class='alert alert-danger m-3'><i class='fa fa-excursion'></i> Operational view interface template file mapping routing fault.</div>";
      }
    ?>
  </main>

  <div id="preloader"></div>
  <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

  <div class="modal fade" id="confirm_modal" role='dialog'>
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
      <div class="modal-content border-0 shadow">
        <div class="modal-header bg-light">
          <h5 class="modal-title font-weight-bold text-dark"><i class="fa fa-exclamation-triangle text-warning mr-1"></i> System Confirmation</h5>
        </div>
        <div class="modal-body p-4 text-secondary" id="delete_content"></div>
        <div class="modal-footer bg-light border-top-0">
          <button type="button" class="btn btn-sm btn-primary px-3 font-weight-bold" id='confirm'>Continue Execution</button>
          <button type="button" class="btn btn-sm btn-secondary px-3" data-dismiss="modal">Abort Action</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="uni_modal" role='dialog'>
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
      <div class="modal-content border-0 shadow">
        <div class="modal-header bg-light">
          <h5 class="modal-title font-weight-bold text-dark"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body p-4"></div>
        <div class="modal-footer bg-light border-top-0">
          <button type="button" class="btn btn-sm btn-primary px-3 font-weight-bold" id='submit' onclick="$('#uni_modal form').submit()">Save Changes</button>
          <button type="button" class="btn btn-sm btn-secondary px-3" data-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="viewer_modal" role='dialog'>
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <button type="button" class="btn-close" data-dismiss="modal" title="Dismiss Viewer"><i class="fa fa-times"></i></button>
         <div class="w-100 h-100 d-flex align-items-center justify-content-center p-2" id="viewer_content"></div>
      </div>
    </div>
  </div>
</body>

<script>
  // Safe synchronous visual layout status preloader engines
  window.start_load = function(){
    if($('#preloader2').length === 0) {
        $('body').prepend('<div id="preloader2"></div>');
    }
  }
  
  window.end_load = function(){
    $('#preloader2').fadeOut('fast', function() {
        $(this).remove();
    });
  }

  // Contract document validation attachment viewer rendering engine
  window.viewer_modal = function($src = ''){
    start_load();
    // Resolve extension extraction safely by searching for the absolute final dot placement parameter
    var ext = $src.split('.').pop().toLowerCase();
    var view;
    
    if(ext === 'mp4' || ext === 'webm'){
      view = $("<video src='"+$src+"' controls autoplay class='img-fluid'></video>");
    } else if (ext === 'pdf') {
      view = $("<embed src='"+$src+"' type='application/pdf' width='100%' height='100%' style='min-height:75vh;' />");
    } else {
      view = $("<img src='"+$src+"' class='img-fluid' />");
    }
    
    $('#viewer_content').html(view);
    $('#viewer_modal').modal({
        show: true,
        backdrop: 'static',
        keyboard: true,
        focus: true
    });
    end_load(); 
  }

  // Dynamic remote content wrapper injector
  window.uni_modal = function($title = '', $url = '', $size = ""){
    start_load();
    $.ajax({
        url: $url,
        error: err => {
            console.error("Layout load fault at target engine container path:", err);
            alert_toast("An infrastructure fault dropped resource transmission requests.", "danger");
            end_load();
        },
        success: function(resp){
            if(resp){
                $('#uni_modal .modal-title').html($title);
                $('#uni_modal .modal-body').html(resp);
                
                // Clear any sizing configurations safely without wiping fundamental layout base classes
                var dialog = $('#uni_modal .modal-dialog');
                dialog.removeClass('large mid-large modal-md modal-sm modal-lg modal-xl');
                
                if($size != ''){
                    dialog.addClass($size);
                } else {
                    dialog.addClass('modal-md');
                }
                
                $('#uni_modal').modal({
                  show: true,
                  backdrop: 'static',
                  keyboard: false,
                  focus: true
                });
                
                end_load();
            }
        }
    });
  }

  // Structured Confirmation Routing Interface Action Handler
  window._conf = function($msg = '', $func = '', $params = []){
     // Avoid structural inline string breakdowns by using jQuery's data/off handling pattern safely
     $('#confirm_modal #confirm').off('click').on('click', function(){
         window[$func].apply(null, $params);
         $('#confirm_modal').modal('hide');
     });
     $('#confirm_modal .modal-body').html($msg);
     $('#confirm_modal').modal('show');
  }

  // Standard Action Status Alert Toast
  window.alert_toast = function($msg = 'System Event', $bg = 'success'){
     var toast = $('#alert_toast');
     toast.removeClass('bg-success bg-danger bg-info bg-warning');
     toast.addClass('bg-' + $bg);
     toast.find('.toast-body').html($msg);
     toast.toast({ delay: 3500 }).toast('show');
  }

  $(document).ready(function(){
      $('#preloader').fadeOut('fast', function() {
          $(this).remove();
      });
  });
</script> 
</html>