{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

@section('content')
<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <div class="card shadow-sm">
        <div class="card-header card-header-tabs-line nav-tabs-line-3x">
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <li class="nav-item me-3">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_user_edit_tab_1">
                            <span class="nav-icon">
                                <i class="fa fa-user"></i>
                            </span>
                            <span class="nav-text font-size-lg">{{$page_title}}</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane show active px-7" id="kt_user_edit_tab_1" role="tabpanel">
                    <div class="row">
                        @include('backend.errors')
                        <div class="form-group row mb-5">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
                                @php $isEdit = !empty($data['id']); @endphp
                                @if ($isEdit)
                                <input type="hidden" name="participant_id" value="{{ $data['participant_id'] }}">
                                @endif
                                {!!Helper::getClientManageDropDown([
                                    'selectedClientId' => ($data['participant_id'] ?? ''),
                                    'isRequired' => true,
                                    'extraClass' => 'client_select_dropdown',
                                    'name' => 'participant_id',
                                    'isDisabled' => $isEdit ? true : false
                                ])!!}
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-3">
                                <label class="col-form-label text-lg-right required" for="content">Content</label>
                                <textarea name="content" id="kt-ckeditor-5" class="form-control form-control-solid required">{{$data['content'] ?? ''}}</textarea>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col-xl-12 mt-3">
                                <label class="col-form-label text-lg-right required">Footer</label>
                                <textarea name="footer" class="form-control form-control-lg form-control-solid required" rows="3">{{ old('footer', $data['footer'] ?? '') }}</textarea>
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
                                <label class="col-form-label text-lg-right required" for="version">Version</label>
                                <input type="text" name="version" id="version" class="form-control form-control-solid required" value="{{ old('version', $data['version'] ?? '') }}">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-3">
                                <label class="col-form-label text-lg-right required" for="status">Status</label>
                                <select name="status" id="status" class="form-control form-control-solid required">
                                    @foreach(config('constant.save_list') as $key => $value)
                                        <option value="{{$key}}" {{ (isset($data['status']) && $data['status'] == $key) ? 'selected' : '' }}>{{$value}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer text-right">
            <button type="button" class="btn btn-primary" onclick="submitForm()">Submit</button>
            <a href="{{ route('consentform.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script src="{{ asset('js/ckeditor_4/ckeditor.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var isEdit = @json(!empty($data['id']));
        CKEDITOR.replace('kt-ckeditor-5', {
            fullPage: true,
            allowedContent: true
        });
        $('#manage_form').validate({
            ignore: [],
            rules: {
                content: {
                    required: function () {
                        CKEDITOR.instances['kt-ckeditor-5'].updateElement();
                        return true;
                    }
                },
                footer: {
                    required: true
                },
                version: {
                    required: true
                },
                keywords: {
                    required: true
                }
            },
            messages: {
                content: {
                    required: "Content is required"
                },
                footer: {
                    required: "Footer is required"
                },
                version: {
                    required: "Version is required"
                },
                keywords: {
                    required: "Keywords are required"
                }
            },
            errorClass: 'text-danger',
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            }
        });

        $('.client_select_dropdown').on('change', function() {
            getConsentFormTemplate();
        });

        if (!isEdit && $('.client_select_dropdown').val()) {
            getConsentFormTemplate();
        }
    });

    function submitForm() {
        // update CKEditor instances to textarea
        if (typeof CKEDITOR !== 'undefined') {
            for (var instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
        }

        if ($('#manage_form').valid()) {
            $('#submit_btn').attr('disabled', 'disabled');
            $('#manage_form').submit();
        }
    }

    function getConsentFormTemplate() {
        var participant_id = $('.client_select_dropdown').val();
        if (!participant_id) {
            return;
        }
        var html = '';
        var footer = '';
        $.ajax({
            url: "{{ route('consentform.get_template') }}",
            method: "POST",
            data: {
                participant_id: participant_id,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.success) {
                    html = response.html;
                    footer = response.footer;
                    CKEDITOR.instances['kt-ckeditor-5'].setData(html);
                    $('textarea[name="footer"]').val(footer);
                }
            }
        });
    }
</script>
@endsection