@extends('admin.layout.app')
@section('content')
    <div class="content-area">
        <div class="mr-breadcrumb">
            <div class="row">
                <div class="col-lg-12">
                    <h4 class="heading">All Orders</h4>
                    <ul class="links">
                        <li>
                            <a href="{{route('admin.dashboard')}}">Dashboard </a>
                        </li>
                        <li>
                            <a href="javascript:;">Orders</a>
                        </li>
                        <li>
                            <a href="{{route('admin.order.index')}}">All Orders</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="product-area">
            <div class="row">
                <div class="col-lg-12">
                    <div class="mr-table allproduct">
                        <div class="alert alert-success validation" style="display: none;">
                            <button type="button" class="close alert-close"><span>×</span></button>
                            <p class="text-left"></p>
                        </div>
                        <div class="table-responsive">
                            <div class="gocover"
                                 style="background: url({{asset('admin/images/1564224329loading3.gif')}}) no-repeat scroll center center rgba(45, 45, 45, 0.5);">
                            </div>
                            <table id="geniustable" class="table table-hover dt-responsive" cellspacing="0"
                                   width="100%">
                                <thead>
                                <tr>
                                    <th>Customer Email</th>
                                    <th>Order Number</th>
                                    <th>Payment Status</th>
                                    <th>Order Status</th>
                                    <th>Total Qty</th>
                                    <th>Total Cost</th>
                                    <th>Options</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="modal fade" id="confirm-delete1" tabindex="-1" role="dialog" aria-labelledby="modal1"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="submit-loader">
                    <img src="{{asset('admin/images/1564224329loading3.gif')}}" alt="">
                </div>
                <div class="modal-header d-block text-center">
                    <h4 class="modal-title d-inline-block">Update Status</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p class="text-center">You are about to update the order&#039;s Status.</p>
                    <p class="text-center">Do you want to proceed?</p>
                    <input type="hidden" id="t-add"
                           value="#">
                    <input type="hidden" id="t-id" value="">
                    <input type="hidden" id="t-title" value="">
                    <textarea class="input-field" placeholder="Enter Your Tracking Note (Optional)"
                              id="t-txt"></textarea>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-success btn-ok order-btn">Proceed</a>
                </div>

            </div>
        </div>
    </div>

    <div class="sub-categori">
        <div class="modal" id="vendorform" tabindex="-1" role="dialog" aria-labelledby="vendorformLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="vendorformLabel">Send Email</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container-fluid p-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="contact-form">
                                        <form id="emailreply">
                                            <input type="hidden" name="_token"
                                                   value="YxSYSmlJz5nGmgHmIoG7gaJX8nMETt6pLRvIATaJ" autocomplete="off">
                                            <ul>
                                                <li>
                                                    <input type="email" class="input-field eml-val" id="eml" name="to"
                                                           placeholder="Email *" value="" required="">
                                                </li>
                                                <li>
                                                    <input type="text" class="input-field" id="subj" name="subject"
                                                           placeholder="Subject *" required="">
                                                </li>
                                                <li>
                                                    <textarea class="input-field textarea" name="message" id="msg"
                                                              placeholder="Your Message *" required=""></textarea>
                                                </li>
                                            </ul>
                                            <button class="submit-btn" id="emlsub" type="submit">Send Email</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="submit-loader">
                    <img src="{{asset('admin/images/1564224329loading3.gif')}}" alt="">
                </div>
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="statusModal" tabindex="-1" role="dialog" aria-labelledby="statusModal"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="submit-loader d-none text-center py-3">
                    <img src="{{asset('admin/images/1564224329loading3.gif')}}" alt="">
                </div>
                <div class="modal-header">
                    <h5 class="modal-title">Update Status</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form id="statusUpdateForm">
                    <div class="modal-body">
                        <input type="hidden" id="modal_row_id">

                        <label>Status</label>
                        <select id="modal_status" class="form-control">
                            <option value="pending">Pending</option>
                            <option value="in-progress">Processing</option>
                            <option value="completed">Completed</option>
                            <option value="cancelled">Cancelled</option>
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveStatusBtn">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Main Content Area End -->
@endsection
@push('script')
    <script type="text/javascript">
        (function ($) {
            "use strict";

            var table = $('#geniustable').DataTable({
                ordering: false,
                processing: true,
                serverSide: true,
                ajax: '{{route('admin.order.fetch')}}',
                columns: [
                    {data: 'customer_email', name: 'customer_email'},
                    {data: 'order_number', name: 'order_number'},
                    {data: 'payment_status', name: 'payment_status'},
                    {data: 'order_status', name: 'order_status'},
                    {data: 'total_quantity', name: 'total_quantity'},
                    {data: 'pay_amount', name: 'pay_amount'},
                    {data: 'action', searchable: false, orderable: false}
                ],
                language: {
                    processing: '<img src="{{asset('admin/images/1564224329loading3.gif')}}">'
                },
                drawCallback: function (settings) {
                    $('.select').niceSelect();
                }
            });

        })(jQuery);

        $(document).on('click', '.open-status-modal', function () {
            var id = $(this).data('id');
            var status = $(this).data('status');

            $('#modal_row_id').val(id);
            $('#modal_status').val(status);
        });

        $('#saveStatusBtn').click(function () {
            var id = $('#modal_row_id').val();
            var status = $('#modal_status').val();

            $.ajax({
                url: "{{ route('admin.order.updateStatus') }}",
                method: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    status: status
                },
                beforeSend: function () {
                    $('.submit-loader').removeClass('d-none');
                },
                success: function (response) {
                    $('.submit-loader').addClass('d-none');
                    $('#statusModal').modal('hide');

                    toastr.success('Status updated successfully!');
                    $('#geniustable').DataTable().ajax.reload();
                }
            });
        });
    </script>
@endpush