@extends('Admin.layout') @section('navlink')
  <a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">Home</a> / <span>Rank Master Report</span>
  @endsection @section('content')
  <link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css">
  <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
    <div>
      <h1 class="h3 mb-1">Rank Master Report</h1>
    </div>
  </div>
  <div class="card card-animated-border mb-4">
    <div class="card-header">
      <h3 class="h6 mb-0 text-gold">All Rank Master Records</h3>
    </div>
    <div class="card-body">
      <div class="row g-3 align-items-end mb-3">
        <div class="col-12 col-md-4"> <label for="customSearch" class="form-label small">Search</label> <input
            type="search" id="customSearch" class="form-control form-control-sm" placeholder="Search table..."> </div>
        <div class="col-12 col-md-4"> <label for="statusFilter" class="form-label small">Status</label> <select
            id="statusFilter" class="form-select form-select-sm">
            <option value="">All Status</option>
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select> </div>
        <div class="col-12 col-md-4"> <button type="button" id="exportBtn" class="btn btn-outline-primary btn-sm w-100">
            <i class="ti ti-download me-1"></i> Export CSV </button> </div>
      </div>
      <div class="table-responsive">
        <table class="table table-striped align-middle mb-0" id="level-income-table" style="width:100%">
          <thead>
            <tr>
              <th>RANK</th>
              <th>MATCHING ($)</th>
              <th>DAILY ($)</th>
              <th>DAYS</th>
              <th>INCOME ($)</th>
              <th>STATUS</th>
              <th>ACTION</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </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 formatAmount = function(value) {
        return Number(value || 0).toLocaleString("en-IN", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        });
      };
      const table = new DataTable("#level-income-table", {
        ajax: {
          url: "{{ route('rank_master_report') }}",
          type: "POST",
          data: function(d) {
            d._token = "{{ csrf_token() }}";
            d.action = "get_rank_master_data";
          },
          dataSrc: function(json) {
            return json.rankMasters || [];
          },
          error: function(xhr) {
            console.error("Rank master data error:", xhr.responseText);
          }
        },
        columns: [{
          data: "rank",
          render: function(data, type) {
            return type === "display" ? "Rank " + data : data;
          }
        }, {
          data: "matching_income",
          render: function(data, type) {
            return type === "display" ? "$ " + formatAmount(data) : data;
          }
        }, {
          data: "daily_income",
          render: function(data, type) {
            return type === "display" ? "$ " + formatAmount(data) : data;
          }
        }, {
          data: "days",
          render: function(data, type) {
            return type === "display" ? data + " Days" : data;
          }
        }, {
          data: "total_income",
          render: function(data, type) {
            return type === "display" ? "$ " + formatAmount(data) : data;
          }
        }, {
          data: "status",
          render: function(data, type, row) {
            if (type !== "display") return data;
            const status = String(data || "").toLowerCase();
            const displayStatus = status.charAt(0).toUpperCase() + status.slice(1);
            const badgeClass = status === "active" ? "bg-success" : "bg-danger";
            return `<button type="button" class="badge ${badgeClass} border-0 status-btn" data-id="${row.id}" data-status="${displayStatus}" style="cursor:pointer">${displayStatus}</button>`;
          }
        }, {
          data: null,
          orderable: false,
          searchable: false,
          className: "text-end",
          render: function(data, type, row) {
            if (type !== "display") return "";
            return `<a href="{{ route('rank_master') }}?id=${row.id}" class="btn btn-sm btn-primary" title="Edit Rank"><i class="ti ti-edit"></i></a>`;
          }
        }],
        order: [
          [0, "asc"]
        ],
        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 table...",
          emptyTable: "No rank master records available",
          zeroRecords: "No matching records 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"
        }]
      });
      $("#customSearch").on("input", function() {
        table.search(this.value).draw();
      });
      $("#statusFilter").on("change", function() {
        table.column(5).search(this.value).draw();
      });
      $("#exportBtn").on("click", function() {
        const rows = table.rows({
          search: "applied"
        }).data().toArray();
        const headers = ["RANK", "MATCHING ($)", "DAILY ($)", "DAYS", "INCOME ($)", "STATUS"];
        const csvRows = [headers];
        rows.forEach(function(row) {
          csvRows.push([row.rank, row.matching_income, row.daily_income, row.days, row.total_income, row
            .status
          ]);
        });
        const csv = csvRows.map(function(row) {
          return row.map(function(value) {
            return `"${String(value??"").replace(/"/g,'""')}"`;
          }).join(",");
        }).join("\r\n");
        const blob = new Blob(["\uFEFF" + csv], {
          type: "text/csv;charset=utf-8;"
        });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "rank-masters-report.csv";
        document.body.appendChild(link);
        link.click();
        link.remove();
        URL.revokeObjectURL(url);
      });
      $("#level-income-table").on("click", ".status-btn", function() {
        const id = $(this).data("id");
        const status = $(this).data("status");
        $("#statusModal").data("id", id).data("status", status);
        $("#statusModal .modal-title").text(status === "Active" ? "Deactivate Record" : "Activate Record");
        $("#statusModal .modal-body").text(
          `Are you sure you want to change Rank ${id} from ${status} to ${status==="Active"?"Inactive":"Active"}?`
          );
        const modalElement = document.getElementById("statusModal");
        if (modalElement) bootstrap.Modal.getOrCreateInstance(modalElement).show();
      });
    });
  </script>
@endsection