{% load i18n static %}
{% load i18n common %}

{% load iclock_tags %}

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" lang="{{ LANGUAGE_CODE }}"
      xml:lang="{{ LANGUAGE_CODE }}" {% if LANGUAGE_BIDI %}dir="rtl" {% endif %}>
<head>
    <meta charset="UTF-8">
    <title>{{ software_title }}</title>
    <link rel="shortcut icon" href="{{ MEDIA_URL }}images/favicon.ico" type="image/x-icon" sizes="16x16 24x24 32x32 64x64">
    <link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/it-theme-style.css' %}">
    <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}?v=1.0.2">
    <link rel="stylesheet" href="{% static 'css/user.login.css' %}?v=1.0.3">
    <link href="{% static 'easytimepro/css/easy-login.css' %}?v=1.0.6" rel="stylesheet">
    <script src="{% static 'cloud/static/js/jquery/jquery-3.5.1.min.js' %}?v=2.2.4"></script>
    <script src="{% static 'js/jquery/jquery.form.js' %}?v=4.2.3"></script>
    <script src="{% static 'locale/i18n.js' %}?v=1.2"></script>
    <script src="{{ STATIC_URL }}locale/i18n_{{ LANGUAGE_CODE }}.js?v=1.3"></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'easytimepro/js/easy-login.min.js' %}?v=1.4" type='text/javascript'></script>
    <script src="{% static 'layer/layer.js' %}?v=1.0.1"></script>
    <script src="{% static 'layui/layui.js' %}?v=2.4.3" type="text/javascript"></script>

    <style>
        #update-form-div {
            width: 100vw;
            height: 100vh;
            overflow: auto; /* Enable overflow for this page */
            background-color: #f0f0f0;
            padding: 20px;
        }
        @media(min-width:1440px) {
	       .easy-margin-top {
		      margin-top: 3% !important;
		   }
	    }
    </style>
    <script>
        function checkDetails() {
            const company_name = document.getElementById('company_name').value.trim();
            const company_phone = document.getElementById('company_phone').value.trim();
            const company_address = document.getElementById('company_address').value.trim();
            const skipAddress = document.getElementById('skip_address_checkbox').checked;
            const company_city = document.getElementById('company_city').value.trim();
            const company_province = document.getElementById('company_province').value.trim();
            const company_country_name = document.getElementById('company_country_name').value.trim();

            $("#companyName_Error").text(" ");
            $("#companyPhone_Error").text(" ");
            $("#companyAddress_Error").text(" ");
            $("#companyCity_Error").text(" ");
            $("#companyProvince_Error").text(" ");
            $("#company_country_name_Error").text(" ");

            if (!company_name) {
                $("#companyName_Error").text("Add your company name here.");
                return false;
            } else if (company_name.length > 30) {
                $("#companyName_Error").text("Company name must be less than 30 characters.");
            }
            if (!company_phone) {
                $("#companyPhone_Error").text("Add your company phone number here.");
                return false;
            }
            var phonePattern = /^(?:\+91[ ]?)?\d{10}$/;
            if (company_phone && !phonePattern.test(company_phone)) {
                $("#companyPhone_Error").text("Phone must be numeric and have a length of 10.");
            }
            if (company_province.length > 30) {
                $("#companyProvince_Error").text("Province must be less than 30 characters.");
            }
            if (company_city.length > 30) {
                $("#companyCity_Error").text("City name must be less than 30 characters.");
            }
            if (company_country_name.length > 30) {
                $("#company_country_name_Error").text("Country name must be less than 30 characters.");
            }
            if (!skipAddress && !company_name){
                $("#companyName_Error").text("Add your company name here.");
                return false;
            }
            else if (!skipAddress && !company_phone){
                $("#companyPhone_Error").text("Add your company phone number here.");
                return false;
            }
            else if (!skipAddress && !company_address) {
                $("#companyAddress_Error").text("Add your company address here.");
                return false;
            }
            return true;
        }

        // Function to show license details
        function license_details(url) {
            $.ajax({
                url: url,
                type: "GET",
                dataType: "html",
                success: function (panel) {
                    layer.closeAll();
                    layer.open({
                        title: 'About the system'
                        , type: 1
                        , zIndex: 1001
                        , area: ['620px', '490px']
                        , content: panel
                        , cancel: function (index) {
                            window.location.reload();
                            return true;
                        }
                    });
                }, error: function () {

                }
            });
        }
    </script>
</head>

