@extends('layouts.'.$namespaceName.'.master')
@section('title')
{{$title}}
@endsection
@section('content')
<div class="page-wrapper">
    <div class="page-content m-2">
        @include('message')
        @include('breadcrumb')
        <div class="row">
            <div class="col-xl-11 mx-auto">
                <h6 class="mb-0 text-uppercase">{{$title}}</h6>
                <hr/>

                <form action="{{route($modelName.'.store')}}" method="post" autocomplete="off"
                      enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-header">
                            <h6>{{trans($namespaceName.'/'.$modelName.'.'.'service_details')}}</h6>
                        </div>
                        <div class="card-body">
                            <div class="border p-3 rounded">
                                <div class="mb-3">
                                    <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'name_en')}}</label>
                                    <input type="text" name="name_en" class="form-control  @error('name_en') is-invalid @enderror" required value="{{old('name_en')}}">
                                    @error('name_en')
                                    <div class="alert alert-danger">{{$message}}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'name_ar')}}</label>
                                    <input type="text" name="name_ar" class="form-control  @error('name_ar') is-invalid @enderror" required value="{{old('name_ar')}}">
                                    @error('name_ar')
                                    <div class="alert alert-danger">{{$message}}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'description_en')}}</label>
                                    <textarea name="description_en" class="form-control  @error('description_en') is-invalid @enderror" required>{{old('description_en')}}</textarea>
                                    @error('description_en')
                                        <div class="alert alert-danger">{{$message}}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'description_ar')}}</label>
                                    <textarea name="description_ar" class="form-control  @error('description_ar') is-invalid @enderror" required>{{old('description_ar')}}</textarea>
                                    @error('description_ar')
                                        <div class="alert alert-danger">{{$message}}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'consumer_type')}}</label>
                                    <select class="single-select required" name="consume_type" data-placeholder="{{__('operator/services.select_consumer_type')}}">
                                        <option disabled selected>{{__('operator/services.select_consumer_type')}}</option>
                                        <option value="single">{{__('operator/services.single')}}</option>
                                        <option value="multiple">{{__('operator/services.multiple')}}</option>
                                    </select>
                                    @error('consume_type')
                                    <div class="alert alert-danger">{{$message}}</div>
                                    @enderror
                                </div>



                            </div>
                        </div>
                    </div>


                    <div class="card">
                        <div class="card-header">
                            <h6>{{trans($namespaceName.'/'.$modelName.'.'.'limits_details')}}</h6>
                        </div>
                        <div class="card-body">

                            <div class="alert alert-danger" style="display: none" id="limit_already_added">
                                <div class="d-flex align-items-center">
                                    <div class="ms-3">
                                        <div class="text-black">{{trans($namespaceName.'/'.$modelName.'.'.'this limit is already added')}}</div>
                                    </div>
                                </div>
                            </div>

                            <table class="table table-bordered" id="dynamicAddRemove">
                                <tr>
                                    <th width="20%">{{trans($namespaceName.'/'.$modelName.'.'.'limit_name')}}</th>
                                    <th width="15%">{{trans($namespaceName.'/'.$modelName.'.'.'limit_value')}}</th>
                                    <th>{{trans($namespaceName.'/'.$modelName.'.'.'transaction_type')}}</th>
                                    <th width="10%">{{trans($namespaceName.'/'.$modelName.'.'.'action')}}</th>
                                </tr>
                                <tr>
                                    <td>

                                        <select class="single-select" id='limit_key' onchange="selectLimit()" data-placeholder="Choose anything">
                                            <option selected disabled value="null">{{trans($namespaceName.'/'.$modelName.'.'.'select_limit')}}</option>
                                            @foreach($limits as $limit)
                                                <option value="{{$limit->key}}">{{ $limit->display_value}}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <input type="number" id='max_value' min="1" oninput="validity.valid||(value='');" placeholder="{{__('labels.unlimited')}}" class="form-control" />
                                    </td>
                                    <td style="max-width:30%">
                                        <select class="multiple-select" id='transaction_type' multiple="multiple" data-placeholder="Choose anything" placeholder="بدون نوع معاملة">
                                            @foreach($transactionTypes as $transactionType)
                                                <option value="{{$transactionType->key}}">{{ $transactionType->key}}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td>
                                        <button type="button" id="dynamic-ar" class="btn btn-outline-success" disabled>{{trans('labels.add')}}</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <button class="btn btn-success"> {{trans($namespaceName.'/app.save')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>


@endsection

@push('js')


<script type="text/javascript">
$('.multiple_select').select2({
    placeholder: "بدون نوع معاملة"
});



    let limitsArray = []
    var i = 0;
    $("#dynamic-ar").click(function () {

        ++i;
        var limit_key = $("#limit_key").val();
        var max_value = $("#max_value").val();
        var display_value = $("#limit_key option:selected").text();
        var transaction_types = $('#transaction_type').select2('data');
        var ids = [];
        console.log(transaction_types);
        var flag = 1;
        Array.from(document.querySelector("#limit_key").options).forEach(function(option_element) {
            if (option_element.selected) {
                if (limitsArray.includes(limit_key)) {
                    $('#limit_already_added').show();
                    flag = 0
                }
            }
        });
        if(flag && limit_key!=null) {
            limitsArray.push(limit_key)
            $("#dynamicAddRemove").append('<tr id="' + limit_key + '"><td><input readonly type="hidden" name="servieLimits[' + i +
                '][key]" value="' + limit_key + '" class="form-control" />' +
                '<input readonly type="text" value="' + display_value + '" class="form-control" /></td>' +
                '<td><input readonly type="text" name="servieLimits[' + i +
                '][max_value]" value="' + max_value + '" placeholder="{{__('labels.unlimited')}}" class="form-control" /></td>' +
                '<td><select class="multiple_select_disabled" id="transaction_type_'+i+'" multiple="multiple" name=transaction_types[' + i +
                '][transaction_type]">'+
                '</select></td>' +
                '<input readonly type="hidden" name="servieLimits[' + i +
                '][transaction_type_keys]" id="input_transaction_type_'+i+'" class="form-control" />'+
                '<td><button type="button" class="btn btn-outline-danger remove-input-field"><i class="bx bxs-trash"></i></button></td></tr>'
            );


            $('.multiple_select_disabled').select2({
                theme: 'bootstrap4',
                width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
                placeholder: $(this).data('placeholder'),
                disabled: true,
            });
            $('.multiple_select').select2({
                theme: 'bootstrap4',
                width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
                placeholder: $(this).data('placeholder'),
                allowClear: Boolean($(this).data('allow-clear')),

            });
            transaction_types.forEach(function (data) {
            var newOption = new Option(data.text, data.id, true, true);
            // Append it to the select
                ids.push(data.id)
            $('#transaction_type_'+i+'').append(newOption).trigger('change');
            });

            $('#input_transaction_type_'+i+'').val(ids);
            $('#dynamic-ar').prop('disabled', 'disabled')
            //$('#limit_key').val('');
            $('#max_value').val('');
            $("#transaction_type").val([]).trigger('change')

        }

    });
    $(document).on('click', '.remove-input-field', function () {
        var trId = $(this).parents('tr')[0].id
        limitsArray.pop(trId)
        $(this).parents('tr').remove();
        $('#dynamic-ar').prop('disabled', '')

    });
    function selectLimit(){
        $('#limit_already_added').hide();
        $('#dynamic-ar').prop('disabled', '')
    }

</script>
@endpush