{% extends "pos/base.html" %}
{% load static %}
{% load video_help_tags %}
{% block title %}Products / Service{% endblock title %}

{% block stylesheets %}

{% endblock stylesheets %}

{% block heading %}Products / Services{% endblock heading %}

{% block content %}

<!-- Actions (responsive) -->
<!-- DESKTOP / LAPTOP (md+) : single line, no wrap -->
<div class="btn-toolbar mb-3 d-none d-md-flex" role="toolbar" aria-label="Product actions">
  <div class="btn-group mr-2 flex-nowrap" role="group" style="flex-wrap:nowrap;">
    <a href="{% url 'products:products_add' %}" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i> Create new product
    </a>
    {% if 'products_edit' in allowed_features %}
        <a href="{% url 'products:products_edit' %}" class="btn btn-sm btn-outline-success" title="Edit Product">
          <i class="fas fa-edit mr-1"></i> Edit Product
        </a>
    {% endif %}

    {% if 'products_bulk_edit' in allowed_features %}
        <a href="{% url 'products:products_bulk_edit' %}" class="btn btn-outline-success font-weight-bold">
          <i class="fas fa-edit mr-2"></i> Bulk Edit Product
        </a>
    {% endif %}

    {% if 'products_edit' in allowed_features %}
        <a href="{% url 'products:categories_products_list' %}" class="btn btn-outline-success font-weight-bold">
        {% if pos_type|default:"retail" == "foot_wear_store" %}
            Variants Wise Add Products
        {% else %}
            Categories Wise Add Products
        {% endif %}
        </a>
        <a href="{% url 'products:variant_stock_bulk_edit' %}" class="btn btn-outline-success font-weight-bold">
              Bulk Warehouse Products Edit
        </a>
        <a href="{% url 'products:fbr_di_bulk_edit' %}" class="btn btn-outline-success font-weight-bold">
              DI Bulk Edit
        </a>
    {% endif %}
    {% video_help_button 'add-products' 'Video Help' 'btn btn-danger' %}
  </div>
</div>

<!-- MOBILE (sm) : grid (2 columns) -->
<div class="mb-3 d-md-none">
  <div class="row no-gutters">
    <div class="col-6 pr-1 mb-2">
      <a href="{% url 'products:products_add' %}" class="btn btn-success font-weight-bold btn-block">
        <i class="fas fa-plus mr-2"></i> New
      </a>
    </div>
    {% if 'products_edit' in allowed_features %}
    <div class="col-6 pl-1 mb-2">
      <a href="{% url 'products:products_edit' %}" class="btn btn-outline-success btn-block">
        <i class="fas fa-edit mr-1"></i> Edit
      </a>
    </div>

    <div class="col-6 pr-1 mb-2">
      <a href="{% url 'products:products_bulk_edit' %}" class="btn btn-outline-success font-weight-bold btn-block">
        <i class="fas fa-edit mr-2"></i> Bulk
      </a>
    </div>

    <div class="col-6 pl-1 mb-2">
      <a href="{% url 'products:categories_products_list' %}" class="btn btn-outline-success font-weight-bold btn-block">
        Category
      </a>
    </div>
    {% endif %}

    <!-- ✅ VIDEO HELP BUTTON (Mobile) -->
    <div class="col-6 pl-1 mb-2">
      {% video_help_button 'add-products' 'Help' 'btn btn-info btn-block' %}
    </div>

  </div>
</div>

<!-- Add "Upload Excel" button, which toggles the upload section -->
<div class="row ml-0 mb-3">
    <button type="button" class="btn btn-primary font-weight-bold" onclick="toggleUploadSection()">
        <i class="fas fa-file-upload mr-2"></i>
        Upload Excel
    </button>
</div>

