@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>

            <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>
                    </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>
        <reports
            :orders="{{ json_encode($orders) }}"
            :shops="{{ json_encode(_shops()) }}"
            :employees="{{ json_encode(_employees()) }}"
            :products="{{ json_encode(_products()) }}"
            :areas="{{ json_encode(_areas()) }}"
        ></reports>
    </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 () {

            let current_datetime = new Date();
            let today = current_datetime.getDate() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getFullYear();

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

            $('.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();

            })

        });

    </script>
@endsection