@extends("layout")
@section("content")

<button class="tablink" onclick="openPage('vl_summary', this, 'gray')"  id="defaultOpen">VL/EID <br>Stock Summaries</button>
<button class="tablink" onclick="openPage('warehouse', this, 'gray')">Warehouse <br>Stock Statuses For Month of {{$monthName}}</button>
<button class="tablink" onclick="openPage('cphl_warehouse', this, 'gray')">CPHL Vs. WAREHOUSE VL / EID <br>Stock Status</button>
<button class="tablink" onclick="openPage('facility', this, 'gray')">Facility Consumption<br>Report</button>

<div id="vl_summary" class="tabcontent">
  <div class="col-md-6">
    <div class="box box-primary collapsed-box">
      <div class="box-header with-border">
        <h1 class="box-title">Abbott Equipment Stock Summary As @ {{$today}}</h1><br><br>


        <div  class="panel panel-primary row">
          <div class="panel-body">
            <div class="col-md-12 able-responsive">
              <table id="abbott" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <!-- <th class="text-center">Item Description</th> -->
                    <th class="text-center">Stock On Hand</th>
                    <th class="text-center">Months Of Stock</th>
                    <th class="text-center">AMC</th>
                    <th class="text-center">Number Of Tests</th>

                  </tr>
                </thead>
                <tbody>
                                    @foreach($abt as $value)

                  @if($value->mos() <= 3)
                  <tr class="bg-red">
                    @elseif($value->mos() == 4 )
                    <tr class="bg-orange">
                      @elseif($value->mos() >= 6)
                      <tr class="bg-green">
                        @else
                        <tr>
                          @endif
                          <!-- <td>{{ $value->name}}</td> -->

                          <td class="text-center">{{ $value->available() }}</td>

                          <td class="text-center">{{$value->mos()}} <small>months</small></td>
                          <td class="text-center">{{$value->amc()}}</td>
                          <td class="text-center">{{ROUND ($value->available()*96)}} tests</td>
                        </tr>
                                                @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="box box-success collapsed-box">
            <div class="box-header with-border">
              <h1 class="box-title" data-toggle="tooltip" data-placement="bottom" title="Click to view logistics reports and special reports">Roche / Cobas 8800 Stock Summary As @ {{$today}}</h1><br><br>
              <div  class="panel panel-primary row">
                <div class="panel-body">
                  <div class="col-md-12 able-responsive">
                    <table id="abbott" class="table table-bordered table-striped">
                      <thead>
                        <tr>
                          <!-- <th class="text-center">Item Description</th> -->
                          <th class="text-center">Stock On Hand</th>
                          <th class="text-center">Months Of Stock</th>
                          <th class="text-center">AMC</th>
                          <th class="text-center">Number Of Tests</th>
                        </tr>
                      </thead>
                      <tbody>
                                                @foreach($cob as $value)

                        @if($value->mos() <= 3)
                        <tr class="bg-red">
                          @elseif($value->mos() == 4)
                          <tr class="bg-orange">
                            @elseif($value->mos() >= 6)
                            <tr class="bg-green">
                              @else
                              <tr>
                                @endif

                                <!-- <td>{{ $value->name}}</td> -->
                                <td class="text-center">{{ $value->available() }}</td>
                                <td class="text-center">{{$value->mos()}} <small>months</small></td>
                                <td class="text-center">{{$value->amc()}}</td>
                                <td class="text-center">{{ROUND ($value->available()*96)}} tests</td>
                              </tr>
                                                            @endforeach
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-6">
                <div class="box box-primary collapsed-box">
                  <div class="box-header with-border">
                    <h1 class="box-title">Cobas Taqman CAP/CTM-EID Stock Summary As @ {{$today}}</h1><br><br>
                    <div  class="panel panel-primary row">
                      <div class="panel-body">
                        <div class="col-md-12 able-responsive">
                          <table id="abbott" class="table table-bordered table-striped">
                            <thead>
                              <tr>
                                <!-- <th class="text-center">Item Description</th> -->
                                <th class="text-center">Stock On Hand</th>
                                <th class="text-center">Months Of Stock</th>
                                <th class="text-center">AMC</th>
                                <th class="text-center">Number Of Tests</th>
                              </tr>
                            </thead>
                            <tbody>
                                                            @foreach($cteid as $value)

                              @if($value->mos() <= 3)
                              <tr class="bg-red">
                                @elseif($value->mos() == 4 )
                                <tr class="bg-orange">
                                  @elseif($value->mos() >= 6)
                                  <tr class="bg-green">
                                    @else
                                    <tr>
                                      @endif

                                      <!-- <td>{{ $value->name}}</td> -->
                                      <td class="text-center">{{ $value->available() }}</td>
                                      <td class="text-center">{{$value->mos()}} <small>months</small></td>
                                      <td class="text-center">{{$value->amc()}}</td>
                                      <td class="text-center">{{ROUND ($value->available()*48)}} tests</td>
                                    </tr>
                                                                        @endforeach
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-md-6">
                      <div class="box box-warning collapsed-box">
                        <div class="box-header with-border">
                          <h1 class="box-title">Cobas Taqman CAP/CTM-VL Stock Summary As @ {{$today}}</h1><br><br>
                          <div  class="panel panel-danger row">
                            <div class="panel-body">
                              <div class="col-md-12 able-responsive">
                                <table id="w" class="table table-bordered table-striped table-collapsed">
                                  <thead>
                                    <tr>
                                      <!-- <th class="text-center">Item Description</th> -->
                                      <th class="text-center">Stock On Hand</th>
                                      <th class="text-center">Months Of Stock</th>
                                      <th class="text-center">AMC</th>
                                      <th class="text-center">Number Of Tests</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                                                        @foreach($ctvl as $value)

                                    @if($value->mos() <= 3)
                                    <tr class="bg-red">
                                      @elseif($value->mos() == 4 )
                                      <tr class="bg-orange">
                                        @elseif($value->mos() >= 6)
                                        <tr class="bg-green">
                                          @else
                                          <tr>
                                            @endif

                                            <!-- <td>{{ $value->name}}</td> -->
                                            <td class="text-center">{{ $value->available() }}</td>
                                            <td class="text-center">{{$value->mos()}} <small>months</small></td>
                                            <td class="text-center">{{$value->amc()}}</td>
                                            <td class="text-center">{{ROUND ($value->available()*48)}} tests</td>
                                          </tr>
                                                                                    @endforeach
                                        </tbody>
                                      </table>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- Key/Color codes -->
                          <table class="table table-bordered">
                            <thead>
                              <tr>
                                <th>Color Code</th>
                                <th>Interpretation</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td class="bg-red"></td>
                                <td>Zero Stock / Commodity Below Minimum Stock Level
                                </tr>
                                <tr>
                                  <td class="bg-orange"></td>
                                  <td>Low Stock / Commodity almost at Minimum Stock Level
                                  </tr>
                                  <tr>
                                    <td class="bg-green"></td>
                                    <td>Sufficient Stock Level / Commodity within Maximum Stock Level</td>
                                  </tr>

                                </tbody>
                              </table>
                            </div>
                          </div>

                          <div id="cphl_warehouse" class="tabcontent">
                            <div class="col-md-12">
                              <div class="box box-primary collapsed-box">
                                <div class="box-header with-border">
                                  <h1 class="box-title">Abbott Equipment Stock status As @ {{$today}}</h1><br>

                                  <div class="box-tools pull-right">
                                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"> <br>View Data</i>
                                    </button>
                                  </div>
                                  <!-- /.box-tools -->
                                </div>
                                <!-- /.box-header -->
                                <div class="box-body">

                                  <div  class="panel panel-primary row">
                                    <div class="panel-heading ">
                                      <span class="glyphicon glyphicon-list"></span>
                                      Abbott Equipment Stock Level Summary
                                      <div class="panel-btn">
                                        <a class="btn btn-xs btn-primary" href="#">
                                          <span class="glyphicon glyphicon-download"></span>
                                          Download
                                        </a>
                                      </div>
                                    </div>
                                    <div class="panel-body">
                                      <div class="col-md-12 able-responsive">
                                        <table id="abbott" class="table table-bordered table-striped search-table">
                                          <thead>
                                            <tr>
                                              <th class="text-center">#</th>
                                              <th class="text-center">Item Description</th>
                                              <th class="text-center">Stock On Hand <br>@ CPHL</th>
                                              <th class="text-center">Stock On Hand <br>@ JMS</th>
                                              <th class="text-center">Stock On Hand <br>@ MAUL</th>
                                              <th class="text-center">Stock On Hand <br>@ NMS</th>
                                              <th class="text-center">Total Pipeline</th>
                                              <th class="text-center">CPHL <br>Months Of Stock </th>
                                              <th class="text-center">CPHL AMC</th>

                                            </tr>
                                          </thead>
                                          <tbody>
                                                                                        @foreach($abbott as $value)

                                            @if($value->mos() <= 3)
                                            <tr class="bg-red">
                                              @elseif($value->mos() == 4 )
                                              <tr class="bg-orange">
                                                @elseif($value->mos() >= 6)
                                                <tr class="bg-green">
                                                  @else
                                                  <tr>
                                                    @endif

                                                    <th>{{ $row }}</th>
                                                    <td>{{ $value->name}}</td>
                                                    <td class="text-center">{{ $value->available() }}</td>
                                                    <td class="text-center">{{ $value->jms() }}</td>
                                                    <td class="text-center">{{ $value->maul() }}</td>
                                                    <td class="text-center">{{ $value->nms() }}</td>
                                                    <td class="text-center">{{ $value->pipeline() }}</td>
                                                    <td class="text-center">{{$value->mos()}} <small>months</small></td>
                                                    <td class="text-center">{{$value->amc()}}</td>
                                                  </tr>
                                                                                                    @endforeach
                                                </tbody>
                                              </table>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>

                                  <div class="col-md-12">
                                    <div class="box box-success collapsed-box">
                                      <div class="box-header with-border">
                                        <h3 class="box-title">Roche / Cobas 8800 Stock Status As @ {{$today}}</h3>
                                        <br>

                                        <div class="box-tools pull-right">
                                          <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"> <br>View Data</i>
                                          </button>
                                        </div>
                                        <!-- /.box-tools -->
                                      </div>
                                      <!-- /.box-header -->
                                      <div class="box-body">

                                        <div  class="panel panel-primary row">
                                          <div class="panel-heading ">
                                            <span class="glyphicon glyphicon-list"></span>
                                            Roche / Cobas 8800
                                            <div class="panel-btn">
                                              <a class="btn btn-sm btn-default" href="#">
                                                <span class="glyphicon glyphicon-download"></span>
                                                Download
                                              </a>
                                            </div>
                                          </div>
                                          <div class="panel-body">
                                            <div class="table-responsive">
                                              <table class="table table-striped table-bordered search-table" id="cobas">
                                                <thead>
                                                  <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">Item Description</th>
                                                    <th class="text-center">Stock On Hand <br>@ CPHL</th>
                                                    <th class="text-center">Stock On Hand <br>@ JMS</th>
                                                    <th class="text-center">Stock On Hand <br>@ MAUL</th>
                                                    <th class="text-center">Stock On Hand <br>@ NMS</th>
                                                    <th class="text-center">Total Pipeline</th>
                                                    <th class="text-center">CPHL <br>Months Of Stock </th>
                                                    <th class="text-center">CPHL AMC</th>

                                                  </tr>
                                                </thead>
                                                <tbody>
                                                                                                    @foreach($roche8800 as $value)

                                                  @if($value->mos() <= 3)
                                                  <tr class="bg-red">
                                                    @elseif($value->mos() == 4 )
                                                    <tr class="bg-orange">
                                                      @elseif($value->mos() >= 6)
                                                      <tr class="bg-green">
                                                        @else
                                                        <tr>
                                                          @endif

                                                          <th>{{ $row }}</th>
                                                          <td>{{ $value->name}}</td>

                                                          <td class="text-center">{{ $value->available() }}</td>
                                                          <td class="text-center">{{ $value->jms() }}</td>
                                                          <td class="text-center">{{ $value->maul() }}</td>
                                                          <td class="text-center">{{ $value->nms() }}</td>
                                                          <td class="text-center">{{ $value->pipeline() }}</td>
                                                          <td class="text-center">{{$value->mos()}} <small>months</small></td>
                                                          <td class="text-center">{{$value->amc()}}</td>
                                                        </tr>
                                                                                                                @endforeach
                                                      </tbody>
                                                    </table>
                                                  </div>
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>

                                        <div class="col-md-12">
                                          <div class="box box-danger collapsed-box">
                                            <div class="box-header with-border">
                                              <h3 class="box-title">Cobas Taqman CAP/CTM-EID Stock Status As @ {{$today}}</h3>
                                              <br>


                                              <div class="box-tools pull-right">
                                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"><br>View Data</i>
                                                </button>
                                              </div>
                                              <!-- /.box-tools -->
                                            </div>
                                            <!-- /.box-header -->
                                            <div class="box-body">
                                              <div  class="panel panel-primary row">
                                                <div class="panel-heading ">
                                                  <span class="glyphicon glyphicon-list"></span>
                                                  Cobas Taqman CAP/CTM-EID
                                                  <div class="panel-btn">
                                                    <a class="btn btn-sm btn-default" href="#">
                                                      <span class="glyphicon glyphicon-download"></span>
                                                      Download
                                                    </a>
                                                  </div>
                                                </div>
                                                <div class="panel-body">
                                                  <div class="table-responsive">
                                                    <table class="table table-striped table-bordered search-table" id="ctmeid">
                                                      <thead>
                                                        <tr>
                                                          <th class="text-center">#</th>
                                                          <th class="text-center">Item Description</th>
                                                          <th class="text-center">Stock On Hand <br>@ CPHL</th>
                                                          <th class="text-center">Stock On Hand <br>@ JMS</th>
                                                          <th class="text-center">Stock On Hand <br>@ MAUL</th>
                                                          <th class="text-center">Stock On Hand <br>@ NMS</th>
                                                          <th class="text-center">Total Pipeline</th>
                                                          <th class="text-center">CPHL <br>Months Of Stock </th>
                                                          <th class="text-center">CPHL AMC</th>

                                                        </tr>
                                                      </thead>
                                                      <tbody>
                                                                                                                @foreach($taqmaneid as $value)

                                                        @if($value->mos() <= 3)
                                                        <tr class="bg-red">
                                                          @elseif($value->mos() == 4 )
                                                          <tr class="bg-orange">
                                                            @elseif($value->mos() >= 6)
                                                            <tr class="bg-green">
                                                              @else
                                                              <tr>
                                                                @endif

                                                                <th>{{ $row }}</th>
                                                                <td>{{ $value->name}}</td>

                                                                <td class="text-center">{{ $value->available() }}</td>
                                                                <td class="text-center">{{ $value->jms() }}</td>
                                                                <td class="text-center">{{ $value->maul() }}</td>
                                                                <td class="text-center">{{ $value->nms() }}</td>
                                                                <td class="text-center">{{ $value->pipeline() }}</td>
                                                                <td class="text-center">{{$value->mos()}} <small>months</small></td>
                                                                <td class="text-center">{{$value->amc()}}</td>
                                                              </tr>
                                                                                                                            @endforeach
                                                            </tbody>
                                                          </table>
                                                        </div>
                                                      </div>
                                                    </div>
                                                  </div>
                                                </div>
                                              </div>

                                              <div class="col-md-12">
                                                <div class="box box-warning collapsed-box">
                                                  <div class="box-header with-border">
                                                    <h3 class="box-title">Cobas Taqman CAP/CTM-VL Stock Status As @ {{$today}}</h3><br>
                                                    <div class="box-tools pull-right">
                                                      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"><br>View Data</i>
                                                      </button>
                                                    </div>
                                                  </div>
                                                  <div class="box-body">
                                                    <div  class="panel panel-primary row">
                                                      <div class="panel-heading ">
                                                        <span class="glyphicon glyphicon-list"></span>
                                                        Cobas Taqman CAP/CTM-VL
                                                        <div class="panel-btn">
                                                          <a class="btn btn-sm btn-default" href="#">
                                                            <span class="glyphicon glyphicon-download"></span>
                                                            Download
                                                          </a>
                                                        </div>
                                                      </div>
                                                      Cobas Taqman CAP/CTM-VL
                                                      <div class="panel-body">
                                                        <div class="table-responsive">
                                                          <table class="table table-striped table-bordered search-table" id="ctmvl">
                                                            <thead>
                                                              <tr>
                                                                <th class="text-center">#</th>
                                                                <th class="text-center">Item Description</th>
                                                                <th class="text-center">Stock On Hand <br>@ CPHL</th>
                                                                <th class="text-center">Stock On Hand <br>@ JMS</th>
                                                                <th class="text-center">Stock On Hand <br>@ MAUL</th>
                                                                <th class="text-center">Stock On Hand <br>@ NMS</th>
                                                                <th class="text-center">Total Pipeline</th>
                                                                <th class="text-center">CPHL <br>Months Of Stock </th>
                                                                <th class="text-center">CPHL AMC</th>

                                                              </tr>
                                                            </thead>
                                                            <tbody>
                                                                                                                            @foreach($taqmanvl as $value)

                                                              @if($value->mos() <= 3)
                                                              <tr class="bg-red">
                                                                @elseif($value->mos() == 4 )
                                                                <tr class="bg-orange">
                                                                  @elseif($value->mos() >= 6)
                                                                  <tr class="bg-green">
                                                                    @else
                                                                    <tr>
                                                                      @endif

                                                                      <th>{{ $row }}</th>
                                                                      <td>{{ $value->name}}</td>
                                                                      <td class="text-center">{{ $value->available() }}</td>
                                                                      <td class="text-center">{{ $value->jms() }}</td>
                                                                      <td class="text-center">{{ $value->maul() }}</td>
                                                                      <td class="text-center">{{ $value->nms() }}</td>
                                                                      <td class="text-center">{{ $value->pipeline() }}</td>
                                                                      <td class="text-center">{{$value->mos()}} <small>months</small></td>
                                                                      <td class="text-center">{{$value->amc()}}</td>
                                                                    </tr>
                                                                                                                                        @endforeach
                                                                  </tbody>
                                                                </table>
                                                              </div>
                                                            </div>
                                                          </div>
                                                        </div>
                                                      </div>

                                                      <table class="table table-bordered">
                                                        <thead>
                                                          <tr>
                                                            <th>Color Code</th>
                                                            <th>Interpretation</th>
                                                          </tr>
                                                        </thead>
                                                        <tbody>
                                                          <tr>
                                                            <td class="bg-red"></td>
                                                            <td>Zero Stock / Commodity Below Minimum Stock Level
                                                            </tr>
                                                            <tr>
                                                              <td class="bg-orange"></td>
                                                              <td>Low Stock / Commodity almost at Minimum Stock Level
                                                              </tr>
                                                              <tr>
                                                                <td class="bg-green"></td>
                                                                <td>Sufficient Stock Level / Commodity within Maximum Stock Level</td>
                                                              </tr>

                                                            </tbody>
                                                          </table>
                                                        </div>

                                                      </div>

                                                      <div id="warehouse" class="tabcontent">

                                                        <div class="tab">
                                                          <button class="tablin" onclick="openCity(event, 'maul')"><h3>MAUL<h3></button>
                                                            <button class="tablin" onclick="openCity(event, 'jms')"><h3>JMS<h3></button>
                                                              <button class="tablin" onclick="openCity(event, 'nms')"><h3>NMS<h3></button>
                                                              </div>

                                                              <!-- Tab content -->
                                                              <div id="maul" class="tabcon">
                                                                <table id='warehouse' class="table table-striped table-hover table-bordered search-table">
                                                                  <thead>
                                                                    <tr>
                                                                      <th>#</th>
                                                                      <th>Item Code</th>
                                                                      <th>Product Description</th>
                                                                      <th>Batch Number</th>
                                                                      <th>Batch Quantity</th>
                                                                      <th>Expiry Date</th>
                                                                    </tr>
                                                                  </thead>

                                                                  <tbody>

                                                                                                                                        @foreach($maul as $value)
                                                                    <tr>
                                                                      <td>{{ $row}}</td>
                                                                      <td>{{ $value->item_code}}</td>
                                                                      <td>{{$value->commodity->name}}</td>
                                                                      <td>{{ $value->batch_number}}</td>
                                                                      <td>{{ $value->batch_quantity}}</td>
                                                                      <td>{{ $value->expiry_date}}</td>
                                                                    </tr>
                                                                                                                                        @endforeach
                                                                  </tbody>
                                                                </table>
                                                              </div>

                                                              <div id="jms" class="tabcon">

                                                                <table id='warehouse' class="table table-striped table-hover table-bordered search-table">
                                                                  <thead>
                                                                    <tr>
                                                                      <th>#</th>
                                                                      <th>Item Code</th>
                                                                      <th>Product Description</th>
                                                                      <th>Batch Number</th>
                                                                      <th>Batch Quantity</th>
                                                                      <th>Expiry Date</th>
                                                                    </tr>
                                                                  </thead>
                                                                  <tbody>

                                                                                                                                        @foreach($jms as $value)
                                                                    <tr>
                                                                      <td>{{ $row}}</td>
                                                                      <td>{{ $value->item_code}}</td>
                                                                      <td>{{$value->commodity->name}}</td>
                                                                      <td>{{ $value->batch_number}}</td>
                                                                      <td>{{ $value->batch_quantity}}</td>
                                                                      <td>{{ $value->expiry_date}}</td>
                                                                    </tr>
                                                                                                                                        @endforeach
                                                                  </tbody>
                                                                </table>
                                                              </div>

                                                              <div id="nms" class="tabcon">
                                                                <table id='warehouse' class="table table-striped table-hover table-bordered search-table">
                                                                  <thead>
                                                                    <tr>
                                                                      <th>#</th>
                                                                      <th>Item Code</th>
                                                                      <th>Product Description</th>
                                                                      <th>Batch Number</th>
                                                                      <th>Batch Quantity</th>
                                                                      <th>Expiry Date</th>
                                                                    </tr>
                                                                  </thead>

                                                                  <tbody>

                                                                                                                                        @foreach($nms as $value)
                                                                    <tr>
                                                                      <td>{{ $row}}</td>
                                                                      <td>{{ $value->item_code}}</td>
                                                                      <td>{{$value->commodity->name}}</td>
                                                                      <td>{{ $value->batch_number}}</td>
                                                                      <td>{{ $value->batch_quantity}}</td>
                                                                      <td>{{ $value->expiry_date}}</td>
                                                                    </tr>
                                                                                                                                        @endforeach
                                                                  </tbody>
                                                                </table>
                                                              </div>


                                                              @stop

                                                              <style>
                                                                /* Set height of body and the document to 100% to enable "full page tabs" */
                                                                body, html {
                                                                  height: 100%;
                                                                  margin: 0;
                                                                  font-family: Arial;
                                                                }

                                                                /* Style tab links */
                                                                .tablink {
                                                                  background-color: #555;
                                                                  color: white;
                                                                  float: left;
                                                                  border: none;
                                                                  outline: none;
                                                                  cursor: pointer;
                                                                  padding: 14px 16px;
                                                                  font-size: 17px;
                                                                  width: 25%;
                                                                }

                                                                .tablink:hover {
                                                                  background-color: #777;
                                                                }
                                                                /* Style the tab content (and add height:100% for full page content) */
                                                                .tabcontent {
                                                                  color: white;
                                                                  display: none;
                                                                  padding: 100px 20px;
                                                                  height: 100%;
                                                                }

                                                                #vl_summary {background-color: white;}
                                                                #warehouse {background-color: white;}
                                                                #cphl_warehouse {background-color: white}
                                                                #facility {background-color: white;}

                                                                /* Style the tab */
                                                                .tab {
                                                                  overflow: hidden;
                                                                  border: 1px solid #ccc;
                                                                  background-color: #337ab7;
                                                                }
                                                                /* Style the buttons that are used to open the tab content */
                                                                .tab button {
                                                                  background-color: inherit;
                                                                  float: left;
                                                                  border: none;
                                                                  outline: none;
                                                                  cursor: pointer;
                                                                  padding: 14px 16px;
                                                                  transition: 0.3s;
                                                                }
                                                                /* Change background color of buttons on hover */
                                                                .tab button:hover {
                                                                  background-color: #ddd;
                                                                }
                                                                /* Create an active/current tablink class */
                                                                .tab button.active {
                                                                  background-color: black;
                                                                }

                                                                /* Style the tab content */
                                                                .tabcon {
                                                                  display: none;
                                                                  padding: 6px 12px;
                                                                  border: 1px solid #ccc;
                                                                  border-top: none;
                                                                }
                                                              </style>

                                                              <script>

                                                                function openPage(pageName, elmnt, color) {
                                                                  var i, tabcontent, tablinks;
                                                                  tabcontent = document.getElementsByClassName("tabcontent");
                                                                  for (i = 0; i < tabcontent.length; i++) {
                                                                    tabcontent[i].style.display = "none";
                                                                  }

                                                                  // Remove the background color of all tablinks/buttons
                                                                  tablinks = document.getElementsByClassName("tablink");
                                                                  for (i = 0; i < tablinks.length; i++) {
                                                                    tablinks[i].style.backgroundColor = "";
                                                                  }

                                                                  // Show the specific tab content
                                                                  document.getElementById(pageName).style.display = "block";

                                                                  // Add the specific color to the button used to open the tab content
                                                                  elmnt.style.backgroundColor = color;
                                                                }

                                                                // Get the element with id="defaultOpen" and click on it
                                                                document.getElementById("defaultOpen").click();

                                                                function openCity(evt, cityName) {
                                                                  // Declare all variables
                                                                  var i, tabcontent, tablinks;

                                                                  // Get all elements with class="tabcontent" and hide them
                                                                  tabcon = document.getElementsByClassName("tabcon");
                                                                  for (i = 0; i < tabcon.length; i++) {
                                                                    tabcon[i].style.display = "none";
                                                                  }

                                                                  // Get all elements with class="tablinks" and remove the class "active"
                                                                  tablin = document.getElementsByClassName("tablin");
                                                                  for (i = 0; i < tablin.length; i++) {
                                                                    tablin[i].className = tablin[i].className.replace(" active", "");
                                                                  }

                                                                  // Show the current tab, and add an "active" class to the button that opened the tab
                                                                  document.getElementById(cityName).style.display = "block";
                                                                  evt.currentTarget.className += " active";
                                                                }
                                                              </script>