@extends('layouts.master')
@section('title', 'Create Setting')

@can('template-settings-create')
@section("content")
<section class="main_section">
    <!-- Table Section -->
    <form id="settingFormId" action="{{ route('admin.templates.store') }}" method="post">
        <div class="card">
            @csrf
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="relative z-0 w-full mb-3 group">
                            <input type="text" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="name" id="name" value="{{old('name')}}" maxlength="20"  placeholder="">
                            <label for="name" class="ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 z-50 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white" for="value" class="form-label">Name</label>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="relative z-0 w-full group">
                            <textarea type="text" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-20" name="description" id="description" row="5" placeholder=""></textarea>
                            <label for="description" class="ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 z-50 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white" for="source">Description</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button type="submit" class="btn btn-primary btn-save">{!! renderIconHtml('save') !!}{{__('Save')}}</button>
                <a href="{{route('admin.templates.index')}}" class="btn btn-secondary btn-cancel">{!! renderIconHtml('cancel') !!}{{__('Cancel')}}</a>
            </div>
        </div>
    </form>
</section>
<input type="hidden" value="{{route('admin.customer.getCustomer')}}" id="getCustomer">
@endsection

@push('scripts')
<script>
    $(document).on('submit', '#settingFormId', function (e) {
        e.preventDefault();
        let formId = $(this).attr('id');
        let url = $(this).attr('action');
        let pageForm = $(this)[0];
        let formData = new FormData(pageForm);
        let saveBtn = $("#settingFormId .btn-save");
        let saveBtnText = saveBtn.html();
        saveBtn.prop('disabled', true);
        saveBtn.html('<i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;Loading...');
        $.ajax({
            url: url,
            type: 'POST',
            contentType: false,
            processData: false,
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                saveBtn.prop('disabled', false);
                saveBtn.html(saveBtnText);
                $('#' + formId)[0].reset();
                $(".validation-error").remove();
                window.location = response.url;
            },
            error: function (jqXHR) {
                saveBtn.prop('disabled', false);
                saveBtn.html(saveBtnText);
                if (globalErrorHandler(jqXHR.responseJSON))
                    return false

                if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                    var error = jqXHR.responseJSON.errors;
                    var form = "#"+formId;
                    showValidationErrors(error,form);
                }
            }
        });
    });
</script>
@endpush

@endcan