@extends('layouts.master')
@section('page_title', 'Woocommerce')
@section('title', 'Woocommerce')
@section('main_item', 'Woocommerce')
@section('sub_item', 'Woocommerce')
@section('content')

    <div class="row col-md-12">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-body">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#woocommerce" role="tab">Woocommerce</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#log" role="tab">Sync Log</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#queue_job_log" role="tab">Queue Job</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#queue_failed_job" role="tab">Queue Failed
                                Job</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">API Settings</a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane active p-3" id="woocommerce" role="tabpanel">
                            <div class="row">
                                @if (!empty($alerts['api_connection_fail']))
                                    <div class="col-md-12">
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true"><i class="mdi mdi-close"></i></span>
                                            </button>
                                            {{ $alerts['api_connection_fail'] }}.
                                        </div>
                                    </div>
                                @elseif (!empty($alerts['api_connection_success']))
                                    <div class="col-md-12">
                                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                                <span aria-hidden="true"><i class="mdi mdi-close"></i></span>
                                            </button>
                                            {{ $alerts['api_connection_success'] }}.
                                        </div>
                                    </div>
                                @endif
                                <div class="col-md-6">
                                    <div class="card card-border">
                                        <div class="card-body">
                                            <h4 class="card-title mt-0">Sync Categories</h4>
                                            @if (!empty($alerts['categoryNotSynced']))
                                                <div id="sync-category-alert"
                                                    class="alert alert-warning alert-dismissible fade show" role="alert">
                                                    <button type="button" class="close" data-dismiss="alert"
                                                        aria-label="Close">
                                                        <span aria-hidden="true"><i class="mdi mdi-close"></i></span>
                                                    </button>
                                                    {{ $alerts['categoryNotSynced'] }}
                                                </div>
                                            @endif
                                            <button id="sync-categories" type="button" class="btn btn-secondary waves-effect waves-light">{{ !empty($alerts['categoryNotSynced']) ? 'Sync' : 'Categories Synced' }}</button>
                                            <div style="margin-top: 10px;">
                                                <button id="reset-sync-categories" type="button" class="btn btn-xs"
                                                    style="background: #e74c3c; color: white;">Reset Categories
                                                    Synced</button>
                                            </div>
                                        </div>
                                        <!--end card -body-->
                                    </div>
                                    <!--end card-->
                                </div>
                                <div class="col-md-6">
                                    <div class="card card-border">
                                        <div class="card-body">
                                            <h4 class="card-title mt-0">Sync Attributes</h4>
                                            @if (!empty($alerts['attributeNotSynced']))
                                                <div id="sync-attribute-alert"
                                                    class="alert alert-warning alert-dismissible fade show" role="alert">
                                                    <button type="button" class="close" data-dismiss="alert"
                                                        aria-label="Close">
                                                        <span aria-hidden="true"><i class="mdi mdi-close"></i></span>
                                                    </button>
                                                    {{ $alerts['attributeNotSynced'] }}
                                                </div>
                                            @endif
                                            <button id="sync-attribute" type="button" class="btn btn-secondary waves-effect waves-light">{{ !empty($alerts['attributeNotSynced']) ? 'Sync' : 'Attributes Synced' }}</button>
                                            <div style="margin-top: 10px;">
                                                <button id="reset-sync-attribute" type="button" class="btn btn-xs"
                                                    style="background: #e74c3c; color: white;">Reset Attributes
                                                    Synced</button>
                                            </div>
                                        </div>
                                        <!--end card -body-->
                                    </div>
                                    <!--end card-->
                                </div>
                                <div class="col-md-6">
                                    <div class="card card-border">
                                        <div class="card-body">
                                            <h4 class="card-title mt-0">Sync Products</h4>
                                            @if (!empty($alerts['productsNotSynced']))
                                                <div id="sync-product-alert"
                                                    class="alert alert-warning alert-dismissible fade show" role="alert">
                                                    <button type="button" class="close" data-dismiss="alert"
                                                        aria-label="Close">
                                                        <span aria-hidden="true"><i class="mdi mdi-close"></i></span>
                                                    </button>
                                                    {{ $alerts['productsNotSynced'] }}
                                                </div>
                                            @endif
                                            <button id="sync-product" type="button"
                                                class="btn btn-secondary waves-effect waves-light">{{ !empty($alerts['productsNotSynced']) ? 'Sync' : 'Products Synced' }}</button>
                                                <div style="margin-top: 10px;">
                                                    <button id="reset-sync-product" type="button" class="btn btn-xs"
                                                        style="background: #e74c3c; color: white;">Reset Products
                                                        Synced</button>
                                                </div>
                                            </div>
                                        <!--end card -body-->
                                    </div>
                                    <!--end card-->
                                </div>
                                <div class="col-md-6">
                                    <div class="card card-border">
                                        <div class="card-body">
                                            <h4 class="card-title mt-0">Sync Orders</h4>
                                            @if (!empty($alerts['salesNotSynced']))
                                                <div id="sync-order-alert"
                                                    class="alert alert-warning alert-dismissible fade show"
                                                    role="alert">
                                                    <button type="button" class="close" data-dismiss="alert"
                                                        aria-label="Close">
                                                        <span aria-hidden="true"><i class="mdi mdi-close"></i></span>
                                                    </button>
                                                    {{ $alerts['salesNotSynced'] }}
                                                </div>
                                            @endif
                                            <button id="sync-order" type="button"
                                                class="btn btn-secondary waves-effect waves-light">{{ !empty($alerts['salesNotSynced']) ? 'Sync' : 'Sales Synced' }}</button>
                                        </div>
                                        <!--end card -body-->
                                    </div>
                                    <!--end card-->
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane p-3" id="log" role="tabpanel">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <table id="sync-logs"
                                                class="table table-striped table-bordered dt-responsive nowrap"
                                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>Date</th>
                                                        <th>Sync Type</th>
                                                        <th>Operation</th>
                                                        <th>Synced By</th>
                                                        <th>Records</th>
                                                        <th>Operation Status</th>
                                                        <th>Product Sku</th>
                                                        <th>Sale Invoice No</th>
                                                        <th>Sale ID</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div> <!-- end row -->
                        </div>
                        <div class="tab-pane p-3" id="queue_job_log" role="tabpanel">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <table id="queue-job-logs"
                                                class="table table-striped table-bordered dt-responsive nowrap"
                                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>Id</th>
                                                        <th>Queue</th>
                                                        <th>Payload</th>
                                                        <th>Attempts</th>
                                                        <th>Reserved at </th>
                                                        <th>Available at</th>
                                                        <th>Created at</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                            <button type="submit" id="queue_command"
                                                class="btn btn-primary px-3 py-2">Start Queue
                                                Server</button>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div> <!-- end row -->
                        </div>
                        <div class="tab-pane p-3" id="queue_failed_job" role="tabpanel">
                            <div class="row">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <table id="queue_failed"
                                                class="table table-striped table-bordered dt-responsive nowrap"
                                                style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                                <thead class="thead-dark">
                                                    <tr>
                                                        <th>Id</th>
                                                        <th>Connection</th>
                                                        <th>Queue</th>
                                                        <th>Payload</th>
                                                        <th>Exception</th>
                                                        <th>Failed at</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div> <!-- end row -->
                        </div>
                        <div class="tab-pane p-3" id="settings" role="tabpanel">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <form action="{{ route('woocommerce.api_settings_store') }}" method="post">
                                                @csrf
                                                <div class="row">
                                                    <div class="col-sm-3">
                                                        <div class="nav flex-column nav-pills text-center"
                                                            id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                                            <a class="nav-link waves-effect waves-light active"
                                                                id="v-pills-home-tab" data-toggle="pill" href="#intro"
                                                                role="tab" aria-controls="v-pills-home"
                                                                aria-selected="true">Introduction</a>
                                                            <a class="nav-link waves-effect waves-light"
                                                                id="v-pills-profile-tab" data-toggle="pill"
                                                                href="#api-settings" role="tab"
                                                                aria-controls="v-pills-profile" aria-selected="false">API
                                                                Settings</a>
                                                            {{-- <a class="nav-link waves-effect waves-light"
                                                            id="v-pills-settings-tab" data-toggle="pill"
                                                            href="#product-sync-settings" role="tab"
                                                            aria-controls="v-pills-settings" aria-selected="false">Product
                                                            Sync Settings</a> --}}
                                                            {{-- <a class="nav-link waves-effect waves-light"
                                                            id="v-pills-settings-tab" data-toggle="pill"
                                                            href="#webhook-settings" role="tab"
                                                            aria-controls="v-pills-settings" aria-selected="false">Webhook
                                                            Settings</a> --}}
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-9">
                                                        <div class="tab-content mo-mt-2" id="v-pills-tabContent">
                                                            <div class="tab-pane fade active show" id="intro"
                                                                role="tabpanel" aria-labelledby="v-pills-home-tab">
                                                                <ul class="mb-0">
                                                                    <li>Do not refresh or leave the page while synchronizing
                                                                    </li>
                                                                    <li>Timezone of COM should be same as timezone of the
                                                                        Woocommerce App</li>
                                                                    <li>Get WooCommerce API details from, <code>WooCommerce
                                                                            ->
                                                                            Settings -> Advance -> REST API </code>. Enter
                                                                        description, select User & Provide
                                                                        <code>Read/Write</code> Permission
                                                                        <a href="https://docs.woocommerce.com/document/woocommerce-rest-api/#section-3"
                                                                            target="_blank">Click Here</a> for more info.
                                                                    </li>
                                                                    <li>Change the permalinks option to <code>"Post
                                                                            Name"</code>
                                                                        in WordPress permalink option.</li>
                                                                    <li>To <mark>Auto Sync</mark> categories, products and
                                                                        orders you must setup a cron job with this
                                                                        command:<br />
                                                                        <code>option</code>
                                                                        <ul>
                                                                            <li>Set it in cron jobs tab in cpanel or
                                                                                directadmin
                                                                                or similar panel.</li>
                                                                            <li>Or edit crontab if using cloud/dedicated
                                                                                hosting.</li>
                                                                            <li>Or contact hosting for help with cron job
                                                                                settings.</li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="tab-pane fade" id="api-settings" role="tabpanel"
                                                                aria-labelledby="v-pills-profile-tab">
                                                                <div class="row col-md-12">
                                                                    <div class="col-md-12">
                                                                        <div class="form-group">
                                                                            <label for="exampleInputEmail1">Woocommerce App
                                                                                URL</label>
                                                                            <input type="text" class="form-control"
                                                                                required id="exampleInputEmail1"
                                                                                name="woocommerce_app_url"
                                                                                value="{{ !empty($data['woocommerceApiSettings']) ? $data['woocommerceApiSettings']->woocommerce_app_url : '' }}"
                                                                                aria-describedby="emailHelp"
                                                                                placeholder="App Url">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-12">
                                                                        <div class="form-group">
                                                                            <label for="exampleInputEmail1">Woocommerce
                                                                                Consumer
                                                                                Key</label>
                                                                            <input type="text" class="form-control"
                                                                                required id="exampleInputEmail1"
                                                                                name="woocommerce_consumer_key"
                                                                                value="{{ !empty($data['woocommerceApiSettings']) ? $data['woocommerceApiSettings']->woocommerce_consumer_key : '' }}"
                                                                                aria-describedby="emailHelp"
                                                                                placeholder="Consumer Key">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-12">
                                                                        <div class="form-group">
                                                                            <label for="exampleInputEmail1">Woocommerce
                                                                                Consumer
                                                                                Secret</label>
                                                                            <input type="text" class="form-control"
                                                                                required id="exampleInputEmail1"
                                                                                name="woocommerce_consumer_secret"
                                                                                value="{{ !empty($data['woocommerceApiSettings']) ? $data['woocommerceApiSettings']->woocommerce_consumer_secret : '' }}"
                                                                                aria-describedby="emailHelp"
                                                                                placeholder="Consumer Secret">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {{-- <div class="tab-pane fade" id="product-sync-settings"
                                                            role="tabpanel" aria-labelledby="v-pills-settings-tab">
                                                            <p class="text-muted mb-0">
                                                                Food truck fixie locavore, accusamus mcsweeney's marfa nulla
                                                                single-origin
                                                                coffee squid. Exercitation commodo enim craft beer mlkshk +1
                                                                labore velit, blog sartorial PBR leggings next
                                                                level wes anderson artisan four loko farm-to-table craft
                                                                beer twee. Qui photo
                                                                booth letterpress, commodo enim craft beer mlkshk aliquip
                                                                jean shorts ullamco
                                                                ad vinyl cillum PBR.
                                                            </p>
                                                        </div> --}}
                                                            {{-- <div class="tab-pane fade" id="webhook-settings" role="tabpanel"
                                                            aria-labelledby="v-pills-settings-tab">
                                                            <div class="row col-md-12">
                                                                <div class="col-md-12">
                                                                    <h4>Order Created</h4>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">Webhook
                                                                            Secret</label>
                                                                        <input type="email" class="form-control"
                                                                            id="exampleInputEmail1"
                                                                            aria-describedby="emailHelp"
                                                                            placeholder="Webhook Secret">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">Webhook Delivery
                                                                            URL</label>
                                                                        <input type="email" disabled class="form-control"
                                                                            id="exampleInputEmail1"
                                                                            value="http://localhost:8001/webhook/order-created/1"
                                                                            aria-describedby="emailHelp"
                                                                            placeholder="Webhook Secret">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <h4>Order Updated</h4>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">Webhook
                                                                            Secret</label>
                                                                        <input type="email" class="form-control"
                                                                            id="exampleInputEmail1"
                                                                            aria-describedby="emailHelp"
                                                                            placeholder="Webhook Secret">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">Webhook Delivery
                                                                            URL</label>
                                                                        <input type="email" disabled class="form-control"
                                                                            id="exampleInputEmail1"
                                                                            value="http://localhost:8001/webhook/order-updated/1"
                                                                            aria-describedby="emailHelp"
                                                                            placeholder="Webhook Secret">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-12">
                                                                    <h4>Order Deleted</h4>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">Webhook
                                                                            Secret</label>
                                                                        <input type="email" class="form-control"
                                                                            id="exampleInputEmail1"
                                                                            aria-describedby="emailHelp"
                                                                            placeholder="Webhook Secret">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label for="exampleInputEmail1">Webhook Delivery
                                                                            URL</label>
                                                                        <input type="email" disabled class="form-control"
                                                                            id="exampleInputEmail1"
                                                                            value="http://localhost:8001/webhook/order-deleted/1"
                                                                            aria-describedby="emailHelp"
                                                                            placeholder="Webhook Secret">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div> --}}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row col-md-12">
                                                    <button type="submit"
                                                        class="btn btn-primary waves-effect waves-light">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                        <!--end card-body-->
                                    </div>
                                    <!--end card-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end card-body-->
            </div>
            <!--end card-->
        </div>
        <!--end col-->
    </div>
