{% include 'AdminTemplates/adminDash.html' %}
{% load static %}
{% block body %}
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Add Country</h4>
                <h6>Create New Country</h6>
            </div>
            <div class="page-btn">
                <a href="{% url 'countryList' %}" class="btn btn-added">
                    <img src="{% static 'assets/img/icons/eye.svg' %}" class="me-1" alt="img">View Country
                </a>
            </div>
        </div>
        {% if added %}
        <h6 style="color: blue; font-size: 16px;">'{{added}}' <span style="color: green;">Country is added</span></h6>
        {% endif %}
        <div class="card">
            <form action="{% url 'addCountryForm' %}" method="POST" enctype="multipart/form-data">
                {% csrf_token %}
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Country Name</label>
                                <input type="text" id="con_name" name="con_name" value="{{ con_name }}" required>
                                <span id="name_error" style="color: red;"></span>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Country Code</label>
                                <input type="text" id="con_code" name="con_code" maxlength="3"
                                    style="text-transform: uppercase;" required>
                                <span id="code_error" style="color: red;"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>META Tags (*press space after each word)</label>
                                <input type="text" name="meta_tags" style="font-weight: bold;" />
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Contact Number</label>
                                <input type="number" class="form-control" aria-label="Contact"
                                    aria-describedby="basic-addon1" name="cn" id="cn">
                                <div class="error" id="cnErr"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>META Description</label>
                                <textarea class="form-control" name="meta_description"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>Country Image</label>
                                <div class="image-upload">
                                    <input type="file" name="con_img" {% if not con_img %}required{% endif %}>
                                    <div class="image-uploads">
                                        <img src="{% static 'assets/img/icons/upload.svg' %}" alt="img">
                                        <h4>Drag and drop a file to upload</h4>
                                    </div>
                                    {% if con_img %}
                                    <input type="hidden" name="con_img" value="{{ con_img }}">
                                    <img src="{{ con_img.url }}" alt="Uploaded image"
                                        style="max-width: 100px; max-height: 100px;">
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>URL Address (location)</label>
                            <input type="text" name="country_url" id="url-input">
                            <span id="url_error" style="color: red;"></span>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Address (Maximum 120 Characters)</label>
                                <div id="summernote-wrapper">
                                </div>
                                <input type="hidden" name="description" id="description-input">
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-submit me-2">Add Country</button>
                            <a href="#" class="btn btn-cancel">Cancel</a>
                        </div>
                    </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        // Create an iframe to host Summernote
        var iframe = document.createElement('iframe');
        iframe.style.width = '100%';
        iframe.style.height = '300px';
        iframe.style.border = 'none';

        $('#summernote-wrapper').append(iframe);

        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

        // Write the necessary HTML, CSS, and JS into the iframe
        iframeDoc.open();
        iframeDoc.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
                <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
                <style>
                    body { margin: 0; padding: 0; }
                </style>
            </head>
            <body>
                <textarea id="summernote"></textarea>
                <script src="https://code.jquery.com/jquery-3.5.1.min.js"><\/script>
                <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"><\/script>
                <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"><\/script>
                <script>
                    $(document).ready(function() {
                        $('#summernote').summernote({
                            height: 200,
                            callbacks: {
                                onChange: function(contents) {
                                    parent.$('#description-input').val(contents);
                                },
                                onKeydown: function (e) {
                                    var t = e.currentTarget.innerText;
                                    if (t.trim().length >= 120) {
                                        if (e.keyCode != 8 && !(e.keyCode >= 37 && e.keyCode <= 40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey))
                                            e.preventDefault();
                                    }
                                },
                                onKeyup: function (e) {
                                    var t = e.currentTarget.innerText;
                                    parent.$('#maxContentPost').text(120 - t.trim().length);
                                },
                                onPaste: function (e) {
                                    var t = e.currentTarget.innerText;
                                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
                                    e.preventDefault();
                                    var maxPaste = bufferText.length;
                                    if(t.length + bufferText.length > 120){
                                        maxPaste = 120 - t.length;
                                    }
                                    if(maxPaste > 0){
                                        document.execCommand('insertText', false, bufferText.substring(0, maxPaste));
                                    }
                                    parent.$('#maxContentPost').text(120 - t.length);
                                }
                            }
                        });
                    });
                <\/script>
            </body>
            </html>
        `);
        iframeDoc.close();
    });
</script>

<script>
    $(document).ready(function () {
        $('#con_name').on('blur', function () {
            var con_name = $(this).val();
            $.ajax({
                url: '{% url "checkCountry" %}',
                data: {
                    'con_name': con_name
                },
                dataType: 'json',
                success: function (data) {
                    if (data.name_exists) {
                        $('#name_error').text('Country name already exists!');
                        $('#con_name').val('');
                    } else {
                        $('#name_error').text('');
                    }
                }
            });
        });

        $('#con_code').on('blur', function () {
            var con_code = $(this).val();
            $.ajax({
                url: '{% url "checkCountry" %}',
                data: {
                    'con_code': con_code
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code_exists) {
                        $('#code_error').text('Country code already exists!');
                        $('#con_code').val('');
                    } else {
                        $('#code_error').text('');
                    }
                }
            });
        });

        $('input[name="meta_tags"]').on('keyup', function (e) {
            if (e.which === 32) {
                var str = $(this).val().split('');
                if (str[str.length - 2] === ',') {
                    $(this).val($(this).val().replace(' ', ''));
                }
                $(this).val($(this).val().replace(' ', ','));
            }
        });

        $('input[name="con_code"]').on('input', function () {
            this.value = this.value.toUpperCase();
            if (this.value.length > 3) {
                this.value = this.value.slice(0, 3);
            }
        });

        $('#summernote').summernote({
            height: 200
        });
    });

    $('#url-input').on('blur', function () {
    var url = $(this).val();
    var regex = /^(https:\/\/)?(www\.)?(google\.com\/(maps\/embed|maps)|openstreetmap\.org\/|bing\.com\/maps\/)/i;
    if (url === '' || regex.test(url)) {
        $('#url_error').text('');
    } else {
        $('#url_error').text('Please enter a valid map URL (Google Maps or OpenStreetMap)');
    }
});

</script>

<script>
    $(".js-example-tags").select2({
        tags: true
    });
</script>

{% endblock body %}