@push('css')
    <style>
        .table-responsive-stack tr {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
        }


        .table-responsive-stack td,
        .table-responsive-stack th {
            display: block;
            /*
                       flex-grow | flex-shrink | flex-basis   */
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        }

        .table-responsive-stack .table-responsive-stack-thead {
            font-weight: bold;
        }

        @media screen and (max-width: 768px) {
            .table-responsive-stack tr {
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                border-bottom: 3px solid #ccc;
                display: block;

            }

            /*  IE9 FIX   */
            .table-responsive-stack td {
                float: left\9;
                width: 100%;
            }
        }
    </style>
@endpush
<div>
    <x-slot name="title">
        Cancelled Order List
    </x-slot>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-sm-4">
                            <div class="search-box mr-2 mb-2 d-inline-block">
                                <div class="position-relative">
                                    <h4>Cancelled Order List</h4>
                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-sm-8">
                            <div class="text-sm-right">
                                <a href="{{ route('inventory.sale') }}">
                                    <button type="button"
                                        class="btn btn-success btn-rounded waves-effect waves-light mb-2 mr-2"><i
                                            class="mdi mdi-plus mr-1"></i>New Order
                                    </button>
                                </a>
                            </div>
                        </div> --}}
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">From Date</label>
                                <input type="date" class="form-control" wire:model.debounce.150ms="from_date" />
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">To Date</label>
                                <input type="date" class="form-control" wire:model.debounce.150ms="to_date" />
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Search Order</label>
                                <input type="text" class="form-control" wire:model.debounce.150ms="search_order"
                                    placeholder="Search Order" />
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="row mb-2">
                        </div>
                        <div class="row">
                            <div class="table-responsive">
                                <table class="table mb-0 table-nowrap"
                                    id="tableOne">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>SL</th>
                                            <th>Date</th>
                                            <th>Order No</th>
                                            <th>Product Name</th>
                                            <th>Quantity</th>
                                            <th>Rate</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $i = 0;
                                        @endphp

                                        @foreach ($orders as $order)
                                            <tr>
                                                <td>
                                                    <a href="javascript: void(0);"
                                                        class="text-body font-weight-bold">{{ ++$i }}</a>
                                                </td>
                                                <td>
                                                    {{ $order->Order->order_date }}
                                                </td>
                                                <td>
                                                    {{ $order->Order->code }}
                                                </td>
                                                <td>
                                                    {{ $order->Product->name }}
                                                </td>
                                                <td>
                                                    {{ $order->quantity }}
                                                </td>
                                                <td>
                                                    {{ $order->unit_price }}
                                                </td>
                                                <td>
                                                    {{ $order->quantity * $order->unit_price }}
                                                </td>
                                                <td>
                                                    {{ $order->Order->status }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                {{ $orders->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script>
        $(document).ready(function() {
            // inspired by http://jsfiddle.net/arunpjohny/564Lxosz/1/
            $('.table-responsive-stack').each(function(i) {
                var id = $(this).attr('id');
                //alert(id);
                $(this).find("th").each(function(i) {
                    $('#' + id + ' td:nth-child(' + (i + 1) + ')').prepend(
                        '<span class="table-responsive-stack-thead">' + $(this).text() +
                        ':</span> ');
                    $('.table-responsive-stack-thead').hide();

                });
            });
            $('.table-responsive-stack').each(function() {
                var thCount = $(this).find("th").length;
                var rowGrow = 100 / thCount + '%';
                //console.log(rowGrow);
                $(this).find("th, td").css('flex-basis', rowGrow);
            });

            function flexTable() {
                if ($(window).width() < 768) {

                    $(".table-responsive-stack").each(function(i) {
                        $(this).find(".table-responsive-stack-thead").show();
                        $(this).find('thead').hide();
                    });


                    // window is less than 768px
                } else {


                    $(".table-responsive-stack").each(function(i) {
                        $(this).find(".table-responsive-stack-thead").hide();
                        $(this).find('thead').show();
                    });



                }
                // flextable
            }
            flexTable();
            window.onresize = function(event) {
                flexTable();
            };
        });

        $(document).ready(function() {

            // inspired by http://jsfiddle.net/arunpjohny/564Lxosz/1/
            $('.table-responsive-stack').each(function(i) {
                var id = $(this).attr('id');
                //alert(id);
                $(this).find("th").each(function(i) {
                    $('#' + id + ' td:nth-child(' + (i + 1) + ')').prepend(
                        '<span class="table-responsive-stack-thead">' + $(this).text() +
                        ':</span> ');
                    $('.table-responsive-stack-thead').hide();
                });
            });

            $('.table-responsive-stack').each(function() {
                var thCount = $(this).find("th").length;
                var rowGrow = 100 / thCount + '%';
                //console.log(rowGrow);
                $(this).find("th, td").css('flex-basis', rowGrow);
            });

            function flexTable() {
                if ($(window).width() < 768) {

                    $(".table-responsive-stack").each(function(i) {
                        $(this).find(".table-responsive-stack-thead").show();
                        $(this).find('thead').hide();
                    });
                    // window is less than 768px
                } else {

                    $(".table-responsive-stack").each(function(i) {
                        $(this).find(".table-responsive-stack-thead").hide();
                        $(this).find('thead').show();
                    });

                }
                // flextable
            }

            flexTable();

            window.onresize = function(event) {
                flexTable();
            };

        });
    </script>
@endpush