@endsection
@section('scripts')
    <script>
        var table = $('#sync-logs').DataTable({
            dom: 'Blfrtip',
            buttons: ['copy', 'print', 'excel', 'pdf', 'colvis'],
            processing: false,
            serverSide: true,
            ajax: "{{ route('woocommerce.sync_logs') }}",
            columnDefs: [{
                "targets": [4],
                "orderable": false,
                "searchable": false,

            }],
            "order": [
                [0, "desc"]
            ],
            columns: [{
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'sync_type',
                    name: 'sync_type'
                },
                {
                    data: 'operation_type',
                    name: 'operation_type'
                },
                {
                    data: 'synced_by',
                    name: 'synced_by'
                },
                {
                    data: 'records',
                    name: 'records'
                },
                {
                    data: 'operation_status',
                    name: 'operation_status'
                },
                {
                    data: 'product_sku',
                    name: 'product_sku'
                },
                {
                    data: 'sale_invoice_no',
                    name: 'sale_invoice_no'
                },
                {
                    data: 'sale_id',
                    name: 'sale_id'
                },
            ]
        });
        var table = $('#queue-job-logs').DataTable({
            dom: 'Blfrtip',
            buttons: ['copy', 'print', 'excel', 'pdf', 'colvis'],
            processing: false,
            serverSide: true,
            ajax: "{{ route('woocommerce.queue_job_logs') }}",
            columnDefs: [{
                "targets": [4],
                "orderable": false,
                "searchable": false,
            }],
            "order": [
                [0, "desc"]
            ],
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'queue',
                    name: 'queue'
                },
                {
                    data: 'payload',
                    name: 'payload'
                },
                {
                    data: 'attempts',
                    name: 'attempts'
                },
                {
                    data: 'reserved_at',
                    name: 'reserved_at'
                },
                {
                    data: 'available_at',
                    name: 'available_at'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
            ]
        });
        var table = $('#queue_failed').DataTable({
            dom: 'Blfrtip',
            buttons: ['copy', 'print', 'excel', 'pdf', 'colvis'],
            processing: false,
            serverSide: true,
            ajax: "{{ route('woocommerce.queue_failed_job') }}",
            columnDefs: [{
                "targets": [4],
                "orderable": false,
                "searchable": false,
            }],
            "order": [
                [0, "desc"]
            ],
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'connection',
                    name: 'connection'
                },
                {
                    data: 'queue',
                    name: 'queue'
                },
                {
                    data: 'payload',
                    name: 'payload'
                },
                {
                    data: 'exception',
                    name: 'exception'
                },
                {
                    data: 'failed_at',
                    name: 'failed_at'
                },
            ]
        });
        $(document).on('click', '#sync-categories, #sync-attribute, #sync-product, #sync-order', function() {
            let button = $(this);
            let butonType = button.attr('id');
            let defaultButtonText = '';
            let btnText = '';
            let url = '';
            if (butonType == 'sync-categories') {
                defaultButtonText = 'Categories Syncing...';
                btnText = 'Categories Synced';
                url = "{{ route('woocommerce.sync_categories') }}";
                $('#sync-attribute').attr('disabled', true);
                $('#sync-product').attr('disabled', true);
                $('#sync-order').attr('disabled', true);
            } else if (butonType === 'sync-attribute') {
                defaultButtonText = 'Attributes Syncing...';
                btnText = 'Attributes Synced';
                url = "{{ route('woocommerce.sync_attributes') }}";
                $('#sync-categories').attr('disabled', true);
                $('#sync-product').attr('disabled', true);
                $('#sync-order').attr('disabled', true);
            } else if (butonType === 'sync-product') {
                defaultButtonText = 'Products Syncing...';
                btnText = 'Products Synced';
                url = "{{ route('woocommerce.sync_products') }}";
                $('#sync-categories').attr('disabled', true);
                $('#sync-attribute').attr('disabled', true);
                $('#sync-order').attr('disabled', true);
            } else {
                defaultButtonText = 'Orders Syncing...';
                btnText = 'Order Synced';
                url = "{{ route('woocommerce.sync_orders') }}";
                $('#sync-categories').attr('disabled', true);
                $('#sync-attribute').attr('disabled', true);
                $('#sync-product').attr('disabled', true);
            }
            let syncText =
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' +
                defaultButtonText;
            button.html(syncText);
            button.attr('disabled', true);
            woocommerceSyncProcess(url, button, btnText, butonType);
        });

        function woocommerceSyncProcess(url, button, btnText, butonType) {
            $.ajax({
                url: url,
                success: function(response) {
                    console.log(response.text);
                    table.ajax.reload();
                    let heading = 'Success';
                    let icon = 'success';
                    let bgColor = '#1ecab8';
                    if (response.success == '0') {
                        heading = 'Error';
                        icon = 'error';
                        bgColor = '#f1646c';
                    }
                    $.toast({
                        heading: heading,
                        text: response.text,
                        position: 'top-right',
                        bgColor: bgColor,
                        icon: icon,
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                    button.html(btnText);
                    button.attr('disabled', false);
                    if (butonType == 'sync-categories') {
                        $('#sync-category-alert').attr('hidden', true);
                        $('#sync-attribute').attr('disabled', false);
                        $('#sync-product').attr('disabled', false);
                        $('#sync-order').attr('disabled', false);
                    } else if (butonType === 'sync-attribute') {
                        $('#sync-attribute-alert').attr('hidden', true);
                        $('#sync-categories').attr('disabled', false);
                        $('#sync-product').attr('disabled', false);
                        $('#sync-order').attr('disabled', false);
                    } else if (butonType === 'sync-product') {
                        $('#sync-product-alert').attr('hidden', true);
                        $('#sync-categories').attr('disabled', false);
                        $('#sync-attribute').attr('disabled', false);
                        $('#sync-order').attr('disabled', false);
                    } else {
                        $('#sync-order-alert').attr('hidden', true);
                        $('#sync-categories').attr('disabled', false);
                        $('#sync-attribute').attr('disabled', false);
                        $('#sync-product').attr('disabled', false);
                    }
                }
            });
        }
        $('#queue_command').click(function() {
            Swal.fire(
                'Massage',
                'If you are facing any issue while running this command, Please contact support for the assistance',
                'warning'
            )
            $.ajax({
                method: 'GET',
                url: '/run-queue-server',
                data: {},
                success: function(response) {
                    if (response.success == 1) {
                        $.toast({
                            heading: 'Success',
                            text: response.msg,
                            position: 'top-right',
                            bgColor: '#1ecab8',
                            icon: 'success',
                            showHideTransition: 'fade',
                            hideAfter: 6500,
                            loaderBg: '#ecf0f1'
                        })
                        document.location.reload();
                    } else {
                        $.toast({
                            heading: 'Error',
                            text: response.msg,
                            position: 'top-right',
                            bgColor: '#f1646c',
                            icon: 'error',
                            showHideTransition: 'fade',
                            hideAfter: 6500,
                            loaderBg: '#ecf0f1'
                        })
                    }
                }
            });
        });

        $(document).on('click', '#reset-sync-categories',
            function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "All synced categories will be reset!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, reset it!'
                }).then((result) => {
                    if (result.value) {
                        let button = $(this);
                        let butonType = button.attr('id');
                        let defaultButtonText = '';
                        let btnText = '';
                        let url = '';
                        if (butonType == 'reset-sync-categories') {
                            defaultButtonText = 'Categories Syncing...';
                            btnText = 'Reset Categories Synced';
                            url = "{{ route('woocommerce.categories-reset') }}";
                        }
                        let syncText =
                            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' +
                            defaultButtonText;
                        button.html(syncText);
                        button.attr('disabled', true);
                        resetwoocommerceSyncProcess(url, button, btnText, butonType);
                    }
                });
            });
        $(document).on('click', '#reset-sync-attribute',
            function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "All synced Attribute will be reset!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, reset it!'
                }).then((result) => {
                    if (result.value) {
                        let button = $(this);
                        let butonType = button.attr('id');
                        let defaultButtonText = '';
                        let btnText = '';
                        let url = '';
                        if (butonType === 'reset-sync-attribute') {
                            defaultButtonText = 'Attributes Syncing...';
                            btnText = 'Reset Attributes Synced';
                            url = "{{ route('woocommerce.reset-sync-attribute') }}";
                        }
                        let syncText =
                            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' +
                            defaultButtonText;
                        button.html(syncText);
                        button.attr('disabled', true);
                        resetwoocommerceSyncProcess(url, button, btnText, butonType);
                    }
                });
            });
        $(document).on('click', '#reset-sync-product',
            function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "All synced Product will be reset!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, reset it!'
                }).then((result) => {
                    if (result.value) {
                        let button = $(this);
                        let butonType = button.attr('id');
                        let defaultButtonText = '';
                        let btnText = '';
                        let url = '';
                        if (butonType === 'reset-sync-product') {
                            defaultButtonText = 'Products Syncing...';
                            btnText = 'Products Synced';
                            url = "{{ route('woocommerce.reset-sync-product') }}";
                        }
                        let syncText =
                            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> ' +
                            defaultButtonText;
                        button.html(syncText);
                        button.attr('disabled', true);
                        resetwoocommerceSyncProcess(url, button, btnText, butonType);
                    }
                });
            });

            function resetwoocommerceSyncProcess(url, button, btnText, butonType) {
            $.ajax({
                url: url,
                success: function(response) {
                    console.log(response.text);
                    table.ajax.reload();
                    let heading = 'Success';
                    let icon = 'success';
                    let bgColor = '#1ecab8';
                    if (response.success == '0') {
                        heading = 'Error';
                        icon = 'error';
                        bgColor = '#f1646c';
                    }
                    $.toast({
                        heading: heading,
                        text: response.text,
                        position: 'top-right',
                        bgColor: bgColor,
                        icon: icon,
                        showHideTransition: 'fade',
                        loaderBg: '#ecf0f1'
                    });
                    button.html(btnText);
                    button.attr('disabled', false);
                }
            });
        }
    </script>
@endsection