@extends('admin.layouts.app')

@section('content')
@push('styles')
<style>
  div#myTable_filter {
    display: none;
  }
</style>
@endpush
    <div class="container-fluid py-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
                <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
                </li>
                <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.tapl-contracts.index') }}">Performa Invoice</a>
                </li>
                <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
                Manage Bills</li>
            </ol>
        </nav>
    </nav>
      @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 mt-4">
      <div class="col-12">
          <div class="row justify-content-between">
              <div class="col-md-4">
                  <a class="btn bg-gradient-info mb-3" href="{{ route('admin.tapl-contracts.index') }}">Back</a>
              </div>
          </div>
      </div>
  </div>
  <div class="row">
      <div class="col-12">
          <div class="card pt-4 mb-4">
              <div class="card-body px-0 pt-0 pb-2">
                  <style>
                      .box-wrap-text {
                          width: 100%;
                          text-align: center;
                      }
                      .box-wrap-text:nth-child(2){
                          margin: 0px 20px;
                      }
                  </style>
                    <div class="row justify-content-center">
                        <div class="col-md-9 mb-3">
                            <div class="row align-items-center">
                                <div class="col-md-4">
                                    <label>Performa Invoice No : </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="box-wrap-text">
                                        <p class="mb-0">{{ $taplContract->performa_invoice_no ?? 'Unknown' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9 mb-3">
                            <div class="row align-items-center">
                                <div class="col-md-4">
                                    <label>Work Order No : </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="box-wrap-text">
                                        <p class="mb-0">{{ $taplWorkOrder->work_order_no ?? 'Unknown' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9 mb-3">
                            <div class="row align-items-center">
                                <div class="col-md-4">
                                    <label>Work Order Date : </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="box-wrap-text">
                                        <p class="mb-0">{{ $taplContract->created_at->format('Y-m-d') ?? 'Unknown' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9 mb-3">
                            <div class="row align-items-center">
                                <div class="col-md-4">
                                    <label>Work Order Amount : </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="box-wrap-text">
                                        <p class="mb-0">{{ $taplWorkOrder->customer_order_value ?? 'Unknown' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9 mb-3">
                            <div class="row align-items-center">
                                <div class="col-md-4">
                                    <label>Type Of Billing : </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="box-wrap-text">
                                        <p class="mb-0">{{ $taplWorkOrder->type_of_amc ?? 'Unknown' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-9 mb-3">
                            <div class="row align-items-center">
                                <div class="col-md-4">
                                    <label>Frequency : </label>
                                </div>
                                <div class="col-md-8">
                                    <div class="box-wrap-text">
                                        <p class="mb-0">{{ count($taplBillDetails) ?? 'Unknown' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
              </div>
          </div>
      </div>
  </div>
  <div class="row mb-4">
    <div class="col-12">
      <div class="row justify-content-between">
        <div class="col-md-4">
          
        </div>
        <div class="col-md-7">
            <a class="btn bg-gradient-info mb-0 mr-2" style="float: right;margin-right: 15px;" href="{{ route('admin.tapl.bill.adjustment.create',$taplWorkOrder->id) }}" >Adjustment</a>
            <button id="exportCSV" class="btn bg-gradient-info mb-0 mr-2" style="float: right;margin-right: 15px;">Export as CSV</button>
            <button id="deleteSelected" class="btn bg-gradient-info mb-0 mr-2" style="float: right;margin-right: 15px;">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
      <div class="col-12">
          <div class="card pt-4 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>
                          
                      </div>
                      {{-- <div class="table-top-right">
                        <div class="input-group">
                          <input type="date" class="form-control" id="search_date">
                        </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> --}}
                      {{-- @if(count($taplBillDetails) < 4) --}}
                        {{-- <a class="btn bg-gradient-info mb-0" href="{{ route('admin.tapl.manage.bill.create', $tapl_id) }}">Add New Bill Order</a> --}}
                      {{-- @endif --}}
                  </div>
                  <div class="table-responsive p-0 px-3">
                      <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">
                                      Billing Month</th>
                                  <th
                                      class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                      Amount</th>
                                  <th
                                      class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                      Billing No</th>
                                  <th
                                      class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                      Billing Date</th>
                                  <th
                                      class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                      Action</th>
                              </tr>
                          </thead>
                          <tbody>
                            @foreach ($taplBillDetails as $bill)
                              <tr>
                                <td>
                                  <div class="form-check">
                                      <input class="form-check-input" type="checkbox" id="checkbox{{ $bill->id }}" name="bill[]" value="{{ $bill->id }}">
                                      <label class="form-check-label" for="checkbox{{ $bill->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">{{ $bill->month ?? 'Unknown' }}</p>
                                  </td>
                                  <td>
                                      <p class="text-xs font-weight-bold mb-0">{{ $bill->amount ?? 'Unknown' }}</p>
                                  </td>
                                  <td>
                                      <p class="text-xs font-weight-bold mb-0">{{ $bill->bill_no ?? 'Unknown' }}</p>
                                  </td>
                                  <td>
                                      <p class="text-xs font-weight-bold mb-0">{{ $bill->date ?? 'Unknown' }}</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="{{ route('admin.tapl-manage-bill.edit', $bill->id) }}">
                                                <i class="fas fa-edit" aria-hidden="true"></i>
                                            </a>
                                        </li>
                                    @if ($bill->is_paid == 0 || $bill->is_paid == null)
                                        <li class="nav-item">
                                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm delete-row" href="#" data-id="{{ $bill->id }}">Delete</a>
                                        </li>
                                        
                                        <li class="nav-item">
                                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="{{ route('admin.tapl.bill.payment.create', $bill->id) }}">Payment</a>
                                        </li>  
                                    @elseif ($bill->is_paid == 1)
                                        <li class="nav-item">
                                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="{{ route('admin.tapl.bill.payment.detail', $bill->id) }}">View Payment</a>
                                        </li>
                                        @if($bill->amount == $bill->paid_amount)
                                        
                                        @else
                                        <li class="nav-item">
                                            <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="{{ route('admin.tapl.bill.payment.create', $bill->id) }}">Payment</a>
                                        </li>
                                        @endif
                                        
                                    @endif

                                        
                                    </ul>
                                </td>

                              </tr>
                            @endforeach
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
      </div>
  </div>
  
</div>



<script src="https://code.jquery.com/jquery-3.7.0.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 src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.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
  });

  $('#search_date').on('change', function () {
    // Get the selected date
    const selectedDate = this.value;

    // Filter the table based on the selected date
    table.column(5).search(selectedDate).draw();
});


  $(document).ready(function() {  
  $('#selectAll').change(function() {
          $('input[name="bill[]"]').prop('checked', this.checked);
      });
      // Handle delete button click
      $('#deleteSelected').on('click', function() {
          const selectedIds = $('input[name="bill[]"]: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.manage.bill.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="bill[]"]: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.manage.bill.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>
  <script>
 $(document).ready(function() {
    // Add a click event handler to the delete buttons
    $('.delete-row').on('click', function(event) {
        event.preventDefault();

        const rowId = $(this).data('id');

        // Show SweetAlert confirmation
        swal({
            title: "Are you sure?",
            text: "Do you want to Delete this record .Do readjust the Billing Frequency on the Work Order before confirming ?",
            icon: "warning",
            buttons: {
                cancel: "No",
                confirm: "Yes",
            },
            dangerMode: true,
        }).then((willDelete) => {
            if (willDelete) {
                // Send an AJAX request to delete the record
                $.ajax({
                    type: 'POST',
                    url: '{{ route('admin.tapl.bill.adjust.delete-selected') }}',
                    data: { id: rowId, _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        swal("Deleted!", "The record has been deleted.", "success");
                        location.reload(); // Reload the page after successful deletion
                    },
                    error: function(error) {
                        swal("Error!", "An error occurred while deleting the record.", "error");
                    }
                });
            }
        });
    });
});

</script>

@endsection