<?php
session_start();
ob_start(); 
include_once('libs/database.php');
$obj = new Database();

?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Parivahan</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

  <style>
    html, body{
        height:100%;
        margin:0;
    }
    
    body{
        display:flex;
        flex-direction:column;
        font-family: Arial, sans-serif;
        background-image:url("app-assets/img/bg.jpg");
    }
    
    /* Main content ko expand karega */
    .main-content{
        flex:1;
        padding: 10px;
    }
    
    /* Top Header */
    .top-header{
      background:#ffffff;
      padding:15px 0;
      border-bottom:1px solid #ddd;
      /*background-image : url("app-assets/img/topbg.jpg");*/
    }

    .logo img{
      
      width:300px;
      
    }
    
    .logo h1{
      font-size:30px;
      margin:0;
    }
    
    .logo h5{
      font-size:16px;
      color:#666;
      margin:0;
    }


    .contact-box{
      text-align:right;
    }

    .contact-box a{
      text-decoration:none;
      color:rgb(15 47 85);
      font-size:18px;
      font-weight:700;
    }

    .contact-box i{
      margin-right:8px;
    }

    /* Navbar */
    .custom-navbar{
      background:rgb(15 47 85);
    }

    .custom-navbar .nav-link{
      color:#fff !important;
      font-weight:500;
      padding:15px 20px !important;
    }

    .custom-navbar .nav-link:hover{
      background:rgba(255,255,255,0.15);
    }
    
    footer{
        background:rgb(15 47 85);
        padding:30px 15px;
        color:#fff;
        border-top:6px solid #e2c889;
        margin-top:auto;
    }
    
        .login-card{
            max-width: 600px;
            border: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            overflow: hidden;
            margin:0 auto;
            margin-top: 20px;
            margin-bottom: 40px;
            border: 1px solid rgb(15 47 85);
        }

        .card-header{
            background: rgb(15 47 85);
            color: white;
            font-weight: bold;
        }

        .form-control{
            height: 45px;
            border-radius: 10px;
        }

        .btn-login{
            background: rgb(15 47 85);
            color: white;
            height: 45px;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
        }

        .btn-login:hover{
            background: #e2c889;
        }
        
        a{text-decoration:none;}

    
    @media(max-width:768px){

      .logo{
        text-align:center;
        margin-bottom:10px;
      }

      .contact-box{
        text-align:center;
      }
    }
  </style>
</head>
<body>

  <!-- Header -->
  <header>
    <!-- Top Section -->

    <div style="background:black;padding:10px">
      <div class="container">
        <div class="row align-items-center">

          <!-- Left Logo -->
            <div class="col-md-6 logo">
              <a href="#" target="_blank" style="color:#fff">
                <i class="bi bi-phone"></i> +91-9625065008
              </a>
            </div>

          <!-- Right WhatsApp -->
          <div class="col-md-6 d-none d-md-block" style="text-align: right;">
            <div id="google_translate_element"></div>
            <script type="text/javascript">
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({
                    pageLanguage: 'en',
                    includedLanguages: 'en,hi,pa',
                    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                }, 'google_translate_element');
            }
            </script>
            <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
            <style></style>
          </div>

        </div>
      </div>
    </div>

    <div class="top-header">
      <div class="container">
        <div class="row align-items-center">

          <!-- Left Logo -->
            <div class="col-md-6 logo">
                
              <div class="d-flex align-items-center gap-3">
                
                <!-- Logo -->
                <img src="assets/logcr.png" alt="Logo">
  
                <!-- Text -->
                
              </div>
            
            </div>

          <!-- Right WhatsApp -->
          <div class="col-md-6 d-none d-md-block" style="text-align: right;">
                <img src="assets/g20.png" style="width:100px">
                <img src="assets/ashoka.png" style="width:100px">
          </div>

        </div>
      </div>
    </div>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg custom-navbar">
      <div class="container">

        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">

            <li class="nav-item">
              <a class="nav-link active" href="home.php">Home</a>
            </li>

<?php
$obj->sql("SELECT * FROM services WHERE status='Active' ORDER BY id DESC");
$result = $obj->getResult();
foreach ($result as $row) { ?>
            <li class="nav-item">
              <a class="nav-link" href="service.php?name=<?php echo $row['name']; ?>"><?php echo $row['name']; ?></a>
            </li>
<?php } ?>

        <?php
        if(isset($_SESSION['id'])){ ?>
                    <li class="nav-item">
                      <a class="nav-link active" href="logout.php">Logout</a>
                    </li>
        
        <?php } ?>


          </ul>
        </div>

      </div>
    </nav>

  </header>
  <div class="main-content">

