@if ($label !== false)
    @php
    $divclose = '</div>';
    $optional = ($optional) ? ' <small class="text-muted">( Opsional )</small>' : '';
    @endphp

    <div class="form-group {{ @$errors->has($name_start) ? 'has-error' : '' }}">
        <label>{{ $label }}{!! $optional !!}</label>
@endif

<!--
if you want to use data attributes, use like this : data-date-{optionname}="optionvalue"
example : data-date-orientation="bottom"
-->

@if ($icon == 'true')
    @if ($picker_type == 'date' or $picker_type == 'month' or $picker_type == 'year')
        <div class="input-group">
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <small><i class="mdi mdi-calendar-today"></i></small>
                </div>
            </div>
            <input type="text" value="{{ $old }}"{{ $attributes->merge(['class' => 'form-control ' . $picker_type . '-picker', 'placeholder' => '.....', 'autocomplete' => 'off']) }}>
        </div>
    @else
        <div class="input-group">
            <input type="text" id="{{ $id_start }}" name="{{ $name_start }}" value="{{ $old_start }}"{{ $attributes->merge(['class' => 'form-control', 'placeholder' => '.....', 'autocomplete' => 'off']) }}>
            <div class="input-group-prepend">
                <div class="input-group-text">
                    <small>s/d</small>
                </div>
            </div>
            <input type="text" id="{{ $id_end }}" name="{{ $name_end }}" value="{{ $old_end }}"{{ $attributes->merge(['class' => 'form-control', 'placeholder' => '.....', 'autocomplete' => 'off']) }}>
        </div>
    @endif
@else
    @if ($picker_type == 'date' or $picker_type == 'month' or $picker_type == 'year')
        <input type="text" value="{{ $old }}"{{ $attributes->merge(['class' => 'form-control ' . $picker_type . '-picker', 'placeholder' => '.....', 'autocomplete' => 'off']) }}>
    @else
        <input type="text" id="{{ $id_end }}" name="{{ $name_end }}" value="{{ $old_end }}"{{ $attributes->merge(['class' => 'form-control', 'placeholder' => '.....', 'autocomplete' => 'off']) }}>
    @endif
@endif

@if (!empty($info))
    <small class="text-muted">{{ $info }}</small>
@endif
@if (@$errors->has(@$name_start))
    @foreach ($errors->get(@$name_start) as $message)
        <p class="text-danger">{{ ucfirst($message) }}</p>
    @endforeach
@endif
@if (@$errors->has(@$attributes['name']))
    @foreach ($errors->get(@$attributes['name']) as $message)
        <p class="text-danger">{{ ucfirst($message) }}</p>
    @endforeach
@endif
{!! @$divclose !!}

@push('styles')
    @once
    <link rel="stylesheet" href="{{ asset('vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}">
    @endonce
@endpush

@push('scripts')
    @once
    <script src="{{ asset('vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    @endonce

    @if ($picker_type == 'date')
        @once
        <script>
        setDatePicker()
        </script>
        @endonce
    @elseif ($picker_type == 'date-range')
        <script>
        setDateRangePicker("#{{ $id_start }}", "#{{ $id_end }}")
        </script>
    @elseif ($picker_type == 'year')
        @once
        <script>
        setYearPicker()
        </script>
        @endonce
    @elseif ($picker_type == 'year-range')
        <script>
        setYearRangePicker("#{{ $id_start }}", "#{{ $id_end }}")
        </script>
    @else
        <script>
        setMonthPicker()
        </script>
    @endif
@endpush