@props([
    'name',
    'label' => 'Seleccionar Color',
    'required' => false,
    'default' => '#007bff',
])

@php
    $inputId = 'cp_' . Str::random(8);
@endphp

@pushonce('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/css/bootstrap-colorpicker.min.css" />
@endpushonce

<div class="form-group color-picker-container">
    @if($label)
        <label for="{{ $inputId }}" class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
            {{ $label }}
            @if($required) <span class="text-danger">*</span> @endif
        </label>
    @endif

    <div id="{{ $inputId }}" class="input-group shadow-sm my-colorpicker">
        <input type="text" name="{{ $name }}" class="form-control" value="{{ old($name, $default) }}" {{ $required ? 'required' : '' }}>

        <div class="input-group-append">
            <span class="input-group-text"><i class="fas fa-square" style="color: {{ old($name, $default) }};"></i></span>
        </div>
    </div>

    @error($name)
        <span class="text-danger d-block mt-1 small font-weight-bold" role="alert">
            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
        </span>
    @enderror
</div>

@pushonce('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/js/bootstrap-colorpicker.min.js"></script>
@endpushonce

@push('js')
<script>
    $(function () {
        $('#{{ $inputId }}').colorpicker();

        $('#{{ $inputId }}').on('colorpickerChange', function(event) {
            $(this).find('.fa-square').css('color', event.color.toString());
        });
    });
</script>
@endpush