{% extends "pos/base.html" %}
{% load static %}

{% block title %}
  {% if challan %}Edit Challan{% else %}Add Challan{% endif %}
{% endblock %}

{% block content %}
<style>
  :root{
    --gtc-primary:#01478f;
    --gtc-primary-dark:#01376f;
    --gtc-green:#15803d;
    --gtc-red:#dc2626;
    --gtc-bg:#f3f6fb;
    --gtc-card:#ffffff;
    --gtc-border:#dbe3ef;
    --gtc-soft:#f8fafc;
    --gtc-text:#0f172a;
    --gtc-muted:#64748b;
    --gtc-shadow:0 8px 22px rgba(15,23,42,.07);
  }

  .gtc-page{
    background:var(--gtc-bg);
    padding:12px;
    min-height:calc(100vh - 60px);
  }

  .gtc-card{
    background:var(--gtc-card);
    border:1px solid var(--gtc-border);
    border-radius:12px;
    box-shadow:var(--gtc-shadow);
    margin-bottom:12px;
    overflow:hidden;
  }

  .gtc-card-head{
    padding:12px 14px;
    border-bottom:1px solid var(--gtc-border);
    background:linear-gradient(180deg,#fff,#f8fbff);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .gtc-title{
    margin:0;
    font-size:18px;
    font-weight:900;
    color:var(--gtc-text);
  }

  .gtc-subtitle{
    font-size:12px;
    font-weight:700;
    color:var(--gtc-muted);
    margin-top:2px;
  }

  .gtc-card-body{
    padding:14px;
  }

  .gtc-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
  }

  .gtc-field label{
    display:block;
    margin-bottom:4px;
    font-size:12px;
    font-weight:900;
    color:var(--gtc-muted);
  }

  .gtc-input,
  .gtc-field input,
  .gtc-field select{
    width:100%;
    height:36px;
    border:1px solid #cbd5e1;
    border-radius:8px;
    background:#fff;
    padding:6px 10px;
    color:#111827;
    font-size:13px;
    font-weight:700;
    outline:none;
    box-sizing:border-box;
  }

  .gtc-input:focus,
  .gtc-field input:focus,
  .gtc-field select:focus{
    border-color:var(--gtc-primary);
    box-shadow:0 0 0 3px rgba(1,71,143,.12);
  }

  .gtc-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  .gtc-btn{
    border:0;
    border-radius:8px;
    padding:8px 12px;
    font-size:13px;
    font-weight:900;
    text-decoration:none !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    line-height:1;
  }

  .gtc-btn-primary{background:var(--gtc-primary);color:#fff !important;}
  .gtc-btn-primary:hover{background:var(--gtc-primary-dark);color:#fff !important;}
  .gtc-btn-green{background:var(--gtc-green);color:#fff !important;}
  .gtc-btn-light{background:#e5e7eb;color:#111827 !important;}
  .gtc-btn-outline{
    background:#fff;
    border:1px solid var(--gtc-border);
    color:#111827 !important;
  }

  .gtc-table-wrap{
    overflow:auto;
    border-top:1px solid var(--gtc-border);
  }

  .gtc-table{
    width:100%;
    border-collapse:collapse;
    margin:0;
  }

  .gtc-table th,
  .gtc-table td{
    border-bottom:1px solid #e5e7eb;
    padding:8px;
    font-size:13px;
    vertical-align:middle;
    color:#111827;
  }

  .gtc-table th{
    background:var(--gtc-soft);
    color:#475569;
    font-weight:900;
    white-space:nowrap;
  }

  .gtc-table tbody tr:hover td{
    background:#f8fbff;
  }

  .gtc-table .gtc-check-cell{
    width:44px;
    text-align:center;
  }

  .gtc-right{text-align:right;}
  .gtc-center{text-align:center;}

  .gtc-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 8px;
    border-radius:999px;
    background:#eff6ff;
    color:#01478f;
    font-size:12px;
    font-weight:900;
    border:1px solid #bfdbfe;
  }

  .gtc-summary-bar{
    padding:10px 14px;
    background:#fff;
    border-top:1px solid var(--gtc-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .gtc-summary-items{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .gtc-summary-item{
    background:#f8fafc;
    border:1px solid var(--gtc-border);
    border-radius:10px;
    padding:7px 10px;
    font-size:12px;
    font-weight:900;
    color:#334155;
  }

  .gtc-summary-item strong{
    color:var(--gtc-primary);
  }

  .select2-container{width:100% !important;}
  .select2-container .select2-selection--single{
    height:36px !important;
    border:1px solid #cbd5e1 !important;
    border-radius:8px !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:34px !important;
    font-size:13px !important;
    font-weight:700;
    color:#111827 !important;
    padding-left:10px !important;
  }
  .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:34px !important;
  }

  @media(max-width:1100px){
    .gtc-grid{grid-template-columns:repeat(2,1fr);}
  }

  @media(max-width:700px){
    .gtc-grid{grid-template-columns:1fr;}
    .gtc-card-head{align-items:flex-start;flex-direction:column;}
    .gtc-actions{width:100%;}
    .gtc-btn{width:100%;}
  }
</style>

<div
  class="gtc-page"
  id="challanRoot"
  data-vehicle-search-url="{% url 'good_transport:vehicles:api_search' %}"
  data-route-search-url="{% url 'good_transport:routes:api_search' %}"
  data-invoice-search-url="{% url 'good_transport:challans:api_invoices' %}"
  data-current-challan-tid="{{ challan.t_id|default:'0' }}"
>
  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show py-2" role="alert">
        {{ message }}
        <button type="button" class="close" data-dismiss="alert">
          <span>&times;</span>
        </button>
      </div>
    {% endfor %}
  {% endif %}

  <form method="post" id="challanForm" autocomplete="off">
    {% csrf_token %}

    <div class="gtc-card">
      <div class="gtc-card-head">
        <div>
          <h2 class="gtc-title">
            {% if challan %}Edit Challan{% else %}Add New Challan{% endif %}
          </h2>
          <div class="gtc-subtitle">
            Vehicle select karein aur booked builties ko challan me load karein.
          </div>
        </div>

        <div class="gtc-actions">
          <a class="gtc-btn gtc-btn-light" href="{% url 'good_transport:challans:challan_list' %}">
            <i class="fas fa-arrow-left"></i> Back
          </a>

          <button class="gtc-btn gtc-btn-green" type="submit" id="saveChallanBtn">
            <i class="fas fa-save"></i> Save Challan
          </button>
        </div>
      </div>

      <div class="gtc-card-body">
        <div class="gtc-grid">

          <div class="gtc-field">
            <label>Challan No</label>
            <input
              type="text"
              value="{% if challan %}{{ challan.challan_no }}{% else %}Auto{% endif %}"
              readonly
            >
          </div>

          <div class="gtc-field">
            <label>Date</label>
            <input
              type="date"
              name="challan_date"
              value="{% if challan %}{{ challan.challan_date|date:'Y-m-d' }}{% else %}{{ today|date:'Y-m-d' }}{% endif %}"
              required
            >
          </div>

          <div class="gtc-field">
            <label>Vehicle <span style="color:#dc2626;">*</span></label>
            <select id="vehicleSelect" name="vehicle_t_id" class="gtc-input" required>
              {% if challan and challan.vehicle_t_id %}
                <option selected value="{{ challan.vehicle_t_id }}">{{ challan.vehicle_no }}</option>
              {% endif %}
            </select>
          </div>

          <div class="gtc-field">
            <label>Driver Name</label>
            <input
              type="text"
              name="driver_name"
              value="{{ challan.driver_name|default:'' }}"
              placeholder="Driver name"
            >
          </div>

          <div class="gtc-field">
            <label>Driver Mobile</label>
            <input
              type="text"
              name="driver_mobile"
              value="{{ challan.driver_mobile|default:'' }}"
              placeholder="Mobile no"
            >
          </div>

          <div class="gtc-field">
            <label>From Area / Hub <span style="color:#dc2626;">*</span></label>
            <select id="fromAreaSelect" name="from_area_t_id" class="gtc-input" required>
              {% if challan and challan.from_area_t_id %}
                <option selected value="{{ challan.from_area_t_id }}">{{ challan.from_city }}</option>
              {% endif %}
            </select>
          </div>

          <div class="gtc-field">
            <label>To Area / Hub <span style="color:#dc2626;">*</span></label>
            <select id="toAreaSelect" name="to_area_t_id" class="gtc-input" required>
              {% if challan and challan.to_area_t_id %}
                <option selected value="{{ challan.to_area_t_id }}">{{ challan.to_city }}</option>
              {% endif %}
            </select>
          </div>

          <div class="gtc-field">
            <label>Remarks</label>
            <input
              type="text"
              name="remarks"
              value="{{ challan.remarks|default:'' }}"
              placeholder="Optional remarks"
            >
          </div>

        </div>
      </div>
    </div>

    <div class="gtc-card">
      <div class="gtc-card-head">
        <div>
          <h3 class="gtc-title" style="font-size:16px;">Select Builties / Invoices</h3>
          <div class="gtc-subtitle">
            Sirf booked / available builties yahan show hongi.
          </div>
        </div>

        <div class="gtc-actions">
          <button type="button" class="gtc-btn gtc-btn-outline" id="selectAllBtn">
            <i class="fas fa-check-square"></i> Select All
          </button>
          <button type="button" class="gtc-btn gtc-btn-outline" id="clearAllBtn">
            <i class="far fa-square"></i> Clear
          </button>
        </div>
      </div>

      <div class="gtc-table-wrap">
        <table class="gtc-table">
          <thead>
            <tr>
              <th class="gtc-check-cell">
                <input type="checkbox" id="masterCheck">
              </th>
              <th>Invoice</th>
              <th>Builty</th>
              <th>Date</th>
              <th>Customer</th>
              <th>Receiver</th>
              <th>Route</th>
              <th class="gtc-right">Total</th>
            </tr>
          </thead>

          <tbody id="invoiceBody">
            {% for inv in available_invoices %}
              <tr>
                <td class="gtc-check-cell">
                  <input
                    type="checkbox"
                    class="invoice-check"
                    name="invoice_tids"
                    value="{{ inv.t_id }}"
                    data-amount="{{ inv.total_amount|default:'0' }}"
                    {% if inv.t_id in existing_invoice_tids %}checked{% endif %}
                  >
                </td>
                <td><span class="gtc-pill">#{{ inv.invoice_no }}</span></td>
                <td>{{ inv.builty_no|default:"-" }}</td>
                <td>{{ inv.invoice_date|date:"d-m-Y" }}</td>
                <td>{{ inv.customer_name|default:"-" }}</td>
                <td>{{ inv.receiver_name|default:"-" }}</td>
                <td>{{ inv.from_city|default:"-" }} → {{ inv.to_city|default:"-" }}</td>
                <td class="gtc-right">{{ inv.total_amount|floatformat:2 }}</td>
              </tr>
            {% empty %}
              <tr>
                <td colspan="8" class="gtc-center" style="padding:22px;color:#64748b;font-weight:800;">
                  Pehle From/To area select karein. Matching builties yahan show hongi.
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="gtc-summary-bar">
        <div class="gtc-summary-items">
          <div class="gtc-summary-item">
            Selected Builties: <strong id="selectedCount">0</strong>
          </div>
          <div class="gtc-summary-item">
            Selected Amount: <strong id="selectedAmount">0.00</strong>
          </div>
        </div>

        <button class="gtc-btn gtc-btn-green" type="submit">
          <i class="fas fa-save"></i> Save Challan
        </button>
      </div>
    </div>

  </form>
</div>
{% endblock %}

{% block javascripts %}
{{ block.super }}
<script>
(function () {
  var root = $("#challanRoot");

  function getCookie(name) {
    var cookieValue = null;

    if (document.cookie && document.cookie !== "") {
      var cookies = document.cookie.split(";");

      for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i].trim();

        if (cookie.substring(0, name.length + 1) === (name + "=")) {
          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
          break;
        }
      }
    }

    return cookieValue;
  }

  function escapeHtml(value) {
    return String(value || "")
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  }

  function toNumber(value) {
    value = String(value || "0").replace(/,/g, "").trim();
    var n = parseFloat(value);
    return isNaN(n) ? 0 : n;
  }

  function money(value) {
    return toNumber(value).toFixed(2);
  }

  function getRows(data) {
    if (data && $.isArray(data.results)) return data.results;
    if (data && data.ok && $.isArray(data.results)) return data.results;
    if ($.isArray(data)) return data;
    return [];
  }

  function notify(message) {
    if (window.Swal) {
      Swal.fire({
        toast: true,
        position: "top-end",
        icon: "warning",
        title: message,
        showConfirmButton: false,
        timer: 2200
      });
      return;
    }

    alert(message);
  }

  function setupVehicleSelect() {
    if (!$.fn.select2) {
      notify("Select2 load nahi hua.");
      return;
    }

    $("#vehicleSelect").select2({
      placeholder: "Search vehicle",
      width: "100%",
      allowClear: true,
      ajax: {
        url: root.data("vehicle-search-url"),
        type: "POST",
        dataType: "json",
        delay: 250,
        headers: {
          "X-CSRFToken": getCookie("csrftoken")
        },
        data: function (params) {
          return {
            term: params.term || ""
          };
        },
        processResults: function (data) {
          return {
            results: $.map(getRows(data), function (v) {
              return {
                id: v.id || v.ref || v.t_id,
                text: v.text || v.name || "",
                description: v.description || v.descp || "",
                rent: v.rent || 0,
                balance: v.balance || 0
              };
            })
          };
        }
      },
      templateResult: function (item) {
        if (item.loading) return item.text;

        var html = ""
          + "<div style='line-height:1.25;'>"
          + "<div style='font-weight:900;color:#0f172a;'>" + escapeHtml(item.text || "") + "</div>";

        if (item.description) {
          html += "<div style='font-size:11px;color:#64748b;'>" + escapeHtml(item.description) + "</div>";
        }

        if (item.rent) {
          html += "<div style='font-size:11px;color:#15803d;font-weight:800;'>Default Rent: " + money(item.rent) + "</div>";
        }

        html += "</div>";
        return html;
      },
      templateSelection: function (item) {
        return item.text || "";
      },
      escapeMarkup: function (markup) {
        return markup;
      }
    });
  }

  function routeRow(a) {
    a = a || {};

    return {
      id: a.id || a.t_id || a.ref || "",
      text: a.text || a.area_name || "",
      area_name: a.area_name || a.text || "",
      hub_code: a.hub_code || "",
      hub_type: a.hub_type || "",
      description: a.description || "",
      ref: a.ref || a.id || a.t_id || ""
    };
  }

  function setupRouteSelect(selector, placeholder) {
    if (!$.fn.select2) {
      notify("Select2 load nahi hua.");
      return;
    }

    $(selector).select2({
      placeholder: placeholder || "Search area / hub",
      width: "100%",
      allowClear: true,
      ajax: {
        url: root.data("route-search-url"),
        type: "POST",
        dataType: "json",
        delay: 250,
        headers: {
          "X-CSRFToken": getCookie("csrftoken")
        },
        data: function (params) {
          return {
            term: params.term || ""
          };
        },
        processResults: function (data) {
          return {
            results: $.map(getRows(data), function (a) {
              return routeRow(a);
            })
          };
        }
      },
      templateResult: function (item) {
        if (item.loading) return item.text;

        var html = ""
          + "<div style='line-height:1.25;'>"
          + "<div style='font-weight:900;color:#0f172a;'>" + escapeHtml(item.text || "") + "</div>";

        if (item.hub_code) {
          html += "<div style='font-size:11px;color:#01478f;font-weight:800;'>Hub Code: " + escapeHtml(item.hub_code) + "</div>";
        }

        if (item.description) {
          html += "<div style='font-size:11px;color:#64748b;'>" + escapeHtml(item.description) + "</div>";
        }

        html += "</div>";
        return html;
      },
      templateSelection: function (item) {
        return item.text || "";
      },
      escapeMarkup: function (markup) {
        return markup;
      }
    });

    $(selector).on("select2:select select2:clear", function () {
      loadInvoicesByRoute();
    });
  }

  function getSelectedInvoiceMap() {
    var map = {};

    $(".invoice-check:checked").each(function () {
      map[String($(this).val())] = true;
    });

    return map;
  }

  function updateSummary() {
    var count = 0;
    var amount = 0;

    $(".invoice-check:checked").each(function () {
      count += 1;
      amount += toNumber($(this).data("amount"));
    });

    $("#selectedCount").text(count);
    $("#selectedAmount").text(money(amount));

    var totalChecks = $(".invoice-check").length;
    var checked = $(".invoice-check:checked").length;

    $("#masterCheck").prop("checked", totalChecks > 0 && totalChecks === checked);
  }

  function renderInvoiceRows(rows, message) {
    var selectedMap = getSelectedInvoiceMap();
    var html = "";

    if (!rows.length) {
      html = ""
        + "<tr>"
        + "<td colspan='8' class='gtc-center' style='padding:22px;color:#64748b;font-weight:800;'>"
        + escapeHtml(message || "No invoice found for selected route.")
        + "</td>"
        + "</tr>";

      $("#invoiceBody").html(html);
      $("#masterCheck").prop("checked", false);
      updateSummary();
      return;
    }

    $.each(rows, function (i, inv) {
      var tid = String(inv.t_id || "");
      var checked = selectedMap[tid] ? "checked" : "";

      html += ""
        + "<tr>"
        + "<td class='gtc-check-cell'>"
        + "<input type='checkbox' class='invoice-check' name='invoice_tids'"
        + " value='" + escapeHtml(tid) + "'"
        + " data-amount='" + escapeHtml(inv.total_amount || "0") + "' " + checked + ">"
        + "</td>"
        + "<td><span class='gtc-pill'>#" + escapeHtml(inv.invoice_no) + "</span></td>"
        + "<td>" + escapeHtml(inv.builty_no || "-") + "</td>"
        + "<td>" + escapeHtml(inv.invoice_date || "-") + "</td>"
        + "<td>" + escapeHtml(inv.customer_name || "-") + "</td>"
        + "<td>" + escapeHtml(inv.receiver_name || "-") + "</td>"
        + "<td>" + escapeHtml(inv.from_city || "-") + " → " + escapeHtml(inv.to_city || "-") + "</td>"
        + "<td class='gtc-right'>" + money(inv.total_amount || 0) + "</td>"
        + "</tr>";
    });

    $("#invoiceBody").html(html);
    updateSummary();
  }

  function loadInvoicesByRoute() {
    var fromAreaId = $("#fromAreaSelect").val() || "";
    var toAreaId = $("#toAreaSelect").val() || "";

    if (!fromAreaId) {
      renderInvoiceRows([], "Pehle From Area / Hub select karein.");
      return;
    }

    $("#invoiceBody").html(
      "<tr><td colspan='8' class='gtc-center' style='padding:22px;color:#64748b;font-weight:800;'>Loading invoices...</td></tr>"
    );

    $.ajax({
      url: root.data("invoice-search-url"),
      type: "GET",
      dataType: "json",
      data: {
        from_area_t_id: fromAreaId,
        to_area_t_id: toAreaId,
        challan_t_id: root.data("current-challan-tid") || 0
      },
      success: function (res) {
        renderInvoiceRows(getRows(res));
      },
      error: function () {
        renderInvoiceRows([], "Invoice loading failed.");
      }
    });
  }

  $("#masterCheck").on("change", function () {
    $(".invoice-check").prop("checked", $(this).is(":checked"));
    updateSummary();
  });

  $("#selectAllBtn").on("click", function () {
    $(".invoice-check").prop("checked", true);
    updateSummary();
  });

  $("#clearAllBtn").on("click", function () {
    $(".invoice-check").prop("checked", false);
    updateSummary();
  });

  $(document).on("change", ".invoice-check", function () {
    updateSummary();
  });

  $("#challanForm").on("submit", function (e) {
    if (!$("#vehicleSelect").val()) {
      e.preventDefault();
      notify("Vehicle select karein.");
      $("#vehicleSelect").select2("open");
      return false;
    }

    if (!$("#fromAreaSelect").val()) {
      e.preventDefault();
      notify("From Area / Hub select karein.");
      $("#fromAreaSelect").select2("open");
      return false;
    }

    if (!$("#toAreaSelect").val()) {
      e.preventDefault();
      notify("To Area / Hub select karein.");
      $("#toAreaSelect").select2("open");
      return false;
    }

    if ($("#fromAreaSelect").val() === $("#toAreaSelect").val()) {
      e.preventDefault();
      notify("From aur To area same nahi ho sakte.");
      return false;
    }

    if ($(".invoice-check:checked").length <= 0) {
      e.preventDefault();
      notify("Kam az kam 1 builty/invoice select karein.");
      return false;
    }

    $("#saveChallanBtn").prop("disabled", true).text("Saving...");
    return true;
  });

  setupVehicleSelect();
  setupRouteSelect("#fromAreaSelect", "Search From hub / area");
  setupRouteSelect("#toAreaSelect", "Search To hub / area");

  updateSummary();

  if ($("#fromAreaSelect").val()) {
    loadInvoicesByRoute();
  }
})();
</script>
{% endblock %}