@extends('admin.layouts.app')

@section('content')
@push('styles')
<style>
  div#myTable_filter {
    display: none;
  }
</style>
@endpush
    <div class="container-fluid py-4">
      @if(session('success'))
          <div class="alert alert-success">
              {{ session('success') }}
          </div>
      @endif
      @if(session('error'))
          <div class="alert alert-danger">
              {{ session('error') }}
          </div>
      @endif
      <div class="row">
        <div class="col-12">
          <div class="row justify-content-between">
            <div class="col-md-4">
              {{-- <a class="btn bg-gradient-info mb-3" href="./TAPL_contracts.html">Back</a> --}}
            </div>
            <div class="col-md-4">
              <a class="btn bg-gradient-info mb-3" style="float: right;" href="{{ route('admin.tapl-contracts.create') }}">Add TAPL Contracts</a>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="card pt-3 mb-4">
            <div class="card-body px-0 pt-0 pb-2">
              <div class="d-md-flex align-items-center justify-content-between px-3 mb-3">
                <div class="table-top-left d-flex align-items-center justify-content-between">
                  <div class="d-flex align-items-center justify-content-between" style="margin-right: 15px;">
                    {{-- <label class="mb-0" style="margin-right: 10px;">Show</label>
                    <select class="form-select" id="validationCustom04" style="width: 100px;">
                      <option selected disabled value="">10</option>
                      <option>01</option>
                      <option>02</option>
                      <option>03</option>
                      <option>04</option>
                      <option>05</option>
                      <option>06</option>
                      <option>07</option>
                      <option>08</option>
                      <option>09</option>
                      <option>10</option>
                    </select> --}}
                  </div>
                  <button id="deleteSelected" class="btn bg-gradient-info mb-0 mr-2">Delete</button>
                  <button id="exportCSV" class="btn bg-gradient-info mb-0 mr-2">Export as CSV</button>
                </div>
                
                <div class="table-top-center">
                    <div style="font-weight: 600; padding: 5px 12px; background-image: linear-gradient(153deg, #434DFF 0%, #E3150C 100%); border-radius: 0.4rem;">
                        <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" id="inlineRadioAll" value="all" name="type" checked>
                            <label class="form-check-label mb-0" for="inlineRadioAll" style="font-weight: 600; color: #fff;">All</label>
                        </div>
                        <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" id="inlineRadioComplete" value="1" name="type">
                            <label class="form-check-label mb-0" for="inlineRadioComplete" style="font-weight: 600; color: #fff;">Complete</label>
                        </div>
                        <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input" type="radio" id="inlineRadioPending" value="2" name="type">
                            <label class="form-check-label mb-0" for="inlineRadioPending" style="font-weight: 600; color: #fff;">Pending</label>
                        </div>
                    </div>
                </div>
                <div class="table-top-right">
                  <div class="input-group">
                    <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                    <input type="text" class="form-control" id="search_name" placeholder="Search">
                  </div>
                </div>
              </div>
              <div class="table-responsive p-0">
                <table class="table align-items-center mb-0" id="myTable">
                  <thead>
                    <tr>
                      <th>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="selectAll">
                            <label class="form-check-label" for="selectAll">Select All</label>
                        </div>
                      </th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        SL.No</th>
                      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                        Performa Invoice No</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        Tonnage</th>
                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                          Machine No</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        Customer Name</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        AMC Start Date</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        Amc End Date</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                          Status</th>
                      <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                        Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($taplContracts as $tapl)
                    <tr status-tapl="{{ $tapl->status }}">
                      <td>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="checkbox{{ $tapl->id }}" name="tapl[]" value="{{ $tapl->id }}">
                            <label class="form-check-label" for="checkbox{{ $tapl->id }}"></label>
                        </div>
                    </td>
                      <td>
                        <div class="d-flex px-2 py-1">
                          <h6 class="mb-0 text-sm">{{ $loop->iteration }}</h6>
                        </div>
                      </td>
                      <td>
                        <p class="text-xs font-weight-bold mb-0">{{ $tapl->performa_invoice_no }}</p>
                      </td>
                      <td>
                        <p class="text-xs font-weight-bold mb-0">{{ $tapl->machine_tonnage }}</p>
                      </td>
                      <td>
                        <p class="text-xs font-weight-bold mb-0">{{ $tapl->machine_quantity }}</p>
                      </td>
                      <td>
                        <p class="text-xs font-weight-bold mb-0">{{ $tapl->customer_name }}</p>
                      </td>
                      <td>
                        <p class="text-xs font-weight-bold mb-0">{{ $tapl->amc_start_date }}</p>
                      </td>
                      <td>
                        <p class="text-xs font-weight-bold mb-0">{{ $tapl->amc_end_date }}</p>
                      </td>
                      <td>
                        @if ($tapl->status == 1)
                        <span class="badge bg-success">Active</span></h6>
                        @else
                            <span class="badge bg-danger">InActive</span></h6>
                        @endif
                      </td>
                      <td>
                        <ul class="nav table-btn-group" style="flex-wrap: nowrap;">
                          <li class="nav-item">
                            <a class="mb-0 mx-2 my-1" style="display: inline-block;" href="{{ routE('admin.tapl-contracts.edit', $tapl->id) }}"><i
                                class="fas fa-edit"></i></a>
                          </li>
                          <li class="nav-item">
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" role="button"
                                data-bs-toggle="modal" data-bs-target="#exampleModal{{ $tapl->id }}"
                                href="#">Change Status</a>
                          </li>
                          <li class="nav-item">
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="{{ route('admin.tapl.work.orders', $tapl->id) }}">Work Order</a>
                          </li>
                          <li class="nav-item">
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./performa_invoice.html">Performa Invoice</a>
                          </li>
                          <li class="nav-item">
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_bill_TAPL.html">Bill</a>
                          </li>
                          <li class="nav-item">
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_payment_TAPL.html">Payments</a>
                          </li>
                          <li class="nav-item">
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_print_TAPL.html">Print Preview</a>
                          </li>
                          <li class="nav-item">
                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_service_listing.html">History</a>
                          </li>
                        </ul>
                      </td>
                    </tr>
                    <div class="modal fade" id="exampleModal{{ $tapl->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $tapl->id }}" aria-hidden="true">
                      <div class="modal-dialog">
                          <div class="modal-content">
                              <form action="{{ route('admin.tapl.update.change-status', ['id' => $tapl->id]) }}" method="POST">
                                  @csrf
                                  <div class="modal-body pb-0">
                                      <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel{{ $tapl->id }}">Do you want to change the status ?</h1>
                                      <div class="form-check form-check-inline">
                                          <input class="form-check-input" type="radio" id="inlineCheckboxYes{{ $tapl->id }}" name="status" value="active" {{ $tapl->status == '1' ? 'checked' : '' }}>
                                          <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxYes{{ $tapl->id }}">Active</label>
                                      </div>
                                      <div class="form-check form-check-inline">
                                          <input class="form-check-input" type="radio" id="inlineCheckboxNo{{ $tapl->id }}" name="status" value="inactive" {{ $tapl->status == '0' ? 'checked' : '' }}>
                                          <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxNo{{ $tapl->id }}">Inactive</label>
                                      </div>
                                  </div>
                                  <div class="modal-footer border-0 pt-0">
                                      <button type="submit" class="btn bg-gradient-info mb-0 mr-2 btn-sm">Confirm</button>
                                  </div>
                              </form>
                          </div>
                      </div>
                  </div>
                    @endforeach
                    {{-- <tr>
                        <td>
                          <div class="d-flex px-2 py-1">
                            <h6 class="mb-0 text-sm">2</h6>
                          </div>
                        </td>
                        <td class="d-flex align-items-center">
                          <p class="text-xs font-weight-bold mb-0">ABC_00001 <h6 class="mb-0" style="margin-left: 15px;"><span class="badge bg-danger">Expired</span></h6></p>
                        </td>
                        <td>
                          <p class="text-xs font-weight-bold mb-0">001</p>
                        </td>
                        <td>
                          <p class="text-xs font-weight-bold mb-0">001</p>
                        </td>
                        <td>
                          <p class="text-xs font-weight-bold mb-0">IBS Software Solutions Pvt. Ltd.</p>
                        </td>
                        <td>
                          <p class="text-xs font-weight-bold mb-0">12-07-2023</p>
                        </td>
                        <td>
                          <p class="text-xs font-weight-bold mb-0">10-09-2023</p>
                        </td>
                        <td>
                          <ul class="nav table-btn-group" style="flex-wrap: nowrap;">
                            <li class="nav-item">
                              <a class="mb-0 mx-2 my-1" style="display: inline-block;" href=""><i
                                  class="fas fa-edit"></i></a>
                            </li>
                            <li class="nav-item">
                              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_work_order_TAPL.html">Work Order</a>
                            </li>
                            <li class="nav-item">
                              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./performa_invoice.html">Performa Invoice</a>
                            </li>
                            <li class="nav-item">
                              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_bill_TAPL.html">Bill</a>
                            </li>
                            <li class="nav-item">
                              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_payment_TAPL.html">Payments</a>
                            </li>
                            <li class="nav-item">
                              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_print_TAPL.html">Print Preview</a>
                            </li>
                            <li class="nav-item">
                              <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./manage_service_listing.html">History</a>
                            </li>
                          </ul>
                        </td>
                    </tr> --}}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>


