<?php
use App\Library\FinancialLib;
?>

<style>
    .nav-tabs { margin: 0 !important; width: 100% !important; padding-bottom: 0 !important; }
    .nav-tabs > li { background-color: #f5f5f5; }
    .tab-content { border: 1px solid #ddd; border-top: none; }
    .tab-content .nav-tabs > li { background-color: #fff; }
    .nav-tabs > li > a { color: #ccc; padding: 25px 0; border: none; }
    .nav-tabs > li > a > i { display: block; font-size: 35px; margin-bottom: 10px; }
    .tab-content .nav-tabs > li > a { color: #ccc; padding: 25px; border: none !important; }
    .nav-tabs > li > a:hover { background-color: white; }
    .nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus { color: #0065CB!important; }
    .tab-pane .table { margin-bottom: 0; }
</style>
<div id="div_dati_livello">
    <?php
    $tipiVeicoli = [
        'autoveicolo' => 'car',
        'bus' => 'bus',
        'camper' => 'bus',
        'ciclomotore' => 'motorcycle',
        'motociclo' => 'motorcycle',
    ];
    $tipiSoste = [
        'std' => 'Standard',
        'gio' => 'Giornaliera',
        'fse' => 'Fine sett. (Ven-Dom)',
        'set' => 'Settimanale',
        'men' => 'Mensile',
    ];
    ?>
    <div>
        <?php $grpVehicleTypes = $levels->groupBy('tipo_veicolo_id') ?>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" id="veicles-tabs">
            <?php $__currentLoopData = $grpVehicleTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vehicleTypes => $levels): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <li role="presentation" style="width: <?php echo e(100 / $grpVehicleTypes->count()); ?>%;">
                <a href="#tipo-veicolo-<?php echo e($vehicleTypes); ?>" 
                    aria-controls="tipo-veicolo-<?php echo e($vehicleTypes); ?>" 
                    role="tab" 
                    data-toggle="tab"
                    data-vehicleTypes="<?php echo e($vehicleTypes); ?>"
                    class="nav-link text-center">
                    <i class="fa fa-<?php echo e($tipiVeicoli[$levels->first()->vehicle_type->slug]); ?>"></i><?php echo $levels->first()->vehicle_type->nome; ?>

                </a>
            </li>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <?php $__currentLoopData = $grpVehicleTypes; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vehicleTypes => $levels): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div role="tabpanel" class="tab-pane" id="tipo-veicolo-<?php echo e($vehicleTypes); ?>">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist" id="levels-tabs" style="display: flex; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; flex-wrap: unset;">
                    <?php $__currentLoopData = $levels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $level): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li role="presentation" style="float: left;">
                        <a href="#livello-<?php echo e($level->id); ?>" 
                            aria-controls="livello-<?php echo e($level->id); ?>" 
                            role="tab" 
                            data-toggle="tab"
                            data-livello="<?php echo e($level->id); ?>"
                            class="nav-link text-center"><?php echo $tipiSoste[$level->tipo_sosta]; ?></a>
                    </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <?php $__currentLoopData = $levels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $level): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div role="tabpanel" class="tab-pane" id="livello-<?php echo e($level->id); ?>">
                        <table class="table table-bordered">
                            <tbody>
                                <?php if($level->tipo_sosta == 'std'): ?>
                                <tr>
                                    <th>Tariffa oraria</th>
                                    <td class="text-right"><?php echo FinancialLib::centToEuro($level->tariffa_oraria); ?></td>
                                </tr>
                                <tr>
                                    <th>Tariffa minima</th>
                                    <td class="text-right"><?php echo FinancialLib::centToEuro($level->tariffa_minima); ?></td>
                                </tr>
                                <tr>
                                    <th>Tempo iniziale <em>(in m)</em></th>
                                    <td class="text-right"><?php echo e($level->tempo_gratuito); ?></td>
                                </tr>
                                <tr>
                                    <th>Costo iniziale</th>
                                    <td class="text-right"><?php echo FinancialLib::centToEuro($level->costo_gratuito); ?></td>
                                </tr>
                                <tr>
                                    <th>Costo massimo</th>
                                    <td class="text-right"><?php echo $level->costo_massimo ? FinancialLib::centToEuro($level->costo_massimo) : '-'; ?></td>
                                </tr>
                                <?php else: ?>
                                <tr>
                                    <th>Costo</th>
                                    <td class="text-right"><?php echo FinancialLib::centToEuro($level->costo_fisso); ?></td>
                                </tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div><!-- end of .tab-contents -->
    </div>
</div><!-- end of #div_dati_livello -->
<script>
    function updateLevel() {
        var level = $('.nav.nav-tabs#levels-tabs li a.active').data('livello');
        console.log('Updateing level...', level);
        $('[name="level_id"]').val(level);

        updateTimeCounter(level);
    }

    $(document).ready(function () {
        $('.nav.nav-tabs#veicles-tabs').find('li').first().find('a').addClass('active');
        $('.nav.nav-tabs#veicles-tabs + .tab-content').find('div').first().addClass('active');

        $('.nav.nav-tabs#levels-tabs').find('li').first().find('a').addClass('active');
        $('.nav.nav-tabs#levels-tabs + .tab-content').find('div').first().addClass('active');

        $('.nav.nav-tabs#veicles-tabs').tab();
        $('.nav.nav-tabs#levels-tabs').tab();

        $('.nav.nav-tabs#veicles-tabs').on('show.bs.tab', function (event) {
            $('.nav.nav-tabs#levels-tabs li').each(function (index, value) {
                $(value).find('a').removeClass('active');
            });
            $('.nav.nav-tabs#levels-tabs + .tab-content > div').each(function (index, value) {
                $(value).removeClass('active');
            });

            var target = $(event.target);

            $(target.attr('href')).find('.nav.nav-tabs li').first().find('a').addClass('active');
            $(target.attr('href')).find('.nav.nav-tabs + .tab-content .tab-pane').first().addClass('active');

            setVehicleType(target.data('tipoveicolo'));

            updateLevel();
        });
        $('.nav.nav-tabs#levels-tabs').on('show.bs.tab', function (event) {
            var target = $(event.target);

            var level = target.data('livello');
            $('[name="level_id"]').val(level);

            updateTimeCounter(level);
        });

        updateLevel();
    });
</script>