@extends('admin::index')

@section('content')
    <section class="content-header">
        <h1>
            {{ $header or trans('admin.title') }}
            <small>{{ $description or trans('admin.description') }}</small>
        </h1>

        <!-- breadcrumb start -->
    @include('partials.breadcrumb')
    <!-- breadcrumb end -->

    </section>

    <section class="content">

        @include('partials.error')
        @include('admin::partials.exception')
        @include('admin::partials.toastr')

        {{-- MAIN CONTENT --}}
        <div class="row">
            <div class="col-sm-12">
                <div class="box">
                    <div class="box-header with-border">
                        <div class="filter-zone">
                            {{ Form::open(array('url' =>  url()->current(), 'method' => 'get', 'class' => 'filter-group')) }}
                                <div class="flex space-between">
                                    <div class="input-group-sm" style="width: 100px;">
                                        <select name="status" class="form-control is-capitalized" id="filter-status" data-redirect="{{ route('orders.index') }}">
                                            <option value="">{{ __('All status') }}</option>
                                            @foreach(\App\Models\Order::$status as $status)
                                                <option class="is-capitalized" value="{{ $status }}">{{ $status }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="input-group input-group-sm" style="width: 150px;">
                                        <input type="text" name="q" class="form-control pull-right"
                                               placeholder="{{ __('Nhập Mã đơn / SĐT') }}" value="{{ request('q') }}" style="width: 300px">
                                        <div class="input-group-btn">
                                            <button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                    <div class="box-body no-padding">
                        <table class="table table-bordered with-bg">
                            <tr>
                                <th >{{__('Mã đơn')}}</th>
                                <th >{{__('Tên KH')}}</th>
                                <th >{{__('SĐT')}}</th>
                                <th class="shirk">{{__('Số mặt hàng')}}</th>
                                <th >{{__('Tổng tiền')}}</th>
                                <th class="shirk">{{__('Ngày tạo')}}</th>
                                <th >{{__('Trạng thái')}}</th>
                                <th class="">#</th>
                            </tr>
                            <tbody class="table-body ">
                            @forelse($list as $order)
                                <tr>
                                    <td><a href="{{ route('orders.show',[$order->id]) }}">{{ $order->code }}</a></td>
                                    <td>{{ $order->customer?$order->customer->fullname:'' }}</td>
                                    <td>{{ $order->customer?$order->customer->phone:'' }}</td>
                                    <td>{{ $order->count }}</td>
                                    <td class="text-right bold text-danger">{{ number_format($order->total) }} ₫</td>
                                    <td class="text-nowrap">{{ $order->created_at->format('d-m-Y H:i') }}</td>
                                    <td class="text-center"><span class="label label-default">{{ $order->status }}</span></td>
                                    <td class="text-center">
                                        <a class="" href="{{ route('orders.show',[$order->id]) }}"> <i class="fa fa-eye"></i> </a>
                                        <a class="btn btn-info" href="{{ url('orders/'.$order->id.'/print?ref=orders') }}"> <i class="fa fa-print"></i> </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" align="center"><h5>{{__('Không có dữ liệu')}}</h5></td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if(has_paging($list))
                        <div class="box-footer">
                            {!!  $list->appends(request()->query())->links() !!}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
    <style lang="scss">
        .filter-group {
            width: 100%;
        }
    </style>
    <script>
        $(function () {
            $(document).ready(function () {
                    var queryString = window.location.search
                    const urlParams = new URLSearchParams(queryString);
                    var statusParam = urlParams.get('status')
                    var q = urlParams.get('q')
                    if(statusParam) {
                        $('#filter-status').val(statusParam)
                        $('input[name=q]').val(q)
                    }
            });
            $('#filter-status').on('change', function (e) {
                let params = [
                    ($(this).val() ? 'status=' + $(this).val() : ''),
                    ($('input[name=q]').val() ? 'q=' + $('input[name=q]').val() : '')
                ];
                let paramStr = params.filter(x => !!x).join('&')
                var redirectUrl = $(this).data('redirect') + (paramStr ? '?' + paramStr : '');
                window.location.replace(redirectUrl);
            })
        });
    </script>
@endsection