<!-- The hidden upload section (initially display: none) -->
<div class="card shadow mb-4" id="uploadSection" style="display: none;">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Upload Excel</h6>
    </div>
    <div class="card-body">
        <!-- Button to download the template file -->
        <a href="{% url 'products:download_excel_template' %}" class="btn btn-info mb-3">
            Download Excel Template
        </a>

        <!-- Form to upload the file -->
        <form method="POST" action="{% url 'products:upload_excel' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form-group">
                <label for="excelFileInput">Choose Excel/CSV file:</label>
                <input 
                    type="file" 
                    name="excel_file" 
                    id="excelFileInput" 
                    accept=".xlsx, .xls, .csv"
                    required
                    class="form-control-file"
                >
            </div>
            <button type="submit" class="btn btn-success mt-2">
                <i class="fas fa-upload mr-1"></i> Upload
            </button>
        </form>

        <hr class="mt-4 mb-4">

        <!-- ── Update Existing Products (column-wise partial update) ── -->
        <h6 class="font-weight-bold text-primary mb-3">Update Existing Products (Bulk)</h6>

        <div class="alert alert-light border mb-3" role="alert">
            <strong>How it works:</strong>
            <ol class="mb-0 pl-3">
                <li>Click <em>Download All Products</em> below — this exports every product currently in the system, with all columns, including <code>prod_id</code>.</li>
                <li>In the downloaded sheet, delete the columns you do <u>not</u> want to update. Keep <code>prod_id</code> and only the column(s) you want to change (e.g. keep <code>prod_id</code>, <code>product_code</code>, <code>name</code> and delete the rest).</li>
                <li>Edit the values in the columns you kept, then save the file.</li>
                <li>Upload it below — only the columns present in your sheet will be updated in the database; every other field stays untouched.</li>
                <li><strong>Never delete or edit the <code>prod_id</code> column</strong> — it is used to match each row to the correct product.</li>
                <li>Choose below whether rows should be matched by <code>prod_id</code> or by <code>product_code</code>.</li>
                <li><code>present_stock</code> is never updated from here, even if that column is present in your sheet.</li>
            </ol>
        </div>

        <a href="{% url 'products:download_all_products_excel' %}" class="btn btn-info mb-3">
            <i class="fas fa-download mr-1"></i> Download All Products
        </a>

        <form method="POST" action="{% url 'products:upload_excel_update' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form-group">
                <label for="excelUpdateFileInput">Choose updated Excel/CSV file:</label>
                <input
                    type="file"
                    name="excel_file"
                    id="excelUpdateFileInput"
                    accept=".xlsx, .xls, .csv"
                    required
                    class="form-control-file"
                >
            </div>

            <div class="form-group">
                <label class="d-block mb-1"><strong>Compare rows using:</strong></label>
                <div class="form-check form-check-inline">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        name="compare_with_prod_id"
                        id="compareWithProdId"
                        value="1"
                        checked
                        onclick="if(this.checked){document.getElementById('compareWithProductCode').checked=false;}else{this.checked=true;}"
                    >
                    <label class="form-check-label" for="compareWithProdId">Compare with prod_id</label>
                </div>
                <div class="form-check form-check-inline">
                    <input
                        type="checkbox"
                        class="form-check-input"
                        name="compare_with_product_code"
                        id="compareWithProductCode"
                        value="1"
                        onclick="if(this.checked){document.getElementById('compareWithProdId').checked=false;}else{this.checked=true;}"
                    >
                    <label class="form-check-label" for="compareWithProductCode">Compare with product_code</label>
                </div>
            </div>

            <button type="submit" class="btn btn-warning mt-2">
                <i class="fas fa-sync-alt mr-1"></i> Upload &amp; Update
            </button>
        </form>
    </div>
</div>
<!-- 
<div class="row ml-0 mb-3">
    <button type="button"
            class="btn btn-info font-weight-bold"
            onclick="toggleSpecASection()">
        <i class="fas fa-layer-group mr-2"></i>
        Upload Multiple Warehouse Stock
    </button>
</div> -->

<!-- Hidden section -->
<div class="card shadow mb-4" id="specASection" style="display: none;">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-info">
            Bulk Spec-A Variant Stock Upload
        </h6>
    </div>
    <div class="card-body">

        <!-- Explanation -->
        <div class="alert alert-light border mb-3" role="alert">
            <strong>How it works:</strong>
            <ol class="mb-0 pl-3">
                <li>First upload products normally (with zero stock) using the
                    <em>Upload Excel</em> section above.</li>
                <li>Download the Spec-A template below — it includes your
                    existing product list &amp; Spec-A terms as reference
                    sheets.</li>
                <li>Fill in <code>product_code</code>,
                    <code>spec_a_name</code>, <code>qty</code>,
                    <code>purchase_price</code> for each variant row.</li>
                <li>Upload — the system will create variants, set stock,
                    record history &amp; FIFO layers automatically.</li>
            </ol>
        </div>

        <!-- Download template -->
        <a href="{% url 'products:download_spec_a_stock_template' %}"
           class="btn btn-info mb-3">
            <i class="fas fa-download mr-1"></i>
            Download Spec-A Stock Template
        </a>

        <!-- Upload form -->
        <form method="POST"
              action="{% url 'products:upload_spec_a_stock' %}"
              enctype="multipart/form-data">
            {% csrf_token %}
            <div class="form-group">
                <label for="specAFileInput">Choose Spec-A Stock Excel file:</label>
                <input type="file"
                       name="excel_file"
                       id="specAFileInput"
                       accept=".xlsx,.xls"
                       required
                       class="form-control-file">
            </div>
            <button type="submit" class="btn btn-success mt-2">
                <i class="fas fa-upload mr-1"></i> Upload Spec-A Stock
            </button>
        </form>
    </div>
