@extends('layouts/horizontalLayout')

@section('title', 'Orders')

<!-- Vendor Styles -->
@section('page-style')
    @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss'])
    @vite(['resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss'])
    @vite(['resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss'])
    @vite(['resources/assets/vendor/libs/datatables-rowgroup-bs5/rowgroup.bootstrap5.scss'])
    @vite(['resources/assets/vendor/libs/flatpickr/flatpickr.scss', 'resources/assets/vendor/libs/@form-validation/form-validation.scss'])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/js/ui-popover.js',
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/flatpickr/flatpickr.js',
        // 'resources/assets/vendor/libs/@form-validation/popular.js',
        // 'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        // 'resources/assets/vendor/libs/@form-validation/auto-focus.js'
    ])
@endsection

@section('content')
    @if (!empty($storeRequests))
        @include('partials.store-requests-progress-alerts', [
            'storeRequestForAlerts' => $storeRequests,
        ])
    @endif

    <div class="container-fluid mt-4">
        <div class="row g-6">
            {{-- <div class="col-12 card">
                <div class="py-4 gap-4">

                    <button class="btn btn-sm btn-outline-primary" id="importOrders">
                        Import Orders
                    </button>

                    <button class="btn btn-sm btn-outline-primary" id="fetchAmazonOrdersBtn">
                        Import From AZ to DB
                    </button>

                    <button class="btn btn-sm btn-outline-primary" id="fetchAmazonOrderUpdatesBtn">
                        Import Updates From AZ to DB
                    </button>

                    <button class="btn btn-sm btn-outline-primary" id="syncAmazonOrdersBtn">
                        Send Orders to SP
                    </button>

                    <button class="btn btn-sm btn-outline-primary" id="fetchAmazonOrderRefundsBtn">
                        Import Refund From AZ to DB
                    </button>

                    <button class="btn btn-sm btn-outline-primary" id="syncAmazonOrderRefundsBtn">
                        Send Refund to SP
                    </button>
                </div>
            </div> --}}

            <div class="col-12 card px-0">
                <div class="">
                    <div class="row px-6 pt-4">
                        <!-- <div class="col-12 text-end">
                            <button class="btn btn-outline-primary" id="importOrders">
                                Import Orders
                            </button>
                        </div> -->

                        <div class="mt-2 col-12">
                            <div class="row g-3">
                                <div class="col-12 col-sm-6 col-lg-3">
                                    <label for="marketplace" class="form-label">Marketplace</label>
                                    <select id="marketplace" class="select2 form-select" data-allow-clear="false">
                                        @foreach ($marketplaces as $marketplace)
                                            <option value="{{ $marketplace->id }}"
                                                selected="{{ $marketplace->id == $marketplaceId }}">
                                                {{ $marketplace->location_name }} ({{ $marketplace->location_id }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-12 col-sm-6 col-lg-2">
                                    <label for="flatpickr-range" class="form-label">Range Picker</label>
                                    <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD"
                                        id="flatpickr-range" />
                                </div>

                                <div class="col-12 col-sm-6 col-lg-2">
                                    <label for="marketplace_order_status" class="form-label">Order Status</label>
                                    <select id="marketplace_order_status" class="select2 form-select"
                                        data-allow-clear="true">
                                        <option value=""></option>
                                        @foreach ($marketplaceOrderStatuses as $orderStatus)
                                            <option value="{{ $orderStatus['value'] }}">{{ $orderStatus['label'] }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-12 col-sm-6 col-lg-2">
                                    <label for="marketplace_order_sync_status" class="form-label">Sync Status</label>
                                    <select id="marketplace_order_sync_status" class="select2 form-select"
                                        data-allow-clear="true">
                                        <option value=""></option>
                                        @foreach ($marketplaceOrderSyncStatuses as $orderSyncStatus)
                                            <option value="{{ $orderSyncStatus->value }}">
                                                {{ $orderSyncStatus->formatDisplaySyncStatus() }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-12 col-sm-6 col-lg-3 text-end">
                                    <button class="btn btn-outline-primary mt-4" id="importOrders">
                                        Import Orders
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-datatable text-nowrap">
                    <table class="order-datatables-ajax table mb-0">
                        <thead class="text-nowrap">
                            <tr>
                                <th class="text-capitalize">Action</th>
                                <th class="text-capitalize">Order Date</th>
                                <th class="text-capitalize">#ID</th>
                                <th class="text-capitalize">Order Status</th>
                                <th class="text-capitalize">Customer</th>
                                <th class="text-capitalize">Marketplace</th>
                                <th class="text-capitalize">Total</th>
                                <th class="text-capitalize">Order ID</th>
                                <th class="text-capitalize">Financial Status</th>
                                <th class="text-capitalize">Fulfillment Status</th>
                                <th class="text-capitalize">Sync Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script type="module">
        const dt_basic_table = document.querySelector('.order-datatables-ajax');
        let dt_basic;

        const filter = {
            fromDate: new Date(window.moment().subtract(1, 'month')),
            toDate: new Date(),
        }

        if (dt_basic_table) {
            dt_basic = new DataTable(dt_basic_table, {
                processing: true,
                serverSide: true,
                pageLength: 20,
                lengthMenu: [
                    [20, 50, 100],
                    [20, 50, 100]
                ],
                ajax: {
                    url: '{{ route('api.amazon.orders.list') }}',
                    type: 'POST',
                    data: function (d) {
                        d._token = '{{ csrf_token() }}';
                        d.search = d.search['value'];

                        d.marketplace_order_status = $('#marketplace_order_status').val();
                        d.marketplace_order_sync_status = $('#marketplace_order_sync_status').val();

                        d.orderByColumn = d.order[0]['name'];
                        d.orderByDirection = d.order[0]['dir'];

                        d.fromDate = window.moment(filter.fromDate).format()
                        d.toDate = window.moment(filter.toDate).format()

                        d.status = $('#statusFilter').val();
                        d.shop = '{{ $sd }}';
                        d.marketplace_id = $('#marketplace').val();
                        // d.marketplace_id = '{{ $marketplaceId }}';
                    }
                },
                columns: [{
                    render: (data, type, row) => {
                        let buttons = '';

                        if (row.api_error_log) {
                            const errorMessage = row.api_error_log.error_message

                            buttons += `<div class="col mr-1 btn-text-danger">
                                            <button type="button" class="btn btn-text-danger" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-info" data-bs-placement="right" title="${errorMessage}"><span class="icon-base ti tabler-exclamation-circle icon-18px"></span></button>
                                        </div>`
                        } if (row.has_unmatched_skus > 0) {
                            // const stringAsRow = JSON.stringify(row)

                            const createUnlinkProductRow = { ...row, api_error_log: null }
                            const stringAsRow = JSON.stringify(createUnlinkProductRow)
                            buttons +=
                                `<button type="button" onclick='createUnlinkedProduct(${stringAsRow})' class="btn btn-sm btn-outline-primary">Create Unlink Products</button>`;
                        }

                        if (buttons == '') {
                            buttons += `-`;
                        }

                        return buttons
                    }
                },
                {
                    data: 'order_date',
                    // width: '200px' // Order Date
                },
                {
                    name: 'marketplace_order_id',
                    data: 'marketplace_order_id',
                    // width: '150px' // Marketplace Order ID
                },
                {
                    name: 'marketplace_order_status',
                    data: 'marketplace_order_status',
                    // width: '130px' // Marketplace Order Status
                },
                {
                    name: 'customer',
                    data: 'customer',
                    // width: '150px' // Customer
                },
                {
                    name: 'marketplace',
                    data: 'marketplace',
                    // width: '120px' // Marketplace
                },
                {
                    name: 'total',
                    data: 'total',
                    // width: '80px',
                },
                {
                    name: 'store_order_number',
                    data: '',
                    // width: '130px' // Store Order Number
                },
                {
                    name: 'store_financial_status',
                    data: 'store_financial_status',
                    // width: '130px' // Store Financial Status
                },
                {
                    name: 'store_fulfilment_status',
                    data: 'store_fulfilment_status',
                    // width: '130px' // Store Fulfillment Status
                },
                {
                    name: 'sync_status',
                    data: 'sync_status',
                    // width: '120px' // Order Sync Status
                },
                ],
                columnDefs: [{
                    targets: -4,
                    title: 'Order ID',
                    render: function (data, type, full, meta) {
                        return (
                            '<a target="_blank" href="https://{{ $sd }}/admin/orders/' +
                            full.store_order_number + '"><ins>' + full.store_order_number +
                            '</ins></a>');
                    }
                }],
                order: [
                    [1, 'desc']
                ],
                layout: {
                    topStart: {
                        rowClass: 'row mx-3 my-0 justify-content-between',
                        features: [{
                            pageLength: {
                                menu: [20, 50, 100],
                                text: 'Show_MENU_entries'
                            }
                        }]
                    },
                    topEnd: {
                        search: {
                            placeholder: ''
                        }
                    },
                    bottomStart: {
                        rowClass: 'row mx-3 justify-content-between',
                        features: ['info']
                    },
                    bottomEnd: 'paging'
                },
                language: {
                    paginate: {
                        next: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
                        previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
                        first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
                        last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
                    }
                },
                drawCallback: function () {
                    // $('[data-bs-toggle="popover"]').popover();
                    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                        return new bootstrap.Tooltip(tooltipTriggerEl)
                    });
                }
            });

            $('.select2').select2({
                // allClear: false,
            }).on('select2:select', function (e) {
                var data = e.params.data;
                console.log(data);
                dt_basic.ajax.reload();
            }).on('select2:clear', function (e) {
                var data = e.params.data;
                console.log(data);
                dt_basic.ajax.reload();
            });

            const dateRangePicker = $('#flatpickr-range').flatpickr({
                mode: 'range',
                static: true,
                defaultDate: [
                    filter.toDate,
                    filter.fromDate,
                ],
                onChange: function (selectedDates, dateStr, instance) {
                    if (selectedDates.length > 1) {
                        const fromDate = selectedDates[0]
                        const toDate = selectedDates[1]

                        filter.fromDate = window.moment(fromDate).format()
                        filter.toDate = window.moment(toDate).format()

                        dt_basic.ajax.reload();
                    }
                },
            });
        }

        document.getElementById('importOrders').addEventListener('click', function () {
            $('#importOrders').prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> &nbsp; Fetching...'
            );

            fetch('{{ route('api.shopify.requests.store') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    shop: '{{ $sd }}',
                    marketplace_id: '{{ $marketplaceId }}',
                    type: "{{ $storeRequestAmazonFetchOrdersType }}"
                })
            })
                .then(response => {
                    if (!response.ok) {
                        if (response.status === 500) {
                            throw new Error('Internal server error occurred');
                        }
                        return response.json().then(err => {
                            throw new Error(err.message || 'Request failed');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log(data);
                    if (data.status && data.status == 'success') {
                        window.notyf.success(data.message);
                        dt_basic.ajax.reload();
                    } else {
                        window.notyf.error(data.message);
                        dt_basic.ajax.reload();
                    }
                })
                .catch(() => window.notyf.error('An error occurred while importing Amazon orders in to Shopify. Please retry or check your configuration. If the issue continues, contact our support team.'))
                .finally(() => {
                    $('#importOrders').prop('disabled', false).html('Import Orders');
                });
        })

        window.createUnlinkedProduct = function createUnlinkedProduct(order) {
            let ajaxData = {
                order_id: order.order_id,
                marketplace_id: '{{ $marketplaceId }}',
                shop: '{{ $sd }}'
            };

            fetch('{{ route('api.amazon.orders.createUnlinkedProduct', []) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(ajaxData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status && data.status == 'success') {
                        window.notyf.success(data.message);
                        dt_basic.ajax.reload();
                    } else {
                        window.notyf.error(data.message);
                        dt_basic.ajax.reload();
                    }
                })
                .catch(() => window.notyf.error('An error occurred while unlinking Amazon product with Shopify product. Please retry or check your configuration. If the issue continues, contact our support team.'));
        }
    </script>
@endsection