@extends('layouts.master')

@section('title','Rangkuman '. __('Sales Invoice'))

@section('css')
    <style>
        .clickable-row {
            cursor: pointer;
        }

        .clickable-row:hover,
        .clickable-row:focus {
            background-color: #f1f1f1;
        }

        .btn-insert {
            margin-bottom: 20px;
        }

        .btn-print,
        .btn-edit {
            margin-right: 10px;
        }

        .date-filter {
            margin-bottom: 20px;
        }

        /* Align the total amount row to the right */
        .total-amount-row td {
            font-weight: bold;
            text-align: right;
            background-color: #f8f9fa;
        }

        /* Style for filter inputs */
        .filter-row input {
            width: 100%;
            box-sizing: border-box;
        }
    </style>
@endsection

@section('content')
    <x-page-title title="{{__('Sales Invoice')}}" pagetitle="Rangkuman {{__('Sales Invoice')}}" />
    <hr>

    <!-- Date Filter Form -->
    <div class="mb-3 card">
        <div class="card-body">
            <form method="GET" action="{{ route('transaction.sales_invoice.summary_detail2') }}">
                <div class="row">
                    <div class="col-md-3">
                        <label for="search-customer">{{__('Search Customer')}}</label>
                        <div class="form-group">
                            <input type="text" id="search-customer" class="form-control" placeholder="Search by Customer Code, Name, or Address" value="{{request()->customer_id?\App\Models\Customer::where('id',request()->customer_id)->first()->customer_name:''}}" autocomplete="off">
                            <input type="hidden" id="customer-code" name="customer_id" value={{request()->customer_id}}>
                            <div id="customer-search-results" class="list-group" style="display:none; position:absolute; z-index:1000; width:100%; max-width:380px; max-height:300px; overflow:scroll;">
                                <!-- Search results will be injected here -->
                            </div>
                        </div>
                    </div>
                    <div class="col-auto d-flex align-items-end">
                        <button type="submit" class="btn btn-primary">Filter</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <h6 class="mb-2 text-uppercase">Rangkuman {{__('Sales Invoice')}}</h6>
            <div class="table-responsive">
                <table id="example" class="table table-hover table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Barang</th>
                            <th>Harga</th>
                            <th>{{__('Document Date')}}</th>
                        </tr>
                        <tr class="filter-row">
                            <th></th> <!-- Empty for No -->
                            <th><input type="text" class="form-control" placeholder="Filter Barang" data-sort="false"></th>
                            <th><input type="text" class="form-control" placeholder="Filter Harga" data-sort="false"></th>
                            <th><input type="text" class="form-control" placeholder="Filter Tanggal" data-sort="false"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                            $rowNumber = 0; // Initialize counter outside both loops
                        @endphp
                        @foreach ($salesInvoices as $invoice)
                        @php
                            $rowNumber++; // Increment for each detail row
                        @endphp
                        <tr class="clickable-row">
                            <td>{{$rowNumber}}</td>
                            <td>{{ $invoice->item_name }}</td>
                            <td>{{number_format(($invoice->price),0)}}</td>
                            <td>{{ \Carbon\Carbon::parse($invoice->document_date)->format('d M Y') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    @if (session('success'))
        <script>
            Swal.fire({
                title: 'Success!',
                text: "{{ session('success') }}",
                icon: 'success',
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            Swal.fire({
                title: 'Error!',
                text: "{{ session('error') }}",
                icon: 'error',
                confirmButtonText: 'OK'
            });
        </script>
    @endif
@endsection

@section('scripts')
    <script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        const customers = @json($customers);
        document.getElementById('search-customer').focus();
        // Customer autocomplete
        document.getElementById('search-customer').addEventListener('input', function () {
            activeIndexCust = -1; // Reset active index on new input
            let query = this.value.toLowerCase();
            let resultsContainer = document.getElementById('customer-search-results');
            resultsContainer.innerHTML = '';
            resultsContainer.style.display = 'none';

            if (query.length > 0) {
                let filteredCustomers = customers.filter(c =>
                    c.customer_code.toLowerCase().includes(query) ||
                    c.customer_name.toLowerCase().includes(query) ||
                    c.address.toLowerCase().includes(query)
                );

                if (filteredCustomers.length > 0) {
                    resultsContainer.style.display = 'block';
                    filteredCustomers.forEach((customer, index) => {
                        let listItem = document.createElement('a');
                        listItem.className = 'list-group-item list-group-item-action';
                        listItem.href = '#';
                        listItem.dataset.index = index;
                        listItem.innerHTML = `
                            <strong>${customer.customer_code}</strong> -
                            ${customer.customer_name} <br>
                            <small>${customer.address} - ${customer.city}</small>`;
                        listItem.addEventListener('click', function (e) {
                            e.preventDefault();
                            selectCustomer(customer);
                        });
                        resultsContainer.appendChild(listItem);
                    });
                }
            }

            // Keydown event listener for navigation
            this.addEventListener('keydown', function(e) {
                const items = resultsContainer.querySelectorAll('.list-group-item');
                if (items.length === 0) return;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    if (activeIndexCust < items.length - 1) {
                        activeIndexCust++;
                        updateActiveCustomer(items);
                    }
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    if (activeIndexCust > -1) { // Allow going back to no selection
                        activeIndexCust--;
                        updateActiveCustomer(items);
                    }
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (activeIndexCust >= 0 && items[activeIndexCust]) {
                        items[activeIndexCust].click();
                    }
                }
            });
        });

        // Helper function to update active customer
        function updateActiveCustomer(items) {
            items.forEach((item, index) => {
                item.classList.toggle('active', index === activeIndexCust);
            });
            if (activeIndexCust >= 0 && items[activeIndexCust]) {
                items[activeIndexCust].scrollIntoView({ block: 'nearest' });
            }
        }

        function selectCustomer(customer) {
            document.getElementById('customer-code').value = customer.id;
            document.getElementById('search-customer').value = `${customer.customer_name}`;
            document.getElementById('customer-search-results').style.display = 'none';
        }

        document.addEventListener('click', function (e) {
            if (!e.target.closest('#search-customer') && !e.target.closest('#customer-search-results')) {
                document.getElementById('customer-search-results').style.display = 'none';
            }
        });

        $(document).ready(function() {
            // Debugging logs to verify library loading
            console.log('jQuery loaded:', typeof jQuery);
            console.log('DataTables loaded:', typeof $.fn.DataTable);
            console.log('Table element:', $('#example').length);

            // Ensure CSRF token for AJAX
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize DataTable
            console.log('Attempting to initialize DataTable');
            var table = null;
            try {
                table = $('#example').DataTable({
                    lengthChange: false,
                    orderCellsTop: true,
                        buttons: ['copy', 'excel', 'pdf', 'print'],
                });
                table.buttons().container()
                    .appendTo('#example_wrapper .col-md-6:eq(0)');
                console.log('DataTable initialized:', table);

                // Prevent sorting when clicking filter inputs
                $('#example thead tr.filter-row input[data-sort="false"]').on('click', function(e) {
                    e.stopPropagation();
                });

                // Add filtering functionality to input fields
                $('#example thead tr.filter-row input').on('keyup change', function() {
                    var columnIndex = $(this).parent().index();
                    table.column(columnIndex).search(this.value).draw();
                });

                // Restore filter inputs if page is reloaded with search params
                $('#example thead tr.filter-row input').each(function() {
                    var columnIndex = $(this).parent().index();
                    $(this).val(table.column(columnIndex).search());
                });
            } catch (e) {
                console.error('DataTable initialization failed:', e);
            }
        });
    </script>
@endsection