@extends('frontend.layouts.app')

@section('content')

    <section class="gry-bg py-4 profile">
        <div class="container">
            <div class="row cols-xs-space cols-sm-space cols-md-space">
                <div class="col-lg-3 d-none d-lg-block">
                    @include('frontend.inc.seller_side_nav')
                </div>

                <div class="col-lg-9">
                    <div class="main-content">
                        <!-- Page title -->
                        <div class="page-title">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <h2 class="heading heading-6 text-capitalize strong-600 mb-0">
                                        {{ translate('Orders')}}
                                    </h2>
                                </div>
                                <div class="col-md-6">
                                    <div class="float-md-right">
                                        <ul class="breadcrumb">
                                            <li><a href="{{ route('home') }}">{{ translate('Home')}}</a></li>
                                            <li><a href="{{ route('dashboard') }}">{{ translate('Dashboard')}}</a></li>
                                            <li class="active"><a
                                                    href="{{ route('orders.index') }}">{{ translate('Orders')}}</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Order history table -->
                        <div class="card no-border mt-4">
                            <div class="card-header">
                                <form>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm" name="code"
                                                   placeholder="{{ translate('Order ID') }}"
                                                   @if(request()->filled('code')) value="{{ request('code') }}" @endif>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm" name="customer_name"
                                                   placeholder="{{ translate('Customer Name') }}"
                                                   @if(request()->filled('customer_name')) value="{{ request('customer_name') }}" @endif>
                                        </div>
                                        <div class="col-md-3">
                                            <input type="text" class="form-control form-control-sm"
                                                   name="customer_email"
                                                   placeholder="{{ translate('Customer Email') }}"
                                                   @if(request()->filled('customer_email')) value="{{ request('customer_email') }}" @endif>
                                        </div>
                                        <div class="col-md-3 ">
                                            <select class="form-control mb-3 form-control-sm "
                                                    data-placeholder="{{ translate('Payment Status')}}"
                                                    name="payment_status">
                                                <option value=""
                                                        style="display: none;">{{ translate('Select Payment Status')}}</option>
                                                <option value="paid">{{ translate('Paid')}}</option>
                                                <option value="failed">{{ translate('Failed')}}</option>
                                            </select>
                                        </div>

                                    </div>
                                    <div class="row mt-2">

                                        <div class="col-md-3 ">
                                            <select class="form-control mb-3 form-control-sm"
                                                    data-placeholder="{{ translate('Awb Status')}}"
                                                    name="awb_number">
                                                <option value=""
                                                        style="display: none;">{{ translate('Awb Status')}}</option>
                                                <option value="NA"
                                                        @if(request('awb_number') == 'NA') selected @endif >{{ translate('Not Available')}}</option>
                                                <option value="Available"
                                                        @if(request('awb_number') == 'Available') selected @endif >{{ translate('Available')}}</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3">
                                            <select class="form-control mb-3 form-control-sm"
                                                    data-placeholder="{{ translate('Delivery Status')}}"
                                                    name="delivery_status">
                                                <option value=""
                                                        style="display: none;">{{ translate('Select Delivery Status')}}</option>
                                                @foreach(deliveryStatusDropdown() as $deliveryStatus)
                                                    <option value="{{ $deliveryStatus }}"
                                                            @if(request('delivery_status') == $deliveryStatus) selected @endif >{{ translate($deliveryStatus)}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-3">
                                            <input type="text" name="dateRange" id="dateRange"
                                                   class="form-control form-control-sm"
                                                   @if(request()->filled('dateRange')) value="{{request('dateRange')}}"
                                                   @endif autocomplete="off" placeholder="Search for date ">
                                        </div>
                                        <div class="col-md-3">
                                            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                                            <a href="{{ route('orders.index') }}"
                                               class="btn btn-primary btn-sm">Reset</a>
                                        </div>

                                    </div>
                                </form>
                            </div>
                            <div class="card-body">
                                <table class="table table-sm table-hover table-responsive">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{ translate('Order ID')}}</th>
                                        <th>{{ translate('Date')}}</th>
                                        <th>{{ translate('Product Name')}}</th>
                                        <th>{{ translate('Quantity')}}</th>
                                        <th>{{ translate('Customer Name')}}</th>
                                        <th>{{ translate('Customer Email')}}</th>
                                        <th>{{ translate('Price')}}</th>
                                        <th>{{ translate('Payment Status')}}</th>
                                        <th>{{ translate('Order Status')}}</th>
                                        <th>{{ translate('Options')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @forelse ($orderDetails as $key => $orderDetail)
                                        <tr>
                                            <td>
                                                {{ $orderDetails->firstItem() + $loop->index }}
                                            </td>
                                            <td>{{ $orderDetail->order->code }}</td>
                                            <td>{{ $orderDetail->created_at->format('Y-m-d H:i') }}</td>
                                            <td><a target="_blank"
                                                   href="{{ route('product', $orderDetail->product->slug) }}">{{ $orderDetail->product->name }}</a>
                                            </td>
                                            <td>{{ $orderDetail->quantity }}</td>
                                            <td>{{ $orderDetail->order->user->name }}</td>
                                            <td>{{ $orderDetail->order->user->email }}</td>
                                            <td>{{ $orderDetail->price }}</td>
                                            <td>{{ $orderDetail->payment_status }}</td>
                                            <td>{{ $orderDetail->delivery_status }}</td>
                                            <td>
                                                <div class="dropdown">
                                                    <button class="btn" type="button" id="" data-toggle="dropdown"
                                                            aria-haspopup="true" aria-expanded="false">
                                                        <i class="fa fa-ellipsis-v"></i>
                                                    </button>

                                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="">
                                                        <button
                                                            onclick="show_order_details({{ $orderDetail->order->id }})"
                                                            class="dropdown-item">{{ translate('Order Details')}}</button>
                                                        <a href="{{ route('single.seller.invoice.download', $orderDetail->order->id) }}"
                                                           class="dropdown-item">{{ translate('Generate / Download Invoice')}}</a>
                                                    </div>
                                                </div>
                                            </td>

                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="10">No Records found !</td>
                                        </tr>
                                    @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="pagination-wrapper py-4">
                            <ul class="pagination justify-content-end">
                                {{ $orderDetails->appends(request()->input())->links() }}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal fade" id="order_details" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-zoom product-modal" id="modal-size"
             role="document">
            <div class="modal-content position-relative">
                <div class="c-preloader">
                    <i class="fa fa-spin fa-spinner"></i>
                </div>
                <div id="order-details-modal-body">

                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript">
        function sort_orders(el) {
            $('#sort_orders').submit();
        }
    </script>
@endsection

@push('css')
    <link rel="stylesheet" type="text/css"
          href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
@endpush
@push('script')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>
        $(function () {
            let dateRange = $('input[name="dateRange"]');
            dateRange.daterangepicker({
                autoUpdateInput: false,
                maxDate: new Date(),
                locale: {
                    cancelLabel: 'Clear'
                }
            });

            dateRange.on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
            });

            dateRange.on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
            });

        });
    </script>
@endpush