</div>


<!-- DataTable -->
<div class="card shadow mb-12">

    <div class="card-body">
        <!-- 🔍 Global Product Search (code or name) -->
        <div class="mb-3">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text bg-white"><i class="fas fa-search text-primary"></i></span>
                </div>
                <input type="text"
                       id="productGlobalSearch"
                       class="form-control"
                       placeholder="Search by product code or name..."
                       autocomplete="off">
                <div class="input-group-append">
                    <button type="button" id="productSearchClearBtn" class="btn btn-outline-secondary" title="Clear search" style="display:none;">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <small id="productSearchStatus" class="text-muted d-block mt-1"></small>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th style="width:5%">#</th>
                        <th style="width:20%">Name</th>
                        <th style="width:25%">Description</th>
                        <th style="width:15%">Category</th>
                        <th class="text-center" style="width:15%">Price</th>
                        <th class="text-center" style="width:10%">Stock</th>
                        <th class="text-center" style="width:10%">Actions</th>
                    </tr>
                </thead>
                <tbody id="productsTableBody">
                    {% include "products/_products_rows.html" %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Linked Products Modal (shared) -->
<div class="modal fade" id="linkedProductsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Linked Products — <span id="lpParentName"></span></h5>
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      </div>
      <div class="modal-body">

        <table class="table table-sm table-bordered" id="lpChildrenTable">
          <thead>
            <tr>
              <th>Name</th><th>Pieces/Pack</th><th>Ratio Override</th>
              <th>Sale Price</th><th>Effective Ratio</th><th></th>
            </tr>
          </thead>
          <tbody id="lpChildrenBody"></tbody>
        </table>
        <button type="button" id="lpSaveChangesBtn" class="btn btn-primary btn-sm mb-3">
          <i class="fas fa-save mr-1"></i> Save Changes
        </button>

        <hr>
        <h6>🔗 Link Existing Product</h6>
        <div class="form-row align-items-end">
          <div class="form-group col-md-6">
            <label>Search Product</label>
            <select id="lpExistingProductSelect" class="form-control" style="width:100%">
              <option></option>
            </select>
          </div>
          <div class="form-group col-md-3">
            <label>Ratio Override</label>
            <input type="number" step="any" id="lpExistingRatioOverride" class="form-control" placeholder="auto">
          </div>
          <div class="form-group col-md-3">
            <button type="button" id="lpLinkExistingBtn" class="btn btn-warning btn-block">Link</button>
          </div>
        </div>

        <hr>
        <h6>+ Add New Linked Product</h6>
        <form id="lpCreateForm">
          <input type="hidden" name="parent_id" id="lpParentId">
          <div class="form-row">
            <div class="form-group col-md-3">
              <label>Name</label>
              <input type="text" name="name" class="form-control" required>
            </div>
            <div class="form-group col-md-3">
              <label>Product Code</label>
              <input type="text" name="product_code" class="form-control" placeholder="Blank = Auto">
            </div>
            <div class="form-group col-md-2">
              <label>Pieces/Pack</label>
              <input type="number" name="pieces_per_pack" class="form-control" min="1" value="1" required>
            </div>
            <div class="form-group col-md-2">
              <label>Ratio Override</label>
              <input type="number" step="any" name="linked_conversion_qty" class="form-control" placeholder="auto">
            </div>
            <div class="form-group col-md-2">
              <label>Sale Price</label>
              <input type="number" step="any" name="l_sale_price" class="form-control" required>
            </div>
          </div>
          <button type="submit" class="btn btn-success">Add Linked Product</button>
        </form>
        <div id="lpFeedback"></div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block javascripts %}

<script>

