{% extends 'base.html' %}
{% load static thumbnail %}

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/datatables.min.css' %}">
    <link href="{% static 'css/jquery.fancybox.min.css' %}" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">

    <style>
        .fa-thumbs-up{
            color: #16ab39;
            font-size: 24px;
        }

        .fa-thumbs-down{
            color: #DB2828;
            font-size: 24px;
        }

        #id_outlet_export{
            display: none;
        }
    </style>
{% endblock extra_css %}

{% block page_header %}
    <h1 class="ui dividing header">
        <div class="ui right aligned grid">
            <div class="left floated left aligned ten wide column">
                {{ title }}
            </div>
            {% if is_superadmin %}
            <div class="right floated right aligned two wide column">
                <form role="form" method="GET" class="form-inline">
                    <input type="text" id="id_outlet_export" name="outlet_export"></input>
                    <button class="ui button green fluid" name="_export_outlet_csv_file"><span>Outlet Export</span></button>
                </form>
            </div>
            <div class="right floated right aligned two wide column">
                <form role="form" method="GET" class="form-inline">
                    <button class="ui button green fluid" name="_export_approved_csv_file"><span>Wishlist Export</span></button>
                </form>
            </div>
            <div class="right floated right aligned two wide column">
                <form role="form" method="GET" class="form-inline">
                    <button class="ui button green fluid" name="_export_csv_file"><span>Full Export</span></button>
                </form>
            </div>
            {% endif %}
        </div>
    </h1>
{% endblock page_header %}

