@extends('layouts.apps')
@section('content')
<div class="col-sm-12 text-left ">
   <h3 class="border-bottom border-bot p-2">Certificate / Clearances Issuance</h3>
</div>
<div class="main-wrapper col-sm-12 text-left h-100  pr-0 pl-0 " >
   <div class="tab-nav p-0 m-0" style="background: linear-gradient(135deg, #fffefe,#12afc4, #16beca,#000000); ">
      {{-- <form action="{{ route('certificate.index') }}" method="GET" class="form-inline mt-2 mb-2" style="display: inline-block; float: right;  border-radius:4px; padding:0%; margin-bottom:0%;">
         @csrf
          <div class="input-group p-0 m-0">
             <input type="text" name="query" class="form-control  ml-2" placeholder="Search residents...">
             <button type="submit" class="btn btn-sm p-0 m-0 mr-2"><i class="fa fa-search pt-2 pb-2 pl-1 pr-2" style="font-size: 20px; border: 1px solid rgb(202, 198, 198);border-top-right-radius: 3px;border-bottom-right-radius: 3px; background-color:#fffefe;"></i></button>
              
          </div>
      </form> --}}
      
   </div>
  <style>.card-text{font-size: 13px;}.card-title{text-transform: uppercase; font-size: 17px;} .card{margin-top: 10px; height: 30vh;}</style>
<div class="row mt-2 ml-2 mr-2">
   {{-- Municipal/Business Permit --}}
   <div class="col-sm-3">
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">BARANGAY CLEARANCE</h5>
         <p class="card-text">This Clearance issued for the Resident of North Poblacion Only </p>
        
       </div>
       <div class="card-footer bg-transparent ">
         <div class="row">
            {{-- <div class="col-sm-6">No. 120</div> --}}
            <div class="col-sm-6"> 
               <form action="/clearlist" method="get" class="form-inline">
               @csrf
               <button type="submit" class="btn btn-sm btn-success">Generate</button>
            </form>
           </div>
         </div>
      </div>
     </div>
   </div>
   {{-- Employment Purposes --}}
   <div class="col-sm-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">CERTIFICATION OF DEATH</h5>
          <p class="card-text">This Certidicate issued for the Resident of North Poblacion Only </p>
         
        </div>
        <div class="card-footer bg-transparent ">
         <div class="row">
            {{-- <div class="col-sm-6">No. 120</div> --}}
            <div class="col-sm-6">
                <form action="/clearlist1" method="get" class="form-inline">
               @csrf
               <button type="submit" class="btn btn-sm btn-success">Generate</button>
            </form>
           </div>
         </div>
      </div>
      </div>
    </div>
   {{-- Municipal/Business Permit --}}
   <div class="col-sm-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">BARANGAY INDIGENCY</h5>
          <p class="card-text">This Credential issued for those who want to get Certification of Indigency. </p>
         
         
        </div>
        <div class="card-footer bg-transparent ">
         <div class="row">
            {{-- <div class="col-sm-6">No. 320</div> --}}
            <div class="col-sm-6">
                <form action="/clearlist2" method="get" class="form-inline">
               @csrf
               <button type="submit" class="btn btn-sm btn-success">Generate</button>
            </form>
           </div>
         </div>
      </div>
      </div>
    </div>
    
    {{-- Municipal/Business Permit --}}
    <div class="col-sm-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">CERTIFICATION FOR ELECTRIC CONNECTION</h5>
          <p class="card-text">This Certification for Electric Connection is issued for the Resident of North Poblacion.</p>
        
         
        </div>
        <div class="card-footer bg-transparent ">
         <div class="row">
            {{-- <div class="col-sm-6">No. 220</div> --}}
            <div class="col-sm-6"> 
               <form action="/clearlist3" method="get" class="form-inline">
               @csrf
               <button type="submit" class="btn btn-sm btn-success">Generate</button>
            </form>
           </div>
         </div>
      </div>
      </div>
    </div>
  
 </div>
 
   {{-- <table   class="  table  table-hover table-striped jambo_table table-sm bulk_action  border  no-footer" style="font-size:13px;">
      <thead>
        <tr class="headings" style="background: linear-gradient(135deg, #000000,#000000); font-size:14px; ">
              <th>Full Name</th>
              <th>Address</th>
              <th>Trancient</th>
              <th>age</th>
              <th>civilstatus</th>
              <th>Action</th>
          </tr>
      </thead>
      <tbody>
          @foreach ($results as $result)
              <tr>
               <td>{{ $result->firstname }}  {{ $result->middlename }}{{ $result->lastname }}</td>
                  <td>{{ $result->area }}{{ $result->barangay }}{{ $result->municipal }}</td>
                  <td>{{ $result->trancient }}</td>
                  <td>{{ $result->age }}</td>
                  <td>{{ $result->civilstatus }}</td>
               <td><button type="button" class="btn btn-outline-success btn-sm pr-2 pl-2 pt-0 pb-0" data-toggle="modal" data-target="#exampleModalCenter" data-firstname="{{ $result->resident_id }}"><i class="fa fa-id-card-o" aria-hidden="true"></i></button></td>
            </tr>
          @endforeach
      </tbody>
  </table>
@endif
  
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLongTitle">SELECT CERTIFICATE TYPE</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
        
         
            <form action="/submit" method="POST" class="form-inline">
               @csrf
               <input type="hidden" id="firstname" name="firstname" readonly>
               <select id="mySelect" class="form-control" name="certtype">
                 <option value="option1">Certificate of Indigency</option>
                 <option value="option2">Certificate of taxes</option>
                 <option value="option3">Barangay Certification</option>
               </select>
               <button type="submit" class="btn btn-sm">Submit</button>
             </form>
         
          
         
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
       </div>
     </div>
   </div>
 </div>
 @if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif
 <script>
$(document).ready(function() {
$('#exampleModalCenter').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var firstname = button.data('firstname');
var modal = $(this);
modal.find('#firstname').val(firstname);
});
});

