{% extends "super_admin_templates/base.html" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
            <div class="ms-md-1 ms-0">
                <nav>
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><a
                                href="{{ url_for('documents.get_documents_list') }}">Documents List</a></li>
                    </ol>
                </nav>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header">
                        <div class="card-title">
                            Create New Document
                        </div>
                        
                    </div>
                    <div class="card-body">
                        <div class ="flashes">
                             {% with messages = get_flashed_messages(with_categories=true) %}
                            {% if messages %}
                            {% for category, message in messages %}
                            {% if category == "success" %}
                            <h2><b>
                                    <center style="color:green">{{ message }}</center>
                                </b></h2>
                            {% elif category == "danger" %}
                            <h2><b>
                                    <center style="color:red">{{ message }}</center>
                                </b></h2>
                            {% else %}
                            <h2><b>
                                    <center style="color:orange">{{ message }}</center>
                                </b></h2>
                            {% endif %}
                            {% endfor %}
                            {% endif %}
                            {% endwith %}
                           </div>
                        <center>
                            {% if error %}
                            <h2><b>
                                    <center style="color:RED">{{ error }}</center>
                                </b></h2>
                            {% endif %}
                        </center>
                        <form method="POST" action="{{url_for('documents.edit_document')}}"
                            enctype="multipart/form-data" name="add_document" id="add_document">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <input type="hidden" id="latitude_update" name="latitude">
                            <input type="hidden" id="longitude_update" name="longitude">

                            <div class="card-body">
                                <div class="form-group">
                                    <label>Document Name</label>
                                    <input type="text" class="form-control" name="documentName"
                                        pattern="^[a-zA-Z0-9\s@#$()+_\-/]+$"
                                        title="Document Name must contain only alphanumeric characters, spaces, and specific special characters: @#$()+_-/."
                                        value="{{ document_dict.documentName | default('') }}"
                                        placeholder="Enter Document Name">
                                    <span id="documentName_error" class="error"></span>
                                </div>


                                <div class="form-group">
                                    <label>Document Content</label>
                                    <textarea rowspan="50" class="form-control summernote" name="documentContent"
                                        pattern="^[\s\S]*$" title="Document Content can contain all characters."
                                        placeholder="Enter document content"
                                        required>{{ document_dict.documentContent  | default('') }}</textarea>
                                </div>
                            </div>

                            <div>
                                <button type="submit" class="btn btn-primary form_submit">Submit</button>
                            </div>
                            {% for error in form.documentName.errors %}
                            <span class="text-danger" class="error">{{ error }}</span><br>
                            {% endfor %}
                           
                        </form>


                    </div>
                </div>
            </div>
        </div>
        <!--End::row-1 -->

    </div>
</div>
<!-- End::app-content -->

<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script>
    $(document).ready(function () {
        $('.summernote').summernote({
            placeholder: 'Content Here',
            tabsize: 2,
            height: 100,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'hr']],
                ['help', ['help']],
                ['float', ['floatLeft', 'floatRight', 'floatNone']],
            ],
        });
    });
</script>




<script type="text/javascript">

    $(document).ready(function () {
        $('#add_document').validate({
            rules: {
                documentName: {
                    required: false,
                    minlength: 3,
                    maxlength: 75,
                    pattern: /^[a-zA-Z0-9\s@#$()+_\-/.]*$/
                },

            },
            messages: {
                documentName: {
                    required: 'document Name is required',
                    pattern: "Document Name contains Only alphanumeric and space and special characters @#$()+_-/.",
                    minlength: 'document Name is must be greaterthan or equals to 3 charecters',
                    maxlength: 'document Name is must be lessthan or equals to 75 charecters',
                },
            },
            submitHandler: function (form, event) {
                $('.form_submit').prop('disabled', true);
                $('#newLoadingModel').show();
                event.preventDefault();
                getLocationAndProceed(
                    function (lat, lng) {
                       
                        $(form).find('input[name="latitude"]').val(lat);
                        $(form).find('input[name="longitude"]').val(lng);
                        $.ajax({
                            url: form.action,
                            type: form.method,
                            data: $(form).serialize(),
                            xhrFields: {
                                withCredentials: true   // THIS ensures cookies/session are sent
                            },
                            success: function (response) {
                                console.log("in submit hndler", response)
                                if (response.responseStatus == 1 || response.responseStatus == 4) {
                                    form.reset();
                                    location.reload();

                                } else if (response.responseStatus == 0) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    console.log("yesususuerror")
                                    $.each(response.result, function (key, value) {
                                        $('#' + key + "_error").text(value)
                                    });
                                    return false;
                                } else if (response.responseStatus == 2) {
                                    $('.form_submit').prop('disabled', false);
                                    $('#newLoadingModel').hide();
                                    $('#errorMessage').text(response.result);
                                    return false;
                                } else {
                                    location.reload();
                                }

                            },
                            error: function (xhr) {
                                // You can also reload page after error (e.g. CSRF token mismatch)
                                location.reload();
                            }
                        });
                    },
                    function () {
                                $('.form_submit').prop('disabled', false);
                                $('#newLoadingModel').hide();
                                    alert("Location access is required to proceed. Please enable it in your browser.");
                            }
                        );
                    }
                });
            });
</script>

{% endblock %}