@extends('layouts.app')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    <div class="left-card">
                        <div class="card border-top border-0 border-4 border-primary" style="background-color:transparent;">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <span>Quantity Transaction History</span>
                                <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">Back</a>
                            </div>
                            <div class="card-body">
                                <div class="row mb-3">
                                    @if (usertype() == 'admin')
                                        <div class="col-md-2">
                                            <select id="hist_branch_id" class="form-control custom-form">
                                                <option value="">All Branches</option>
                                                @foreach (branches() as $branch)
                                                    <option value="{{ $branch->id }}">{{ $branch->branch_name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @else
                                        <input type="hidden" id="hist_branch_id" value="{{ branch_id() }}">
                                    @endif

                                    <div class="col-md-4">
                                        <input type="text" id="hist_product_search" class="form-control custom-form"
                                            placeholder="Type product name or code">
                                        <div id="hist_product_suggestions" class="dropdown-menu" style="display:none;">
                                        </div>
                                        <input type="hidden" id="hist_product_id">
                                    </div>

                                    <div class="col-md-2">
                                        <input type="date" id="date_from" class="form-control custom-form"
                                            placeholder="From" value="{{ date('Y-m-d') }}">
                                    </div>
                                    <div class="col-md-2">
                                        <input type="date" id="date_to" class="form-control custom-form"
                                            placeholder="To" value="{{ date('Y-m-d') }}">
                                    </div>

                                    <div class="col-md-2">
                                        <button id="btnFilter" class="btn btn-primary" style="width:100%;">Filter</button>
                                    </div>
                                </div>

                                <div class="table-fixed-head">
                                    <table class="table table-striped product-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">Sl</th>
                                                <th class="text-center">Date</th>
                                                <th class="text-center">Branch</th>
                                                <th class="text-center">Code</th>
                                                <th class="text-center">Product</th>
                                                <th class="text-center">Type</th>
                                                <th class="text-center">Δ Qty</th>
                                                <th class="text-center">Before</th>
                                                <th class="text-center">After</th>
                                                <th class="text-center">User</th>
                                                <th class="text-center">Purchase</th>
                                                <th class="text-center">Sale</th>
                                                <th class="text-center">Note</th>
                                            </tr>
                                        </thead>
                                        <tbody id="history-data">
                                            <tr>
                                                <td colspan="13" class="text-center">Use the filters above and click
                                                    Filter.</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(function() {

            // Product search (re-uses your product.search route)
            $("#hist_product_search").on("input", function() {
                let inputWidth = $(this).outerWidth();
                $('#hist_product_suggestions').css('width', inputWidth);
                const branch_id = $("#hist_branch_id").val();
                const query = $(this).val();
                if (query.length >= 2) {
                    $.ajax({
                        url: "{{ route('product.search') }}",
                        type: 'GET',
                        data: {
                            query,
                            branch_id
                        },
                        success: function(data) {
                            let suggestions = '';
                            data.forEach(product => {
                                suggestions += `
              <a href="#" class="dropdown-item"
                 data-id="${product.id}"
                 data-name="${product.name}"
                 data-code="${product.product_code}">
                 ${product.name} - ${product.product_code}
              </a>`;
                            });
                            $("#hist_product_suggestions").html(suggestions).show();
                        }
                    });
                } else {
                    $("#hist_product_suggestions").hide();
                }
            });

            $("#hist_product_suggestions").on("click", ".dropdown-item", function(e) {
                e.preventDefault();
                $("#hist_product_id").val($(this).data("id"));
                $("#hist_product_search").val($(this).data("name") + " - " + $(this).data("code"));
                $("#hist_product_suggestions").hide();
            });

            // Load history
            function loadHistory() {
                const params = {
                    product_id: $("#hist_product_id").val(),
                    branch_id: $("#hist_branch_id").val(),
                    date_from: $("#date_from").val(),
                    date_to: $("#date_to").val()
                };

                $('#history-data').html(`<tr><td colspan="13" class="text-center">Loading...</td></tr>`);

                $.ajax({
                    url: "{{ route('product.quantityHistoryData') }}",
                    type: "GET",
                    data: params,
                    success: function(res) {
                        $('#history-data').html(res.html ||
                            `<tr><td colspan="13" class="text-center">No data.</td></tr>`);
                    },
                    error: function() {
                        $('#history-data').html(
                            `<tr><td colspan="13" class="text-center text-danger">Failed to load data.</td></tr>`
                        );
                    }
                });
            }

            $("#btnFilter").on("click", loadHistory);

        });
    </script>
@endpush