{% block content %}
    <table id="datatable" class="ui celled table" style="width:100%">
    </table>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/fileinput.min.js' %}"></script>
    <script src="{% static 'js/datatables.min.js' %}"></script>
    <script src="{% static 'js/jquery.fancybox.min.js' %}">
    </script>
    <script>
        function initialize_select(){
            $('select').dropdown();
        }

        var table = $('#datatable').DataTable({
            columns: [
                { "title": "STAFF ID"},
                { "title": "Scan Date"},                          
                { "title": "Staff Name"},
                { "title": "Temperature" },
                { "title": "Q1" },                 
                { "title": "Q2" },
                { "title": "Q3" },
                { "title": "Q4" },
                { "title": "Q5" },
                { "title": "Q6" },              
              ],
            dom: "<'ui grid stackable'"+
                  "<'row'"+
                    "<'four wide column'l>"+
                    "<'four wide column'f>"+
                    "<'four wide column'<'dropdown-filter'>>"+
                    "<'four wide column'<'dropdown-status'>>"+
                  ">"+
                  "<'row dt-table'"+
                    "<'sixteen wide column'tr>"+
                  ">"+
                  "<'row'"+
                    "<'seven wide column'i>"+
                    "<'right aligned nine wide column'p>"+
                  ">"+
                ">",
            aLengthMenu: [
                [25, 50, 100, 200],
                [25, 50, 100, 200]
            ],
            processing: true,
            serverSide: true,
            order: [[ 0, "desc" ]],
            language: {
                searchPlaceholder: "Search by STAFF ID"
            },
            buttons: [
                {
                    extend: 'excel',
                    className: 'excelButton',
                    exportOptions: {
                        columns: [ 0, 1, 2, 3, 4, 5, ]
                    }
                }
              ],
            ajax: {
                url: "{% url 'bsk:staff_datatable' %}",
                type: "POST",
                data: {
                  "csrfmiddlewaretoken": "{{ csrf_token }}",
                },
            },
            "initComplete": function( settings, json ) {
                //This change Excel button Color
                $(".excelButton").parent().removeClass("basic")
                $(".excelButton").parent().addClass("green")

                //This create the select
                $('.dropdown-filter').append(
                                    "<select class='ui fluid compact dropdown'>" +
                                     "<option value='All'>All Purchase Outlet</option>" +
                                     "<option disabled>Selangor</option>" +
                                     "<option value='1. Banting - Jalan Besar'>1. Banting - Jalan Besar</option>" +
                                     "<option value='2. Klang - Shaw Centrepoint'>2. Klang - Shaw Centrepoint</option>" +
                                     "<option value='3. Shah Alam - Plaza Alam Sentral'>3. Shah Alam - Plaza Alam Sentral</option>" +
                                     "<option value='4. Shah Alam - Sungai Buloh'>4. Shah Alam - Sungai Buloh</option>" +
                                     "<option disabled>Kuala Lumpur</option>" +
                                     "<option value='1. Kuala Lumpur - Sri Petaling'>1. Kuala Lumpur - Sri Petaling</option>" +
                                     "<option value='2. Kuala Lumpur - Pudu Plaza'>2. Kuala Lumpur - Pudu Plaza</option>" +
                                     "<option value='3. Kuala Lumpur - Mid Point'>3. Kuala Lumpur - Mid Point</option>" +
                                     "<option value='4. Kuala Lumpur - M3 Mall'>4. Kuala Lumpur - M3 Mall</option>" +
                                     "<option value='5. Kuala Lumpur - Ampang Paragon'>5. Kuala Lumpur - Ampang Paragon</option>" +
                                     "<option disabled>Negeri Sembilan</option>" +
                                     "<option value='1. Port Dickson - Oceanic Mall'>1. Port Dickson - Oceanic Mall</option>" +
                                     "<option value='2. Seremban - Jalan Tunku Munawir'>2. Seremban - Jalan Tunku Munawir</option>" +
                                     "<option value='3. Seremban - Centre Point'>3. Seremban - Centre Point</option>" +
                                     "<option value='4. Semenyih - Semenyih Central'>4. Semenyih - Semenyih Central</option>" +
                                     "<option disabled>Melaka</option>" +
                                     "<option value='1. Melaka - Soon Seng Plaza'>1. Melaka - Soon Seng Plaza</option>" +
                                     "<option disabled>Terengganu</option>" +
                                     "<option value='1. Kuala Terengganu - Jalan Bandar'>1. Kuala Terengganu - Jalan Bandar</option>" +
                                     "<option value='2. Kuala Terengganu - Plaza Paya Bunga'>2. Kuala Terengganu - Plaza Paya Bunga</option>" +
                                     "<option disabled>Pahang</option>" +
                                     "<option value='1. Mentakab - Jalan Mok Hee Kiang'>1. Mentakab - Jalan Mok Hee Kiang</option>" +
                                     "<option value='2. Jerantut - Bandar Baru'>2. Jerantut - Bandar Baru</option>" +
                                     "<option value='3. Temerloh - Terminal Utama'>3. Temerloh - Terminal Utama</option>" +
                                     "<option value='4. Kuantan - Kuantan Parade'>4. Kuantan - Kuantan Parade</option>" +
                                     "<option value='5. Pacific - Mentakab - Star Mall'>5. Pacific - Mentakab - Star Mall</option>" +
                                     "<option value='6. Kuantan - Pasar Besar'>6. Kuantan - Pasar Besar</option>" +
                                     "<option disabled>Kelantan</option>" +
                                     "<option value='1. Kota Bharu - Jalan Padang Garong'>1. Kota Bharu - Jalan Padang Garong</option>" +
                                     "<option value='2. Pacific - KB Mall'>2. Pacific - KB Mall</option>" +
                                     "<option disabled>Perlis</option>" +
                                     "<option value='1. Kangar - Kayangan Square'>1. Kangar - Kayangan Square</option>" +
                                     "<option disabled>Perak</option>" +
                                     "<option value='1. Kuala Kangsar - Jalan Kangsar'>1. Kuala Kangsar - Jalan Kangsar</option>" +
                                     "<option value='2. Ipoh - Jalan Kampar'>2. Ipoh - Jalan Kampar</option>" +
                                     "<option value='3. Ipoh - Jalan Datuk Onn Jaafar'>3. Ipoh - Jalan Datuk Onn Jaafar</option>" +
                                     "<option value='4. Taiping - Wisma Dato Toh Eng Hoe'>4. Taiping - Wisma Dato Toh Eng Hoe</option>" +
                                     "<option value='5. Taiping - Jalan Kamunting'>5. Taiping - Jalan Kamunting</option>" +
                                     "<option value='6. Sitiawan - Jalan Lumut'>6. Sitiawan - Jalan Lumut</option>" +
                                     "<option value='7. Teluk Intan - Jalan Ah Cheong'>7. Teluk Intan - Jalan Ah Cheong</option>" +
                                     "<option value='8. Pacific - Taiping Mall'>8. Pacific - Taiping Mall</option>" +
                                     "<option disabled>Kedah</option>" +
                                     "<option value='1. Sungai Petani - Central Square'>1. Sungai Petani - Central Square</option>" +
                                     "<option value='2. Kulim - Landmark Centravl'>2. Kulim - Landmark Central</option>" +
                                     "<option value='3. Pacific -Alor Star (Star Parade)'>3. Pacific -Alor Star (Star Parade)</option>" +
                                     "<option value='4. Pacific -Alor Star Mall'>4. Pacific -Alor Star Mall</option>" +
                                     "<option disabled>Johor</option>" +
                                     "<option value='1. Johor Bahru - Taman Johor Jaya'>1. Johor Bahru - Taman Johor Jaya</option>" +
                                     "<option value='2. Johor Bahru - Taman Tun Aminah'>2. Johor Bahru - Taman Tun Aminah</option>" +
                                     "<option value='3. Johor Bahru - Komplek Lien Hoe'>3. Johor Bahru - Komplek Lien Hoe</option>" +
                                     "<option value='4. Johor Bahru - Jalan Tebrau Pandan'>4. Johor Bahru - Jalan Tebrau Pandan</option>" +
                                     "<option value='5. Batu Pahat -Jalan Rugayah'>5. Batu Pahat -Jalan Rugayah</option>" +
                                     "<option value='6. Batu Pahat - Jalan Zabedah'>6. Batu Pahat - Jalan Zabedah</option>" +
                                     "<option value='7. Muar - Wetex Parade'>7. Muar - Wetex Parade</option>" +
                                     "<option value='8. Tangkak - Jalan Payamas'>8. Tangkak - Jalan Payamas</option>" +
                                     "<option value='9. Pacific - Batu Pahat Mall'>9. Pacific - Batu Pahat Mall</option>" +
                                     "<option value='10. Pacific - Kluang Mall'>10. Pacific - Kluang Mall</option>" +
                                     "<option disabled>Penang</option>" +
                                     "<option value='1. Pacific - Komtar Penang'>1. Pacific - Komtar Penang</option>" +
                                     "<option value='2. Pacific - Prai (Megamal)'>2. Pacific - Prai (Megamal)</option>" +
                                     "</select>");

                $('.dropdown-filter select').on( 'change', function () {
                    var column = table.column(1);
                    var val = $(this).val();

                    column.search(val).draw();

                    if( val == "All"){
                        val = "";
                    };

                    $("#id_outlet_export").val(val);
                });

                $('.dropdown-status').append("<select class='ui fluid compact dropdown'>" +
                                     "<option value='ALL'>All Status</option>" +
                                     "<option value='Wishlist'>Wishlist</option>" +
                                     "<option value='Reject'>Rejected</option>" +
                                     "</select>");

                $('.dropdown-status select').on( 'change', function () {
                    var column = table.column(2);
                    var val = $(this).val();

                    column.search(val).draw();
                });

                initialize_select();
            }
        });
    </script>
{% endblock extra_js %}