{% load static %}

<header id="page-topbar">
    <div class="navbar-header">
        <div class="d-flex">
            <!-- LOGO -->
            <div class="navbar-brand-box">
                <a href="{% url 'index' %}" class="logo logo-light  mt-5">
                    <span class="logo mt-4">
                        <img src="{% static 'images/logo.jpg' %}" alt="" height="100">
                    </span>
                    {% comment %} <span class="logo-lg" style="color: white;">
                           Dunrite Glass
                        <!-- <img src="{% static 'images/logo-light.png' %}" alt="" height="19"> -->
                    </span> {% endcomment %}
                </a>
            </div>

            <button type="button" class="btn btn-sm px-3 font-size-16 header-item waves-effect" id="vertical-menu-btn">
                <i class="fa fa-fw fa-bars"></i>
            </button>

            <!-- App Search-->
            <!-- <form class="app-search d-none d-lg-block">
                <div class="position-relative">
                    <input type="text" class="form-control" placeholder="Search...">
                    <span class="bx bx-search-alt"></span>
                </div>
            </form> -->
        </div>

        <div class="d-flex">
            <div class="dropdown d-none d-lg-inline-block ms-1">
                <button type="button" class="btn btn-success waves-effect" title="Calculator" onclick="showCalculator()">
                    <i class="fa fa-calculator"></i>
                </button>
                <a href="{% url 'add_invoice' 0 %}" type="button" class="btn btn-success waves-effect" title="Add Invoice">
                    POS
                </a>
                <button type="button" class="btn header-item noti-icon waves-effect" data-bs-toggle="fullscreen">
                    <i class="bx bx-fullscreen"></i>
                </button>
            </div>

            <div class="dropdown d-inline-block">
                <button type="button" class="btn header-item waves-effect" id="page-header-user-dropdown"
                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img class="rounded-circle header-profile-user" src="{% static 'images/users/avatar-1.jpg' %}"
                        alt="Header Avatar">
                    <span class="d-none d-xl-inline-block ms-1" key="t-{{ request.user.username }}">{{ request.user.username }}</span>
                    <i class="mdi mdi-chevron-down d-none d-xl-inline-block"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <!-- item-->
                    <!-- <a class="dropdown-item" href="#"><i class="bx bx-user font-size-16 align-middle me-1"></i> <span key="t-profile">Profile</span></a> -->
                    <!-- <a class="dropdown-item" href="#"><i class="bx bx-wallet font-size-16 align-middle me-1"></i> <span key="t-my-wallet">My Wallet</span></a> -->
                    <!-- <a class="dropdown-item d-block" href="#"><span class="badge bg-success float-end">11</span><i class="bx bx-wrench font-size-16 align-middle me-1"></i> <span key="t-settings">Settings</span></a> -->
                    <!-- <a class="dropdown-item" href="#"><i class="bx bx-lock-open font-size-16 align-middle me-1"></i> <span key="t-lock-screen">Lock screen</span></a> -->
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item text-danger" href="{% url 'logout' %}"><i class="bx bx-power-off font-size-16 align-middle me-1 text-danger"></i> <span key="t-logout">Logout</span></a>
                </div>
            </div>

        </div>
    </div>
</header>



<!-- Calculator Modal -->
<div class="modal fade" id="calculatorModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Unit Converter</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form method="POST">
            <div class="modal-body">
                {% csrf_token %}
                <input type="hidden" name="type" value="add">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <input value="0" id="input1" style="direction: rtl;" onchange="input1Change(event)" type="number" class="form-control" placeholder="Input Number">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <!-- <label>Product Category Name</label> -->
                            <select id="unit1" class="form-select" onchange="changeHandler(event)">
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <input value="0" id="input2" style="direction: rtl;" onchange="input2Change(event)" type="number" class="form-control" placeholder="Input Number">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="mb-3">
                            <!-- <label>Product Category Name</label> -->
                            <select id="unit2" class="form-select" onchange="select2ChangeHandler(event)">
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary waves-effect waves-light">Save</button>
            </div> -->
        </form>
      </div>
    </div>
</div>

<script>
    var rate = 0
    var temp = []
    var unit1_select = ''
    var dict_keys = []
    function showCalculator () {
        url = "/get/unit";

        $.ajax({
            url: url,
            method: "GET",
        success: function (r) {
            temp = r
            console.log(r)
            $('#unit1').html('')
            dict_keys = Object.keys(r);

            $.each(r, function(key, value) {
                $('#unit1').append(`<option value="${key}">${key}</option>`)
            });

            if (dict_keys.length > 0) {
                console.log('in')
                unit1_select = dict_keys[0]
                $.each(r[dict_keys[0]], function(index, dictionary) {
                    $('#unit2').append(`<option value="${dictionary.id}">${dictionary.refunit.name}</option>`)
                })
                rate = r[dict_keys[0]][0].conversion_rate
                console.log(rate)
            }
            },
        });

        $('#calculatorModal').modal('show')
    }


    function input1Change(event){
        var value = event.target.value
        var newValue = value * rate
        $('#input2').val(newValue)
    }
    function input2Change(event){
        var value = event.target.value
        var newValue = value / rate
        $('#input1').val(newValue)
    }

    function changeHandler(event){
        var get_key = event.target.value

        $.each(temp, function(key, value) {
            if(key == get_key){
                $('#unit2').html('')
                unit1_select = key

                $.each(temp[key], function(index, dictionary) {
                    $('#unit2').append(`<option value="${dictionary.id}">${dictionary.refunit.name}</option>`)
                })
                // var unit2 = $('#unit2').val()
                rate = temp[key][0].conversion_rate

                var i1 = $('#input1').val()
                var newValue = i1 * rate
                $('#input2').val(newValue)
            }
        });

    }

    function select2ChangeHandler(event){
        var id = event.target.value

        $.each(temp[unit1_select], function(index, dictionary) {
            if(dictionary.id == id){

                rate = dictionary.conversion_rate

                var i1 = $('#input1').val()
                var newValue = i1 * rate
                $('#input2').val(newValue)
            }
        });

    }

</script>