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

    <!--<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />-->
    <!--<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />-->
    <link rel="stylesheet" type="text/css" href="<?= assets_url(); ?>/bootstrap-4.5.3-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <!-- <link rel="stylesheet" href="https://xplus.ph/shell-claims/assets/css/bootstrap.min.css" /> -->
    <script src="https://xplus.ph/shell-claims/assets/js/sweetalert.min.js"></script>

    <!--<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="<?= assets_url(); ?>/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>

<style>

  .glyphicon-envelope:before {
    content: "\2709"
  }
  .glyphicon {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: 400;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

    .navbar-dark .navbar-brand {
        color: #FFFFFF;
        font-size: 25px;
        font-weight: bold;
    }

    .navbar-dark .navbar-nav>.active>a {
        background-color: #0078C9
    }

  .navbar {
    margin-bottom: 0px;
  }

  .navbar-right {
    /* margin-right: 60px; */
  }

    .container-fluid {
        padding: 10px 5px;
    }

    .navbar>.container-fluid .navbar-brand {
        margin-left: 70px;
    }

</style>
</head>
<body>

<style>
    header {
      padding: 0 15px;
      margin-top: 30px;
    }
    .product_view .modal-dialog{
      max-width: 800px; 
      width: 100%;
    }
    .pre-cost{
      text-decoration: line-through; 
      color: #a5a5a5;
    }
    .space-ten{
      padding: 10px 0;
    }

    .container{
      margin-left: 90px;
      margin-top: 40px;
    }
    .col-md-4 {
      width: 50%;
    }

    .thumbnail {
      line-height: 1;
      width: 90%;
    }
    
    .box-header {
      margin: 0;
      background-color: #515357;
      padding: 3px;
      font-weight: 700;
      color: #FFFFFF;
    }

    p, h3{
      text-align: center;
    }

    h4{
      margin-left: 110px;
    }

    p {
      margin: 0 0 5px;
    }

    .space-ten {
      padding: 5px 0;
    }
    .openForm {
      display: none;
      /* position: fixed; */
      bottom: 0;
      right: 15px;
      border: .5px solid #D3D3D3;
      line-height: 1;
      z-index: 9;
      margin-right: 75px;
      margin-top:20px;
      width: 100%;
      height: 730px; 
      /* padding: 5px; */
    }

    .form-row, .form-group{
      padding: 8px;
    }
    /* .modal-body{
      background-color:#4db6ac; 
    } */
    .modal-header{
      background-color:#515357;
    }
    .modal-title{
      color:#D2F4FF;
    }
    .up{
      font-weight: bold;
      display: inline-block;
    }
  #fileElem{
    text-align: center;
    margin-left: 190px;
  }
  #progress-bar{
    text-align: center;
    margin:;
    width:100%;
  }
    
  .label-danger {
	background-color: #d9534f
  }

  .label-danger[href]:focus,
  .label-danger[href]:hover {
    background-color: #c9302c
  }   
  
  .label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
  }
  .label:empty {
    display: none;
  } 
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 10px;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .dropdown-menu .divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
  }

  @media (min-width:768px) {
    .navbar-right .dropdown-menu {
      right: 0;
      left: auto
    }
    .navbar-right .dropdown-menu-left {
      right: auto;
      left: 0
    }
  } 

  strong {
    font-weight: 700;
  }

  .nav-bar-notif {
    margin-right: 5px;
  }  
  
  .dropdown-menu>li>a {
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
  }
</style>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">SHELL-CLAIMS</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

        <?php 
            $main_uri = $this->uri->segment(1);
        ?>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item <?= $main_uri == 'manage_claim' ? 'active' : '' ?>">
            <a class="nav-link" href="<?= base_url().'manage_claim_dst' ?>">Claims <span class="sr-only">(current)</span></a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right nav-bar-notif">
          <li class="dropdown">
          <a href="#" class="dropdown-toggle drop-notif" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span></a>
          <ul class="dropdown-menu notif"></ul>
          </li>
        </ul>        
        <ul class="navbar-nav navbar-right">
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><?=strtoupper($header['username'])?> </a>
            <div class="dropdown-menu log" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="<?=base_url()?>logout">Logout</a>
            </div>
          </li>
        </ul>        
      </div>
    </nav>
    <div class="row" style="padding:9px;background: #fff;color: #000;border-bottom: 1px solid #717171;">
        <div class="container mt-0">
            <div class="row col-lg-12">
                <ul class="nav nav-pills">
                  
                  <li class="nav-item">
                      <a class="nav-link pr-3 <?= current_url() == base_url().'manage_claim_dst' ? 'active' : ''?>" href="<?= base_url().'manage_claim_dst' ?>">Manage Claims</a>
                  </li>
                  
                </ul>
            </div>
        </div>
    </div>


<script>
$(document).ready(function(){
 
 function load_unseen_notification(view = ''){
  $.ajax({
   url:"<?=base_url()?>fetch",
   method:"POST",
   data:{view:view},
   dataType:"json",
   success:function(data)
   {
    $('.notif').html(data.notification);
    if(data.unseen_notification > 0)
    {
     $('.count').html(data.unseen_notification);
    }
   }
  });
 }
 
 load_unseen_notification();
 
 $(document).on('click', '.drop-notif', function(){
  $('.count').html('');
  load_unseen_notification('yes');
 });
 
//  setInterval(function(){ 
//   load_unseen_notification();; 
//  }, 5000);
 
});
</script>