</script>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

</div> --}}
  
</div>
  
  
  
  
  
  
  
  
  
  
  
  
  
{{--  
<div class="col-sm-12 text-left ">
   <h1 class="border-bottom border-bot p-2">Certificate Issurance</h1>
</div>


   <div class="col-sm-12 pl-0 pr-0 search-bars" >
      
      <div class="tab-nav " style="background: linear-gradient(135deg, #fffefe,#12afc4, #16beca,#000000);height:auto;">
            

         <button class="tablinks" onclick="schedules(event, 'request')">SEARCH</button>
         <button id="pdf-view-button" class="tablinks" onclick="schedules(event, 'type')">PDF VIEW</button>
         <button class="tablinks" onclick="schedules(event, ' schedule')">Certificate Type</button>
         <form action="{{ route('certificate.index') }}" method="GET" class="form-inline mt-2 mb-2" style="display: inline-block; float: right;  border-radius:4px; padding:0%; margin-bottom:0%;">
            @csrf
             <div class="input-group p-0 m-0">
                <input type="text" name="query" class="form-control  ml-2" placeholder="Search residents...">
                <button type="submit" class="btn btn-sm p-0 m-0 mr-2"><i class="fa fa-search pt-2 pb-2 pl-1 pr-2" style="font-size: 20px; border: 1px solid rgb(202, 198, 198);border-top-right-radius: 3px;border-bottom-right-radius: 3px; background-color:#fffefe;"></i></button>
                 
             </div>
         </form>
      </div>
      <div id="request" class="tabcontent">
         <div class="row-12">
            
            <div class="pl-2 pr-2 mt-1">
               @if ($results->isEmpty())
               <div class="alert alert-warning">NO Data Found!!!</div>
            @else
               <table   class="  table  table-hover table-striped jambo_table table-sm bulk_action  border  no-footer" style="font-size:13px;">
                  <thead>
                    <tr class="headings" style="background: linear-gradient(135deg, #000000,#000000); font-size:14px; ">
                          <th>Full Name</th>
                          <th>Address</th>
                          <th>Trancient</th>
                          <th>age</th>
                          <th>civilstatus</th>
                          <th>Action</th>
                      </tr>
                  </thead>
                  <tbody>
                      @foreach ($results as $result)
                          <tr>
                           <td>{{ $result->firstname }}  {{ $result->middlename }}{{ $result->lastname }}</td>
                              <td>{{ $result->area }}{{ $result->barangay }}{{ $result->municipal }}</td>
                              <td>{{ $result->trancient }}</td>
                              <td>{{ $result->age }}</td>
                              <td>{{ $result->civilstatus }}</td>
                           <td><button type="button" class="btn btn-outline-success btn-sm pr-2 pl-2 pt-0 pb-0" data-toggle="modal" data-target="#exampleModalCenter" data-firstname="{{ $result->resident_id }}"><i class="fa fa-id-card-o" aria-hidden="true"></i></button></td>
                        </tr>
                      @endforeach
                  </tbody>
              </table>
            @endif
              
            <!-- Modal -->
            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered" role="document">
                 <div class="modal-content">
                   <div class="modal-header">
                     <h5 class="modal-title" id="exampleModalLongTitle">SELECT CERTIFICATE TYPE</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                     </button>
                   </div>
                   <div class="modal-body">
                    
                     
                        <form action="/submit" method="POST" class="form-inline">
                           @csrf
                           <input type="hidden" id="firstname" name="firstname" readonly>
                           <select id="mySelect" class="form-control" name="certtype">
                             <option value="option1">Certificate of Indigency</option>
                             <option value="option2">Certificate of taxes</option>
                             <option value="option3">Barangay Certification</option>
                           </select>
                           <button type="submit" class="btn btn-sm">Submit</button>
                         </form>
                     
                      
                     
                   </div>
                   <div class="modal-footer">
                     <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                   </div>
                 </div>
               </div>
             </div>
             @if(session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
            @endif
             <script>
            $(document).ready(function() {
            $('#exampleModalCenter').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var firstname = button.data('firstname');
            var modal = $(this);
            modal.find('#firstname').val(firstname);
            });
            });
            
            
  window.addEventListener('DOMContentLoaded', function() {
    document.getElementById('request').click();
  });

            </script>
             <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
             <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
             <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
            
            </div>

         </div>
      </div>
      <div id="type" class="tabcontent">
        
         <div class="row">
          
         </div>
      </div>
      <div id="schedule" class="tabcontent">
         <div class="row">
            <div class="col-sm-4">
               
            </div>
            <div class="col-sm border solid overflow-auto" style="width: 50%;">
              
            </div>
         </div>
      </div>
      
   </div>
   <script>
      // Define the "schedules" function
      function schedules(evt, tabName) {
        // Declare variables
        var i, tabcontent, tablinks;
        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
        }
        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
      }
      // Set the default active tab to be "request"
      document.getElementById("request").style.display = "block";


  
    </script> --}}

@endsection