<?php include('header.php'); ?>
<style>
    /* Custom tab styling */
    .nav-tabs .nav-link {
      border: none;
      border-bottom: 4px solid transparent; /* Increased thickness */
      padding-bottom: 0px; /* Added spacing */
      margin-right: 10px; /* Increased spacing between tabs */
      text-align: center; /* Center align text */
    }
    .nav-tabs .nav-item {
      width: calc(100% / 4); /* Equal width for each tab */
      margint: 5px;
    }
    .nav-tabs .nav-link.active {
      border-bottom-color: #48B469 !important; /* Highlight color */
      padding-bottom: 20px; /* Increased length */
      background-color:#fff6;
    }
    .nav-tabs .nav-link:hover {
      border-bottom-color: #48B469; /* Highlight color */
    }
    .nav-tabs .nav-link.active:hover {
      border-bottom-color: #48B469; /* Highlight color */
    }
        

   
    @media screen and (max-width: 500px) {
  .browbtn {
    transform: translateY(-31px);
  }   
}
@media screen and (min-width:600px) {
  .browbtn {
    transform: translateY(-7px); 
  }   
}
    /* @media screen (min-width:600px ) {
      .browbtn{
     transform: translatey(-7px);
    }
    } */

    .tabbtn1{
      padding:10px 30px ;
      border:none;  
      color:#000;  
      background-color:#F1F2F4;  
    }
    .tabbtn1:hover{
     background-color:#0079B8;
     color:#fff:
    }

    .tabbtn2{
      padding:10px 30px ;
      border:none;  
      background-color:#0079B8;
     color:#fff !important:     
    }
    .tabbtn2:hover{
      background-color:#F1F2F4;  
     color:#000 !important:
    } 

  </style>
    
    <section class="bg-white">
            <div class="hds-cta-area hds-section-bg ">
                 <div class=" pt-40  " style="background-color:#0079B8; background-image: url(assets/okweb/Group.png); background-size:cover; background-position:center;">
            <div class="container">
               
                    <div class="row align-items-center text-white">
                        <div class="col-lg-12 p-5">
                            <h2 class="fs-36 lh-44  pr-40 text-white">Raise Your Complaint</h2>
                            <hr style="width:100px; height:2px ;text-align:left;margin-left:0 color:#fff; background-color:#fff">
                           <p>Your complaints are important to us. You can submit a complaint (about any raise issue, suspicious activity). We will arise those issue to the ruling party and try to solve those issue.
                            Also you can check the current status of your complaint.</p> 
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
            </section> 



  <div class="container shadow-sm p-3 mb-5 bg-white rounded " style="margin-top: 50px">
    <div class="row mt-3">
      <div class="col">
        <h2> <img src="assets/okweb/edit.png">&nbsp;Submit a Complaint</h2>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true"></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false"></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tabb-tab" data-toggle="tab" href="#tabb" role="tab" aria-controls="tabb" aria-selected="false"></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false"></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
          <div class="mt-3"><strong>Who are you sending this feedback on behalf of?</strong></div>
            <div class="row mt-5 text-center">
             
            <div class="col-md-6 ">
                <div class="shadow p-3 mb-5  rounded" style="background-color:#FAFAFA;">
                  <img src="assets/okweb/frame.png"class="mb-3" width="64">
                  <h4>My Self</h4>
                </div>
              </div>
              <div class="col-md-6 "> 
               <div class="shadow p-3 mb-5  rounded" style="background-color:#FAFAFA;"> 
              <img src="assets/okweb/dubfreame.png" class="mb-3" width="64">
                  <h4>Someone Else</h4></div>
            </div>
            </div>
          </div>
          <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
          <div class="mt-3"><strong>Would you like to share your contact information so we can reach out to you about your case?</strong></div>
            <div class="row  mt-5 text-center">
          
            <div class="col-md-6 ">
                <div class="shadow p-3 mb-5  rounded" style="background-color:#FAFAFA;">
                  <img src="assets/okweb/eye.png"class="mb-3" width="64">
                  <h4>Share Information</h4>
                </div>
              </div>
              <div class="col-md-6 "> 
               <div class="shadow p-3 mb-5  rounded" style="background-color:#FAFAFA;"> 
              <img src="assets/okweb/eye-slash.png" class="mb-3" width="64">
                  <h4>Remain Anonymous.</h4></div>
            </div>
            </div>
          </div>
          
          
          <div class="tab-pane fade" id="tabb" role="tabpanel" aria-labelledby="tabb-tab">
          <div class="mt-3"><strong>Would you like to share your contact information
