@extends('admin.layouts.app')
@section('title', 'Orders Page')
@push('styles')

<!-- JQuery DataTable Css -->
<link rel="stylesheet" href="{{ asset('backend') }}/assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="{{ asset('backend') }}/assets/css/sweetalert2.min.css">

<!-- Bootstrap Material Datetime Picker Css -->
<link href="{{ asset('backend') }}/assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet" />

<link rel="stylesheet" href="{{ asset('backend') }}/assets/plugins/bootstrap-select/css/bootstrap-select.css" />

<style>

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
	color: #444;
}

.form-group .form-line.access_info {
	border: 1px solid #424242 !important;
	padding-left: 10px;
}
.btn.btn-primary.btn-lg.custom_btn {
	padding: 10px 15px;
}


</style>







@endpush



@php
$orderAmountSum = App\Models\Order::sum('total');
@endphp



@section('admin_content')

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 mt-4">



            <div class="card">
                <div class="card-header">
                    <h4> All Orders </h4>
                </div>
                <div class="body">
                    <form action="/filter-order" method="GET">



                        <div class="row clearfix">
                            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-5 form-control-label">
                                <label for="email_address_2">FROM*</label>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-8 col-xs-7">
                                <div class="form-group">
                                    <div class="form-line access_info">
                                        <input type="date" name="start_date" class="datepicker form-control">
                                    </div>
                                </div>
                            </div>


                            <div class="col-lg-1 col-md-1 col-sm-4 col-xs-5 form-control-label">
                                <label for="email_address_2">TO</label>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-8 col-xs-7">
                                <div class="form-group">
                                    <div class="form-line access_info">
                                        <input type="date" name="end_date" class="datepicker form-control">
                                    </div>
                                </div>
                            </div>


                            <div class="col-lg-4 col-md-2">
                                <button style="font-size: 15px" type="submit" class="btn btn-warning btn-lg  text-bold text-uppercase text-white custom_btn">SHOW</button>
                            </div>



                        </div>

                </form>
                    <table class="table table-bordered table-striped table-hover dataTable js-exportable">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Date</th>
                                <th>Order No</th>
                                <th>Name</th>
                                {{-- <th>Phone</th> --}}
                                {{-- <th>Address</th> --}}
                                <th>Amount</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tfoot>
                            <th></th>
                                <th></th>
                                <th></th>
                                <th>Total : </th>
                                <th> ৳ {{ $orderAmountSum }}</th>
                                {{-- <th></th> --}}
                                <th></th>
                                <th></th>
                        </tfoot>

                        <tbody>

                            @foreach ($orders as $key => $item)
                            <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $item->created_at->format('d/m/Y') }}</td>
                                <td>{{ $item->order_id }}</td>
                                <td>{{ $item->billing->name }}</td>
                                {{-- <td>{{ $item->billing->phone }}</td> --}}
                                {{-- <td>{{ $item->billing->address }}</td> --}}
                                <td>{{ $item->sub_total }}</td>
                                {{-- <td>
                                    @if($item->status == 'pending')
                                    <a href="{{ route('orderChangeStatus',$item->id) }}" class="btn btn-danger">Pending</a>
                                @else
                                    <a href="{{ route('orderChangeStatus',$item->id) }}" class="btn btn-success">Received</a>
                                @endif
                                </td> --}}

                                <td>
                                    <form class="d-inline-block" action="{{ route('orderChangeStatus',$item->id) }}" method="POST">
                                        @csrf

                                        {{-- <input type="hidden" name="status" value="{{$item->status }}"> --}}

                                    <div class="form-group">
                                        <div class="row clearfix" id="custom-select-form">
                                            <div class="col-lg-8 col-md-8">
                                                <select name="status" id="" class="form-control show-tick">
                                                    <option value="pending" {{ $item->status == 'pending'?'selected' : '' }}>Pending</option>
                                                    <option value="received" {{ $item->status =='received'?'selected' : '' }}>Received</option>

                                                    <option value="on_the_way" {{ $item->status =='on_the_way'?'selected' : '' }}>On the way</option>
                                                    <option value="delivered" {{ $item->status =='delivered'?'selected' : '' }}>Delivered</option>

                                                </select>
                                            </div>
                                            <div class="col-lg-4 col-md-4">
                                                <button type="submit" class="btn btn-warning text-white text-uppercase">Update</button>
                                            </div>
                                            </div>
                                        </div>


                                    </form>
                                </td>


                                <td>
                                    <a href="{{ route('orders.show',$item->id) }}" class="btn btn-primary btn-sm"> <i class="material-icons">visibility</i></a>

                                    <form class="d-inline-block" action="{{ route('orders.destroy',$item->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm show_confirm"><i class="material-icons">delete</i></button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@push('scripts')

<!-- Jquery DataTable Plugin Js -->
<script src="{{ asset('backend') }}/assets/bundles/datatablescripts.bundle.js"></script>
<script src="{{ asset('backend') }}/assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js"></script>
<script src="{{ asset('backend') }}/assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js"></script>
<script src="{{ asset('backend') }}/assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js"></script>
<script src="{{ asset('backend') }}/assets/plugins/jquery-datatable/buttons/buttons.flash.min.js"></script>
<script src="{{ asset('backend') }}/assets/plugins/jquery-datatable/buttons/buttons.html5.min.js"></script>
<script src="{{ asset('backend') }}/assets/plugins/jquery-datatable/buttons/buttons.print.min.js"></script>


<!-- Custom Js -->
<script src="{{ asset('backend') }}/assets/js/pages/tables/jquery-datatable.js"></script>
<script src="{{ asset('backend') }}/assets/js/sweetalert2.all.min.js"></script>

<!-- Bootstrap Material Datetime Picker Plugin Js -->
<script src="{{ asset('backend') }}/assets/plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js"></script>

<script src="{{ asset('backend') }}/assets/js/pages/forms/basic-form-elements.js"></script>


<script>
    $('.show_confirm').click(function(event){
        let form = $(this).closest('form');
        event.preventDefault();

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
            }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
                Swal.fire({
                title: "Deleted!",
                text: "Your file has been deleted.",
                icon: "success"
                });
            }
            });

    });


</script>



@endpush