<body>
    <div class="container-fluid easy-login-main">
        <div class="row">
            <div class="col-md-push-6" id="update-form-div">
                <div class="row justify-content-center">
                    <div class="col-lg-8 col-lg-offset-2" id="updateForm">
                        <div class="easy-margin-top mt-0">
                            {% if software_type == 10 %}
                            <div class="easy-logo-box d-flex justify-content-center">
                                <img src="{% static 'easytimepro/images/logo_easyTimePro.png' %}" alt="easyTimePro" class="easy-time-pro-logo">
                            </div>
                            {% endif %}
                            <div class="mb-3 card easy-login-card">
                                <div class="card-header border-0 p-0 text-center" style="background: none;min-height:40px !important"></div>
                                <div class="card-body p-0">
                                    <div class="tab-content">
                                        <div role="tabpanel" class="tab-pane active" id="update-form">
                                            <form action="" method="post" class="easy-login-form" novalidate id="company-forms" onclick="checkDetails()">
                                                {% csrf_token %}
                                                {% if software_type == 10 %}
                                                    <div class="card-header border-0 p-0 text-center" id="header-badge" style="background: none; min-height: 40px !important;">
                                                        <a class="btn btn-lg active btn-figma align-items-center justify-content-center btn-block" style="pointer-events: none; border-radius:34px; background-color:#365F95; color:white; box-shadow:none;">Update your company details</a>
                                                    </div>
                                                {% else %}
                                                    <div class="row">
                                                        <div class="col-lg-10 col-lg-offset-1" id="easyLoginTab">
                                                            <div class="easy-logo-box">
                                                                <img src="{% static 'easytimepro/images/easy-wdms-logo.png' %}" alt="easyWdms" class="easy-time-pro-logo center-block">
                                                            </div>
                                                        </div>
                                                    </div>
                                                 {% endif %}
                                                <p class="m" style="padding:10px;">&nbsp;</p>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <input type="text" autocomplete="off" name="company_name"  oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')" class="form-control" id="company_name" placeholder="{% trans 'Company Name' %}*" style="margin-bottom:15px"
                                                        />
                                                    </div>
                                                    <p id="companyName_Error" style="color:red;margin-left:12px"></p>
                                                </div>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <input type="tel" autocomplete="off" name="company_phone"  oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')" class="form-control" id="company_phone" placeholder="{%trans 'Phone' %}*" style="margin-bottom:15px"
                                                        />
                                                    </div>
                                                    <p id="companyPhone_Error" style="color:red;margin-left:12px"></p>
                                                </div>
                                                 <div class="form-group" hidden>
                                                    <div class="inner-addon right-addon">
                                                        <input type="text" autocomplete="off" name="company_country" class="form-control" id="company_country" placeholder="Country" style="margin-bottom:15px"
                                                        />
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <input type="text" autocomplete="off" name="company_country_name" class="form-control" id="company_country_name" placeholder="Country" style="margin-bottom:15px"
                                                        />
                                                    </div>
                                                      <p id ="company_country_name_Error" style="color:red;margin-left:12px"></p>
                                                </div>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <input type="text" autocomplete="off" name="company_province" class="form-control"  id="company_province" placeholder="Province/State" style="margin-bottom:15px"
                                                        />
                                                    </div>
                                                      <p id ="companyProvince_Error" style="color:red;margin-left:12px"></p>
                                                </div>
                                                 <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <input type="text" autocomplete="off" name="company_city" class="form-control" id="company_city" placeholder="City" style="margin-bottom:15px"
                                                        />
                                                    </div>
                                                       <p id ="companyCity_Error" style="color:red;margin-left:12px"></p>
                                                </div>
                                                <div class="form-group">
                                                    <div class="inner-addon right-addon">
                                                        <input type="text" autocomplete="off" name="company_address" class="form-control" required id="company_address" placeholder="Address" style="margin-bottom:3px"/>
                                                        <p id="companyAddress_Error" style="color:red;margin-left:12px"></p>
                                                    </div>
                                                    <div class="layui-upload-list">
                                                        <button class="btn btn-primary company_map comp-arabic-lang-map" style="font-size: 1em; cursor:pointer; border-radius: 3px; background-color: #365F95;">
                                                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                                                            {% trans 'companySettingPage_label_Location' %}
                                                        </button>
                                                        <input type="checkbox" style="margin-left: 15px;" name="skip_address_checkbox" id ="skip_address_checkbox" lay-skin="primary" title="">
                                                        <span style="font-size:13px;">Skip Address</span>
                                                    </div>
                                                </div>

                                                <div class="row d-flex justify-content-center">
                                                    <div class="col-md-6 col-sm-8 col-8 d-flex justify-content-center" id="buttton_container">
                                                        <button  class="btn btn-default easy-login-btn reset-login-btn btn-block" id ="company_submit" style="background-color: #365F95;" onmouseover="this.style.backgroundColor='#365F95';" onmouseout="this.style.backgroundColor='#365F95';" onclick="return checkDetails();">
                                                            {% trans 'companySettingPage_btn_submit' %}
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <p class="easy-copyright">{% trans 'Copyright ©2019 ZKTECO CO.,LTD.All rights reserved.' %}&nbsp;&nbsp;<a class="easy-forgot-pass" href="javascript:void(0);" onclick="license_details('{% url 'biotime:license' %}');">{% trans 'system_about' %}</a></p>
                </div>
            </div>
            {% if "DEMO"|get_params:request == '1' %}
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <p class='easy-copyright' style='margin-top:3px;'>{% trans 'IPAdress: 52.172.153.207 Port: 80' %}</p>
                </div>
            </div>
            {%endif%}

        </footer>
    </div>
    <!-- //End -->
