@extends('layouts.app')
@section('title', __('sync::lang.sync'))

@section('content')

    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('sync::lang.sync')

        </h1>
        <!-- <ol class="breadcrumb">
                                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                                <li class="active">Here</li>
                            </ol> -->
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                @component('components.widget')
                    @slot('title')
                        {{ __('sync::lang.last_time_synced_quantities') }}
                    @endslot
                    <h3 class="text-muted">
                        {{ $last_time }}
                    </h3>
                @endcomponent
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                @component('components.widget')
                    <h3 class="{{ $active ? 'text-success' : 'text-danger' }}">
                        {{ $active ? __('lang_v1.active') : __('lang_v1.inactive') }}
                        @if (!empty($store_name))
                            - {{ $store_name }}
                        @endif
                    </h3>
                @endcomponent
            </div>
        </div>
         <div class="row">
            <div class="col-xs-12">
               @component('components.filters', ['title' => __('report.filters')])
                  <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('category', __('product.category') . ':') !!}
                        {!! Form::select('category_id', $categories, null, [
                            'class' => 'form-control select2',
                            'style' => 'width:100%',
                            'id' => 'category_id',
                             'placeholder' => __('lang_v1.all'),
                        ]) !!}
                    </div>
                 </div>
                  <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('sub_category_id', __('product.sub_category') . ':') !!}
                            {!! Form::select('sub_category_id',[], null, [
                                'class' => 'form-control select2',
                                'style' => 'width:100%',
                                'id' => 'sub_category_id',
                                'placeholder' => __('lang_v1.all'),
                            ]) !!}
                        </div>
                    </div>
                  <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('brand', __('product.brand') . ':') !!}
                        {!! Form::select('brand_id', $brands, null, [
                            'class' => 'form-control select2',
                            'style' => 'width:100%',
                            'id' => 'brand_id',
                             'placeholder' => __('lang_v1.all'),
                        ]) !!}
                    </div>
                 </div>
                  <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('status', __('product.status') . ':') !!}
                        {!! Form::select('status', $statuses, null, [
                            'class' => 'form-control select2',
                            'style' => 'width:100%',
                            'id' => 'status_id',
                             'placeholder' => __('lang_v1.all'),
                        ]) !!}
                    </div>
                 </div>
               @endcomponent
            </div>
        </div>
        @component('components.widget', ['class' => 'box-primary', 'title' => __('sync::lang.products_sync')])
            @can('sync.create')
                @slot('tool')
                    <div class="box-tools">

                        <a href="/sync/create" class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl "
                            style="background-color: @if (!empty(session('business.theme_color'))) {{ session('business.theme_color') }} @else{{ '#3498db' }} @endif;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                                <path stroke="none" d="M0 0h24V0H0z" fill="none" />
                                <path d="M12 5l0 14" />
                                <path d="M5 12l14 0" />
                            </svg>
                            @lang('messages.add')
                        </a>
                    </div>
                @endslot
            @endcan
            @can('sync.view')
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="sync_table">
                        <thead>
                            <tr>
                                <th>

                                    <input type="checkbox" id="check_all">
                                </th>
                                <th>{{ __('lang_v1.product_image') }} </th>
                                <th>@lang('sale.product')</th>
                                <th>@lang('product.sku')</th>
                                <th>@lang('product.brand')</th>
                                <th>@lang('product.category')</th>
                                <th>@lang('sync::lang.syncing_at')</th>
                                <th>@lang('messages.action')</th>

                            </tr>
                        </thead>
                        <tfoot>

                            <tr class="bg-gray font-17 footer-total text-center">
                                <td><button type="button" class="btn btn-success   activate-product"
                                        data-type="add">@lang('lang_v1.activate')</button></td>
                                <td><button type="button" class="btn btn-danger  deactivate-product"
                                        data-type="add">@lang('lang_v1.deactivate')</button></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>.
                </div>
            @endcan
        @endcomponent



        <!-- /.content -->
    @stop
    @section('javascript')



        <script type="text/javascript">
            $(document).ready(function() {
                var sync_table = $('#sync_table').DataTable({
                    processing: true,
                    serverSide: true,
                    fixedHeader: false,
                    "ajax": {
                    "url": "/sync",
                    "data": function(d) {
                        d.category_id = $('#category_id').val();
                        d.sub_category_id = $('#sub_category_id').val();
                        d.brand_id = $('#brand_id').val();
                        d.status = $('#status_id').val(); 
                        d = __datatable_ajax_callback(d);
                    }},

                    "columns": [{
                            data: 'checkbox',
                            orderable: false,
                            searchable: false

                        }, {

                            data: 'image',
                            "orderable": false,
                            "searchable": false

                        }, {
                            "data": "name"
                        },
                        {
                            "data": "sku"
                        },
                        {
                            "data": "brand_name",
                            "name": "brands.name"
                        },
                        {
                            "data": "category_name",
                            "name": "categories.name"
                        },
                        {
                            "data": "syncing_at"
                        },
                        {
                            "data": "action",
                            "orderable": false,
                            "searchable": false
                        }
                    ]

                });


                $(document).on('click', '.activate-deactivate', function(e) {
                    e.preventDefault();

                    var button = $(this);
                    var url = button.data('href');

                    $.ajax({
                        url: url,
                        type: 'GET',

                        beforeSend: function() {
                            button.prop('disabled', true);
                        },
                        success: function(response) {

                            if (response.success) {
                                toastr.success(response.msg);
                            } else {
                                toastr.error(response.msg ?? 'Something went wrong');
                            }

                            // ✅ Reload table without resetting pagination
                            sync_table.ajax.reload(null, false);
                        },
                        error: function() {
                            toastr.error('Request failed');
                        },
                        complete: function() {
                            button.prop('disabled', false);
                        }
                    });
                });
                $('#check_all').on('change', function() {
                    var isChecked = $(this).is(':checked');
                    $('#sync_table tbody input[type="checkbox"]').prop('checked', isChecked);
                });
                $('#sync_table tbody').on('click', 'input.row_checkbox', function(e) {
                    e.stopPropagation();
                });

                $('.deactivate-product').on('click', function() {


                    const selectedRows = [];
                    const newStatus = 0;

                    $('#sync_table tbody input.row_checkbox:checked').each(function() {
                        selectedRows.push($(this).val());
                    });
                    if (selectedRows.length > 0) {

                        $.ajax({
                            url: '/sync/products/status', // Your endpoint to update status

                            method: 'POST',
                            data: {
                                'product_ids[]': selectedRows,

                                status: newStatus,
                                _token: '{{ csrf_token() }}'
                            },
                            traditional: true,
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    sync_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    } else {
                        toastr.error('@lang('lang_v1.select_one_row')');

                    }
                });
                $('.activate-product').on('click', function() {


                    const selectedRows = [];
                    const newStatus = 1;

                    $('#sync_table tbody input.row_checkbox:checked').each(function() {
                        selectedRows.push($(this).val());
                    });
                    if (selectedRows.length > 0) {

                        $.ajax({
                            url: '/sync/products/status', // Your endpoint to update status

                            method: 'POST',
                            data: {
                                'product_ids[]': selectedRows,

                                status: newStatus,
                                _token: '{{ csrf_token() }}'
                            },
                            traditional: true,
                            success: function(result) {
                                if (result.success == true) {
                                    toastr.success(result.msg);
                                    sync_table.ajax.reload();
                                } else {
                                    toastr.error(result.msg);
                                }
                            }
                        });
                    } else {
                        toastr.error('@lang('lang_v1.select_one_row')');

                    }
                });
                $(document).on('change','#category_id,#sub_category_id,#brand_id,#status_id',
                    function() {
                        sync_table.ajax.reload();
                    }
                );
                    
            });
        </script>

    @endsection