// Toggle the hidden upload section
function toggleUploadSection() {
  var x = document.getElementById("uploadSection");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

// Toggle the hidden upload section  (already exists)
function toggleUploadSection() {
    var x = document.getElementById("uploadSection");
    x.style.display = (x.style.display === "none") ? "block" : "none";
}

// Toggle Spec-A upload section  ← NEW
function toggleSpecASection() {
    var x = document.getElementById("specASection");
    x.style.display = (x.style.display === "none") ? "block" : "none";
}


    // Call the dataTables jQuery plugin
    function initProductsTable() {
        tblProducts = $('#dataTable').DataTable({
            dom: 'rtip', // table, processing, info, pagination (Print/Excel/PDF buttons removed — replaced by search bar above)
            columnDefs: [
                {
                    targets: [0],
                    visible: false,
                    searchable: false,
                },
                {
                    targets: [-1], // Actions column
                    orderable: false,
                }
            ],
        });
    }

    $(document).ready(function() {
        initProductsTable();
    });

    // Alert when trying to delete a product
    $('#dataTable tbody')
    .on('click', 'button[rel="delete"]', function () {
        var tr = tblProducts.cell($(this).closest('td, li')).index();
        row_data = (tblProducts.row(tr.row).data());
        product_id = row_data[0];
        product_name = row_data[2];
        new_delete_url  = 'delete/' + product_id;
        document.getElementById("updateThisText").innerHTML =
            "Are you sure you want to delete the product: " + product_name + "?";
        document.getElementById("updateThisURL").href = new_delete_url;
    });




    // ── 🔍 Global Product Search (product_code OR name) ──────────────────
    var PRODUCT_SEARCH_URL = "{% url 'products:products_list_search' %}";
    var productSearchTimer = null;

    function runProductSearch(term) {
        $.ajax({
            url: PRODUCT_SEARCH_URL,
            method: 'POST',
            data: { term: term },
            headers: { 'X-CSRFToken': '{{ csrf_token }}' },
            beforeSend: function () {
                $('#productSearchStatus').text('Searching...');
            },
            success: function (resp) {
                if (!resp.ok) {
                    $('#productSearchStatus').text('Search failed. Try again.');
                    return;
                }
                if ($.fn.DataTable.isDataTable('#dataTable')) {
                    tblProducts.destroy();
                }
                $('#productsTableBody').html(resp.html);
                initProductsTable();

                if (term) {
                    $('#productSearchStatus').text(resp.count + ' result(s) found for "' + term + '"');
                } else {
                    $('#productSearchStatus').text('Showing last 20 products.');
                }
            },
            error: function () {
                $('#productSearchStatus').text('Search failed. Try again.');
            }
        });
    }

    $('#productGlobalSearch').on('keyup', function (e) {
        var term = $(this).val().trim();
        $('#productSearchClearBtn').toggle(term.length > 0);
        clearTimeout(productSearchTimer);
        productSearchTimer = setTimeout(function () {
            runProductSearch(term);
        }, 350);
    });

    $('#productSearchClearBtn').on('click', function () {
        $('#productGlobalSearch').val('').focus();
        $(this).hide();
        clearTimeout(productSearchTimer);
        runProductSearch('');
    });


const LP_LIST_URL_TEMPLATE = "{% url 'products:linked_products_list' 0 %}";

let lpCurrentParentId = null;
let lpParentPpp = 1;

function lpRenderRow(c) {
    const override = (c.linked_conversion_qty === null || c.linked_conversion_qty === undefined) ? '' : c.linked_conversion_qty;
    return (
        '<tr data-id="' + c.id + '">' +
          '<td><input type="text" class="form-control form-control-sm lp-f" data-field="name" value="' + c.name + '"></td>' +
          '<td><input type="number" min="1" class="form-control form-control-sm lp-f" data-field="pieces_per_pack" value="' + c.pieces_per_pack + '"></td>' +
          '<td><input type="number" step="any" class="form-control form-control-sm lp-f" data-field="linked_conversion_qty" value="' + override + '" placeholder="auto"></td>' +
          '<td><input type="number" step="any" class="form-control form-control-sm lp-f" data-field="l_sale_price" value="' + c.l_sale_price + '"></td>' +
          '<td class="lp-ratio align-middle">' + c.ratio.toFixed(4) + '</td>' +
          '<td><button type="button" class="btn btn-danger btn-sm lp-unlink">Unlink</button></td>' +
        '</tr>'
    );
}

function lpLoadChildren(parentId) {
    const url = LP_LIST_URL_TEMPLATE.replace('/0/', '/' + parentId + '/');
    $.get(url, function(resp) {
        if (!resp.ok) return;
        $('#lpParentName').text(resp.parent.name);
        lpParentPpp = parseFloat(resp.parent.pieces_per_pack) || 1;
        let $tbody = $('#lpChildrenBody').empty();
        resp.children.forEach(function(c) { $tbody.append(lpRenderRow(c)); });
    });
}

// Live "Effective Ratio" update
$(document).on('input', '.lp-f[data-field="linked_conversion_qty"]', function() {
    const $row = $(this).closest('tr');
    const override = parseFloat($row.find('[data-field="linked_conversion_qty"]').val());
    const piecesFactor = override > 0 ? override : 1;
    const ratio = lpParentPpp ? (piecesFactor / lpParentPpp) : 1;
    $row.find('.lp-ratio').text(ratio.toFixed(4));
});

$(document).on('click', '.btn-linked-products', function() {
    lpCurrentParentId = $(this).data('id');
    $('#lpParentId').val(lpCurrentParentId);
    $('#lpFeedback').empty();
    lpLoadChildren(lpCurrentParentId);
    $('#linkedProductsModal').modal('show');
});

$('#lpSaveChangesBtn').on('click', function() {
    const changes = [];
    $('#lpChildrenBody tr').each(function() {
        const fields = {};
        $(this).find('.lp-f').each(function() { fields[$(this).data('field')] = $(this).val(); });
        changes.push({ id: $(this).data('id'), fields: fields });
    });
    if (!changes.length) return;

    $.ajax({
        url: '{% url "products:linked_products_bulk_save" %}',
        method: 'POST',
        contentType: 'application/json',
        headers: { 'X-CSRFToken': '{{ csrf_token }}' },
        data: JSON.stringify({ changes: changes }),
        success: function() {
            $('#lpFeedback').html('<div class="alert alert-success mt-2">Changes saved.</div>');
            lpLoadChildren(lpCurrentParentId);
        },
        error: function() {
            $('#lpFeedback').html('<div class="alert alert-danger mt-2">Save failed.</div>');
        }
    });
});

$(document).on('click', '.lp-unlink', function() {
    const linkedId = $(this).closest('tr').data('id');
    if (!confirm('Ye product unlink karna hai?')) return;
    $.ajax({
        url: '{% url "products:linked_product_unlink" %}',
        method: 'POST',
        data: { linked_id: linkedId },
        headers: { 'X-CSRFToken': '{{ csrf_token }}' },
        success: function() { lpLoadChildren(lpCurrentParentId); }
    });
});

$('#lpCreateForm').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
        url: '{% url "products:linked_product_create" %}',
        method: 'POST',
        data: $(this).serialize(),
        headers: { 'X-CSRFToken': '{{ csrf_token }}' },
        success: function(resp) {
            $('#lpFeedback').html(
                '<div class="alert alert-' + (resp.ok ? 'success' : 'danger') + ' mt-2">' + resp.message + '</div>'
            );
            if (resp.ok) { $('#lpCreateForm')[0].reset(); lpLoadChildren(lpCurrentParentId); }
        }
    });
});


