@extends('layouts.app')

@section('content')

<div class='container'>
@include('admin.adminheader')
<div class="page-title-box">
                <div class="row align-items-center">
                    <div class="col-sm-6">
                        <h4 class="page-title">Orders</h4>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-right">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Admin</a></li>
                            <li class="breadcrumb-item active">Orders</li>
                        </ol>
                    </div>
                </div>
                <!-- end row -->
            </div>

        <div class="row d-flex justify-content-end mb-3">
            <div class="col-md-12 d-flex justify-content-center align-items-end order-filter-col" style='column-gap:3px;'>
                <div class='d-inline-block'>
                    <label>Start Date</label>
                    <input type="date" id="start-date" class="form-control" style="width: auto;" placeholder="Start Date" />
                </div>   
                <div class='d-inline-block'>
                    <label>End Date</label>    
                    <input type="date" id="end-date" class="form-control" style="width: auto;" placeholder="End Date" />
                </div>
                <div class="d-inline-block">
                <button id="filter-by-date" class="btn btn-secondary btn-sm d-inline-block">Search</button>
                        <button id="all-orders" class="btn btn-primary btn-sm d-inline-block">All Orders</button>
                </div>
            </div>
        </div>

        <div class='row d-flex justify-content-center mb-5'>
            <div class='col-md-12'>
            <table id="example" class="table table-striped data-table" style="width:100%">
        <thead>
            <tr class='dt-row'>
                <th>ID</th>
                <th>Business Name</th>
                <th>Business Email</th>
                <th>Package</th>
                <th>Order#</th>
                <th>Invoice#</th>
                <th>Payment Method</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
            </div>
        </div>
    </div>

    <script type="text/javascript">
  $(function () {
      
    //     $('#filter-date').on('click', function() {
    //     var today = new Date().toISOString().split('T')[0];
    //     $(this).data('filter-date', today);
    //     console.log('Data Attribute:', $(this).data('filter-date')); // Check if the attribute is set correctly
    //     table.draw();
    // });

    // $('#all-orders').click(function() {
    //     $('#filter-date').val(''); // Clear the date filter
    //     table.ajax.reload();
    // });

    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
        url: '{{ route("orderslist") }}',
        data: function(d) {
                d.start_date = $('#start-date').val();
                d.end_date = $('#end-date').val();
            }
        },
        columns: [
            {data: 'orderid'},
            {data: 'bname'},
            {data: 'bemail'},
            {data: 'productname'},
            {
            data: 'ordernumber',
            render: function (data) {
                try {
                    // Add a null check before using substr
                    return data ? '#'+data: '-'; // Example: Extract the first 5 characters
                } catch (error) {
                    // Log any errors to the console
                    console.error('Error in render function:', error);
                    return '-'; // Return an empty string in case of an error
                }
            }
        },
             {data: 'invoice_id'},
            {data: 'payment_method'},
            {
                data: 'order_status',
                className: 'status-column'
            },
            {data: 'action', name: 'action', orderable: false, searchable: false},

        ]
    });

    $('#filter-by-date').on('click', function() {
        table.draw();
    });

    $('#all-orders').click(function() {
        $('#start-date').val(''); // Clear the start date filter
        $('#end-date').val(''); // Clear the end date filter
        table.ajax.reload();
    });
      
  });
</script>

@endsection