@extends('layouts.admin_main')

@section('title', trans('admin_lang.orders'))

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.min.css') }}">
@endpush

@section('content')
    <div class="kt-portlet kt-portlet--mobile">
        @header(['title' => trans('admin_lang.manage_orders'), 'icon' => 'fa fa-shopping-cart'])
        <div class="kt-portlet__head-label">
            <div class="input-group date-filter" style="width: fit-content">
                <input type="text" name="dates" value="" readonly class="form-control p-0 border-0 filter" style="width: 0px;">
                <div class="input-group-append hd_calender">
                    <span class="input-group-text">Sort by <i class="flaticon2-calendar-9"></i></span>
                </div>
            </div>
            &nbsp;&nbsp;&nbsp;
            @button(['type' => 'create', 'label' => trans('admin_lang.create_new_order'), 'url' => route('admin.orders.create')])@endbutton
        </div>

        @endheader
        <div class="kt-portlet__body">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Order Number:</label>
                        <input type="text" name="order_number" id="order_number" class="form-control filter" placeholder="Enter order number" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Business Name/Sage ID:</label>
                        <select name="business_name" id="business_name" class="form-control filter business_name" >
                            <option value="">[All Name]</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>&nbsp;</label><br>
                        <button class="btn btn-primary btn-brand--icon" id="btn_search">
													<span>
														<i class="la la-search"></i>
														<span>Search</span>
													</span>
                        </button>
                        &nbsp;&nbsp;
                        <button class="btn btn-secondary btn-secondary--icon" id="btn_reset">
													<span>
														<i class="la la-close"></i>
														<span>Reset</span>
													</span>
                        </button>
                    </div>
                </div>
                <div class="col-lg-12">

                </div>
            </div>
            <hr>
            <div class="table_container">
                <div class="table-responsive">
                    @include('admin.orders.partials.all_orders')
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/crud/forms/widgets/bootstrap-daterangepicker.js') }}"></script>
<script type="text/javascript">
    const lang = "{{ app()->getLocale() }}";
    const filters = {!! json_encode($filters) !!};
</script>
@include('admin.partial.notification')
@endpush