@section('title', 'Pending Order List')
<div>
    <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>
    <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>Pending Order List</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8">
                            <div class="text-sm-right">
                                <a href="{{ route('order.order-list') }}">
                                    <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>Order List
                                    </button>
                                </a>
                            </div>
                        </div><!-- end col-->
                    </div>
                    <hr>
                    <div class="row">
                        {{-- <div class="col-md-4"></div> --}}
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">From Date</label>
                                <input type="date" class="form-control" wire:model="from_date" />
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">To Date</label>
                                <input type="date" class="form-control" wire:model="to_date" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="basicpill-firstname-input">Search Order</label>
                                <input type="text" class="form-control" wire:model="search_order"
                                    placeholder="Search Order" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <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 <input name="bulk" type="checkbox" value="1"
                                                        wire:model.lazy="check_all" />
                                                </th>
                                                <th>Code</th>
                                                <th>Shop Name</th>
                                                <th>Customer Name</th>
                                                <th>Mobile</th>
                                                <th>Address</th>
                                                <th>Order Date</th>
                                                <th>Total</th>
                                                <th>Status</th>
                                                @if (!Auth::user()->hasAnyRole('manager'))
                                                    <th colspan="2">Action</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $i = 0;
                                            @endphp

                                            @foreach ($processingOrders as $processingOrder)
                                                <tr>
                                                    <td>
                                                        @if ($check_all)
                                                            <input wire:model="servicios.{{ $processingOrder->id }}"
                                                                value="{{ $processingOrder->id }}" type="checkbox">
                                                        @endif
                                                        <a href="javascript: void(0);"
                                                            class="text-body font-weight-bold">{{ ++$i }}</a>
                                                    </td>
                                                    <td>
                                                        {{ $processingOrder->code }}
                                                    </td>
                                                    <td>
                                                        @if ($processingOrder->Contact)
                                                            {{ $processingOrder->Contact->business_name }}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($processingOrder->Contact)
                                                            {{ $processingOrder->Contact->first_name }}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($processingOrder->Contact)
                                                            {{ $processingOrder->Contact->mobile }}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($processingOrder->Contact)
                                                            {{ $processingOrder->Contact->shipping_address }}
                                                        @endif
                                                    </td>
                                                    <td>
                                                        {{ date('d F Y', strtotime($processingOrder->created_at)) }}<br>
                                                        {{ date('h:i A', strtotime($processingOrder->created_at)) }}
                                                    </td>
                                                    <td>
                                                        {{ $processingOrder->payable_amount }}
                                                    </td>
                                                    <td>
                                                        {{ $processingOrder->status }}
                                                    </td>
                                                    {{-- <td wire:ignore>
                                                    <select class="form-control"
                                                        style="border-radius: 15px;background-color:rgb(229, 240, 219);"
                                                        wire:model.lazy="status" wire:change="OrderStatus">
                                                        <option value="">Status</option>
                                                        <option value="approved {{$pendingOrder->id}}">Approved</option>
                                                        <option value="cancel {{$pendingOrder->id}}">Cancel</option>
                                                    </select>
                                                </td> --}}
                                                    @if (!Auth::user()->hasAnyRole('manager'))
                                                        <td>
                                                            <a class="btn btn-info btn-sm btn-block mb-1"
                                                                href="{{ route('order.order-invoice', ['id' => $processingOrder->id]) }}"><i
                                                                    class="fas fa-eye font-size-18"></i></a>
                                                            <div>
                                                                @can('edit processing_order')
                                                                    @if ($processingOrder->status != 'delivered')
                                                                        <select class="form-control"
                                                                            style="border-radius: 15px;background-color:rgb(229, 240, 219);"
                                                                            wire:model.lazy="status"
                                                                            wire:change="OrderStatus">
                                                                            <option value="">Status</option>
                                                                            </option>
                                                                            <option
                                                                                value="Approved {{ $processingOrder->id }}">
                                                                                Approved
                                                                            </option>
                                                                            <option
                                                                                value="cancelled {{ $processingOrder->id }}">
                                                                                Cancelled
                                                                            </option>
                                                                            <option
                                                                                value="hold {{ $processingOrder->id }}">
                                                                                Hold
                                                                            </option>
                                                                        </select>
                                                                    @endif
                                                                @endcan
                                                            </div>
                                                        </td>
                                                    @endif
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{ $processingOrders->links() }}
                                </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();
                    };

                });
            </script>
            <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();
                    };

                });
            @endpush