@extends('admin.layouts.app', ['title' => __('Order')])

@section('content')
    <!-- Header -->
    <div class="header bg-primary pb-6 pt-6">
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                            class="fas fa-home"></i></a></li>
                                <li class="breadcrumb-item active" aria-current="page">Orders</li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-6 col-5 text-right">
                        <!-- <a href="{{ route('zipcode-create') }}" class="btn btn-sm btn-neutral">Add New ZipCode</a> -->
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- Page content -->

    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col-xl-12 order-xl-1">
                <div class="card bg-secondary shadow">
                    <div class="card-header bg-white border-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">{{ __('Order') }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive main_order_table">
                            <!-- Projects table -->
                            <table class="table align-items-center table-flush" id="orders-datatable">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col">No</th>
                                        <th scope="col">Order No</th>
                                        <th scope="col">Shipping Method</th>
                                        <th scope="col">Total</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <!-- <button type="button" class="btn btn-default mt-2" data-toggle="modal" data-target="#modal-form">Click</button> -->
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form"
            aria-hidden="true">
            <div class="modal-dialog modal- modal-dialog-centered modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modal-title-default">Fedex Details</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body p-0">
                        <div class="card bg-secondary border-0 mb-0">
                            <div class="card-body px-md-4 py-md-3">
                                <div class="alert alert-danger alert-dismissible fade show" style="display: none"
                                    id="modal-error" role="alert">
                                    Something Went wrong
                                    <button type="button" class="close" onclick="closeError()" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <form role="form" id="trackingForm">
                                    <div class="form-group">
                                        <input type="hidden" name="order_id" id="order_id" class="form-control">
                                        <label for="fedex_tracking_id">Tracking Number</label>
                                        <input type="text" name="fedex_tracking_id" id="fedex_tracking_id"
                                            class="form-control" placeholder="">
                                    </div>
                                    <div class="text-center">
                                        <button type="button" class="btn btn-outline-default my-4" data-dismiss="modal"
                                            aria-label="Close">Cancel</button>
                                        <button type="button" onclick="saveTrackId()"
                                            class="btn btn-default my-4">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        @include('admin.layouts.footers.auth')
    </div>
@endsection
@push('js')
    <script type="text/javascript">
        $('#orders-datatable').DataTable({
            ajax: {
                type: 'POST',
                url: "{{ route('getOrders-datatable') }}"
            },
            language: {
                paginate: {
                    next: '<i class="fas fa-chevron-right">',
                    previous: '<i class="fas fa-chevron-left">'
                }
            },
            processing: true,
            serverSide: true,
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'order_no',
                    name: 'order_no'
                },
                {
                    data: 'shipping_method',
                    name: 'shipping_method'
                },
                {
                    data: 'total',
                    name: 'total'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: true,
                    searchable: true
                }
            ]
        });

        function showModal(order_id) {
            $('#modal-form').modal('show');
            $('#order_id').val(order_id);
        }

        function saveTrackId() {
            $.ajax({
                type: 'POST',
                url: "{{ route('add-tracking-id') }}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    id: $('#order_id').val(),
                    fedex_tracking_id: $('#fedex_tracking_id').val()
                },
                success: function(data) {
                    if (data.success == true) {
                        $('#tracking_btn' + $('#order_id').val()).hide();
                        $('#badge' + $('#order_id').val()).text('Shipped');
                        $('#badge' + $('#order_id').val()).removeClass('badge-primary').addClass('badge-info');
                        $('#modal-form').modal('hide');
                        $('#cancelBtn' + $('#order_id').val()).hide();
                        $('#done_btn' + $('#order_id').val()).show();
                    } else {
                        $('#modal-error').show();
                    }
                    $('#order_id').val('');
                    $('#fedex_tracking_id').val('');
                },
                error: function(data) {
                    console.log(data);
                },
            });
        }

        function closeError(params) {
            $('#modal-error').hide();
        }
        $(document).on('click', '.update-status', function() {
            var id = $(this).data('id');
            var status = $(this).data('status');
            var isFor = status == 6 ? 'Complete' : 'Cancel';
            swal({
                    title: "",
                    text: "Are you sure? " + isFor + " this Order!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonClass: "btn-danger",
                    confirmButtonText: "Yes, " + isFor + " it!",
                    closeOnConfirm: true
                },
                function() {
                    updateOrderStatus(id, status);
                });
        });

        function updateOrderStatus(id, status) {
            $.ajax({
                url: "{{ route('update-order-status') }}",
                method: 'post',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    id: id,
                    status: status
                },
                success: function(data) {
                    if (data.success) {
                        if (status == 7) {
                            $('#tracking_btn' + id).hide();
                            $('#cancelBtn' + id).hide();
                            $('#done_btn' + id).hide();
                            $('#badge' + id).removeClass('badge-primary badge-info').addClass('badge-warning');
                            $('#badge' + id).text('Cancel');
                        }
                        if (status == 6) {
                            $('#tracking_btn' + id).hide();
                            $('#cancelBtn' + id).hide();
                            $('#done_btn' + id).hide();
                            $('#badge' + id).removeClass('badge-warning badge-info badge-primary').addClass(
                                'badge-success');
                            $('#badge' + id).text('Completed');
                        }

                        $.notifyBar({
                            cssClass: "success",
                            html: data.message
                        });
                    } else {
                        $.notifyBar({
                            cssClass: "error",
                            html: data.message
                        });
                    }
                }
            });
        }
    </script>
@endpush