{% load static %}
{% include 'includes/header.html' %}
{% include 'includes/store_sidebar.html' %}
{% include 'includes/navbar.html' %}

<style>
    #datatable {
        border-collapse: collapse;
        width: 100%;
    }

    #datatable th,
    #datatable td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
        vertical-align: middle;
    }

    #datatable thead th {
        background-color: #f9faf8;
        font-weight: bold;
    }

    .bg-stock-available {
        background-color: #d1f7d6 !important;
        /* Light green */
    }

    #datatable tfoot {
        background-color: #f3f4f6 !important;
        font-weight: 600;
        border-top: 2px solid #d1d5db;
    }

    #datatable tfoot th {
        padding: 8px 10px;
    }

    .search-info {
        background-color: #e3f2fd;
        border-left: 4px solid #2196F3;
        padding: 12px 16px;
        margin-bottom: 16px;
        border-radius: 4px;
    }

    .search-info i {
        color: #2196F3;
        margin-right: 8px;
    }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <h4 class="mb-0 me-3">Stock Finder Report</h4>
        </div>

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="/store/dashboard" class="d-flex align-items-center text-decoration-none">
                        <i class="ti tabler-home me-1"></i>
                    </a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Stock Finder</li>
            </ol>
        </nav>
    </div>

    <div class="card mt-3">
        <div class="card-header border-bottom">


            <div class="row mt-2">
                <div class="col-10">
                    <div class="row">
                        {% if request.session.is_ho == 1 %}
                        <div class="col-3 mb-4">
                            <label class="form-label">Branch</label>
                            <select class="select2 form-control" id="filter_branch" name="branch_id">
                                <option value="">All Branches</option>
                                {% for b in branch %}
                                <option value="{{ b.id }}">{{ b.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        {% endif %}



                        <div class="col-3 mb-4">
                            <label for="filter_model_keyword" class="form-label">Model (Keyword Search) <span
                                    class="text-danger">*</span></label>

                            <!-- <input  type="text" id="ean_number"  class="form-control typeahead" name="ean_number" autocomplete="off" onkeydown="handleEanKeydown(event)"  style="background-color: #fffacd;" /> -->
                            
                            <input type="text"  id="filter_model_keyword"  class="form-control typeahead" name="model_keyword"
                                placeholder="Enter keyword (e.g., 5G, Pro, Max)" autocomplete="off">
                        </div>



                        <div class="col-2 text-center mt-6">
                            <button type="button" class="btn btn-primary" onclick="search_stock()">
                                <i class="fas fa-search"></i>&nbsp; Search
                            </button>

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

                <div class="col-2 text-end">
                    <h5 class="mb-1 text-muted">Total Stock Found</h5>
                    <h4 id="total_stock_count" class="fw-bold text-success">
                        0
                    </h4>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table" id="datatable">
                    <thead>
                        {% csrf_token %}
                        <tr>
                            <th>ID</th>
                            <th>Branch Name</th>
                            <th>Subcategory Name</th>
                            <th>Brand Name</th>
                            <th>Model Name</th>
                            <th>Variant Name</th>
                            <th>Color Name</th>
                            <th>Available Stock</th>
                            <th>FSP (₹)</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th colspan="7" class="text-end">Total:</th>
                            <th id="footer_total_stock">0</th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

{% include 'includes/footer.html' %}
{% include 'includes/common_js.html' %}
{% include 'includes/load_dropdown.html' %}

<script>
    var table;

    $(document).ready(function () {
        loadTypeahead('#filter_model_keyword', { 'ean': 'ean', 'item_id': 'id' }, '/load_model_name/');     
      
        initializeDataTable();

        // Prevent default enter key behavior for the model input to keep focus
        $('#filter_model_keyword').on('keydown', function (event) {
            if (event.key === "Enter" || event.keyCode === 13) {
                event.preventDefault(); // Stop form submission or generic focus move
                event.stopPropagation(); // Stop bubbling to document level handlers
                search_stock(); // Call our search
                // Explicitly keep focus (though preventDefault usually is enough, let's be safe)
                $(this).focus();
                return false;
            }
        });
    });

    function initializeDataTable() {
        table = $('#datatable').DataTable({
            processing: true,
            pageLength: 50,
            destroy: true,
            order: [[7, 'desc']], // Sort by Available Stock descending
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6 d-flex justify-content-center justify-content-md-end"f>>t<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            data: [], // Start with empty data
            columns: [
                { data: "id", title: "ID" },
                { data: "branch_name", title: "Branch Name" },
                { data: "subcategory_name", title: "Subcategory" },
                { data: "brand_name", title: "Brand" },
                { data: "model_name", title: "Model" },
                { data: "variant_name", title: "Variant" },
                { data: "color_name", title: "Color" },
                { data: "available_stock", title: "Available", className: "text-end fw-bold" },
                { data: "fsp", title: "FSP (₹)", className: "text-end" }
            ],
            rowCallback: function (row, data) {
                // Background color logic removed as per request
            },
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();

                // Calculate total stock
                var totalStock = api
                    .column(7, { page: 'current' }) // Column index 7 is Available Stock
                    .data()
                    .reduce(function (a, b) {
                        return parseInt(a) + parseInt(b);
                    }, 0);

                // Update footer
                $('#footer_total_stock').html(totalStock);
                $('#total_stock_count').text(totalStock);
            }
        });
    }

    function search_stock() {
        var modelKeyword = $('#filter_model_keyword').val().trim();

        if (!modelKeyword) {
            // Requirement 3: else make table as empty
            if (table) {
                table.clear().draw();
                $('#total_stock_count').text('0');
                $('#footer_total_stock').html('0');
            }
            return;
        }

        // Show loading state if desired, or just wait
        console.log('🔍 Searching for model keyword:', modelKeyword);

        $.ajax({
            url: '/stock_finder_view_ajax/', // Updated URL to match likely urls.py entry
            type: 'POST',
            data: {
                csrfmiddlewaretoken: getCSRFToken(),
                model_keyword: modelKeyword,
                branch_id: $('#filter_branch').val() || ''
            },
            beforeSend: function () {
                // Optional: Show loading indicator
            },
            success: function (response) {
                console.log('✅ Response received:', response);

                if (!response.status) {
                    console.log('check response', response.message)
                    if (table) {
                        table.clear().draw();
                        $('#total_stock_count').text('0');
                        $('#footer_total_stock').html('0');
                    }
                    if (response.message) {
                        showSweetAlert('warning', response.message);
                    }
                    return;
                }

                // Update table with new data
                if (table) {
                    table.clear();
                    if (response.data && response.data.length > 0) {
                        table.rows.add(response.data);
                    }
                    table.draw();
                }
            },
            error: function (xhr, status, error) {
                console.error('❌ Error:', error);
                showSweetAlert('error', 'An error occurred while fetching stock data');
            }
        });
    }

    // Helper to get CSRF token
    function getCSRFToken() {
        let cookieValue = null;
        const name = 'csrftoken';
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.startsWith(name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
</script>