@include('header')
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">{{ $pageTitle ?? (($listType ?? 'pending') === 'done' ? 'Work Completed' : 'Pending Work Completed') }}</h4>
    @if(empty($pageTitle))
    <p class="text-muted mb-3">{{ ($listType ?? 'pending') === 'done' ? 'Work marked complete on sale bills.' : 'Make order done · mark work completed using checkbox below.' }}</p>
    @else
    <p class="text-muted mb-3">Work completed orders from {{ date('d M Y', strtotime($fromDate ?? opticalDashboardFromDate())) }} to {{ date('d M Y', strtotime($toDate ?? date('Y-m-d'))) }}.</p>
    @endif
    <div class="card mb-4">
        <div class="card-body">
            <div id="alert_message"></div>
            <form id="validation-form" method="post" enctype="multipart/form-data">
                <div class="form-row">
                    <div class="form-group col-md-3">
                        <label class="form-label">From Date </label>
                        <input type="date" name="FromDate" id="FromDate" class="form-control" value="{{ $fromDate ?? opticalDashboardFromDate() }}"
                            autocomplete="off">
                    </div>
                    <div class="form-group col-md-3">
                        <label class="form-label">To Date</label>
                        <input type="date" name="ToDate" id="ToDate" class="form-control" value="{{ $toDate ?? date('Y-m-d') }}"
                            autocomplete="off">
                    </div>
                    <input type="hidden" name="Search" value="Search">
                    <div class="form-group col-md-2" style="padding-top:20px;">
                    <button type="button" id="filter" class="btn btn-primary btn-finish">Search</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
    <style>
    table,
    td,
    th {
        border: 1px solid #ddd;
        text-align: left;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        padding: 15px;
    }
    </style>

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                <div class="table-responsive optical-table-scroll-wrap" id="custresult">

                        
                </div>
                </div>

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



</div>

@include('footerscript')
@include('excelscript')
<script>
    function openOpticalReceiptForBill(billNo) {
        window.open(
            '/{{ projectUrl() }}opticalReceipt?BillNo=' + encodeURIComponent(billNo),
            'opticalReceipt',
            'height=600,width=1300,left=20,top=40,right=40,bottom=40,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no'
        );
    }

    $(document).ready(function() {
        function queueList(FromDate = '', ToDate = '') {
            $.ajax({
                url: "{{ url('viewCompletedOrder') }}",
                method: "POST",
                data: {
                    _token: '{{csrf_token()}}',
                    FromDate: FromDate,
                    ToDate: ToDate,
                    listType: '{{ $listType ?? 'pending' }}',
                    deliveryOrders: {{ !empty($pageTitle) && $pageTitle === 'Spect Ready For Deliver' ? '1' : '0' }}
                },
                success: function(data) {
                    $('#custresult').html(data);
                }
            });
        }

        $('#filter').click(function() {
            var FromDate = $('#FromDate').val();
            var ToDate = $('#ToDate').val();
            if (FromDate != '' && ToDate != '') {
                queueList(FromDate, ToDate);
            } else {
                alert('Both Date is required');
            }
        });

        var initFrom = $('#FromDate').val();
        var initTo = $('#ToDate').val();
        (function applyOpticalQueryDates() {
            var params = new URLSearchParams(window.location.search);
            var from = params.get('FromDate') || params.get('fromdate');
            var to = params.get('ToDate') || params.get('todate');
            if (from) {
                initFrom = from;
                $('#FromDate').val(from);
            }
            if (to) {
                initTo = to;
                $('#ToDate').val(to);
            }
        })();
        if (initFrom !== '' && initTo !== '') {
            queueList(initFrom, initTo);
        }
    });
    </script>