@php $isDoneList = ($listType ?? 'pending') === 'done'; @endphp
<style>
.optical-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
}
.optical-status-icon.done {
    background: #28a745;
    color: #fff;
}
.optical-status-icon.pending {
    background: #dc3545;
    color: #fff;
}
.optical-table-scroll-wrap {
    width: 100%;
    overflow-x: auto;
}
.optical-table-scroll-wrap .dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}
.optical-table-scroll-wrap .dataTables_scrollBody {
    overflow-x: auto !important;
}
.optical-table-scroll-wrap td.dtr-control,
.optical-table-scroll-wrap th.dtr-control {
    display: none !important;
}
</style>
@if(!$isDoneList)
<form method="post" action="/{{projectUrl()}}saveWorkComplete" id="saveWorkCompleteForm">
    @csrf
@endif
<div class="optical-table-scroll-wrap">
<table id="completedOrderTable" class="table table-striped table-bordered nowrap" style="width:100%; min-width:1100px;">
    <thead>
        <tr>
            @if(!$isDoneList)
            <th>Work Completed</th>
            @else
            <th>#</th>
            @endif
            <th>Bill No</th>
            <th>Bill Date</th>
            <th>Delivery Date</th>
            <th>Patient Name</th>
            <th>Mob</th>
            <th>Bill Amount</th>
            <th>Advance</th>
            @if($isDoneList)
            <th>Paid Amount</th>
            @endif
            <th>Balance</th>
            @if($isDoneList)
            @if(empty($isDeliveryOrders))
            <th class="text-center">Make Order</th>
            <th class="text-center">Work Completed</th>
            @endif
            <th>Action</th>
            @endif
        </tr>
    </thead>
    <tbody>
        @forelse($data as $index => $result)
        @php
            $remaining = (float) ($result->NetAmount ?? 0);
            $paidTotal = (float) ($result->PaidAmount ?? 0);
            if ($paidTotal <= 0 && $isDoneList) {
                $paidTotal = max(0, (float) ($result->SubTotal ?? 0) - (float) ($result->Advance ?? 0) - $remaining);
            }
            if ($isDoneList && empty($isDeliveryOrders)) {
                $makeOrderDone = isSaleBillMakeOrderDone($result->MakeOrder ?? null);
                $workCompleteDone = isSaleBillWorkComplete($result->WorkComplete ?? null);
            }
        @endphp
        <tr>
            @if(!$isDoneList)
            <td>
                <input type="checkbox" id="wcchk{{$result->id}}" name="BillId[]" class="common_selector work-complete-check" value="{{$result->id}}">
            </td>
            @else
            <td>{{ $index + 1 }}</td>
            @endif
            <td>{{$result->BillNo}}</td>
            <td>{{date("d/m/Y", strtotime(str_replace('-', '/',$result->SaleDate)))}}</td>
            <td>{{ $result->DeliveryDate ? date("d/m/Y", strtotime(str_replace('-', '/',$result->DeliveryDate))) : '' }}</td>
            <td>{{$result->PatientName}}</td>
            <td>{{$result->MobileNo}}</td>
            <td>&#8377;{{number_format($result->SubTotal,2)}}</td>
            <td>&#8377;{{number_format($result->Advance ?? 0,2)}}</td>
            @if($isDoneList)
            <td>&#8377;{{number_format($paidTotal,2)}}</td>
            @endif
            <td>&#8377;{{number_format($remaining,2)}}</td>
            @if($isDoneList)
            @if(empty($isDeliveryOrders))
            <td class="text-center">
                @if($makeOrderDone)
                <span class="optical-status-icon done" title="Make Order Done"><i class="fas fa-check"></i></span>
                @else
                <span class="optical-status-icon pending" title="Make Order Pending"><i class="fas fa-times"></i></span>
                @endif
            </td>
            <td class="text-center">
                @if($workCompleteDone)
                <span class="optical-status-icon done" title="Work Completed"><i class="fas fa-check"></i></span>
                @else
                <span class="optical-status-icon pending" title="Work Pending"><i class="fas fa-times"></i></span>
                @endif
            </td>
            @endif
            <td>
                @if($remaining > 0)
                <button type="button" class="btn btn-primary btn-sm pay-amount-btn"
                    data-billno="{{ $result->BillNo }}">Pay Amount</button>
                @else
                —
                @endif
            </td>
            @endif
        </tr>
        @empty
        <tr>
            <td colspan="{{ $isDoneList ? (!empty($isDeliveryOrders) ? 11 : 13) : 9 }}" class="text-center text-muted py-4">
                @if($isDoneList)
                @if(!empty($isDeliveryOrders))
                No spect ready for deliver with pending balance in selected date range.
                @else
                No work completed bills in selected date range.
                @endif
                @else
                No pending work bills in selected date range.
                @endif
            </td>
        </tr>
        @endforelse
    </tbody>
</table>
</div>
@if(!$isDoneList)
<br>
<button class="btn btn-success" type="submit" name="worksubmitbtn" id="submit" style="display: none;">Complete Work</button>
</form>
@endif
<script type="text/javascript">
$(document).ready(function() {
    if ($.fn.DataTable.isDataTable('#completedOrderTable')) {
        $('#completedOrderTable').DataTable().destroy();
    }

    $('#completedOrderTable').DataTable({
        responsive: false,
        scrollX: true,
        autoWidth: false,
        dom: 'Bfrtip',
        pageLength: 200,
        order: [
            [{{ $isDoneList ? 2 : 1 }}, "desc"]
        ],
        buttons: [{
            extend: 'excelHtml5',
            title: '{{ $isDoneList ? "Work Completed" : "Pending Work Completed" }}',
            text: 'Export to Excel',
            exportOptions: {
                columns: ':not(:last-child)'
            }
        }]
    });

    @if(!$isDoneList)
    function get_filter(class_name) {
        var filter = [];
        $('.' + class_name + ':checked').each(function() {
            filter.push($(this).val());
        });
        return filter;
    }

    $('.work-complete-check').click(function() {
        var selected = get_filter('work-complete-check');
        if (selected == '') {
            $('#submit').hide();
        } else {
            $('#submit').show();
        }
    });

    $(document).on('submit', '#saveWorkCompleteForm', function() {
        $(this).find('input[name="FromDate"], input[name="ToDate"]').remove();
        $('<input>').attr({ type: 'hidden', name: 'FromDate', value: $('#FromDate').val() }).appendTo(this);
        $('<input>').attr({ type: 'hidden', name: 'ToDate', value: $('#ToDate').val() }).appendTo(this);
    });
    @else
    $(document).off('click', '.pay-amount-btn').on('click', '.pay-amount-btn', function() {
        var billNo = $(this).data('billno');
        if (typeof openOpticalReceiptForBill === 'function') {
            openOpticalReceiptForBill(billNo);
        } else {
            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'
            );
        }
    });
    @endif
});
</script>