<?php
wp_enqueue_style( 'wp-color-picker' );

if ( !is_admin() ) {
	wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ) );
	wp_enqueue_script( 'wp-color-picker', admin_url( "js/color-picker.min.js" ), array( 'iris' ), '3.5', true );
	$colorpicker_l10n = array(
		'clear' => __( 'Clear' ),
		'defaultString' => __( 'Default' ),
		'pick' => __( 'Select Color' ),
		'current' => __( 'Current Color' )
	);
	wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n );
} else {
	wp_enqueue_script( 'wp-color-picker' );
}

$attributes = array();
$attributes[ 'type' ] = 'text';
$attributes[ 'value' ] = $value;
$attributes[ 'tabindex' ] = 2;
$attributes = PodsForm::merge_attributes( $attributes, $name, $form_field_type, $options );
?>
<input<?php PodsForm::attributes( $attributes, $name, $form_field_type, $options ); ?> />

<script type="text/javascript">
    jQuery( function () {
        jQuery( '#color_<?php echo esc_js( $attributes[ 'id' ] ); ?>' ).hide();

        var pods_wp_color_obj_<?php echo esc_js( pods_js_name( $attributes[ 'id' ] ) ); ?> = jQuery( '#<?php echo esc_js( $attributes[ 'id' ] ); ?>' ).wpColorPicker();

        pods_wp_color_obj_<?php echo esc_js( pods_js_name( $attributes[ 'id' ] ) ); ?>.parents( '.wp-picker-container' ).find( '.iris-slider-offset' ).removeClass( 'ui-widget-content ui-slider-vertical' );

        jQuery( '#<?php echo esc_js( $attributes[ 'id' ] ); ?>' ).on( 'focus blur', function () {
            jQuery( '#color_<?php echo esc_js( $attributes[ 'id' ] ); ?>' ).slideToggle();
        } );

        jQuery( '#<?php echo esc_js( $attributes[ 'id' ] ); ?>' ).on( 'keyup', function () {
            var color = jQuery( this ).val();

            if ( '' != color.replace( '#', '' ) && color.match( '#' ) )
                pods_wp_color_obj_<?php echo esc_js( pods_js_name( $attributes[ 'id' ] ) ); ?>.wpColorPicker( 'color', color );
        } );
    } );
</script>
