@php
    $id = 'date_format';
    $comp = [
        'label' => 'Date Format',
    ];
    $uniq_id = uniqid();
@endphp
@component('admin.components.form_field', [
    'class' => 'row ' . transform_if($errors->has($id), 'has-error'),
    'label' => $comp['label'],
    'required' => data_get($comp, 'req'),
    'description' => data_get($comp, 'descr'),
    'ff_classes' => [
        'label' => 'col-sm-2 d-flex align-items-center',
        'slot' => 'col-sm-10 d-flex-center',
    ],
])
    {{--
    <div class="row" style="max-width: 700px;">
        @foreach (range(0, 1) as $index)
            <div class="col-sm-2 px-0">
                <select class="required form-control select2" name="date_format[orders][]" >
                    <option>&nbsp;</option>
                    @foreach(['DD' => 'Day', 'MM' => 'Month', 'YY' => 'Year'] as $val => $text)
                        <option value="{{$val}}">{{$text}}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-sm-2 px-0">
                <select class="required form-control select2" name="date_format[separator][]">
                    <option>&nbsp;</option>
                    @foreach(['/', '-', '{space}'] as $text)
                        <option value="{{$text}}">{{$text}}</option>
                    @endforeach
                </select>
            </div>
        @endforeach

        <div class="col-sm-2 px-0">
            <select class="required form-control select2" name="date_format[orders][]" >
                <option>&nbsp;</option>
                @foreach(['DD' => 'Day', 'MM' => 'Month', 'YY' => 'Year'] as $val => $text)
                    <option value="{{$val}}">{{$text}}</option>
                @endforeach
            </select>
        </div>
    </div>
    --}}
    <div class="row w-100" data-rowId="{{$uniq_id}}">
        <div class="col-12 col-sm-4 col-md-2">
            <small class="text-muted">Order:</small>
            <select class="required form-control select2 select2bs4" name="date_format[orders]" >
                <option value="">&nbsp;</option>
                @foreach(\App\Models\Hybrids\PivotDateFormat::getPermutationSet()->all() as $text)
                    <option value="{{$text}}">{{$text}}</option>
                @endforeach
            </select>
        </div>

        <div class="col-12 col-sm-2 col-md-2">
            <small class="text-muted">Separator:</small>
            <select class="required form-control select2 select2bs4" name="date_format[separator]">
                <option value="">&nbsp;</option>
                @foreach(['/', '-', '{space}'] as $text)
                    <option value="{{$text}}">{{$text}}</option>
                @endforeach
            </select>
        </div>
    </div>
@endcomponent

@push('script')
<script>
    $(() => {
        @once 
        $('[name="date_format[orders]"]').on('change', function() {
            $(this).val() === '' && $(this).parents('.row:first')
                .find('[name="date_format[separator]"]').val('').trigger('change');
        });
        @endonce

        @if(isset($date_format) && $date_format)
        @once
        var fn_updateVal = ($row, field, val) => {
            $row.find(`[name="date_format[${field}]"]`).val(val).trigger('change');
        };
        @endonce

        var $row = $('.row[data-rowId="{{$uniq_id}}"]');
        fn_updateVal($row, 'orders', "{{ data_get($date_format, 'orders', []) }}");
        fn_updateVal($row, 'separator', "{{ data_get($date_format, 'separator', '') }}");
        @endif
    });
</script>
@endpush