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

@section('content')
    <section class="content">
        <div class="row">
            <div class="row">
                <div class="col-md-12">
                    @component('components.filters', ['title' => __('report.filters')])
                        {!! Form::open([
                            'url' => action('\Modules\ProductCatalogue\Http\Controllers\ProductCatalogueController@generateQr'),
                            'method' => 'get',
                            'id' => 'product_purchase_report_form',
                        ]) !!}
                        <div class="col-md-3">
                            <div class="form-group">
                                {!! Form::label('search_status', __('productcatalogue::lang.order_status') . ':') !!}
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-search"></i>
                                    </span>
                                    {!! Form::select(
                                        'search_status',
                                        [
                                            'order' => __('productcatalogue::lang.order'),
                                            'accepted' => __('productcatalogue::lang.confirmed'),
                                            'rejected' => __('productcatalogue::lang.rejected'),
                                        ],
                                        null,
                                        ['class' => 'form-control select2', 'placeholder' => __('messages.please_select'), 'required'],
                                    ) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                {!! Form::label('location', __('purchase.business_location') . ':') !!}
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-map-marker"></i>
                                    </span>
                                    {!! Form::select('location', $business_locations, null, [
                                        'class' => 'form-control select2',
                                        'placeholder' => __('messages.please_select'),
                                        'required',
                                    ]) !!}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">

                                {!! Form::label('product_order_date_filter', __('report.date_range') . ':') !!}
                                {!! Form::text('date_range', null, [
                                    'placeholder' => __('lang_v1.select_a_date_range'),
                                    'class' => 'form-control',
                                    'id' => 'product_order_date_filter',
                                    'readonly',
                                ]) !!}
                            </div>
                        </div>
                        {!! Form::close() !!}
                    @endcomponent
                </div>
            </div>
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a data-toggle="tab" href="#product_qr" aria-expanded="true"><i class="fa fa-list"
                                    aria-hidden="true"></i> @lang('productcatalogue::lang.catalogue_qr')</a>
                        </li>
                        <li>
                            <a data-toggle="tab" href="#orders_table" aria-expanded="true"><i class="fa fa-list"
                                    aria-hidden="true"></i>@lang('productcatalogue::lang.orders')</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="product_qr">
                            <div class="row">
                                <div class="col-md-6">
                                    @component('components.widget', ['class' => 'box-solid'])
                                        <div class="form-group">
                                            {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                                            {!! Form::select('location_id', $business_locations, null, [
                                                'class' => 'form-control',
                                                'placeholder' => __('messages.please_select'),
                                            ]) !!}
                                        </div>
                                        <div class="form-group">
                                            {!! Form::label('color', __('productcatalogue::lang.qr_code_color') . ':') !!}
                                            {!! Form::text('color', '#000000', ['class' => 'form-control']) !!}
                                        </div>
                                        <div class="form-group">
                                            {!! Form::label('title', __('productcatalogue::lang.title') . ':') !!}
                                            {!! Form::text('title', $business->name, ['class' => 'form-control']) !!}
                                        </div>
                                        <div class="form-group">
                                            {!! Form::label('subtitle', __('productcatalogue::lang.subtitle') . ':') !!}
                                            {!! Form::text('subtitle', __('productcatalogue::lang.product_catalogue'), ['class' => 'form-control']) !!}
                                        </div>
<div class="form-group">
    {!! Form::label('product', __('productcatalogue::lang.product') . ':') !!}
    {!! Form::select('product[]', 
        // Products should be in format [id => name]
        $products->pluck('name', 'id')->toArray(), 
      
        isset($selectedProducts) ? $selectedProducts : null, 
        [
            'class' => 'form-control select2',
            'multiple' => 'multiple',
            'id' => 'product_select',
            'style' => 'width: 100%' // Ensures proper Select2 width
        ]
    ) !!}
</div>
<div class="form-group">
    {!! Form::label('variation_type', __('productcatalogue::lang.varition_type') . ':') !!}
     {!! Form::select('variation_type[]', 
        // Products should be in format [id => name]
        $varitionsType->pluck('name', 'id')->toArray(), 
      
        isset($selectedVaritionsType) ? $selectedVaritionsType : null, 
        [
            'class' => 'form-control select2',
            'multiple' => 'multiple',
            'id' => 'variation_type_select',
            'style' => 'width: 100%' // Ensures proper Select2 width
        ]
    ) !!}
</div>   
<div class="form-group">
    {!! Form::label('variation', __('productcatalogue::lang.varition') . ':') !!}
     {!! Form::select('variation[]', 
        // Products should be in format [id => name]
        $varitions->pluck('name', 'id')->toArray(), 
      
        isset($selectedVaritions) ? $selectedVaritions : null, 
        [
            'class' => 'form-control select2',
            'multiple' => 'multiple',
            'id' => 'variation_select',
            'style' => 'width: 100%' // Ensures proper Select2 width
        ]
    ) !!}
</div> 
<div class="form-group">
    {!! Form::label('category', __('productcatalogue::lang.category') . ':') !!}
     {!! Form::select('category[]',
        $categories->pluck('name', 'id')->toArray(), 
      
        isset($selectedCategories) ? $selectedCategories : null, 
        [
            'class' => 'form-control select2',
            'multiple' => 'multiple',
            'id' => 'category_select',
            'style' => 'width: 100%'
        ]
    ) !!}
</div>
<div class="form-group">
    {!! Form::label('sub_category', __('productcatalogue::lang.sub_category') . ':') !!}
     {!! Form::select('sub_category[]',
        $subCategories->pluck('name', 'id')->toArray(), 
      
        isset($selectedsubCategories) ? $selectedsubCategories : null, 
        [
            'class' => 'form-control select2',
            'multiple' => 'multiple',
            'id' => 'sub_category_select',
            'style' => 'width: 100%'
        ]
    ) !!}
</div>                          <div class="form-group">
                                        {!! Form::label('brands', __('brand.brands') . ':') !!}
                                        {!! Form::select('brands[]',
                                            $brands, 
                                        
                                            isset($brands) ? $brands : null, 
                                            [
                                                'class' => 'form-control select2',
                                                'multiple' => 'multiple',
                                                'id' => 'brands_select',
                                                'style' => 'width: 100%'
                                            ]
                                        ) !!}
                                    </div>     

                                        <div class="form-group">
                                            <div class="checkbox">
                                                <label>
                                                    {!! Form::checkbox('add_logo', 1, true, ['id' => 'show_logo', 'class' => 'input-icheck']) !!} @lang('productcatalogue::lang.show_business_logo_on_qrcode')
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="checkbox">
                                                <label>
                                                    {!! Form::checkbox('show_qty', 1, true, ['id' => 'show_qty', 'class' => 'input-icheck']) !!} @lang('اظهار الكمية')
                                                </label>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="checkbox">
                                                <label>
                                                    {!! Form::checkbox('show_unit', 1, true, ['id' => 'show_unit', 'class' => 'input-icheck']) !!} @lang('اظهار الوحدة')
                                                </label>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary"
                                            id="generate_qr">@lang('productcatalogue::lang.generate_qr')</button>
                                    @endcomponent
                                    @component('components.widget', ['class' => 'box-solid'])
                                        <div class="row">
                                            <div class="col-md-12">
                                                <strong>@lang('lang_v1.instruction'):</strong>
                                                <table class="table table-striped">
                                                    <tr>
                                                        <td>1</td>
                                                        <td>@lang('productcatalogue::lang.catalogue_instruction_1')</td>
                                                    </tr>
                                                    <tr>
                                                        <td>2</td>
                                                        <td>@lang('productcatalogue::lang.catalogue_instruction_2')</td>
                                                    </tr>
                                                    <tr>
                                                        <td>3</td>
                                                        <td>@lang('productcatalogue::lang.catalogue_instruction_3')</td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    @endcomponent
                                </div>
                                <div class="col-md-6">
                                    @component('components.widget', ['class' => 'box-solid'])
                                        <div class="text-center">
                                            <div id="qrcode"></div>
                                            <span id="catalogue_link"></span>
                                            <br>
                                            <a href="#" class="btn btn-success hide" id="download_image" target="_blank"
                                                download="qrcode.png">@lang('productcatalogue::lang.download_image')</a>
                                        </div>
                                    @endcomponent
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="orders_table">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" id="order_table">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>@lang('productcatalogue::lang.order_number')</th>
                                            <th>@lang('productcatalogue::lang.user_name')</th>
                                            <th>@lang('productcatalogue::lang.user_phone')</th>
                                            <th>@lang('business.city')</th>
                                            <th>@lang('business.address')</th>
                                            <th>@lang('productcatalogue::lang.status')</th>
                                            <th>@lang('productcatalogue::lang.order_location')</th>
                                            <th>@lang('productcatalogue::lang.ordered_at')</th>



                                        </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop
@section('javascript')
    <script src="{{ asset('modules/productcatalogue/plugins/easy.qrcode.min.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#color').colorpicker();
     // Initialize select2 for products
    $('#product_select').select2({
        placeholder: "Select products",
        allowClear: true
    });
    
    // Initialize select2 for variations (disabled initially)
    $('#variation_type_select').select2({
        placeholder: "Select variations",
        allowClear: true
    });
    $('#variation_select').select2({
        placeholder: "Select variations",
        allowClear: true
    });
    $('#category_select').select2({
        placeholder: "Select category",
        allowClear: true
    });

     $('#sub_category_select').select2({
        placeholder: "Select category",
        allowClear: true
    });

      $('#variation_type_select').on('change', function() {
        var selectedType = $(this).val();
        console.log(selectedType);
        if (selectedType && selectedType.length > 0) {
            // Show loading
            $('#variation_select').empty().append(
                '<option value="">Loading variations...</option>'
            ).trigger('change');
            
            // Fetch variations for selected type
            $.ajax({
                url: '{{ route("get-variations") }}',
                method: 'POST',
                data: {
                    product_variation_ids: selectedType,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#variation_select').empty();
                    
                    if(response && Object.keys(response).length > 0) {
                        $.each(response, function(id, name) {
                            $('#variation_select').append(
                                $('<option></option>').val(id).text(name)
                            );
                        });
                    } else {
                        loadDefaultVariations();
                    }
                    
                    $('#variation_select').trigger('change');
                },
                error: function(xhr) {
                    console.error('Error loading variations:', xhr.responseText);
                    loadDefaultVariations();
                }
            });
        } else {
            // If no type selected, load default variations
            loadDefaultVariations();
        }
    });

    // Function to load default variations from $varitions
    function loadDefaultVariations() {
        $('#variation_select').empty();
        
        @if(isset($varitions) && count($varitions) > 0)
            @foreach($varitions as $id => $name)
                $('#variation_select').append(
                    $('<option></option>').val('{{ $id }}').text('{{ $name }}')
                );
            @endforeach
        @else
            $('#variation_select').append(
                $('<option></option>').val('').text('No variations available')
            );
        @endif
        
        $('#variation_select').trigger('change');
    }
@php
    $encodedBusinessId = base64_encode(session('business.id'));
@endphp
            $(document).on('click', '#generate_qr', function(e) {
                 let locationId = $('#location_id').val();
                $('#qrcode').html('');
                if ($('#location_id').val()) {
                    var selectedProducts = $('#product_select').val() || [];
                    var selectedBrands = $('#brands_select').val() || [];
                    var selectedVariations = $('#variation_select').val() || [];
                    var selectedCategories = $('#category_select').val() || [];
                    var selectedSubCategories = $('#sub_category_select').val() || [];
                    let encodedLocation = btoa(locationId);
                    var link = "{{ url('catalogue/' . $encodedBusinessId ) }}/" + encodedLocation;
                     // Add products and variations as query parameters if any are selected
                      // Build query parameters
        var params = [];
        
        if (selectedProducts.length > 0) {
            params.push('products=' + selectedProducts.join(','));
        }
        
        if (selectedVariations.length > 0) {
            params.push('variations=' + selectedVariations.join(','));
        }
        
        if (selectedCategories.length > 0) {
            params.push('categories=' + selectedCategories.join(','));
        }
        if (selectedBrands.length > 0) {
            params.push('br=' +btoa(selectedBrands.join(',')));
        }
         if (selectedSubCategories.length > 0) {
            params.push('sub_categories=' + selectedSubCategories.join(','));
        }
        @if(session('business.theme_color'))
            params.push('c={{ base64_encode(session('business.theme_color')) }}');
        @endif
        if ($('#show_qty').is(':checked')) {
            params.push('q=' + btoa(true)); // base64 encode "true"
        }
        if ($('#show_unit').is(':checked')) {
            params.push('u=' + btoa(true)); // base64 encode "true"
        }
        // Only add logo if exists
        @if(session('business.logo'))
            params.push('l={{ base64_encode(session('business.logo')) }}');
        @endif
        if (params.length > 0) {
            link += '?' + params.join('&');
        }
                    var color = '#000000';
                    if ($('#color').val().trim() != '') {
                        color = $('#color').val();
                    }
                    var opts = {
                        text: link,
                        margin: 4,
                        width: 256,
                        height: 256,
                        quietZone: 20,
                        colorDark: color,
                        colorLight: "#ffffffff",
                    }

                    if ($('#title').val().trim() !== '') {
                        opts.title = $('#title').val();
                        opts.titleFont = "bold 18px Arial";
                        opts.titleColor = "#004284";
                        opts.titleBackgroundColor = "#ffffff";
                        opts.titleHeight = 60;
                        opts.titleTop = 20;
                    }

                    if ($('#subtitle').val().trim() !== '') {
                        opts.subTitle = $('#title').val();
                        opts.subTitleFont = "14px Arial";
                        opts.subTitleColor = "#4F4F4F";
                        opts.subTitleTop = 40;
                    }
                

                    if ($('#show_logo').is(':checked')) {
                        opts.logo = "{{ asset('uploads/business_logos/' . $business->logo) }}";
                    }

                    new QRCode(document.getElementById("qrcode"), opts);
                    $('#catalogue_link').html('<a target="_blank" href="' + link + '">Link</a>');
                    $('#download_image').removeClass('hide');


                } else {
                    alert("{{ __('productcatalogue::lang.select_business_location') }}")
                }
            });
            $('#download_image').click(function(e) {
                var src = $("#qrcode").find("img").attr("src");
                $('#download_image').attr("href", src);
            });
            if ($('#product_order_date_filter').length == 1) {
                $('#product_order_date_filter').daterangepicker(dateRangeSettings, function(start, end) {
                    $('#product_order_date_filter').val(
                        start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                    );
                    product_qr.ajax.reload();
                });
            }
            product_qr = $('#order_table').DataTable({
                processing: true,
                serverSide: true,
                "bAutoWidth": false,

                ajax: {
                    url: '{!! route('catalogue-qr') !!}',

                    data: function(d) {
                        var start = '';
                        var end = '';
                        if ($('#product_order_date_filter').val()) {
                            start = $('input#product_order_date_filter')
                                .data('daterangepicker')
                                .startDate.format('YYYY-MM-DD');
                            end = $('input#product_order_date_filter')
                                .data('daterangepicker')
                                .endDate.format('YYYY-MM-DD');
                        }
                        d.start_date = start;
                        d.end_date = end;
                        d.search_status = $('select#search_status').val();
                        d.location_id = $('select#location').val();
                    },

                },
                columns: [{
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'order_number',
                        name: 'order_number'
                    },
                    {
                        data: 'user_name',
                        name: 'user_name'
                    },
                    {
                        data: 'user_phone',
                        name: 'user_phone'
                    },
                   {
                        data: 'city.name',
                        name: 'city.name',
                        render: function(data, type, row) {
                            return row.city ? row.city.name : ''; 
                        }
                    },
                    {
                       data: 'address',
                        name: 'address',
                         render: function(data, type, row) {
                            return row.address ? row.address : ''; 
                        }
                    },

                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'business_locations.name',
                        name: 'business_locations.name'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at'
                    }

                ],
            });
            $('#location,#search_status,#product_order_date_filter').change(function() {
                product_qr.ajax.reload();
            });
            $(document).on('click', '#order_table tr', function(e) {
                if (
                    !$(e.target).is('td.selectable_td input[type=checkbox]') &&
                    !$(e.target).is('td.selectable_td') &&
                    !$(e.target).is('td.clickable_td') &&
                    !$(e.target).is('a') &&
                    !$(e.target).is('button') &&
                    !$(e.target).hasClass('label') &&
                    !$(e.target).is('li') &&
                    $(this).data('href') &&
                    !$(e.target).is('i')
                ) {
                    $.ajax({
                        url: $(this).data('href'),
                        dataType: 'html',
                        success: function(result) {
                            $('.view_modal')
                                .html(result)
                                .modal('show');
                        },
                    });
                }
            });
            $(document).on("click", "#rejectedOrder", function() {
                let order_id = $(this).attr('data-ordernumber');
                $.ajax({
                    type: 'get',
                    url: '/changeOrderStatus/' + order_id,
                    success: function(result) {

                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
                product_qr.ajax.reload();
            });
            $(document).on("click", "#deletedOrder", function() {
                let order_id = $(this).attr('data-ordernumber');
                console.log(order_id);
                $.ajax({
                    type: 'get',
                    url: '/deletedOrder/' + order_id,
                    success: function(result) {},
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
                product_qr.ajax.reload();
            });
        });
    </script>



@endsection