@extends('layouts.app_new')
@section('title','Settings')
@section('style')
<link rel="stylesheet" href="{{asset('datatable/datatables.min.css')}}">
@endsection
@section('content')
<div class="row  justify-content-center flex-fill">
    <div class="col align-self-center">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">{{__("Settings")}}</h5>
            </div>
            <div class="card-body table-responsive">
                <table id="settings"
                    class="table table-bordered table-condensed table-striped data-table table-responsive text-center">
                    <thead>
                        <tr>
                            <th>{{__("key")}}</th>
                            <th>{{__("value")}}</th>
                            <th>{{__("value_type")}}</th>
                            <th width="70">{{__("Control")}}</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td colspan="4" class="success text-center text-success"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <!-- The Modal -->
            @include('settings.crud')
        </div>

    </div>
</div>

@endsection

@section('script')
<script src="{{asset('datatable/jquery.js')}}"></script>
<script src="{{asset('datatable/datatables.min.js')}}"></script>
<script type="text/javascript">
    $(function () {
        var table = $('.data-table').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            ajax:{
                "url":"{{ route('settings.index')}}",
                "data": function (d) {
                    d.search = $('input[type="search"]').val()
                },
            },

            columns: [
            {data: 'key'  , name: 'key' ,title: '{{__("key")}}'},
            {data: 'value'  , name: 'value' ,title: '{{__("value")}}',defaultContent:""},
            {data: 'action'   , name: 'Control' ,title: '{{__("Control")}}', orderable: false, searchable: false},
            {data: 'value_type', orderable: false, searchable: false, visible:false,defaultContent:"",defaultContent:0},

            ],
        });

        $.noConflict();
        const val_div = $('#value_div');


        modal = $('.modal'), form = $('.form'), btnAdd = $('.add'),
        btnSave = $('.btn-save'),btnUpdate = $('.btn-update');
        btnClose=$('.btn-close')
        btnClose.click(function(e){
            // $('#value').remove();
            if ($('#value').hasClass("select2-hidden-accessible")) {
            // Select2 has been initialized
            $('#value').select2('destroy');
            }
            $('#value').remove();
        });
        btnUpdate.click(function(e){
            e.preventDefault();
            if(!confirm("Are you sure?")) return;
               var  updateId = form.find('input[name="id"]').val();
               var my_val=$('#value').val();
                // console.log(my_val);
            $.ajax({
                type: "POST",
                url: "{{route('settings.index')}}"+"/"+updateId,
                data: {
                    key:$("input[name=key]").val(),
                    value:my_val,
                    _token:$('meta[name="csrf-token"]').attr('content'),
                    _method:"PUT"
                },
                success:function(response){
                    if(response) {
                        console.log(response.message);
                        $('.success').text(response.message);
                        btnClose.click();
                        table.draw();
                        form.find('span').empty();
                        form.find('.is-invalid').removeClass('is-invalid');
                        form.trigger('reset');
                    }
                },
                error: function(response) {
                    console.log(response.responseJSON.errors);
                    let errors = response.responseJSON.errors;
                    for(error in errors ) {
                        console.log(error);
                        $('#'+error).addClass('is-invalid');
                        $('#'+error+'Error').text(errors[error]);
                    }
                }
            }); //end ajax
        });

$(document).on('click','.btn-edit',function() {
            var rowData = table.row($(this).parents('tr')).data();
            // console.log(rowData);
            form.find('input[name="id"]').val(rowData.id);
            form.find('input[name="key"]').val(rowData.key);
            if ($('#value').hasClass("select2-hidden-accessible")) {
                // Select2 has been initialized
                $('#value').select2('destroy');
            }
            $('#value').remove();
            switch (rowData.key) {
                case "Default Source Country":
                     $.ajax({
                        type: "GET",
                        url: "{{route('json.countries')}}",
                        success :function(response) {
                            if(response) {
                                // console.log(response.countries);
                                var countries=JSON.parse(response.countries);
                                var select=`<select id="value" class="select2 form-select value-select" name="value" style="width: 100%">`;

                                    for (let index = 0; index < countries.length; index++) {
                                        const element = countries[index];
                                        select+=`<option value="${element.id}"`;if(element.id==rowData.value){select+=`selected`};select+=`>
                                        @if(app()->getLocale()=='ar')${element.ar_name}@else ${element.ar_name} @endif
                                        </option>`
                                    }
                                    select+"</select>"
                                val_div.append(select);
                               $('#value.value-select').select2({             theme: 'bootstrap-5' ,dropdownParent: $('#crup')});
                            }
                        }
                    });
                break;
                case "Default Destination Country":
                    $.ajax({
                        type: "GET",
                        url: "{{route('json.countries')}}",
                        success :function(response) {
                            if(response) {
                                // console.log(response.countries);
                                var countries=JSON.parse(response.countries);
                                var select=`<select id="value" class="select2 form-select value-select" name="value" style="width: 100%">`;

                                    for (let index = 0; index < countries.length; index++) {
                                        const element = countries[index];
                                        select+=`<option value="${element.id}"`;if(element.id==rowData.value){select+=`selected`};select+=`>
                                        @if(app()->getLocale()=='ar')${element.ar_name}@else ${element.ar_name} @endif
                                        </option>`
                                    }
                                    select+"</select>"
                                val_div.append(select);
                                $('#value.value-select').select2({             theme: 'bootstrap-5' ,dropdownParent: $('#crup')});
                            }
                        }
                    });
                break;
                case "Defualt Ratio":
                    var input='<input id="value" type="number" min="0" max="100" step="0.01" name="value" class="form-control input-sm" value="'+rowData.value+'" required>';
                    val_div.append(input);
                    break;
                case "Balance Recharge Period":
                    var input='<input id="value" type="number" min="0" step="0.01" name="value" class="form-control input-sm" value="'+rowData.value+'" required>';
                    val_div.append(input);
                    break;
                case "Defualt Balance":
                    var input='<input id="value" type="number" min="0" step="0.01" name="value" class="form-control input-sm" value="'+rowData.value+'" required>';
                    val_div.append(input);
                    break;
                default:
                    break;
            }
        });
    });
</script>
<script>
    if ($("#value-select").length){
        $('#value-select').select2({
            theme: 'bootstrap-5' ,
            dropdownParent: $('#crup')
        });
    }
</script>
@endsection