@extends('admin.template.master')

@section('stylesheets')
    {!! Html::style('assets/admin/bower_components/select2/dist/css/select2.min.css') !!}

    <style>
        /*Select2 style*/
        .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
            border: 1px solid #d2d6de;
            border-radius: 0;
            padding: 6px 12px;
            height: 34px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-right: 10px;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            padding-left: 0;
            padding-right: 0;
            height: auto;
            margin-top: -4px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 28px;
            right: 3px;
        }

        /*Select2 style*/

        .d-none {
            display: none;
        }

        .d-block {
            display: block;
        }
    </style>
@endsection

@section('title')
    <section class="content-header">
        <h1>
            Shipping Charge
            <small>insert and update Shipping Charge</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="{!! url('admin/') !!}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="{!! url('/admin/shipping-charge') !!}">Shipping Charge</a></li>
            <li class="active">Update</li>
        </ol>
    </section>
@endsection

@section('main-content')
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Update</h3>
                    </div>

                    {!! Form::open(['method' => 'post', 'url' => '/admin/shipping-charge-edit/' .$shpChrg->id]) !!}

                    <div class="box-body">
                        <div class="form-group @if($errors->has('name')) has-error @endif">
                            {!! Form::label('Name') !!}
                            {!! Form::text('name', $shpChrg->name, ['class' => 'form-control', 'placeholder' => 'Name','id' => 'name', 'required' => 'required']) !!}
                            @if ($errors->has('name'))
                                <span class="help-block">{!! $errors->first('name') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('amount')) has-error @endif">
                            {!! Form::label('Amount') !!}
                            {!! Form::text('amount', $shpChrg->amount, ['class' => 'form-control', 'placeholder' => 'Amount', 'required' => 'required']) !!}
                            @if ($errors->has('amount'))
                                <span class="help-block">{!! $errors->first('amount') !!}</span>@endif
                        </div>

                        <div class="form-group @if($errors->has('shipping_method_id')) has-error @endif">
                            {!! Form::label('Shipping Method') !!}
                            {!! Form::select('shipping_method_id[]', $shipping_method, $shippingChargeMethods, ['class' => 'form-control',  'id' => 'is_type', 'multiple' => 'multiple', 'required' => 'required']) !!}
                            @if ($errors->has('shipping_method_id'))
                                <span class="help-block">{!! $errors->first('shipping_method_id') !!}</span>@endif
                        </div>

                        {{-- {{dd($selectedItemTypes)}} --}}

                        <div class="form-group @if($errors->has('item_type')) has-error @endif" >
                            {!! Form::label('Item Type (If select all item types products will be selected)') !!}

                            <select name="item_type[]" class="form-control" id="item_type" multiple>
                                @foreach($item_type as $bId => $bName)
                                    <option value="{{ $bId }}" >
                                        {{ $bName }}
                                    </option>
                                @endforeach
                            </select>
                        </div>



                        <div class="form-group product-wrapper @if($errors->has('products')) has-error @endif">
                            <label for="products"
                                   style="float: left; margin-top: 4px; margin-right: 5px;">Selected Products</label>
                            <a class="btn btn-danger btn-sm" style="margin-bottom: 5px;" id="resetbutton"
                               href="javascript:void(0)">Reset</a>
                               <a class="btn btn-info btn-sm" style="margin-bottom: 5px;" id="myModalbutton"
                            data-toggle="modal" data-target="#exampleModal">See Products</a>
                            {{-- {!! Form::select('products[]',$product, null, ['class' => 'form-control','id' => 'products' ,'multiple' => 'multiple']) !!} --}}
                                    {{-- {{dd($product->offeredProduct)}} --}}
                            {{-- <select name="products[]" class="form-control product_name" id="products" multiple> --}}
                                {{-- @foreach($shippingChargeProducts as $product)
                                    <option value="{{ $product->product_id }}" data-item-type-id="{{ $product->item_type_id }}">
                                        {{ $product->product_code_inv ?? '' }}
                                    </option>
                                @endforeach --}}
                            {{-- </select> --}}
                            @php
                                $productCodes = implode(',', array_filter(array_map(fn($product) => $product->product_code_inv ?? '', $shippingChargeProducts)));
                            @endphp

                            <div id="product-display" class="mt-3">
                                @foreach($shippingChargeProducts as $product)
                                    <span class="badge badge-pill badge-primary">{{$product->product_code_inv ?? ''}}</span>
                                @endforeach
                            </div>
                            <!-- Hidden Input -->
                            <input type="hidden" id="hidden-product-input" name="products" value="{{$productCodes}}">
                            @if ($errors->has('products'))
                            <span class="help-block">{!! $errors->first('products') !!}</span>@endif
                        </div>

                        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel">Products</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <div id="badge-container" class="d-none">
                                            @foreach($shippingChargeProducts as $product)
                                                <span class="badge badge-pill badge-primary">{{ $product->product_code_inv ?? '' }}</span>
                                            @endforeach
                                        </div>
                                        <br>
                                        <textarea class="form-control mt-3" id="edit-product-textarea" rows="5" placeholder="Enter product codes separated by commas"></textarea>
                                    </div>
                                    <div class="modal-footer">
                                        {{-- <button type="button" class="btn btn-info" id="edit-button">Edit</button> --}}
                                        <button type="button" class="btn btn-primary" id="save-button">Save</button>
                                        {{-- <button type="button" class="btn btn-success" id="paste-button">Paste</button> --}}
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group @if($errors->has('note')) has-error @endif">
                            {!! Form::label('Note') !!}
                            {!! Form::textarea('note', $shpChrg->note, ['class' => 'form-control', 'rows' => '3','placeholder' => 'Note', 'id' => 'note']) !!}
                            @if ($errors->has('note'))
                                <span class="help-block">{!! $errors->first('note') !!}</span>@endif
                        </div>


                        <div class="form-group">
                            {!! Form::label('Status') !!}
                            {!! Form::select('status', [1 => 'Active', 0 => 'Inactive'], isset($shpChrg->status) ? $shpChrg->status : null, ['class' => 'form-control']) !!}
                        </div>
                    </div>
                    <div class="box-footer">
                        {!! Form::submit('Update',['class' => 'btn btn-warning']) !!}
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </section>
@endsection