function lpInitExistingSelect2() {
    $('#lpExistingProductSelect').select2({
        ajax: {
            url: '{% url "products:linked_product_search" %}',
            type: 'POST',
            headers: { 'X-CSRFToken': '{{ csrf_token }}' },
            data: params => ({ term: params.term, parent_id: lpCurrentParentId }),
            processResults: data => ({ results: data })
        },
        placeholder: 'Product search karen...',
        minimumInputLength: 1,
        dropdownParent: $('#linkedProductsModal'),
    });
}
$(function() { lpInitExistingSelect2(); });

$('#lpLinkExistingBtn').on('click', function() {
    const existingId = $('#lpExistingProductSelect').val();
    if (!existingId) return;
    $.ajax({
        url: '{% url "products:linked_product_link_existing" %}',
        method: 'POST',
        data: {
            parent_id: lpCurrentParentId,
            existing_product_id: existingId,
            linked_conversion_qty: $('#lpExistingRatioOverride').val(),
        },
        headers: { 'X-CSRFToken': '{{ csrf_token }}' },
        success: function(resp) {
            $('#lpFeedback').html(
                '<div class="alert alert-' + (resp.ok ? 'success' : 'danger') + ' mt-2">' + resp.message + '</div>'
            );
            if (resp.ok) {
                $('#lpExistingProductSelect').val(null).trigger('change');
                $('#lpExistingRatioOverride').val('');
                lpLoadChildren(lpCurrentParentId);
            }
        }
    });
});



</script>
{% endblock javascripts %}