<!DOCTYPE html>
{% load static %}

<!--
#-- ***************************************************************************
#--
#-- version 1.00  : 1 July 2014
#-- version 2.00  : 22-Aug-2014 Change Logic to get all values for request.user
#-- version 2.01  : 23-Aug-2014 Rename Pockets - old_money to initial_amount
#                                                pocket_amount  to rename as sum_pocket
#                                                Summ_old_money_Pockets to Summ_initial_amount_Pockets
#-- version 2.02  : 23-Aug-2014 Logic to make Pocket Total Amount Functional
#-- version 2.03  : 26-Aug-2014 Summary to show only for User who is logged in
#-- version 2.04  : 26-Aug-2014 Fix add_expenditure and add_bank transactions to have only pockets of user logged in
#-- version 2.05  : 27-Aug-2014 add decorators - login_required
#-- version 2.06  : 27-Aug-2014 Alert if trying to add expenditure without pockets
#--
#-- version 1.00    : 1 July 2014
#-- version 2.00    :   22-Aug-2014 :   Adding Bootstrap sb-admin-2 to the base-Template and doing changes here
#                                       http://startbootstrap.com/template-overviews/sb-admin-2/
#-- version 2.01    :   2-Sept-2014 :   Bootstrapping add_expenditure.html
#-- version 2.07    :   3-Sept-2014 :   Fixing Table bootstrapping
#-- version 2.09    :   4-Sept-2014 :   add_expenditure - Link for Now below datetimepicker
#-- version 2.10    :   4-Sept-2014 :   edit_expenditure - Same as in
#                                       add_expenditure - on expenditure delete - delete pocket total
#                                      views.py - edit_expenditure
#-- version 2.11    :   4-Sept-2014 :  changed Edit_Expenditure form as only delete expenditure form
#                                       changes in - views.py forms.py
#-- version 2.12    :   4-Sept-2014 :   fluid bootstrap in all forms
#-- Authors - Paarth Batra
#--
#-- ***************************************************************************

