<?php

use yii\helpers\Html;
use yii\helpers\Url;
use kv4nt\owlcarousel\OwlCarouselWidget;
use yii\widgets\Breadcrumbs;

$lang = Yii::$app->language;
$item_vars = $info['item']->itemVariations;
// if($lang == 'ar'){
//     $items = array_reverse($items);
// }
//var_dump($items);
// foreach ($info['items'] as $index => $item) {
 
//     if ($item->id == $info['pos_id']){
//         $pos = $index;
//     }
// }
$this->title = 'QFood';

$script =<<< JS
    // $('.nav-category').css('display','none');
    // $('.nav-item-details').css('display','block');
    $('.carousel-item').on('changed.owl.carousel', function (e) {
        var title = $($(this).find('div.owl-item')[e.item.index]).find('.title').text();
        console.log(title);
        $('#item-name').text(title);
    });
JS;

$this->registerJs($script);

?>
<?= $this->render('_top', $info) ?> 

<?php
    if ($info['item']->subCategory) {
        if ($lang == 'en') {
            $this->title = $info['item']->english_name;
        }
        else {
            $this->title = $info['item']->arabic_name;
        }
    }
    else {
        if ($lang == 'en') {
            $this->title = $info['item']->english_name;
        }
        else {
            $this->title = $info['item']->arabic_name;
        }
    }

    $this->params['breadcrumbs'][] = ['label' => Yii::t('app', 'Main Menu'), 'url' => 'categories'];
    
    if ($info['item']->subCategory) {
        $this->params['breadcrumbs'][] = ['label' => $lang == 'en' ? $info['item']->mainCategory->english_name : $info['item']->mainCategory->arabic_name, 'url' => ['menu/sub-categories?cate_id=' . $info['item']->mainCategory->id]];
        $this->params['breadcrumbs'][] = ['label' => $lang == 'en' ? $info['item']->subCategory->english_name : $info['item']->subCategory->arabic_name, 'url' => ['menu/items?cate_id=' . $info['item']->mainCategory->id . '&sub_id=' . $info['item']->subCategory->id]];
    }
    else {
        $this->params['breadcrumbs'][] = ['label' => $lang == 'en' ? $info['item']->mainCategory->english_name : $info['item']->mainCategory->arabic_name, 'url' => ['menu/items?cate_id=' . $info['item']->mainCategory->id]];
    }
    
    $this->params['breadcrumbs'][] = $this->title;
?>
 <?= Breadcrumbs::widget([
                'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
                'homeLink' => false,
            ]) ?>
<div class="main-carousel">
    <?php 
        OwlCarouselWidget::begin([
            'container' => 'div',
            'containerOptions' => [
                'id' => 'container-id',
                'class' => 'carousel-item'
            ],
            'pluginOptions' => [
                'autoplay' => false,
                'items' => 1,
                'nav'=>false,
                'dots' => true,
                'loop' => false,
                'startPosition' => 'URLHash',
                'stageClass' => 'custom-stage',
                'URLhashListener'=>true,
                'rtlClass' => 'owl-rtl',
            ],
        ]);
    ?>
    
    <?php foreach ($info['images'] as $index => $image) : ?>

        <div class="details-item">
            <div class="wrapper">
                <img class="img-responsive img-heading" src="<?= Url::base()?>/<?= $image->image_path ?>" alt="">
            </div>
        </div>
        
    <?php endforeach; ?>

    <?php OwlCarouselWidget::end(); ?>
</div>

<div class="heading">
    <div class="title-details">
        <p class="title">
            <?= $lang == 'ar' ? $info['item']->arabic_name : $info['item']->english_name ?>
        </p>
        <?php if(count($item_vars) > 0) : ?>
        <p class="size">
            (<?= $lang == 'ar' ? $item_vars[0]->arabic_description : $item_vars[0]->english_description ?> : <?= $lang == 'ar' ? $item_vars[0]->arabic_details : $item_vars[0]->english_details ?>)
        </p>
        <?php endif; ?>
    </div>
    <?php if(count($item_vars) > 0) : ?>
        
        <div class="price-details">
            <p><?= $item_vars[0]->price?></p>
            <p><?= $info['currency'] ?></p>
            </div>
        
    <?php endif; ?>
</div>
<div class="content-description">

<div class="div-description">
        <p class="title-bold"><?= Yii::t('app', 'Description') ?></p>
        <p class="description">
            <?= $lang == 'ar' ? $info['item']->arabic_description : $info['item']->english_description ?>
        </p>
    </div>
    <?php if ($info['item']->calories) : ?>
        <div class="calories">
        <p class="title-bold"><?= Yii::t('app', 'Calories') ?></p>
            <p class="calorie-number">
                <?= $info['item']->calories ." ". Yii::t('app', 'Cal')?>
            </p>
        </div>
    <?php endif; ?>
    <div class="div-preparation">	<?php if ($info['item']->preperation_method_en || $info['item']->preperation_method_ar):?>		  <p class="title-bold"><?= Yii::t('app', 'Preparation Method') ?></p>        <p class="preparation-methode">            <?= $lang == 'en' ? $info['item']->preperation_method_en : $info['item']->preperation_method_ar?>        </p>	<?php endif;?>
        <p class="title-bold"><?= Yii::t('app', 'Preparation Time') ?></p>
        <p class="preparation-time">
            <?= $info['item']->preparation_time ."   ". Yii::t('app','minute')?>
        </p>
        
    </div>
    <?php if($info['item']->arabic_additional_sauces || $info['item']->english_additional_sauces) : ?>
        <div class="sauces">
            <p class="title-bold"><?= Yii::t('app','Additional Sauces')?></p>
            <p>
                <?= $lang == 'ar' ? $info['item']->arabic_additional_sauces : $info['item']->english_additional_sauces ?>
            </p>
        </div>
    <?php endif; ?>

    <?php if (count($item_vars) > 1) : ?>
        <p class="title-bold">
            <?= Yii::t('app', 'Also Available') ?>
        </p>
        <?php foreach ($item_vars as $index => $var) : ?>
            <?php if($index != 0) : ?>
                <div class="row-available">
                    <div class="details-size">
                    <p class="size-available">
                        <?= $lang == 'ar' ? $var->arabic_description : $var->english_description ?>
                    </p>
                    <p>
                        <?= $lang == 'ar' ? $var->arabic_details : $var->english_details ?>
                    </p>
                    </div>
                    <div class="price-available">
                        <p class="price"><?= $var->price ?></p>
                        <p><?= $info['currency'] ?></p>
                    </div>
                </div>
            <?php endif; ?>
        <?php endforeach; ?>
    <?php endif; ?>

</div>