<?php
/**
 * @package DJ-Catalog2-Yootheme
 * @copyright Copyright (C) DJ-Extensions.com, All rights reserved.
 * @license http://www.gnu.org/licenses GNU/GPL
 * @author url: http://dj-extensions.com
 * @author email contact@dj-extensions.com
 */
defined('_JEXEC') or die;

$document = JFactory::getDocument();

$document->addScript(JURI::root(true).'/media/djextensions/jquery-ui-1.13.0/jquery-ui.min.js');
$document->addStyleSheet(JURI::root(true).'/media/djextensions/jquery-ui-1.13.0/jquery-ui.min.css');

$djc2Params = JComponentHelper::getParams('com_djcatalog2');
$minRange = $props['range_min'];
$maxRange = $props['range_max'];
$minSelected = JFactory::getApplication()->input->get('price_from', $minRange);
$maxSelected = JFactory::getApplication()->input->get('price_to', $maxRange);
?>

<div class="control-group mod_djc2filters_attribute <?php echo $props['class'];?>">
	<div class="control-label">
		<label class="mod_djc2filters_group_label"><?php echo JText::_('PLG_SYSTEM_DJC2YOOTHEME_PRICE_RANGE') ?></label>
	</div>
	<div id="djc_filter_range<?php echo $props['id']; ?>" class="controls">
		<p class="ui-slider-range-details">
			<input type="text" id="range-amount<?php echo $props['id']; ?>" readonly class="form-control" />
			<input type="hidden" id="slider-price-min<?php echo $props['id'] ?>" name="price_from" value="<?php echo $minSelected; ?>">
			<input type="hidden" id="slider-price-max<?php echo $props['id'] ?>" name="price_to" value="<?php echo $maxSelected; ?>">
		</p>
		<div id="slider-range<?php echo $props['id']; ?>"></div>
	</div>
</div>
<div style="clear: both"></div>

<script>
    jQuery( function() {
        var minRange = <?php echo $minRange; ?>;
        var maxRange = <?php echo $maxRange; ?>;
        var selectedMin = <?php echo ($minSelected !== '') ? $minSelected : $minRange?> ;
        var selectedMax = <?php echo ($maxSelected !== '') ? $maxSelected : $maxRange?> ;
        var cartCurrency = '<?php echo $djc2Params->get('cart_currency') ?>';

        jQuery( "#slider-range<?php echo $props['id']; ?>" ).slider({
            range: true,
            min: minRange,
            max: maxRange,
            values: [ selectedMin, selectedMax ],
            slide: function( event, ui ) {
                jQuery( "#range-amount<?php echo $props['id']; ?>" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );

                jQuery('#slider-price-min<?php echo $props['id'] ?>').val(ui.values[0]);
                jQuery('#slider-price-max<?php echo $props['id'] ?>').val(ui.values[1]);
            }
        });
        //jQuery( "#range-amount<?php echo $props['id']; ?>" ).val( cartCurrency + " " + jQuery( "#slider-range<?php echo $props['id']; ?>" ).slider( "values", 0 ) + " - " + cartCurrency + " " + jQuery( "#slider-range<?php echo $props['id']; ?>" ).slider( "values", 1 ) );
        jQuery( "#range-amount<?php echo $props['id']; ?>" ).val( jQuery( "#slider-range<?php echo $props['id']; ?>" ).slider( "values", 0 ) + " - " + jQuery( "#slider-range<?php echo $props['id']; ?>" ).slider( "values", 1 ) );
    } );
</script>
