@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 class="card-tools">
                                <button class="btn btn-sm bg-white">Search</button>
                            </div>
                        </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">
                                                <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">
                                                <option value="">Select Company</option>
                                                @foreach ($companies as $company)
                                                    <option value="{{ $company->company }}">{{ $company->company }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg col-md-6">
                                        <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">
                                                <option value="">Select Status</option>
                                                <option value="pending">Pending</option>
                                                <option value="credit">Credit</option>
                                                <option value="paid">Paid</option>
                                            </select>
                                        </div>
                                    </div>
                                    <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">
                                                <option value="">Select Status</option>
                                                <option value="draft">Draft</option>
                                                <option value="performa">Performa</option>
                                                <option value="invoiced">Invoiced</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 text-right mt-3">
                                        <button type="button" class="btn btn-primary btn-sm" id="refreshBtn">
                                            <i class="bi bi-arrow-clockwise"></i> Refresh
                                        </button>
                                        <button type="submit" class="btn btn-success btn-sm" id="searchBtn">
                                            <i class="bi bi-search"></i> Search
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--end col-->
            </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>
                        <div class="card-body">
                            <div class="tableContent">
                                <table class="table table-striped datatable  table-sm">
                                    <thead>
                                        <tr>
                                            <th style="width: 10%;">{{ __('Date') }}</th>
                                            <th style="width: 15%;">{{ __('User') }}</th>
                                            <th style="width: 20%;">{{ __('Company') }}</th>
                                            <th style="width: 20%;">{{ __('INV Name') }}</th>
                                            <th style="width: 5%;">{{ __('Total') }}</th>
                                            <th style="width: 5%;">{{ __('Delivery') }}</th>
                                            <th style="width: 5%;">{{ __('Invoice') }}</th>
                                            <th style="width: 5%;">{{ __('Payment') }}</th>
                                            <th style="width: 15%;">{{ __('Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tbody">
                                        @include('admin.today-dashboard.partial.invoice-list', [
                                            'invoices' => $invoices,
                                        ])
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="loader text-center" id="loader" style="display: none">
                            <div class="spinner-border" role="status">
                                <span class="visually-hidden"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

@endsection
@section('js')
    <script>
        $(document).ready(function() {
            const tbody = $('#tbody');
            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');
            const searchBtn = $('#searchBtn');
            const loader = $('#loader');
            const tableContent = $('.datatable');
            const refreshBtn = $('#refreshBtn');

            function fetchOrders(data, isRefresh = false) {
                loader.show();
                tbody.hide();
                searchBtn.attr("disabled", true);
                refreshBtn.attr("disabled", true);
                $.ajax({
                    url: "{{ route('admin.today.dashboard.invoice.search') }}",
                    type: "POST",
                    data: data,
                    success: function(response) {

                        tbody.html(response.html);
                        if (response.html.includes(
                                '<td colspan="8" class="text-center">No invoices found.</td>')) {

                        } else {

                            tableContent.dataTable();
                        }
                        if (isRefresh) {
                            clearFilters();
                            history.replaceState({}, document.title, location
                                .pathname);
                        }
                        loader.hide();
                        tbody.show();
                        searchBtn.attr("disabled", false);
                        refreshBtn.attr("disabled", false);
                    },
                    error: function(err) {
                        console.error(err);
                        loader.hide();
                        tbody.show();
                        searchBtn.attr("disabled", false);
                        refreshBtn.attr("disabled", false);
                    }
                });
            }

            function clearFilters() {
                userId.val('');
                startDate.val('');
                endDate.val('');
                companyName.val('');
                paymentStatus.val('');
                invoiceStatus.val('');
                invoiceName.val('');

            }
            searchBtn.on("click", function(e) {
                e.preventDefault();
                tableContent.dataTable().fnDestroy();
                fetchOrders({
                    _token: "{{ csrf_token() }}",
                    user_id: userId.val(),
                    company_name: companyName.val(),
                    payment_status: paymentStatus.val(),
                    invoice_status: invoiceStatus.val(),
                    start_date: startDate.val(),
                    end_date: endDate.val(),
                    invoice_name: invoiceName.val(),
                    order_status: orderStatus.val() // ✅ Fixed comma issue
                });
            });
            refreshBtn.on("click", function() {
                fetchOrders({
                    _token: "{{ csrf_token() }}",
                    user_id: '',
                    company_name: '',
                    payment_status: '',
                    invoice_status: '',
                    start_date: '',
                    end_date: '',
                    invoice_name: '',
                    order_status: orderStatus.val()

                }, true);
            });
        });
    </script>
@endsection