{% extends 'theme.html.twig' %}

{% block title %} International Fuel Surcharge - {{ parent() }} {% endblock %}

{% block body %}



{% apply inline_css %}
  <style>

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
 /* border: 1px solid #ddd; */
  padding: 5px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
  background-color: #f05122;
  color: white;
}


/* Progress Bar*/

.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  color:#000000!important;
  font-weight:600;
  width:100%;
}

.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
  
}


.stepper-item.active {
  font-weight: 900;
  color:red;
}

.stepper-item.completed .step-counter {
  background-color: #4bb543;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-bottom: 2px solid #4bb543;
  width: 100%;
  top: 20px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

.form-control::-moz-selection { /* Code for Firefox */
  color: red;
  background: white;
}
.form-control::selection {
  color: red;
  background: white;
}


.form-control::-webkit-input-placeholder { /* Edge */
  color: black;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
}

.form-control::placeholder {
  color: black;
}



a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

 

 .wpcf7-form-control::-moz-selection { /* Code for Firefox */
  color: red;
  background: white;
}
.wpcf7-form-control::selection {
  color: red;
  background: white;
}

.wpcf7-form-control::-webkit-input-placeholder { /* Edge */
  color: black;
}

.wpcf7-form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: black;
}

.wpcf7-form-control::placeholder {
  color: black;
}


@media screen and (min-width:768px) {
.fscDiv {
   margin-left: 200px;
   margin-right: 200px;
}
}

 </style> 
{% endapply %}



<div class="dilevars-page-title d-flex align-items-center  header-layout-2 title-align-center title-color-white">
    <div class="dilevars-page-title-layer container">
        <div class="row">
            <div class="col-md-12">            
                <h1 class="page-title">
                    International Fuel Surcharge
Week                </h1>
                                    <div class="page-breadcrumbs">
                    <div class="breadcrumb"><a href="#">Home</a> >  <span class="current">International Fuel Surcharge
Week</span></div>                    </div>
                                </div>                
        </div>
    </div>
</div>
    <div id="content" class="site-content"><div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div id="primary" class="content-area">
                <main id="main" >
                <article id="post-273" class="row post-273 project type-project status-publish has-post-thumbnail hentry project-category-advices">

    
    <div class="col-md-12">
        <div class="row">
            <div class="col-lg-12">
                <div class="dilevars-project-content">
                            <div data-elementor-type="wp-post" data-elementor-id="273" class="elementor elementor-273">
                        <div class="elementor-inner">
                <div class="elementor-section-wrap">
                                    <section class="elementor-section elementor-top-section elementor-element elementor-element-6bad1cee elementor-section-boxed elementor-section-height-default elementor-section-height-default cd-bg-color-transparent" data-id="6bad1cee" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                            <div class="elementor-row">
                    <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-37b3068e cd-bg-color-transparent" data-id="37b3068e" data-element_type="column">
            <div class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                        <div class="elementor-element elementor-element-1e7f45c8 elementor-widget elementor-widget-heading" data-id="1e7f45c8" data-element_type="widget" data-widget_type="heading.default">
                <div class="elementor-widget-container">
                <h3 class="elementor-heading-title elementor-size-default" style="text-align: center;">International Fuel Surcharge</h3>
                <br> 
                    </div>
                </div>
                        </div>
                    </div>
        </div>
                                </div>
                    </div>
        </section>
        
                <section class="elementor-section elementor-top-section elementor-element elementor-element-10c5160d elementor-section-boxed elementor-section-height-default elementor-section-height-default cd-bg-color-transparent" data-id="10c5160d" data-element_type="section">
                        {# <div class="elementor-container elementor-column-gap-default"> #}
                        
                                <div class="row fscDiv"> 
                                    {% for fscValuesGrou in fscValuesGroup %}                                        
                                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">                                
                                            <h3 class="elementor-heading-title elementor-size-default" style="margin-bottom : 10px;">{{ fscValuesGrou.courier.name }}</h3>
                                                                                        
                                            <table id="customers" style="width:100%; margin-bottom : 15px;">
                                              <tr>
                                                <th>SL#</th>
                                                <th>Date</th>                                                
                                                <th>Surcharge</th>
                                              </tr>
                                             {% for setting in fscValues %}
                                                {% if fscValuesGrou.courier.id == setting.courier.id %}
                                                {% set counter = ( counter | default(0) ) + 1 %}  
                                                    <tr>
                                                        <td style="width:5%; color:#000 !important;"> {{ counter }} </td>
                                                        <td style="width:45%; color:#000 !important;"> {{ setting.fromDate|date('d-F-Y') }} - {{ setting.toDate|date('d-F-Y') }} </td>                                            
                                                        <td style="width:10%; color:#000 !important;">{{ setting.currency|number_format(2, '.', ',') }} %</td>
                                                    </tr>    
                                                {% endif %}                                    
                                              {% else %}
                                                <tr>
                                                <td colspan="6">No records found</td>
                                                </tr>
                                              {% endfor %}
                                             
                                            </table>
                                        </div>
                                    {% endfor %}
                                        

                                    </div>

                            
                    {# </div> #}
        </section>
                <br> <br>
                
        <div id="snackbar"></div>

                                    </div>
            </div>
                    </div>
                        </div>
            </div>
        </div>
    </div>
</article><!-- #post-273 -->

        

</main><!-- #main -->
            </div><!-- #primary -->
        </div>
    </div>
</div>
    </div><!-- #content -->




{% endblock %}