@php
    $configData = Helper::appClasses();
@endphp

@extends('layouts.horizontalLayout')

@section('title', 'Home')

@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'])
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row g-6">
            <div class="col-xl-12">
                <div class="nav-align-top">
                    <ul class="nav nav-pills mb-4" role="tablist">
                        <li class="nav-item">
                            <button type="button" class="nav-link active" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-top-linked-products"
                                aria-controls="navs-pills-top-linked-products" aria-selected="true">Matched
                                Products</button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-top-shopify-products"
                                aria-controls="navs-pills-top-shopify-products" aria-selected="false">Shopify
                                Products</button>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="nav-link" role="tab" data-bs-toggle="tab"
                                data-bs-target="#navs-pills-top-amazon-products"
                                aria-controls="navs-pills-top-amazon-products" aria-selected="false">Amazon
                                Products</button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="navs-pills-top-linked-products" role="tabpanel">
                            <table class="datatables-linked-ajax table">
                                <thead>
                                    <tr>
                                        <th>Shopify Title</th>
                                        <th>Shopify ID</th>
                                        <th>Amazon Title</th>
                                        <th>Amazon ID</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        <div class="tab-pane fade" id="navs-pills-top-shopify-products" role="tabpanel">
                            <table class="datatables-shopify-ajax table">
                                <thead>
                                    <tr>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Product Type</th>
                                        <th>Total Inventory</th>
                                        <th>Total Variants</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        <div class="tab-pane fade" id="navs-pills-top-amazon-products" role="tabpanel">

                            <button class="btn btn-outline-primary" id="fetchAmazonProductsBtn">
                                Fetch Products
                            </button>


                            <table class="datatables-ajax table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Title</th>
                                        <th>SKU</th>
                                        <th>Product Type</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="backDropModal" data-bs-backdrop="static" tabindex="-1">
        <div class="modal-dialog">
            <form class="modal-content" id="createProductForm">
                <div class="modal-header">
                    <h5 class="modal-title" id="backDropModalTitle">Create Shopify Product</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row hidden">
                        <div class="col mb-4">
                            <input type="hidden" id="marketplace_product_id" name="marketplace_product_id"
                                class="form-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-4">
                            <label for="title" class="form-label">Product Title</label>
                            <input type="text" id="title" name="title" class="form-control" placeholder="Product Title" />
                        </div>
                    </div>
                    <div class="row g-4">
                        <div class="col mb-4">
                            <label for="description" class="form-label">Product Description</label>
                            <textarea class="form-control" id="description" rows="3"
                                placeholder="Product Description"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-4">
                            <label for="sku" class="form-label">Product SKU</label>
                            <input type="text" id="sku" name="sku" class="form-control" placeholder="Product SKU" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-4">
                            <label for="type" class="form-label">Product Type</label>
                            <input type="text" id="type" name="type" class="form-control" placeholder="Product Type" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-4">
                            <label for="category" class="form-label">Product Category</label>
                            <input type="text" id="category" name="category" class="form-control"
                                placeholder="Product Category" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-4">
                            <label for="product_price" class="form-label">Product Price</label>
                            <input type="number" id="product_price" name="product_price" class="form-control"
                                placeholder="Product Price" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-4">
                            <label for="product_compareat_price" class="form-label">Product Compare At Price</label>
                            <input type="number" id="product_compareat_price" name="product_compareat_price"
                                class="form-control" placeholder="Product Compare At Price" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" id="createProductSubmitBtn" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('page-script')
    @vite(['resources/assets/js/tables-datatables-basic.js', 'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.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'])

    <script>
        function showCreateProductModal(product) {
            console.log("PRODUCT ", product)
            document.getElementById('marketplace_product_id').value = product.id ?? '';
            document.getElementById('title').value = product.title ?? '';
            document.getElementById('description').value = product.body_html ?? '';
            document.getElementById('sku').value = product.sku ?? '';
            document.getElementById('type').value = product.product_type ?? '';
            document.getElementById('category').value = product.category ?? '';
            document.getElementById('product_price').value = product.price ?? '';
            document.getElementById('product_compareat_price').value = product.price ?? '';
        }

        let dt_ajax = new DataTable(document.querySelector('.datatables-ajax'), {
            processing: true,
            pageLength: 20,
            lengthMenu: [[20, 50, 100], [20, 50, 100]],
            ajax: {
                url: '{{ route('api.amazon.products.list') }}',
                type: 'POST',
                data: function (d) {
                    d._token = '{{ csrf_token() }}';
                    d.search = $('#search').val();
                    d.status = $('#statusFilter').val();
                    d.integration_id = "{{ session('integration_id') }}"
                    d.marketplace_id = "{{ session('marketplace_id') }}"
                }
            },
            columns: [{
                data: 'title'
            },
            {
                data: 'sku'
            },
            {
                data: 'product_type'
            },
            {
                render: (data, type, row) => {
                    const stringAsRow = JSON.stringify(row)
                    return `<button type="button" onclick='showCreateProductModal(${stringAsRow})' class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#backDropModal">Sync</button>`;
                }
            },
            ],
            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>'
                }
            }
        });

        document.getElementById('fetchAmazonProductsBtn').addEventListener('click', function () {
            fetch('{{ route('api.amazon.products.fetch', ['marketplace_id' => session('marketplace_id')]) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    shop: '{{ $sd }}'
                })
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    if (data.status && data.status == 'success') {
                        window.notyf.success(data.message);
                        dt_ajax.ajax.reload();
                    } else {
                        window.notyf.error(data.message);
                        dt_basic.ajax.reload();
                    }
                })
                .catch(() => window.notyf.error('An error occured.'));
        });

        $('#createProductSubmitBtn').click(() => {
            const formData = {
                title: document.getElementById('title').value,
                description_html: document.getElementById('description').value,
                sku: document.getElementById('sku').value,
                product_type: document.getElementById('type').value,
                category: document.getElementById('category').value,
                product_price: document.getElementById('product_price').value,
                product_compareat_price: document.getElementById('product_compareat_price').value,
                shop: '{{ $sd }}',
                marketplace_id: "{{ session('marketplace_id') }}",
                integration_id: "{{ session('integration_id') }}",
                marketplace_product_id: document.getElementById('marketplace_product_id').value,
            };

            fetch('{{ route('api.shopify.products.create') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    if (data.status && data.status == 'success') {
                        window.notyf.success(data.message);
                        dt_ajax.ajax.reload();
                    } else {
                        window.notyf.error(data.message);
                        dt_ajax.ajax.reload();
                    }
                })
                .catch(() => window.notyf.error('An error occured.'));
        });

        const dt_basic_table = document.querySelector('.datatables-shopify-ajax');
        let dt_basic;

        if (dt_basic_table) {
            let tableTitle = document.createElement('h5');
            tableTitle.classList.add('card-title', 'mb-0', 'text-md-start', 'text-center', 'pb-md-0', 'pb-6');
            tableTitle.innerHTML = 'Products';
            dt_basic = new DataTable(dt_basic_table, {
                processing: true,
                serverside: true,
                ajax: {
                    url: '{{ route('api.shopify.products.list') }}',
                    type: 'POST',
                    data: function (d) {
                        d._token = '{{ csrf_token() }}';
                        d.search = $('#search').val();
                        d.status = $('#statusFilter').val();
                        d.shop = '{{ $s }}'
                    }
                },
                columns: [{
                    data: 'title'
                },
                {
                    data: 'description_html'
                },
                {
                    data: 'product_type'
                },
                {
                    data: 'total_inventory'
                },
                {
                    data: 'variants_count'
                }
                ],
                order: [
                    [2, 'desc']
                ],
                layout: {
                    top2Start: {
                        rowClass: 'row card-header flex-column flex-md-row border-bottom mx-0 px-3',
                        features: [tableTitle]
                    },
                    topStart: {
                        rowClass: 'row mx-0 px-3 my-0 justify-content-between border-bottom',
                        features: [{
                            pageLength: {
                                menu: [10, 25, 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>'
                    }
                }
            });
        }

        let dt_ajax = new DataTable(document.querySelector('.datatables-linked-ajax'), {
            processing: true,
            pageLength: 20,
            lengthMenu: [[20, 50, 100], [20, 50, 100]],
            ajax: {
                url: '{{ route('api.amazon.products.matched_list') }}',
                type: 'POST',
                data: function (d) {
                    d._token = '{{ csrf_token() }}';
                    d.search = $('#search').val();
                    d.status = $('#statusFilter').val();
                    d.shop = '{{ $s }}'
                    d.integration_id = "{{ session('integration_id') }}"
                    d.marketplace_id = "{{ session('marketplace_id') }}"
                }
            },
            columns: [
                {
                    data: 'marketplace_product.title'
                },
                {
                    data: 'marketplace_product.product_marketplace_id'
                },
                {
                    data: 'store_product.title',
                },
                {
                    data: 'store_product.product_id',
                }
            ],
            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>'
                }
            }
        });
    </script>
@endsection