@extends('Admin.layout')
<link href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
@section('content')
@section('navlink')
  <a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">Home</a> / <span>Package</span>
@endsection
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
  <div>
    <h1 class="h3 mb-1">Package</h1>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ route('add_package') }}" class="btn btn-primary btn-sm">Add Package</a>
  </div>
</div>

<!-- TABLE CARD -->
<div class="card card-animated-border mb-4">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h3 class="h6 mb-0 text-gold">All Packages</h3>
    <div class="d-flex gap-2">
      <button class="btn btn-outline-primary btn-sm">Export</button>
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-striped align-middle mb-0" id="users-table">
      <thead>
        <tr>
          <th>SNO</th>
          <th>DATE</th>
          <th>Package Name</th>
          <th>Package USDT</th>
          <th>Daily %</th>
          <th>Daily Income</th>
          <th>Maturity Days</th>
          <th>Maturity Income</th>
          <th>Status</th>
          <th>ACTION</th>
        </tr>
      </thead>
      <tbody id="users-tableBody"></tbody>
    </table>
  </div>

</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete Package</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"
          aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">Are you sure you want to delete this package?</p>
      </div>
      <div class="modal-footer"> <button type="button" class="btn btn-secondary"
          data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-danger"
          id="confirmDeleteBtn">Delete</button> </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.min.js"></script>

<script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.min.js"></script>

<script>
  $(document).ready(function() {
    const table = new DataTable("#users-table", {
      ajax: {
        url: "{{ route('package_report') }}",
        type: "POST",
        data: function(d) {
          d._token = "{{ csrf_token() }}";
          d.action = "package_data";
        },
        dataSrc: function(json) {
          return json.packages ?? [];
        },
        error: function(xhr) {
          console.error("Package data error:", xhr.responseText);
        }
      },
      columns: [{
        data: null,
        render: function(data, type, row, meta) {
          return meta.row + meta.settings._iDisplayStart + 1;
        }
      }, {
        data: "created_at",
        render: function(data) {
          if (!data) return "-";
          return new Date(data).toLocaleDateString("en-GB");
        }
      }, {
        data: "package_name"
      }, {
        data: "usdt",
        render: function(data) {
          return "$" + parseFloat(data || 0).toFixed(2);
        }
      }, {
        data: "daily_percentage",
        render: function(data) {
          return parseFloat(data || 0).toFixed(2) + "%";
        }
      }, {
        data: "daily_income",
        render: function(data) {
          return "$" + parseFloat(data || 0).toFixed(2);
        }
      }, {
        data: "maturity_days",
        render: function(data) {
          return data + " Days";
        }
      }, {
        data: "maturity_income",
        render: function(data) {
          return "$" + parseFloat(data || 0).toFixed(2);
        }
      }, {
        data: "status",
        orderable: false,
        render: function(data, type, row) {
          if (type !== "display") return data;
          const status = String(data || "").toLowerCase();
          const badgeClass = status === "active" ? "bg-success" : "bg-danger";
          const displayStatus = status.charAt(0).toUpperCase() + status.slice(1);
          return `<button type="button" class="badge ${badgeClass} border-0 status-btn" data-id="${row.id}" style="cursor:pointer">${displayStatus}</button>`;
        }
      }, {
        data: null,
        orderable: false,
        searchable: false,
        render: function(data, type, row) {
          if (type !== "display") return "";
          return `<div class="d-flex gap-2"><a href="{{ route('edit_package') }}?id=${row.id}" class="btn btn-sm btn-outline-primary" title="Edit"><i class="ti ti-edit"></i></a><button type="button" class="btn btn-sm btn-outline-danger delete-btn" data-id="${row.id}" title="Delete"><i class="ti ti-trash"></i></button></div>`;
        }
      }],
      order: [
        [1, "desc"]
      ],
      pageLength: 10,
      lengthMenu: [10, 25, 50, 100],
      lengthChange: true,
      searching: true,
      ordering: true,
      info: true,
      paging: true,
      autoWidth: false,
      scrollX: true,
      language: {
        search: "",
        searchPlaceholder: "Search packages...",
        emptyTable: "No packages available",
        zeroRecords: "No matching packages found",
        lengthMenu: "_MENU_",
        info: "Showing _START_ to _END_ of _TOTAL_ entries",
        infoEmpty: "Showing 0 to 0 of 0 entries"
      },
      columnDefs: [{
        targets: "_all",
        className: "text-nowrap align-middle"
      }]
    });
    $("#users-table").on("click", ".status-btn", function() {
      const id = $(this).data("id");
      console.log("Status package ID:", id);
    });
    let deletePackageId = null;
    $("#users-table").on("click", ".delete-btn", function() {
      const id = $(this).data("id");
      console.log("Delete package ID:", id);
      deletePackageId = $(this).data("id");
      $("#deleteModal").modal("show");
    });
    $("#confirmDeleteBtn").on("click", function() {
      if (deletePackageId === null) return;
      const button = $(this);
      const packageId = deletePackageId;
      button.prop("disabled", true).html(
        '<span class="spinner-border spinner-border-sm me-1"></span>Deleting...');
      $.ajax({
        url: "{{ route('package_report') }}",
        type: "POST",
        data: {
          _token: "{{ csrf_token() }}",
          action: "delete_package",
          package_id: packageId
        },
        success: function(response) {
          if (response.success) {
            $("#deleteModal").modal("hide");
            deletePackageId = null;
            table.ajax.reload(null, false);
          } else {
            alert(response.message || "Package could not be deleted.");
          }
        },
        error: function(xhr) {
          console.error("Delete package error:", xhr.responseText);
          alert("Something went wrong while deleting the package.");
        },
        complete: function() {
          button.prop("disabled", false).html("Delete");
        }
      });
    });
  });
</script>
@endsection