@extends('admin.layouts.master')
@section('title', $page_title)

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card card-info mt-2" id="orderListFilter">
                        <div class="card-header">
                            Filter Orders
                        </div>
                        <div class="card-body border-bottom-dashed border-bottom">
                            <form id="searchForm">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="user_id" class="form-label">User Name</label>
                                            <select class="form-control select2" name="user_id" id="user_id" multiple>
                                                <option value="">Select User</option>
                                                @foreach ($users as $user)
                                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <input type="hidden" name="order_status" id="order_status" value="{{ $data }}">
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="company_name" class="form-label">Company Name</label>
                                            <select class="form-control select2" name="company_name" id="company_name" multiple>
                                                <option value="">Select Company</option>
                                                @foreach ($companies as $company)
                                                    <option value="{{ $company->company }}">{{ $company->company }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="due_date">Search By Due Date</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control form-control-sm date-input" placeholder="From Date" onfocus="(this.type='date')" onblur="(this.type='text')" value="{{ old('due_date_start') }}" id="due_date_start" name="due_date_start">
                                                <div class="input-group-text form-control-sm">to</div>
                                                <input type="text" class="form-control form-control-sm date-input" placeholder="To Date" onfocus="(this.type='date')" onblur="(this.type='text')" value="{{ old('paid_date_end') }}" id="paid_date_end" name="paid_date_end">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="approval" class="form-label">Invoice Name</label>
                                            <input type="text" name="invoice_name" class="form-control" id="invoice_name">
                                        </div>
                                    </div>

                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label for="payment" class="form-label">Payment Status</label>
                                            <select class="form-control select2" name="payment" id="payment" multiple>
                                                <option value="">Select Status</option>
                                                <option value="pending">Pending</option>
                                                <option value="credit">Credit</option>
                                                <option value="paid">Paid</option>
                                            </select>
                                        </div>
                                    </div>
                                    @if(empty($data))
                                        <div class="col-lg-3">
                                            <div class="form-group">
                                                <label for="invoice_status" class="form-label">Invoice Status</label>
                                                <select class="form-control select2" name="invoice_status" id="invoice_status" multiple>
                                                    <option value="">Select Status</option>
                                                    <option value="draft">Draft</option>
                                                    <option value="performa">Performa</option>
                                                    <option value="invoiced">Invoiced</option>
                                                </select>
                                            </div>
                                        </div>
                                    @endif
                                    
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="mt-2 card card-outline card-primary">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Invoices List</h5>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="maximize">
                                    <i class="fas fa-expand"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-sm" id="invoices-table">
                                    <thead>
                                        <tr>
                                            <th style="width: 25%;">{{ __('User') }}</th>
                                            <th style="width: 10%;">{{ __('Company') }}</th>
                                            <th style="width: 10%;">{{ __('INV Name') }}</th>
                                            <th style="width: 10%;">{{ __('INV No') }}</th>
                                            <th style="width: 10%;">{{ __('Total') }}</th>
                                            <th style="width: 10%;">{{ __('Delivery') }}</th>
                                            <th style="width: 10%;">{{ __('Invoice') }}</th>
                                            <th style="width: 10%;">{{ __('Payment') }}</th>
                                            <th style="width: 15%;">{{ __('Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- Data will be loaded via AJAX -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
   
@endsection

@section('js')
  
    <script>
        $(document).ready(function () {
          

            const userId = $('#user_id');
            const orderStatus = $('#order_status');
            const invoiceName = $('#invoice_name');
            const startDate = $('#due_date_start');
            const endDate = $('#paid_date_end');
            const companyName = $('#company_name');
            const paymentStatus = $('#payment');
            const invoiceStatus = $('#invoice_status');

            // Initialize DataTable with all search functionality
            var table = $('#invoices-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.invoice.all') }}",
                    type: "GET",
                    data: function (d) {
                        d.user_id = userId.val();
                        d.company_name = companyName.val();
                        d.payment = paymentStatus.val();
                        d.invoice_status = invoiceStatus.val();
                        d.due_date_start = startDate.val();
                        d.paid_date_end = endDate.val();
                        d.invoice_name = invoiceName.val();
                        d.order_status = orderStatus.val();
                    }
                },
                columns: [


                    { data: 'user_name', name: 'order.user.first_name' },
                    { data: 'company', name: 'order.user.company' },
                    { data: 'invoice_name', name: 'invoice_name' },
                    { data: 'invoice_no', name: 'invoice_no' },
                    { data: 'grand_total', name: 'order.grand_total' },
                    { data: 'delivery_status', name: 'order.delivery_status' },
                    { data: 'invoice_status', name: 'order.invoice_status' },
                    { data: 'payment_status', name: 'order.payment_status' },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],
                dom: '<"top"Bf>rt<"bottom"lip><"clear">',
                buttons: [
                    {
                        extend: 'excelHtml5',
                        text: '<i class="fas fa-file-excel"></i> Export to Excel',
                        title: 'Invoices Export',
                        className: 'btn btn-success btn-sm',
                        exportOptions: {
                            columns: [0, 1, 2, 3, 4, 5, 6, 7]
                        },
                        action: function (e, dt, node, config) {
                            var filters = {
                                user_id: $('#user_id').val(),
                                company_name: $('#company_name').val(),
                                payment: $('#payment').val(),
                                invoice_status: $('#invoice_status').val(),
                                order_status: $('#order_status').val(),
                                invoice_name: $('#invoice_name').val(),
                                due_date_start: $('#due_date_start').val(),
                                paid_date_end: $('#paid_date_end').val(),
                                _token: '{{ csrf_token() }}'
                            };

                            $('<form>', {
                                method: 'post',
                                action: '{{ route("admin.invoice.export") }}',
                                html: $.map(filters, function (value, key) {
                                    if (Array.isArray(value)) {
                                        return value.map(function (v) {
                                            return $('<input>', {
                                                type: 'hidden',
                                                name: key + '[]',
                                                value: v
                                            });
                                        });
                                    }
                                    return $('<input>', {
                                        type: 'hidden',
                                        name: key,
                                        value: value
                                    });
                                })
                            }).appendTo('body').submit().remove();
                        }
                    }
                ],
                order: [[3, 'desc']],
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                language: {
                    processing: '<div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div>',
                    search: "_INPUT_",
                    searchPlaceholder: "Search...",
                },
                responsive: true,
                drawCallback: function (settings) {
                    $('[data-toggle="tooltip"]').tooltip();
                }
            });

            // Auto-search when any filter changes
            $('#user_id, #company_name, #payment, #invoice_status, #invoice_name').on('change', function () {
                table.draw();
            });

            // Auto-search for date inputs and text input
            $('#due_date_start, #paid_date_end, #invoice_name').on('input change', function () {
                table.draw();
            });

            // Reset filters
            $('#resetFilters').on('click', function () {
                $('#searchForm')[0].reset();
                $('.select2').val(null).trigger('change');
                table.search('').draw();
            });
        });
    </script>
@endsection