@extends('layouts.admin')

@section('title', 'Orders List')

@section('breadcrumb-item')
    <li class="breadcrumb-item active">Orders List</li>
@endsection

@section('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
    <style>
        .header {
            display: none;
        }

        .msg {
            display: none;
        }
    </style>
@endsection

@section('content')
    <div class="card">

        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Orders List</p>
            {{-- <a href="{{route('admin.order.create')}}" data-toggle="tooltip" data-placement="bottom"
                title="Add New Record" class="btn btn-info float-right ml-2">
                <i class="fa fa-plus"></i>
            </a> --}}
            <form action="{{ route('admin.orders') }}" method="get" class="form-inline float-right filter-form">
                {{--            <div class="form-group custom-control-inline">--}}
                {{--                <select name="filter" id="filter" class="form-control ">--}}
                {{--                    <option value="all" selected>All Orders</option>--}}
                {{--                    <option value="approved" {{ request()->query('filter') == 'approved' ? 'selected' : '' }}>Approved--}}
                {{--                    </option>--}}
                {{--                    <option value="cancelled" {{ request()->query('filter') == 'cancelled' ? 'selected' : '' }}>--}}
                {{--                        Cancelled</option>--}}
                {{--                    <option value="completed" {{ request()->query('filter') == 'completed' ? 'selected' : '' }}>--}}
                {{--                        Completed</option>--}}
                {{--                    <option value="pending" {{ request()->query('filter') == 'pending' ? 'selected' : '' }}>Pending--}}
                {{--                    </option>--}}
                {{--                    <option value="partial" {{ request()->query('filter') == 'partial' ? 'selected' : '' }}>Partial--}}
                {{--                    </option>--}}
                {{--                    <option value="credit" {{ request()->query('filter') == 'credit' ? 'selected' : '' }}>Credit--}}
                {{--                    </option>--}}
                {{--                </select>--}}
                {{--            </div>--}}
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control search" type="text" name="q" value="{{ request()->query('q') }}"
                               placeholder="Search in Orders">
                        <div class="input-group-append">
                            <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button>
                        </div>
                        <div class="input-group-append">
                            <a class="btn btn-danger{{ request()->query('q') ? '' : ' disabled' }}"
                               href="{{ route('admin.orders') }}">
                                <i class="fa fa-eraser"></i></a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-body" style="overflow-x:auto;">
            <form method="post" id="searchfrom" action="{{ route('admin.order.search') }}">
                @csrf
                <div class="row" style="display: none;">
                    <div class="col-md-4">
                        <select class="js-example-basic-multiple col-md-12 product" name="product[]" multiple="multiple">
                            <option>Products</option>
                            @foreach (_products() as $product)
                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select class="js-example-basic-single col-md-12 area" name="area">
                            <option>Area</option>
                            @foreach (_areas() as $area)
                                <option value="{{ $area->id }}">{{ $area->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-2">
                        <select class="js-example-basic-single col-md-12 employee border " name="employee">
                            <option value="">Employee</option>
                            @foreach (_employees() as $employee)
                                <option value="{{ $employee->id }}" {{ request()->employee == $employee->id ? 'selected' : ''
                            }}>{{ $employee->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="js-example-basic-single col-md-12 shop" name="shop">
                            <option value="">Shop</option>
                            @foreach (_shops() as $shop)
                                <option value="{{ $shop->id }}" {{ request()->shop == $shop->id ? 'selected' : '' }}>
                                    {{$shop->name}} [{{$shop->area ? $shop->area->name : ""}}] [{{ $shop->id }}]
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="status" class="js-example-basic-single col-md-12">
                            <option value="all" selected>All Orders</option>
                            <option value="approved" {{ request()->status == 'approved' ? 'selected' : '' }}>Approved
                            </option>
                            <option value="not approved" {{ request()->status == 'not approved' ? 'selected' : '' }}>Not Approved
                            </option>
                            <option value="cancelled" {{ request()->status == 'cancelled' ? 'selected' : '' }}>
                                Cancelled</option>
                            <option value="completed" {{ request()->status == 'completed' ? 'selected' : '' }}>
                                Completed</option>
                            <option value="pending" {{ request()->status == 'pending' ? 'selected' : '' }}>Pending
                            </option>
                            <option value="partial" {{ request()->status == 'partial' ? 'selected' : '' }}>Partial
                            </option>
                            <option value="credit" {{ request()->status == 'credit' ? 'selected' : '' }}>Credit
                            </option>
                            <option value="online" {{ request()->status == 'online' ? 'selected' : '' }}>Online
                            </option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label>Start Date</label>
                        <input id="datepicker1" name="start_date" value="{{ request()->start_date ?? date('d-m-Y') }}" />
                    </div>
                    <div class="col-md-3">
                        <label>End Date</label>
                        <input id="datepicker2" name="end_date" value="{{ request()->end_date  ?? date('d-m-Y') }}" />
                        {{-- <input id=" datepicker2" name="end_date" value="{{ request()->end_date }}" /> --}}
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-md-12 text-center">
                        <button class="btn btn-sm btn-success col-md-3 submit">Search</button>
                        {{-- <button class="btn btn-sm btn-success col-md-3 print">Print</button> --}}
                        <a href="{{ route('admin.orders') }}" class="btn btn-sm btn-success col-md-3">Reload</a>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-4">
                        <div class="alert alert-danger msg" role="alert">
                            Select Some Search Options.
                        </div>
                    </div>
                </div>
            </form>
            <br>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Sr#</th>
                    <th>Order ID</th>
                    <th>Amount</th>
                    <th>Shop</th>
                    <th>Employee</th>
                    <th>Placed On</th>
                    <th>Status</th>
                    <th>Remarks</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                @forelse($orders as $key => $order)
                    <tr>
                        <td>{{ $orders->firstItem() + $key }}</td>
                        <td>{{ $order->id ?? '' }}</td>
                        <td>{{ $order->amount ?? '' }}</td>
                        <td>{{ $order->shop->name ?? '' }}</td>
                        <td>{{ $order->employee->name ?? '' }}</td>
                        <td>{{ $order->created_at->format('d-M-Y') ?? '' }}</td>
                        <td>{{ $order->status_string ?? '' }}</td>
                        <td>{{ $order->remarks ?? '' }}</td>
                        <td>
                            <div class="btn-group">
                                <a href="{{ route('admin.order.show', ['id' => $order->id]) }}" data-toggle="tooltip"
                                   title="View" class="btn btn-sm btn-outline-primary"><i class="fa fa-eye"></i></a>
                                @if (!$order->status || $order->status == 4 || $order->status == 5 || $order->status == 6 || $order->status == 1)
                                    <a href="{{ route('admin.order.edit', ['id' => $order->id, 'page' => request()->get('page', 1)]) }}" data-toggle="tooltip"
                                       title="Edit" class="btn btn-sm btn-outline-primary"><i class="fa fa-pencil"></i></a>
                                @endif
                                <a href="{{ route('admin.order.print', ['id' => $order->id]) }}" data-toggle="tooltip"
                                   title="Print" class="btn btn-sm btn-outline-primary"><i class="fa fa-print"></i></a>
                                {{-- Approve Confirmationcon Dialog --}}
                                @if (!$order->status == 3)
                                    @include('includes.modals.confirm', [
                                    'action' => 'approve',
                                    'route' => 'admin.order.approve',
                                    'model' => 'order',
                                    'btn_class' => 'btn-outline-success',
                                    'fa_class' => 'fa fa-check',
                                    ])
                                @endif
                                {{-- Delete Confirmation Dialog --}}
                                @include('includes.modals.confirm', [
                                'action' => 'delete',
                                'route' => 'admin.order.delete',
                                'model' => 'order',
                                'btn_class' => 'btn-outline-danger',
                                'fa_class' => 'fa fa-trash',
                                ])
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <th colspan="8" class="text-center">No Orders Yet</th>
                    </tr>
                @endforelse
                </tbody>
            </table>
            <div class="d-inline pull-right">
                <h5>Total Order Amount: <b>{{ $orders->sum('amount') }}</b></h5>
            </div>
        </div>
        <div class="pagination justify-content-center mb-4">
            {{ $orders->appends(['q' => request()->query('q'), 'filter' => request()->query('filter')])->links() }}
        </div>
    </div>
@endsection

@section('scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            $('#filter').change(function() {
                $('.filter-form').submit();
            });

            let current_datetime = new Date();
            let today = (current_datetime.getDate() + 1) + "-" + (current_datetime.getMonth() + 1) + "-" +
                current_datetime.getFullYear();
            $('.js-example-basic-single').select2();
            $('.js-example-basic-multiple').select2({
                placeholder: 'Products'
            });
            $('#datepicker1').datepicker({
                format: 'dd-mm-yyyy',
                uiLibrary: 'bootstrap4',
                maxDate: today,
            });

            $('#datepicker2').datepicker({
                format: 'dd-mm-yyyy',
                uiLibrary: 'bootstrap4',
                maxDate: today,
            });

            // Search on name column only
            $('.search').keyup(function() {
                // Search Text
                var search = $(this).val();

                // Hide all table tbody rows
                $('table tbody tr').hide();


                $('table tbody td:contains("' + search + '")').each(function() {
                    $(this).closest('tr').show();
                });
            });

            $('.submit').click(function(e) {
                e.preventDefault();
                let pro = $('.product').val();
                let area = $('.area').val();
                let shop = $('.shop').val();
                let emp = $('.employee').val();
                let date = $('#datepicker').val();

                if (pro !== 'Products' || area !== 'Area' || shop !== 'Shop' || emp !== 'Employee' ||
                    date !== '') {
                    $('#searchfrom').submit();
                } else {
                    $('.msg').show();
                    $('.msg').delay(3200).fadeOut(300);
                }
            });

            $('.print').click(function(e) {
                e.preventDefault();
                $('.header').show();
                $('.print-t').hide();

                let printContents = document.getElementById('print-view').innerHTML;

                let originalContents = document.body.innerHTML;

                document.body.innerHTML = printContents;

                window.print();
                document.body.innerHTML = originalContents;
                $('.header').hide();
                $('.print-t').show();

            })

        });

        // Case-insensitive searching (Note - remove the below script for Case sensitive search )
        $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function(elem) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };

        });
    </script>
@endsection