@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex  bg-al">
                <div>
      <!-- <button type="button" class="btn clr-al"style="border-color:black">
        <i class="fa-sharp fa-solid fa-arrow-left"></i>
      </button> -->
    </div>
    <div class="bold backbt-all">
                  {{ __(trans('COMPANIES'))}}
    </div>
                </div>

                <div class="card-body clr-al">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif
        <div>
            <input  type="text" id="search-input" class="form-control" style="float:right;width: 20%;height: 25px;;" name="query" placeholder="Search...">
            <!-- <button class="btn btn-success" type="submit" >Search</button> -->
      
        
          <!-- <a class="btn btn-success" href="{{URL::to('add_company_view')}}"><i title="ADD COMPANY" class="fa-sharp fa-solid fa-plus"></i> &nbsp; Add Company</a>
        -->
          <a class="btn btn-success" href="{{URL::to('add_company_view')}}"><i title="ADD COMPANY" class="fa-sharp fa-solid fa-plus"></i> &nbsp; Create Company</a>
          <!-- <input id="myInput" type="text" class="form-control" style="float:right;width: 20%;height: 25.333334px;" name="query" placeholder="Search..."> -->
</div>

<div class="export-btn-container d-flex justify-content-center">
    <!-- <a class="export-btn" href="report">See Audit Report</a> -->
    <div class="col-md-12">
    <div  class="dataTables">
    <!-- <input id="myInput" type="text" class="form-control" style="float:right;width: 20%;" name="query" placeholder="Search..."> -->
    @if(isset($list))
    <table id="company" style="float:left"  class="table table-hover table-center  mt-5 p-5">

      <thead class="table-light">
        <tr>
          <th scope="col">S.No</th>
          <th scope="col">{{trans('Name')}}</th>
          <th scope="col">{{trans('Action')}}</th>
          
        </tr>
        </thead>
  
                <tbody id="myTable">
          @if(count($list)>0)
            @foreach(@$list as $index => $company)
              <td scope="row">{{$loop->iteration}}</td>
                <td>{{$company->taxpayer}}</td>
                <td>
                <!-- <a class="export-btn" href="import-data">EDIT</a>
                <a class="export-btn" href="import-data">Import Data</a> -->
                <a class="export-btn import-excel-btn btn btn-success" href="{{url('dashboard',['id'=>$company->id])}}">Go To Dashboard </i></a>
                <a href="{{url('companies-edit',['id'=>$company->id])}}"><i class="fa-sharp fa-regular fa-pen-to-square pp" ></i></a>
                <a><i class="fa-sharp fa-solid fa-trash pp cdelete" data-name="{{$company->taxpayer}}"  data-toggle="modal" data-target="#myModal" data-id="{{$company->id}}"></i></a></td>
                <tr>
            
              </tr>
                          @endforeach
            </tbody>
          @else
          <tr><td>No results found!</td></tr>
          @endif
        </tbody>
    </table>
  @endif
</div>
</div>
</div>
<div id="paginationContainer">
        {{ $list->links() }}
    </div>
</div>
 </div>
    </div>
</div>

<div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close import-excel-btn" data-dismiss="modal" onclick="importclose()">&times;</button>
                </div>
                <div class="modal-body">
                
                    <div class="form-group row text-center">
                    <div class="col-6 text-center">
                     <button  type="button"  class="close import-excel-btn btn btn-secondary" data-dismiss="modal" onclick="importclose()">Cancel</button>
                    </div>

                    <div class="col-6 text-center">
                        <form method="post" action="" id="deleteform">
                        @csrf
                            <input type="hidden" id="deleteid" name="data_id" value=""/>
                            <button class="btn btn-danger"><a  id="delete">DELETE</a></button>
                        </from>
                    </div>
                    </div>
                    
                </div>
                <div class="modal-footer">
                </div>
            </div>
            </div>
        </div>
        </div>
  
  <!-- delete  -->
  <script>
    $(document).ready(function(){
  
      $('.cdelete').on('click',function(e){
       
        var companyId =$(this).attr("data-id");
    $('#deleteid').val(companyId);
    $('#deleteform').attr("action",'companies-delete/'+companyId);
    // var button=$(event.relatedTarget);
      var name=$(this).data('name');
      $('#myModal .modal-title').text('Are sure you want to delete  => ' +name+ ' ');


      });
    });
  </script>
  <script>
    $(document).ready(function() {
      var resultList = $('#myTable');
      var pagination = $('#pagination');
      $('#search-input').on('keyup', function() {
        var searchQuery = $(this).val();
          // if(searchQuery.length>2){
            // $('#loader').show();
          $.ajax({
              url: 'company-list',
              type: 'GET',
              data: { query: searchQuery },
              dataType: 'json',
              success: function(response) {
                  // Update the UI with the search results
                  // $('#loader').hide();
                  displayResults(response.data);
                  function removePagination() {
                  pagination.hide(); // Hide the pagination element
                }
              },
              error: function(xhr, status, error) {
                //  $('#loader').hide();
                  console.error(error);
              }
          });
        
       });

      function displayResults(companies) {
          var resultList = $('#myTable');
          resultList.empty();
          console.log(companies);

          $.each(companies, function(index, company) {
            var rowNumber = index + 1;
               resultList.append('<tr><td>' + rowNumber + '</td><td>' + company.taxpayer + '</td><td> <a class="export-btn import-excel-btn btn btn-success" href="dashboard/' + company.id +'">Go To Dashboard </a><a href="companies-edit/' + company.id +'"<i class="fa-sharp fa-regular fa-pen-to-square pp"></i></a> <a><i class="fa-sharp fa-solid fa-trash pp cdelete" data-toggle="modal" data-target="#myModal" ></i></a></td></td></tr>');
          });
      
    }
    });
  </script>

  <script>
    $(document).ready(function () {
      $('#dtBasicExample').DataTable();
      $('.dataTables_length').addClass('bs-select');
    });
  </script>
  

  <script>
    // $(document).ready(function(){
    //   $("#myInput").on("keyup", function() {
    //     var value = $(this).val().toLowerCase();
    //     $("#myTable tr").filter(function() {
    //       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    //     });
    //   });
    // });
  </script>
@endsection