@php

    if(array_has($sub, 'json_options')) {
        $options = json_decode($sub->json_options, true);
    } else {
        $options['type'] = 'testimonial';
    }

@endphp


<div class="repeatable-component-wrapper pb-5">

    @php
    /** 
     *  This was returning 0 instead of 1.
     **/ 

    (isset($sub->subcomponents)) ? $entryCount = (count($sub->subcomponents)) : $entryCount = 1; 

    @endphp

    <div class="form-group">
        <label>Carousel Type</label>
        <select name="components[{{$item->id}}][values][json_options][type]" class="form-control">
            <option value="stepped-image" {{ $options['type'] === 'stepped-image' ? 'selected' : '' }}>Stepped with Images</option>
            <option value="testimonial" {{ $options['type'] === 'testimonial' ? 'selected' : '' }}>Testimonial</option>
            <option value="column" {{ $options['type'] === 'column' ? 'selected' : '' }}>Column Carousel</option>
            <option value="logos" {{ $options['type'] === 'logos' ? 'selected' : '' }}>Logo Strip (continuous scroll)</option>
            <option value="centre" {{ $options['type'] === 'centre' ? 'selected' : '' }}>Project Gallery (centred slides with progress bar)</option>
        </select>
    </div>
    <div class="form-group">
        <label>Carousel Columns</label>
        <select name="components[{{$item->id}}][values][columns]" class="form-control">
            @for($i = 0; $i<=6; $i++)
                <option value="{{$i}}" {{ ( isset ($sub->columns) && $sub->columns == $i ) ? 'selected' : '' }}>{{$i}}</option>
            @endfor
        </select>
    </div>

    {{-- ASPECT RATIO --}}
    @php
    if( old("components.".$item->id.".values.enable_aspect_ratio", $sub->enable_aspect_ratio ?? null) ){
        $on = 'checked';
        $off = '';
    } else {
        $on = '';
        $off = 'checked';
    }
    $check = old("components.".$item->id.".values.aspect_ratio", $sub->aspect_ratio ?? null);
    $ratios = getAspectRatios();
    @endphp
    <div class="form-group">
        <div><label for="{{'components-'.$item->id.'-values-aspect_ratio'}}">Aspect Ratio</label></div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="{{'components['.$item->id.'][values][enable_aspect_ratio]'}}" id="{{'components-'.$item->id.'-values-enable_aspect_ratio-on'}}" value="1" {{$on}}>
            <label class="form-check-label" for="{{'components-'.$item->id.'-values-enable_aspect_ratio-on'}}">On</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="{{'components['.$item->id.'][values][enable_aspect_ratio]'}}" id="{{'components-'.$item->id.'-values-enable_aspect_ratio-off'}}" value="0" {{$off}}>
            <label class="form-check-label" for="{{'components-'.$item->id.'-values-enable_aspect_ratio-off'}}">Off</label>
        </div>
    </div>
    <div class="form-group">
        <select name="{{'components['.$item->id.'][values][aspect_ratio]'}}" id="{{'components-'.$item->id.'-values-aspect_ratio'}}">
            @foreach($ratios as $arLabel => $arVal)
                <option value="{{$arVal}}" {{($check == $arVal)? 'selected':''}}>{{$arLabel}}</option>
            @endforeach
        </select>
    </div>

    {{-- SUBCOMPONENTS --}}
    <div class="component subcomponents-wrapper sortable-with-handle">
        @for($i = 0; $i < $entryCount; $i++) 

            @include('componentcarousel::item.editor', 
                [
                    'i'         => $i,
                    'itemID'    => $item->id
                ]
            )

        @endfor
    </div>

    @if(isset($post->id))
        <input type="hidden" name="components[{{$item->id}}][post_id]" value="{{$post->id}}">
    @endif

    <input type="hidden" name="components[{{$item->id}}][type]" value="ComponentCarousel">

    <button type="button" class="add-sub btn btn-primary" data-route="/admin/componentcarousel/add" data-id="{{$item->id}}" data-i="{{$i}}">Add another</button>
    <i class="fa fa-circle-o-notch fa-lg fa-spin loading-icon" style="display: none;"></i>

</div>