@extends('admin.layouts.app')
@section('title')
<title>{{ __('pages.config.title') }} &mdash; {{ config('app.name', 'Laravel') }}</title>
@endsection
@section('header-content')
<h1>{{ __('pages.config.title') }}</h1>
@include('admin.layouts.partials.breadcrumb-section')
@endsection
@section('content')
<div class="row">
    <div class="col-12 col-md-4 col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5>{{ __('pages.config.add_config') }}</h5>
            </div>
            <div class="card-body">
                <form method="post" name="config-form" id="config-form" action="{{ route('admin.config.store') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>{{ __("forms.config.key") }} *</label>
                                <input type="text" name="key" class="form-control alphanum" id="key" value="" placeholder="{{ Lang::get('forms.config.key') }}">
                                <span class="text-danger">{{ ($errors->has('key'))?$errors->first('key'):"" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>{{ __("forms.config.value") }} *</label>
                                <input type="text" name="value" class="form-control" id="value" value="" placeholder="{{ Lang::get('forms.config.value') }}">
                                <span class="text-danger">{{ ($errors->has('value'))?$errors->first('value'):"" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <button id="submit_config_form" type="submit" class="btn btn-primary btn-submit">
                                {{ __('general.submit') }} 
                                <span class="submit-loader" style="display: none;"> <i class="fas fa-spinner fa-spin"></i> </span>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-8 col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5>{{ __('pages.config.config_data') }}</h5>
            </div>
            <div class="card-body">
                <form method="post" name="config-edit-form" id="config-edit-form" action="{{ route('admin.config.update') }}">
                    
                </form>
            </div>
        </div>
    </div>

</div>

@endsection

@section('page-script')
<script src="{!! asset('admin/js/jquery-validation/jsvalidation.min.js') !!}"></script>
<script type="text/javascript">
$(document).ready(function () {
    loadConfigurationData();
    // Add Configuration Start
    $('#config-form').validate({
        rules: {
            'key' : {
                required: true,
                remote: {
                    type: 'post',
                    url: "{{ route('admin.config.check') }}",
                    async:false,
                    data: {
                        "_token": "{{csrf_token()}}"
                    }
                }  
            },
            'value': {
                required: true
            }
        }, messages: {
            key: {
                required: "{{ __('admin_message.config_key_require') }}",
                remote: "{{ __('admin_message.config_key_exist') }}"
            },
            value: {
                required: "{{ __('admin_message.config_value_require') }}"
            }
        },
        submitHandler: function(form) { // <- pass 'form' argument in
            $(".btn-submit").attr("disabled", true);
        }
    });
    $("#config-form").submit(function(e) {    
        e.preventDefault();
        if (!$("#config-form").valid()) {
            return false;
        }
        var formData = new FormData(this);
        $("#submit_config_form").attr("disabled","disabled");
        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            dataType:"json",
            contentType: false,
            processData: false,
            beforeSend:function(res) {
                laravel.startSubmitLoader();
            },
            success:function(res){
                if(res.status == true) {
                    laravel.success(res.message);
                } else {
                    laravel.error(res.message);
                }
                $("#submit_config_form").removeAttr("disabled");
                laravel.stopSubmitLoader();
                loadConfigurationData();
                $("#config-form")[0].reset();
            },
            error: function(res){
                laravel.stopSubmitLoader();
            },
            complete: function(res) {
                laravel.stopSubmitLoader();
            }
        });
    });
    // Add Configuration End

    // Edit Configuration Start
    $('#config-edit-form').validate({
        rules: {
            'value[]' : {
                required: true
            }
        }, messages: {
            value: {
                required: "{{ __('admin_message.config_value_require') }}"
            }
        },
    });
    $("#config-edit-form").submit(function(e) {    
        e.preventDefault();
        if (!$("#config-edit-form").valid()) {
            return false;
        }
        var formData = new FormData(this);
        $("#submit_config_data").attr("disabled","disabled");
        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            dataType:"json",
            contentType: false,
            processData: false,
            beforeSend:function(res) {
                $(".submit-config-loader").show();
            },
            success:function(res){
                if(res.status == true) {
                    laravel.success(res.message);
                } else {
                    laravel.error(res.message);
                }
                $("#submit_config_data").removeAttr("disabled");
                $(".submit-config-loader").hide();
                loadConfigurationData();
            },
            error: function(res){
                $("#submit_config_data").removeAttr("disabled");
                $(".submit-config-loader").hide();
                laravel.stopSubmitLoader();
            },
            complete: function(res) {
                $("#submit_config_data").removeAttr("disabled");
                $(".submit-config-loader").hide();
            }
        });
    });
    // Edit Configuration End

    //convert lowercase to upercase and allow alpha and underscore
    $(document).on("keypress keyup blur",".alphanum",function(e){    
        var regexp = /^[a-zA-Z0-9_]*$/;
        if(!regexp.test($(this).val())) {
            $(this).val($(this).val().slice(0,-1));
            e.preventDefault();
        }
        $(this).val(($(this).val()).toUpperCase());
    });

    //load configuration form
    function loadConfigurationData(){
        $.ajax({
            url: "{{ route('admin.config.load.form') }}",
            type: 'post',
            dataType:"json",
            data: {_token: "{{csrf_token()}}"},
            beforeSend: function(res) {
                // mol.startLoader();
            },
            success: function(res) {
                $('#config-edit-form').html(res.html);
            },
            complete: function() {
                // mol.stopLoader();
            },
            error: function(res) {
                // mol.error(res.message);
                
            },
        });
    }
});
</script>
@endsection