<script>
    $(function () {
        // -60(nav header) - 30(tab title bar) - 3(progress bar) - extra space
        var maxHeight = window.innerHeight - 93 - Math.floor(Math.random() * -5 + 5),
        edit_form = $("#id_companySettingForm");
        if (edit_form.closest('.layui-layer').length === 0) {
            edit_form.closest('.layui-tab-item').css({
                'height': maxHeight,
                'overflow-y': 'auto',
                'overflow-x':'hidden'
            });
        }
    });
    $('.company_map').click(function () {
        company_address = document.getElementById('company_address').value;
        var url = '/base/get_company_location/?company_address=' + company_address;
        layer.open({
            title: 'Map',
            type: 2,
            area: ['600px', '630px'],
            fixed: false,
            maxmin: false,
            btn: ['Confirm', 'Cancel'],
            content: url,
            yes: function (index, layero) {
                layer.close(index);
                let location = JSON.parse(localStorage.getItem('addressLocation'));
                $('#company_address').val(location.company_address);
        <!--        $('#id_longitude').val(location.company_address_longitude);-->
        <!--        $('#id_latitude').val(location.company_address_latitude);-->
                $('#company_country').val(location.company_address_country_shortname);
                $("#country_code > div > div > input").val(location.company_address_country);
                $('#company_province').val(location.company_address_state);
                $('#company_city').val(location.company_address_city);
                $('#company_country_name').val(location.company_address_country);
                localStorage.removeItem("addressLocation");
            }
        });
    });

    $("#company-forms").submit(function (e) {
        e.preventDefault();
        var csrf = $("input[name='csrfmiddlewaretoken']").val();
        var value = {
            company_name: $("input[name='company_name']").val(),
            company_phone: $("input[name='company_phone']").val(),
            company_address: $("input[name='company_address']").val(),
            company_latitude: $("input[name='company_latitude']").val(),
            company_longitude: $("input[name='company_longitude']").val(),
            company_country: $("input[name='company_country']").val(),
            company_country_name: $("input[name='company_country_name']").val(),
            company_province: $("input[name='company_province']").val(),
            company_city: $("input[name='company_city']").val(),
            country_name: $("input[name='country_name']").val(),
        };
        var loadIndex = layer.load();

    $.ajax({
        type: "POST",
        url: "/base/api/systemSetting/",
        data: {'name': 'company_details', 'value': JSON.stringify(value), 'csrfmiddlewaretoken': csrf},
        dataType: "json",
        success: function (callback) {
            $.ajax({
                type: "POST",
                url: "/base/api/systemSetting/",
                data: {'name': 'company_setting', 'value': JSON.stringify(value), 'csrfmiddlewaretoken': csrf},
                dataType: "json",
            });
            layer.close(loadIndex);
            layer.msg(gettext('action_notification_successful'), {icon: 6});
            window.location.href = "/";
        },
        error: function (xhr, status, error) {
            layer.close(loadIndex);
            layer.msg(gettext('Please verify your details.'), {icon: 5});
        }
    });
    return false;
});

$("#company-forms").on("submit", function(e) {
    if (!checkDetails()) {
        e.preventDefault();  // Prevent form submission if validation fails
    }
});
</script>
</body>
</html>
