@php
    $modelName = $model;
    $modelClass = str_replace('.', '-', $model);

    if (isset($lang)) {
        $modelName = "{$lang}.{$model}";
        $modelClass = "{$lang}-{$model}";
        $f = (array) $__data[$lang];
    }

    if (!isset($type)) {
        $type = 'text';
    }
@endphp

<div wire:ignore>
    <fieldset @class([
        'form-group',
        'is-invalid' => $errors->has($modelName),
        'my-3',
        isset($class) ? $class : '',
    ])>

        <label for="{{ $title }}">{!! $title !!}
        </label>

        <input type="{{ $type }}" wire:model.live.change="{{ $modelName }}" @class([$modelClass])
            @disabled(isset($disabled) && $disabled)>


        @error($modelName)
            <div class="text-danger">{{ $message }}</div>
        @endError
    </fieldset>
</div>

<script>
    function convert8HexTo6HexAndOpacity(hex8Color) {
        // Remove the '#' character if it exists
        hex8Color = hex8Color.replace("#", "");

        // Extract the RGB and alpha components
        var r = parseInt(hex8Color.substring(0, 2), 16);
        var g = parseInt(hex8Color.substring(2, 4), 16);
        var b = parseInt(hex8Color.substring(4, 6), 16);
        var alpha = parseInt(hex8Color.substring(6, 8), 16);

        // Normalize the alpha value to the range [0, 1]
        var opacity = (alpha / 255).toFixed(2);

        // Convert each channel to 2-digit hexadecimal format
        var rHex = r.toString(16).padStart(2, '0');
        var gHex = g.toString(16).padStart(2, '0');
        var bHex = b.toString(16).padStart(2, '0');

        // Concatenate the values to form the 6 hex color
        var resultColor = "#" + rHex + gHex + bHex;

        // Return the result as an object containing the 6 hex color and opacity
        return {
            color: resultColor,
            opacity: parseFloat(opacity)
        };
    }

    function convertHexTo8HexColor(hexColor, opacity) {
        // Remove the '#' character if it exists
        hexColor = hexColor.replace("#", "");

        // Convert hex to RGBA
        var r = parseInt(hexColor.substring(0, 2), 16);
        var g = parseInt(hexColor.substring(2, 4), 16);
        var b = parseInt(hexColor.substring(4, 6), 16);

        // Convert opacity to an 8-bit value
        var alpha = Math.round(opacity * 255);

        // Convert each channel to 2-digit hexadecimal format
        var rHex = r.toString(16).padStart(2, '0');
        var gHex = g.toString(16).padStart(2, '0');
        var bHex = b.toString(16).padStart(2, '0');
        var alphaHex = alpha.toString(16).padStart(2, '0');

        // Concatenate the values to form the 8 hex color
        var resultColor = "#" + rHex + gHex + bHex + alphaHex;

        return resultColor;
    }


    $(document).ready(function() {



        const modelClass = @json($modelClass)

        // const setColorEdit = () => {
        //     const {
        //         color,
        //         opacity
        //     } = convert8HexTo6HexAndOpacity($(`.${modelClass}`).val())

        //     console.log({
        //         color,
        //         opacity
        //     });

        //     $(`.${modelClass}`).val(color)

        //     $(`.${modelClass}`).attr('data-opacity', opacity)
        // }


        // setColorEdit()

        const modelName = @json($modelName)

        $(`.${modelClass}`).minicolors({

            change: function(color, opacity) {
                console.log('color: ', {
                    color,
                    opacity,
                    // c: convertHexTo8HexColor(color, opacity)
                });

                @this.set(modelName, color)
            },
            // animation speed
            animationSpeed: 50,

            // easing function
            animationEasing: 'swing',

            // defers the change event from firing while the user makes a selection
            changeDelay: 0,

            // hue, brightness, saturation, or wheel
            control: 'hue',

            // default color
            defaultValue: '',

            // hex or rgb
            format: 'hex',

            // show/hide speed
            showSpeed: 100,
            hideSpeed: 100,

            // is inline mode?
            inline: false,

            // a comma-separated list of keywords that the control should accept (e.g. inherit, transparent, initial).
            keywords: '',

            // uppercase or lowercase
            letterCase: 'lowercase',

            // enables opacity slider
            opacity: false,

            // custom position
            position: 'bottom left',

            // additional theme class
            theme: 'default',

            // an array of colors that will show up under the main color <a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a>
            swatches: []

        })
    })
</script>