@section('javascripts')
    {!! Html::script('assets/admin/bower_components/select2/dist/js/select2.full.min.js') !!}
    {!! Html::script('assets/admin/bower_components/ckeditor/ckeditor.js') !!}
    <script>
         $(document).ready(function () {
            const $editButton = $('#edit-button');
            const $saveButton = $('#save-button');
            const $pasteButton = $('#paste-button');
            const $badgeContainer = $('#badge-container');
            const $editTextarea = $('#edit-product-textarea');
            const $hiddenInput = $('#hidden-product-input');
            const $productDisplay = $('#product-display');
            const $resetButton = $('#resetbutton');

            const productCodes = [];
            $badgeContainer.find('.badge').each(function () {
                productCodes.push($(this).text().trim());
            });

            // Populate the textarea with existing product codes
            $editTextarea.val(productCodes.join(',')).removeClass('d-none');

            // Handle Edit Button Click
            // $editButton.click(function () {

            //     $badgeContainer.addClass('d-none');
            //     $editButton.addClass('d-none');
            //     $pasteButton.addClass('d-none');
            //     $saveButton.removeClass('d-none');
            // });

            // Handle Save Button Click
            $saveButton.click(function () {
                const productCodes = $editTextarea.val().split(',').map(code => code.trim());
                updateHiddenInput(productCodes);
                displayBadges(productCodes);

                // Update badges in modal
                $badgeContainer.empty();
                productCodes.forEach(code => {
                    $badgeContainer.append('<span class="badge badge-pill badge-primary">' + code + '</span>');
                });

                // Toggle visibility
                // $editTextarea.addClass('d-none');
                // $badgeContainer.removeClass('d-none');
                // $editButton.removeClass('d-none');
                // $saveButton.addClass('d-none');
                $('#exampleModal').modal('hide');
            });

            // Handle Paste Button Click
            $pasteButton.click(function () {
                const productCodes = [];
                $badgeContainer.find('.badge').each(function () {
                    productCodes.push($(this).text().trim());
                });

                // Paste products into hidden input
                updateHiddenInput(productCodes);
                displayBadges(productCodes);
            });

            // Function to update the hidden input field with the new product codes
            function updateHiddenInput(productCodes) {
                // Join the product codes with commas and update the hidden input field
                $hiddenInput.val(productCodes.join(','));
            }

            // Function to display badges outside the modal
            function displayBadges(productCodes) {
                $productDisplay.empty(); // Clear previous badges
                productCodes.forEach(code => {
                    $productDisplay.append('<span class="badge badge-pill badge-primary mr-2">' + code + '</span>');
                });
            }

            $resetButton.click(function () {
                // Clear the product display div
                $productDisplay.empty();
                $badgeContainer.empty();
                // Optionally, clear the hidden input as well
                $hiddenInput.val('');
                $editTextarea.val('');
            });
        });

        $(function () {
            CKEDITOR.replace('offer_description', {
                allowedContent: true,
                extraAllowedContent: 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}',
                autoGrow_onStartup: true,
                enterMode: CKEDITOR.ENTER_BR,
                height: 200
            });

            CKEDITOR.replace('offer_short_desc', {
                allowedContent: true,
                extraAllowedContent: 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}',
                autoGrow_onStartup: true,
                enterMode: CKEDITOR.ENTER_BR,
                height: 200
            });

            CKEDITOR.dtd.$removeEmpty.span = 0;

        });

        $(document).ready(function () {
            $('#offer_position').select2();
            $('#item_type').select2({
                placeholder: 'Select Item types'
            });
            // $("#item_type").prop("disabled", true);

            $('#brand').select2({
                placeholder: 'Select Brands'
            });
            $('#products').select2({
                placeholder: 'Select Products'
            });
            // ("#products").prop("disabled", true);

            $('#category').select2();
            $('#is_store').select2();
            $('#is_type').select2();

            $("#mybutton").click(function () {
                $('#products').val('').trigger("change");
            });

            $('#is_type').change(function(){
                // Hide both divs
                $('#item_div').hide();
                $('#category_div').hide();

                // Show the selected div based on the value of is_type
                if($(this).val() == '0'){
                    $('#item_div').css('display','block');
                } else if($(this).val() == '1'){
                    $('#category_div').css('display','block');
                }
            });

            // Create slug
            function convertToSlug(Text) {
                return Text
                    .toLowerCase()
                    .replace(/ /g, '-')
                    .replace(/[^\w-]+/g, '')
                    ;
            }

            $("#offer_name").blur(function () {
                var productName = $(this).val();
                var slug = convertToSlug(productName);

                if ( slug.indexOf('-store') > -1 ) {
                    slug = 'store/'+ slug.replace('-store', '')
                    console.log('paise');
                }

                $("#offer_slug").val(slug);
            });
            // Create slug

            if ($("#offer_slug").val() == '') {
                $("#offer_name").blur();
            }

            // Store the initial selection of item types
            let previousSelectedItemTypes = $('#item_type').val();

            $('#item_type').change(function () {
                let currentSelectedItemTypes = $(this).val();

                // Clear existing options
                $('#products').empty();
                $(this).parent().prepend('<i id="loader" class="fa fa-spin fa-spinner"></i>');

                console.log('item_type:', currentSelectedItemTypes);

                // Iterate through each selected item type
                $.each(currentSelectedItemTypes, function (index, itemTypeId) {
                    // Make an AJAX request to fetch products based on the selected item type
                    $.ajax({
                        url: "{{ url('admin/shipping/productOnItemType') }}",
                        type: 'GET',
                        data: { item_type_id: itemTypeId },
                        success: function (data) {
                            console.log('result:', data, 'length:', data.length);

                            if (data !== undefined) {
                                let selectedProductHtml = '';

                                $.each(data, function (productId, productName) {
                                    console.log(productId + ',' + productName);
                                    selectedProductHtml += '<option value="' + productName + '" data-item-type-id="' + itemTypeId + '" selected="selected">' + productName + '</option>';
                                });

                                $('#products').append(selectedProductHtml);
                            }
                            $('#loader').remove();
                        },
                        error: function (xhr, textStatus, errorThrown) {
                            console.log('Error: ' + errorThrown);
                        }
                    });
                });

                // Update previous selected item types
                previousSelectedItemTypes = currentSelectedItemTypes;
            });

            // Initialize Select2 for products
            $('#products').select2({
                placeholder: 'Select Products'
            }).val({!! json_encode($shippingChargeProducts) !!}).trigger('change');



            // Initialize Select2
            $('#products').select2({
                minimumInputLength: 3,
                ajax: {
                    url: "{{ route('product-search') }}",
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.product_code_inv,
                                    id: item.product_code_inv
                                };
                            })
                        };
                    },
                    cache: true
                }
            });


            $(document).on('paste', '#products', function (e) {
                const userIds = e.originalEvent.clipboardData.getData('text');
                const userIdsArr = userIds.replace(/ /g,'').split(',')
                const selects = $("#products option");
                let selectedIds = [];

                // Iterate input rs ids
                userIdsArr.map(rs => {
                    // Iterate all option
                    selects.map((a, b) => {
                        let userName = b.innerText;
                        let userId = b.value;
                        let userRs = rs.toUpperCase();
                        userRs = '\\b' + userRs + '\\b';

                        if (userName.match(new RegExp(userRs, 'g'))) {
                            $('#product').val(userId).trigger('change');
                            selectedIds.push(userId)
                        }
                    })
                })

                $('#products').val(selectedIds).trigger('change');
                $('.product-wrapper .select2-search--inline').remove();
            })

            $('#products').change(function () {
                var collapsible = [];
                $.each($('#expanded option:selected'), function () {
                    collapsible.push($(this).val());
                });
            });

        });
    </script>
@endsection