@extends('layouts.app')
@section('title', 'Deleted Orders')
@section('content')
    {{-- @if (auth()->user()->user_type_id == 1) --}}
        <div class="container-fluid">
            <div class="row p-2">
                <h5 class="col-md-2 text-color fw-bold mt-1">Deleted Orders</h5>
            </div>
            <div class="loader" id="loader"></div>
            <div class="card mx-2">
                <div class="card-body">
                    <table id="deleted_orders_table" class="table table-bordered nowrap table-striped"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th> SI.No. </th>
                                <th> Vendor Name </th>
                                <th> Lender Name </th>
                                <th> Order ID </th>
                                <th> Property Address </th>
                                <th> Application No# </th>
                                <th> Loan Number </th>
                                <th> Borrower/Business Name </th>
                                <th> Service Requests </th>
                                <th> Amount </th>
                                <th> Status </th>
                                <th> Created </th>
                                <th> Updated </th>
                                @if (auth()->user()->user_type_id == 1)
                                <th> Re-open </th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {{-- @else
        @include('error');
    @endif --}}
@endsection

@section('page_css')
    <style>
        .dataTables_info {
            margin-top: 5px !important;
        }

        .pagination {
            margin-top: 8px !important;
        }

        .loader {
            border: 10px solid #d4d2d2;
            border-radius: 50%;
            /* border-top: 10px solid #3498db; */
            border-top: 10px solid #102B56;
            width: 50px;
            height: 50px;
            animation: spin 2s linear infinite;
            position: fixed;
            top: 65%;
            left: 50%;
            margin-left: -60px;
            margin-top: -60px;
            z-index: 9999;
            display: none;
        }
    </style>
@endsection

@section('page_script')
    <script>
        var deletedordersTbl = '';
        $(document).ready(function() {

            var $loading = $('#loader').hide();
            $(document).ajaxStart(function() {
                $loading.show();
            }).ajaxStop(function() {
                $loading.hide();
            });

            function deleted_orders_data() {
                if ($.fn.dataTable.isDataTable('#deleted_orders_table') && deletedordersTbl != '') {
                    deletedordersTbl.draw(false);
                } else {
                    load_deleted_orders_data();
                }
            }

            //load data
            function load_deleted_orders_data() {
                deletedordersTbl = $('#deleted_orders_table').DataTable({
                    scrollX: true,
                    "order": [],
                    "processing": true,
                    "serverSide": true,
                    "ajax": {
                        url: "{{ url('/fetch-deletedordersdata') }}",
                        method: "POST",
                        data: {
                            _token: '{!! csrf_token() !!}',
                        },
                    },
                    @if (auth()->user()->user_type_id == 1)
                        columnDefs: [{
                            targets: [8, 13],
                            sortable: false
                        }, ],
                    @else
                        columnDefs: [{
                            targets: [8, 12],
                            sortable: false
                        }, ],
                    @endif
                    columns: [{
                            data: 'id',
                            render: function(data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        {
                            data: 'lender_data.vendor.name',
                            name: 'lender_data.vendor.name',
                            defaultContent: "--"
                        },
                        {
                            data: 'lender_data.lender_name',
                            name: 'lender_data.lender_name',
                            defaultContent: "--"
                        },
                        {
                            data: 'order_id',
                            name: 'order_id',
                            defaultContent: "--"
                        },
                        {
                            data: 'property_address',
                            name: 'property_address',
                            defaultContent: "--"
                        },
                        {
                            data: 'application_no',
                            render: function(data, type, row, meta) {
                                if (row['rush'] == "on") {
                                    return "<span style='color:#C70039;font-weight:bold;' data-bs-toggle='tooltip' data-bs-placement='bottom' title='Rush Order'>" +
                                        row['application_no'] + "</span>"
                                } else {
                                    return "" + row['application_no'] + ""
                                }
                            }
                        },
                        {
                            data: 'loan_number',
                            name: 'loan_number',
                            defaultContent: "--"
                        },
                        {
                            data: 'borrower_name',
                            name: 'borrower_name',
                            defaultContent: "--",
                        },
                        {
                            data: 'service_requests',
                            name: 'service_requests',
                            defaultContent: "--"
                        },
                        {
                            data: 'amount',
                            name: 'amount',
                            defaultContent: "--"
                        },
                        {
                            data: 'status',
                            name: 'status',
                            defaultContent: "--"
                        },
                        {
                            data: 'created_datetime',
                            name: 'created_at',
                            defaultContent: "--"
                        },
                        {
                            data: 'date_time',
                            name: 'updated_at',
                            defaultContent: "--"
                        },
                        @if (auth()->user()->user_type_id == 1)
                        {
                            data: function(row, type, val, meta) {
                                return "<label class='switch'>\<input type='checkbox' value='" +
                                    row['id'] +
                                    "' id='change_deleted_orders_status'>\<span class='slider round' id='change_deleted_orders_status'></span>\</label>"
                            },
                            searchable: false,
                        },
                        @endif
                    ],
                });
            }

            load_deleted_orders_data();

            $(document).on('click', 'input[id="change_deleted_orders_status"]', function(e) {
                var value = $(this).val();
                e.preventDefault()
                $.ajax({
                    url: '/changestatus_order/' + value,
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        var result = response.split('@#!');
                        Swal.fire({
                            position: 'middle',
                            icon: result[1],
                            title: result[2],
                            showConfirmButton: true,
                        });
                        deleted_orders_data();
                    }
                });
            });
        });
    </script>
@endsection