@include('header')
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Sale Report</h4>

    <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="{{ date('Y-m-d') }}"
                            autocomplete="off" required>
                    </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="{{ date('Y-m-d') }}"
                            autocomplete="off" required>
                    </div>
                    <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" id="custresult"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('footerscript')
@include('excelscript')
<script>
    $(document).ready(function() {
        function initSaleReportTable() {
            if ($.fn.DataTable.isDataTable('#saleReportTable')) {
                $('#saleReportTable').DataTable().destroy();
            }
            $('#saleReportTable').DataTable({
                scrollX: true,
                dom: 'Bfrtip',
                pageLength: 100,
                order: [[0, 'desc']],
                buttons: ['excelHtml5']
            });
        }

        function queueList(FromDate, ToDate) {
            $.ajax({
                url: "{{ url('viewOpticalSaleReportTable') }}",
                method: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    FromDate: FromDate,
                    ToDate: ToDate
                },
                success: function(data) {
                    $('#custresult').html(data);
                    initSaleReportTable();
                }
            });
        }

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

        var initFrom = $('#FromDate').val();
        var initTo = $('#ToDate').val();
        if (initFrom !== '' && initTo !== '') {
            queueList(initFrom, initTo);
        }
    });
</script>