so we can reach out to you about your case?</strong></div>
            <div class="row  mt-5 justify-content-center">
           <div class="col-12"><h2>Your Information</h2></div>
            <div class="col-md-12 ">
            <form>
                <div class="form-row">
                  <div class="form-group col-md-12">
                    <label for="inputEmail4">First Name</label>
                     <input class="form-control mr-sm-2" type="text"  aria-label="Search " style=" color:#000; background-color: transparent; border: 1px solid #0006;">
                  </div>
                  <div class="form-group col-md-12">
                    <label for="inputPassword4">Last Name</label>
                    <input class="form-control mr-sm-2" type="text"  aria-label="Search " style=" color:#000; background-color: transparent; border: 1px solid #0006;">
                  </div>
                  <div class="form-group col-md-12">
                    <label for="inputPassword4">Your Email</label>
                   <input class="form-control mr-sm-2" type="text"  aria-label="Search " style=" color:#000; background-color: transparent; border: 1px solid #0006;">
                  </div>
                  <div class="form-group col-md-12">
                    <label for="inputPassword4">Your Phone</label>
                   <input class="form-control mr-sm-2" type="text"  aria-label="Search " style=" color:#000; background-color: transparent; border: 1px solid #0006;">
                  </div>
                  <div class="form-group col-md-12">
                    <label for="inputPassword4">Your Address</label>
                   <input class="form-control mr-sm-2" type="text"  aria-label="Search " style=" color:#000; background-color: transparent; border: 1px solid #0006;"> 
                  </div>
                </div> 
               </form>

              </div>

            </div>
          </div>

          
          
          
          
          <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
            <div class="row">
              <div class="col-md-12 mt-3">
                <form>
                  <h4>Describe Your Issue</h4>
                <div class="form-group">
                <label for="exampleFormControlTextarea1">Your Description Here</label>
                <textarea class="form-control incol" id="exampleFormControlTextarea1" rows="9" style="border-radius:15px; color:#000; background-color: transparent; border: 1px solid #0006;"></textarea>
              </div>
              <div class="form-group" style="padding:20px; border:1px dashed #000; border-radius:15px;">
                <!-- <lable for="coustbtn">Upload Attachment Here</lable> -->
                <input type="file"  id="coustbtn">
             <button class="float-right tabbtn1  browbtn "type="file" >Browse</button>
               
              </div>
                </form>
              </div>
             
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-3">
      <div class="col">
        <button class=" tabbtn1 float-left" id="prevBtn">Previous</button>
        <button class="tabbtn2 float-right" id="nextBtn">Next</button>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {
      // Initialize tab index
      let currentTab = 0;

      // Function to show a specific tab
      function showTab(n) {
        // Hide content of previously active tab
        $('.tab-pane.active').removeClass('show active');
        // Remove active class from all nav links
        $('.nav-link.active').removeClass('active');
        // Show content of the current tab
        $(`.tab-pane:eq(${n})`).addClass('show active');
        // Add active class to all tabs up to the current tab
        for (let i = 0; i <= n; i++) {
          $(`.nav-link:eq(${i})`).addClass('active');
        }
      }

      // Function to handle the "Next" button click
      $('#nextBtn').click(function() {
        // Move to the next tab
        currentTab++;
        if (currentTab >= $('.nav-link').length) {
          currentTab = 0;
        }
        showTab(currentTab);
      });

      // Function to handle the "Previous" button click
      $('#prevBtn').click(function() {
        // De-highlight the current tab
        $(`.nav-link:eq(${currentTab})`).removeClass('active');
        currentTab--;
        if (currentTab < 0) {
          currentTab = $('.nav-link').length - 1; // Set currentTab to the last tab index
        }
        showTab(currentTab);
      });
    });
  </script>


<?php include('footer.php'); ?>