@props([
    'label' => null,
    'model' => null,
])

<div>
    @if($label)
        <label for="{{ $model }}" class="form-label">{{ $label }}</label>
    @endif
    <div wire:ignore>
        <div id="{{ $model }}">
            <div class="pickr-container2"></div>
            <div class="config-app-pickr"></div>
        </div>
    </div>

    @pushonce('script')
        <script src="{{ asset('assets/plugins/pickr-master/pickr.es5.min.js') }}"></script>
    @endpushonce

    @push('script')
        <script>
            $(function () {
                const pickrContainer2 = document.querySelector('.pickr-container2');
                const el = document.createElement('p');
                let nanoPickr = null;
                pickrContainer2.appendChild(el);
                nanoPickr = new Pickr(Object.assign({
                    el,
                    theme: 'nano',
                    default: '#05c3fb'
                }, {
                    container: '.config-app-pickr',
                    position: 'right',
                    swatches: [
                        'rgba(244, 67, 54, 1)',
                        'rgba(233, 30, 99, 0.95)',
                        'rgba(156, 39, 176, 0.9)',
                        'rgba(103, 58, 183, 0.85)',
                        'rgba(63, 81, 181, 0.8)',
                        'rgba(33, 150, 243, 0.75)',
                        'rgba(3, 169, 244, 0.7)'
                    ],

                    defaultRepresentation: 'HEXA',
                    components: {
                        preview: true,
                        opacity: true,
                        hue: true,

                        interaction: {
                            hex: false,
                            rgba: false,
                            hsva: false,
                            input: true,
                            clear: true,
                            save: true
                        }
                    }
                }));

                nanoPickr.on('init', instance => {
                }).on('hide', instance => {
                }).on('show', (color, instance) => {
                }).on('save', (color, instance) => {
                    // get hex color
                @this.set('model', color.toHEXA().toString());
                    nanoPickr.hide();
                }).on('clear', instance => {
                }).on('change', (color, source, instance) => {
                }).on('changestop', (source, instance) => {
                }).on('cancel', instance => {
                }).on('swatchselect', (color, instance) => {
                });
            })
        </script>
    @endpush
</div>