#-- ***************************************************************************
-->

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->

    <link href="{% static 'money/css/bootstrap-fluid-adj.css' %}" rel="stylesheet">
    <link href="{% static 'money/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
    <link href="{% static 'money/css/bootstrap-responsive.css' %}" rel="stylesheet">
    <link href="{% static 'money/js/jquery-ui-1.11.1.custom/jquery-ui.min.css' %}" rel="stylesheet">
    <link href="{% static 'money/js/jquery-ui-1.11.1.custom/jquery-ui.timepicker-addon.css' %}" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="{% static 'money/sb-admin-2/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{% static 'money/sb-admin-2/css/sb-admin-2.css' %}" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="{% static 'money/sb-admin-2/css/plugins/metisMenu/metisMenu.min.css' %}" rel="stylesheet">

    <link href="{% static 'money/sb-admin-2/css/plugins/morris.css' %}" rel="stylesheet">


    <!-- Latest bootstrap cdn-- dont use it breaks look and feel >
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    -->
    <title>{% block title %}{% endblock %}</title>


    <style>
        .table-scrollable {
            overflow: auto;
        }

        .table {
            overflow: auto;
        }

        .ui-datepicker-trigger {
            position: relative;
            top: 5px;
            height: 20px;
        }

        .ui-datepicker-header {
            border-color: blueviolet
        }

        .ui-datepicker-prev {
            color: #ffff00
        }

        .ui-datepicker-today {
            border-color: blueviolet;
            color: green
        }

            /* {} is the value according to your need */

        .sidebar {
            float: left;
            height: 100%;
            margin-right: 50px;
            outline: #00FF00
        }

        .main {
            padding-top: 25px;
            padding-right: 50px;
            padding-bottom: 25px;
            padding-left: 50px;
            #outline: #00FF00 dashed;
            margin-top: 20px;

        }

        @media (max-width: 767px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

        @media (min-width: 1200px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

            /* Portrait tablet to landscape and desktop */
        @media (min-width: 768px) and (max-width: 979px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

            /* Landscape phone to portrait tablet */
        @media (max-width: 767px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

            /* Landscape phones and down */
        @media (max-width: 480px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }
    </style>
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="nav-collapse collapse">
                <ul class="nav pull-right">
                    {% if user.is_authenticated %}
                        <li><a href="/profiles/">Welcome, {{ user.username }} !</a> </li>
                        <li><a href="/money/logout/">Logout</a></li>
                    {% else %}
                        <li><a href="/accounts/register/">Register</a></li>
                        <li><a href="/accounts/login/">Login</a></li>
                    {% endif %}
                </ul>

                <ul class="nav  navbar-inverse">
                    {% if user.is_authenticated %}
                        <li><a href="{% url 'money:index' %}">Home</a></li>
                        <li>
                            <div class="btn-group ">
                                <button class="btn btn-small btn-inverse dropdown-toggle ">Pockets</button>
                                <button class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu info" role="menu">
                                    <li><a tabindex="1" href="{% url 'money:add_Pockets' %}">Add-Pockets</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="2" href="{% url 'money:audit_Pockets' %}">Audit-Pockets</a></li>
                                    <li class="divider"></li>
                                    <li><a tabindex="3" href="{% url 'money:addPocketTransactions' %}">Pocket
                                        Transactions</a></li>

                                </ul>
                            </div>
                        </li>
                        <li><a></a></li>
                        <li>
                            <div class="btn-group ">
                                <button class="btn btn-small btn-inverse dropdown-toggle">Bank</button>
                                <button class="btn  btn-small btn-inverse dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu info" role="menu">
                                    <li><a tabindex="1" href="{% url 'money:add_bankTransactions' %}">Add-Bank-Transactions</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a tabindex="2" href="{% url 'money:delete_bankTransactions' %}">Delete-Bank-Transactions</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a></a></li>
                        <li>
                            <div class="btn-group ">
                                <button class="btn btn-small btn-inverse dropdown-toggle">Expenditure</button>
                                <button class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu info" role="menu">
                                    <li><a href="{% url 'money:addTypesOfExpenditures' %}">Add-Types of Expenditures</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a href="{% url 'money:enableDisableTypesOfExpenditures' %}">Enable/Disable-Types
                                        of Expenditures</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{% url 'money:add_expenditure' %}">Add-Expenditure</a></li>
                                    <li class="divider"></li>
                                    <li><a href="{% url 'money:delete_expenditure' %}">Delete-Expenditures</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="{% url 'money:howto' %}">Help</a></li>
                        <li><a href="{% url 'money:about' %}">About</a></li>




                    {% endif %}

                </ul>
            </div>


            <!--/.nav-collapse -->
        </div>
    </div>
</div>

<!-- Div containing Side bar as well as body pane /-->
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <div class=" sidebar ">
                {% if user.is_authenticated %}

                    <ul class="nav nav-list" id="side-menu">

                        <li>
                            <a href="{% url 'money:index' %}"><i class="fa fa-home fa-fw"></i>Home</a></li>
                        <li>
                            <a href="#"><i class="fa  fa-user fa-fw"></i>Pockets<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="{% url 'money:add_Pockets' %}">Add-Pockets</a>
                                </li>
                                <li>
                                    <a href="{% url 'money:audit_Pockets' %}">Audit-Pockets</a>
                                </li>
                                <li><a href="{% url 'money:addPocketTransactions' %}">Pocket-Transactions</a></li>
                            </ul>

                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                        <li>
                            <a href="#"><i class="fa fa-lock fa-fw"></i>Bank<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li>
                                    <a href="{% url 'money:add_bankTransactions' %}">Add-Bank-Transactions</a>
                                </li>
                                <li>
                                    <a href="{% url 'money:delete_bankTransactions' %}">Delete-Bank-Transactions</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-gavel fa-fw"></i>Expenditure<span class="fa arrow"></span></a>
                            <ul class="nav nav-second-level">
                                <li><a href="{% url 'money:addTypesOfExpenditures' %}">Add-Types of Expenditures</a>
                                </li>
                                <li><a href="{% url 'money:enableDisableTypesOfExpenditures' %}">Enable/Disable-Types of
                                    Expenditures</a></li>
                                <li>
                                    <a href="{% url 'money:add_expenditure' %}">Add-Expenditures</a>
                                </li>
                                <li>
                                    <a href="{% url 'money:delete_expenditure' %}">Delete-Expenditures</a>
                                </li>
                            </ul>
                            <!-- /.nav-second-level -->
                        </li>
                        <li>
                        </li>


                    </ul>

                    <p> Welcome to Money - Expenditure . <br>A Tool to Manage Expenditures <br><br> By <a href="http://www.versionpb.com">VersionPB</a>
                    <br><br>See more tools <a href="http://www.versionpb.com">here</a><br></p>
                        <ul>
                            <li><a href=http://www.versionpb.com/?page_id=63>Bodmas Calculator</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=135>Password Protected Diary</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=168>Password Manager</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=183>Optician Customer Manager</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com">Text Comparing Utility</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com/files/">File Comparing Utility</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com/folders/">Folders Comparing Utility</a></li>

                        </ul>
                {% else %}

                    <p class="rang"> Welcome to Money - Expenditure . <br>A Tool to Manage Expenditures <br><br> By <a href="http://www.versionpb.com">VersionPB</a>
                    <br><br>See more tools <a href="http://www.versionpb.com">here</a><br></p>
                        <ul>
                            <li><a href=http://www.versionpb.com/?page_id=63>Bodmas Calculator</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=135>Password Protected Diary</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=168>Password Manager</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=183>Optician Customer Manager</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com">Text Comparing Utility</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com/files/">File Comparing Utility</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com/folders/">Folders Comparing Utility</a></li>

                        </ul>

                {% endif %}
            </div>
            <!--/.well -->
        </div>
        <!--/span-->

        <div class="span10 ">
            <div class="well clearfix main pull-left">
                {% block body_block %}
                {% endblock %}
            </div>
        </div>

        <!--/span-->
    </div>
    <!--/row-->
    <hr>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>


<footer>
    <div class="container">
        <div class="row-fluid">
            <div class="span4 offset6">
                <p>&copy; Version PB - Expenditure</p>
            </div>

    <span class="span1 offset5">
    {% if visits %}
        <span class="badge">Total visits {{ visits }}</span>
    {% endif %}
                    </span>
    <span class="span2">
                        {% if last_visit %}
                            <span class="badge">Last Visit {{ last_visit }}</span>
                        {% endif %}
    </span>
        </div>

</footer>

<!--/.fluid-container-->

<!--To load Body blocks /-->


<!-- next 2 lines for java Script for bootstrapping fluid of twitter -->
<script src="{% static 'money/js/jquery-2.1.1.min.js' %}"></script>
<script src="{% static 'money/js/bootstrap.min.js' %}"></script>
<script src="{% static 'money/js/bootstrap.js' %}"></script>


<script src="{% static 'money/js/jquery-ui-1.11.1.custom/jquery-ui.js' %}"></script>
<script src="{% static 'money/js/jquery-ui-1.11.1.custom/jquery-ui-timepicker-addon.js' %}"></script>

<!-- Custom Theme JavaScript sb admin-->
<script src="{% static 'money/sb-admin-2/js/sb-admin-2.js' %}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="{% static 'money/sb-admin-2/js/plugins/metisMenu/metisMenu.min.js' %}"></script>
<!--flot charts
<script src="{% static 'money/js/flot/jquery.flot.js' %}"></script>
-->
<!--High Charts from local copy-->
<script src="{% static 'money/js/VPBcharts-4.0.4/js/VPBcharts.js' %}"></script>
<script src="{% static 'money/js/VPBcharts-4.0.4/js/modules/exporting.js' %}"></script>
<!-- Morris Charts JS  -- if i use this it breaks datetime picker code
<script src="{% static 'money/sb-admin-2/js/plugins/morris/raphael.min.js' %}"></script>
<script src="{% static 'money/sb-admin-2/js/plugins/morris/morris-data.js' %}"></script>
<script src="{% static 'money/sb-admin-2/js/plugins/morris/morris.min.js' %}"></script>
-->
<!-- D3 library -->
<script src="{% static 'money/js/d3/d3.min.js' %}"></script>


<script type="text/javascript">
<!--
    d3.select("p").attr("class","rang").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
    d3.select("ul").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
-->

    $('.dropdown-toggle').dropdown()
    $.datepicker.setDefaults({
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "/static/money/calender.ico",
        buttonText: "calender",
        startDate: new Date

    }, 'setDate', 'today');


    $(function () {
        var currentDate = new Date();
        $(".datetimeField").datetimepicker({ autoSize: false,
            showAnim: 'slide',

            format: 'dd-mm-yyyy HH:ii p',
            hourGrid: 4,
            minuteGrid: 10,
            timeFormat: 'HH:mm:ss'
        });
    });

    $(document).ready(function () {
        $(".todaylink").click(function () {
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!
            var yyyy = today.getFullYear();
            var hh = "00"
            var min = "00"
            var sec = "00"
            if (dd < 10) {
                dd = '0' + dd
            }
            if (mm < 10) {
                mm = '0' + mm
            }
            today = mm + '/' + dd + '/' + yyyy + ' ' + hh + ':' + min + ':' + sec;
            var currentId = $(this).attr('id');
            var exp_date_id = "id_form-" + currentId + "-exp_date"
            var bank_exp_date_id = "id_form-" + currentId + "-bank_exp_date"

            $("#" + exp_date_id).val(today);
            $("#" + bank_exp_date_id).val(today);
            $("#id_PT_date").val(today);
        });
    });

    $(document).ready(function () {
        $(".nowlink").click(function () {
            var today = new Date();
            var dd = today.getDate();
            var mm = today.getMonth() + 1; //January is 0!
            var yyyy = today.getFullYear();
            var hh = today.getHours()
            var min = today.getMinutes()
            var sec = today.getSeconds()
            if (dd < 10) {
                dd = '0' + dd
            }
            if (mm < 10) {
                mm = '0' + mm
            }
            today = mm + '/' + dd + '/' + yyyy + ' ' + hh + ':' + min + ':' + sec;
            var currentId = $(this).attr('id');
            var exp_date_id = "id_form-" + currentId + "-exp_date"
            var bank_exp_date_id = "id_form-" + currentId + "-bank_exp_date"

            $("#" + exp_date_id).val(today);
            $("#" + bank_exp_date_id).val(today);
            $("#id_PT_date").val(today);
        });
    });
    //To  make Currency Read Only
    $(document).ready(function () {
        $('.currencyClass').attr('readonly', true);
    });
    //To make Pocket Total Amount Read Only
    $(document).ready(function () {
        $('.pocketTotalAmount').attr('readonly', true);

    });

    $(document).ready(function () {

        //GET BROWSER WINDOW HEIGHT
        var currHeight = $(window).height();
        //SET HEIGHT OF SIDEBAR AND CONTENT ELEMENTS
        $('#sidebar, #content').css('height', currHeight);

        //ON RESIZE OF WINDOW
        $(window).resize(function () {

            //GET NEW HEIGHT
            var currHeight = $(window).height();
            //RESIZE BOTH ELEMENTS TO NEW HEIGHT
            $('#sidebar, #content').css('height', currHeight);

        });
    });


    var base_path = '{% static "money/data/" %}';
    var user = '{{ user.username }}'
    var full_url = [base_path, 'highchartpie', user, '.json'].join('')

    $.ajax({

        cache: false,
        dataType: "json",
        url: full_url,
        success: function (json) {
            console.log("haha i have read the json")
            console.log('Success', this.url)
            $('#containerHighChartJSONPie').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 1,//null,
                    plotShadow: false
                },
                title: {
                    text: 'Expenses per Types of Expenditures'
                },
                tooltip: {
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [
                    {
                        type: 'pie',
                        name: 'Type of Expenditure',
                        data: json
                    }
                ]
            });
        }
    });


    $(document).ready(function () {

        $("#addPocketTransactionSubmitButton").click(function () {
            var valueFromPocket = document.getElementById('id_PT_Pocket_From').value
            var valueToPocket = document.getElementById('id_PT_Pocket_To').value
            if (valueFromPocket == valueToPocket) {
                $(alert("Value in From and To Pocket Can not be Same"));


            }
            ;

        });

    });

    //On Click of cancel button on PocketTransaction go to Home Page
    $(document).ready(function () {
        $("#CancelFromPocketTransactions").click(function () {
            window.location.replace("");
        });

    });

</script>


</body>
</html>