<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>

  let table = new DataTable('#myTable', {
    responsive: true,
    pageLength: 20
  });
  
  // Add an event listener for the search input
  $('#search_name').on('input', function () {
    table.search(this.value).draw(); // Apply the search and redraw the table
  });

  $('input[type="radio"]').change(function() {
    const selectedType = $(this).val();

    if (selectedType === "all") {
        // Show all rows when "All" is selected
        $('tr[status-tapl]').show();
    } else {
        // Show only the rows with the selected customer type
        $('tr[status-tapl]').hide();
        $(`tr[status-tapl="${selectedType}"]`).show();
    }
});


$(document).ready(function() {  
  $('#selectAll').change(function() {
          $('input[name="tapl[]"]').prop('checked', this.checked);
      });
      // Handle delete button click
      $('#deleteSelected').on('click', function() {
          const selectedIds = $('input[name="tapl[]"]:checked').map(function() {
              return this.value;
          }).get();
  
          if (selectedIds.length === 0) {
              alert('Please select at least one record to delete.');
              return;
          }
  
          // Show SweetAlert confirmation
          swal({
              title: "Confirm Deletion",
              text: "Are you sure you want to delete the selected records?",
              icon: "warning",
              buttons: {
                  cancel: "Cancel",
                  confirm: "Delete"
              },
              dangerMode: true,
          })
          .then((willDelete) => {
              if (willDelete) {
                  // User confirmed, send the selectedIds to your server using an AJAX POST request
                  $.ajax({
                      url: '{{ route('admin.tapl.delete-selected') }}',
                      type: 'POST',
                      data: {
                          selectedIds: selectedIds,
                          _token: '{{ csrf_token() }}',
                      },
                      success: function(response) {
                          if (response.success) {
                              // Handle successful deletion
                              swal("Success", "Selected records deleted successfully.", "success");
                              location.reload();
                              // You can also refresh the DataTable or update the table as needed.
                              // For example: table.ajax.reload();
                          } else {
                              swal("Error", "Failed to delete selected records.", "error");
                          }
                      },
                      error: function() {
                          swal("Error", "An error occurred while deleting records.", "error");
                      }
                  });
              }
          });
      });



      // Handle export CSV button click
      $('#exportCSV').on('click', function() {
          const selectedIds = $('input[name="tapl[]"]:checked').map(function() {
              return this.value;
          }).get();
      
          if (selectedIds.length === 0) {
              alert('Please select at least one record to export as CSV.');
              return;
          }
      
          // Send a request to the export route
          $.ajax({
              url: '{{ route('admin.tapl.export-csv') }}',
              type: 'POST',
              data: {
                  selectedIds: selectedIds,
                  _token: '{{ csrf_token() }}', // Include CSRF token for Laravel
              },
              xhrFields: {
                  responseType: 'blob' // Ensure the response is treated as a blob
              },
              success: function(response, status, xhr) {
                  if (response.size > 0) {
                      // Create a blob URL and initiate the download
                      const blob = new Blob([response], { type: 'text/csv' });
                      const url = window.URL.createObjectURL(blob);
                      const a = document.createElement('a');
                      a.href = url;
                      a.download = 'selected_records.csv';
                      a.style.display = 'none';
                      document.body.appendChild(a);
                      a.click();
                      window.URL.revokeObjectURL(url);
                      document.body.removeChild(a);
                  } else {
                      alert('Failed to export CSV.');
                  }
              },
              error: function() {
                  alert('An error occurred while exporting CSV.');
              }
          });
      });
  });
</script>
@endsection