@extends('layouts.app',['dashBoardTitle'=>'COMPANIES'])

@section('content')

<div class="container">
   
                </div>

                <div class="card-body clr-al">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    @if (session('message'))
                        <div class="alert alert-success" role="alert">
                            {{ session('message') }}
                        </div>
                    @endif

       
          <div>
            <input  type="search" id="search-input" class="form-control" style="float:right;width: 20%;height: 25px;;" name="query" placeholder="Search...">
            <!-- <div id="error-message" style="color: red;"></div> -->
        
           @if($limit != 0) 
            <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>
             @else
             <a class="btn btn-success" href="javascript:void(0);" data-toggle="modal" data-target=".bd-example-modal-lg"><i title="ADD COMPANY" class="fa-sharp fa-solid fa-plus"></i> &nbsp; Create Company</a> 
           
             @endif 
          <!-- <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 dele" 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 id="error-message" style="color: red;text-align: center;"></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 ppup">
        <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</a></button>
              </form>
            </div>
          </div>
        </div>
      <div class="modal-footer">
      </div>
      </div>
    </div>
  </div>
</div>
  
<!-- You Exceeded The Company Creation Limit.. -->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content p-2 bold text-danger text-center">
    You Exceeded The Company Creation Limit..
    </div>
  </div>
</div>
<!--You Exceeded The Company Creation Limit..-->
  <!-- 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 you sure you want to delete : ' +name+ ' ?');


      });
    });
  </script>
  <script>
$(document).ready(function() {
    var resultList = $('#myTable');
    var pagination = $('#pagination');
    var errorMessage = $('#error-message');

    $('#search-input').on('keyup', function() {
        var searchQuery = $(this).val();

        $.ajax({
            url: 'company-list',
            type: 'GET',
            data: { query: searchQuery },
            dataType: 'json',
            success: function(response) {
                displayResults(response.data);
            },
            error: function(xhr, status, error) {
                console.error(error);
            }
        });
    });

    function displayResults(companies) {
        var resultList = $('#myTable');
        resultList.empty();
        errorMessage.empty(); // Clear previous error message

        if (companies.length === 0) {
            errorMessage.text('No records found.'); // Display error message for no records
            return;
        } else {
            errorMessage.empty(); // Clear error message if records are found
        }

        $.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>
  
  
@endsection