{% extends "base.html" %}
{% block content %}


    <header class="p-3 bg-dark">
    <div class="container">
      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
     <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto link-body-emphasis text-decoration-none">
        <img class="bi me-2" width="40" height="32" src="https://storage.googleapis.com/storage.benotx.one/sr_logo.png">
        <span class="fs-4">S R Broadband </span>
      </a>

        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
{#          <li><nav-item id="nav_id_home" class="nav-link px-2 text-secondary">Home</nav-item></li>#}
          <li><nav-item id="nav_id_customer" class="btn nav-link px-2 text-white ">Customers</nav-item></li>
          <li><nav-item id="nav_id_billing" class="btn nav-link px-2 text-white">Billing</nav-item></li>
          <li><nav-item id="nav_id_inventory" class="btn nav-link px-2 text-white">Inventory</nav-item></li>
          <li><nav-item id="nav_id_support" class="btn nav-link px-2 text-white">Support</nav-item></li>
{#            <li><nav-item  class="nav-link px-2 text-white">Log</nav-item></li>#}
        </ul>

        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
          <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search" id="search" name="search">
        </form>

        <div class="text-end text-white">

                     {% if user.is_authenticated %}
    <span >Welcome, {{ user.get_username }}</span>
{% else %}
    <p>Welcome, new user. Please log in.</p>
{% endif %}

{#          <button type="button" class="btn btn-outline-light me-2">Login</button>#}
{#          <button type="button" class="btn btn-warning">Sign-up</button>#}
        </div>
      </div>
    </div>
  </header>
    <div class="container ">
        <script>
        $(function() {
            $("#search").autocomplete({
                source: "{% url 'product-autocomplete' %}",
                minLength: 1, // Minimum characters before triggering autocomplete
            });
        });
    </script>

    <div class="container" id="customer_div">
    <div class="text-center card" >

    <p class="Card-header row " ><span class="col-6 text-end display-5 p-0 m-0">Customer ({{ customer_number }})<a href="/create/customer">
        {% if bill_f != "due"  %}
        <i class="bi bi-plus-square-fill text-primary"></i></a></span><a class="col-6 text-end"  href="/due"> <i class=" bi bi-bell  text-danger text-danger display-6 p-2"></i></a></p>
        {% endif %}
    <table class="table px-1">
      <thead>
        <tr>
          <th scope="col"> </th>
             <th scope="col"> id</th>
             <th scope="col">Full Name</th>
            <th scope="col">Mobile</th>
            <th scope="col">Package</th>
            <th scope="col">Billed Month</th>
          <th scope="col">NID</th>
{#          <th scope="col">IP</th>#}
          <th scope="col">Username</th>
            <th scope="col">State</th>
          <th scope="col"> City</th>
          <th scope="col">Area</th>
           <th scope="col">Address</th>

{#          <th scope="col">Address 2</th>#}
        </tr>
      </thead>
      <tbody>
        {% for customer in customers %}
            {% if logs.error|length >  3 %}
                 <tr style="background-color: rgb(234,201,198);">
            {% else %}
                <tr >
            {% endif %}
        <th class="row" ><a href="update/customer/{{customer.id  }}" > <i class="bi bi-arrow-bar-right"></i> </a></th>
                        <td  > {{ customer.id }}  </td>
                        <td> {{ customer.full_name  }} </td>
                        <td>{{ customer.mobile }}  </td>
                        <td>{{ customer.package }}  </td>
                        <td>{{ customer.billed_month }}  </td>

                        <td>{{customer.nid   }} </td>
{#                        <td>{{ customer.ip }}  </td>#}
                        <td>{{ customer.dial_up_username }}  </td>
                        <td>{{ customer.state }}  </td>
                        <td>{{ customer.city  }} </td>
                        <td>{{ customer.area  }} </td>
                        <td>{{  customer.address }} </td>
{#                        <td>{{ customer.street2 }}  </td>#}
                </tr>
        {% empty %}
            <li>No data yet.</li>
        {% endfor %}
{#      `log_id`, `device`, `lat`, `long`, `vacuum`, `vacuum_temperature`, `internal_temperature`, `power_state`, `error`, `tx`, `rx`, `ss`, `ip`, `ssn`, `ts`#}

      </tbody>
    </table>
    </div>
        </br>
    </br>
    </br>
    <hr>
    </div>
    </div>







<div class="container" id="bill_div">
    <div class="text-center card" >
    <h3>Billing <a href="/create/bill"> <i class="bi bi-plus-square-fill text-primary"></i></a></h3>
    <table class="table px-1">
      <thead>
        <tr>
          <th scope="col"></th>
{#             <th scope="col"> bill_id</th>#}
              <th scope="col">Month Billed</th>
            <th scope="col">Customer</th>
             <th scope="col">Bill Created</th>
            <th scope="col">Bill Amount </th>
            <th scope="col">Package Id</th>
        </tr>
      </thead>
      <tbody>
        {% for bill in bills %}
            {% if logs.error|length >  3 %}
                 <tr style="background-color: rgb(234,201,198);">
            {% else %}
                <tr >
            {% endif %}
        <th class="row" ><a href="update/bill/{{bill.bill_id  }}" > <i class="bi bi-arrow-bar-right"></i> </a></th>
                        <td  > {{ bill.month_bill }}  </td>
                        <td> {{ bill.customer  }} </td>
{#                        <td> {{ bill.customer_name  }} </td>#}
                        <td>{{ bill.bill_created }}  </td>
                        <td>{{ bill.bill_amount }}  </td>
                        <td>{{bill.package   }} </td>

                </tr>
        {% empty %}
            <li>No data yet.</li>
        {% endfor %}
{#      `log_id`, `device`, `lat`, `long`, `vacuum`, `vacuum_temperature`, `internal_temperature`, `power_state`, `error`, `tx`, `rx`, `ss`, `ip`, `ssn`, `ts`#}

      </tbody>
    </table>
        </br>
    </br>
    </br>
    <hr>
    </div>
</div>







    <div class="container" id="inventory_div">
    <div class="text-center card">
    <h3>Inventory <a href="/create/inventory"> <i class="bi bi-plus-square-fill text-primary"></i></a></h3>
    <table class="table px-1">
      <thead>
        <tr>
          <th scope="col"></th>
             <th scope="col"> item_name</th>
{#              <th scope="col">product_id</th>#}
             <th scope="col">item_updated</th>
            <th scope="col">amount </th>
            <th scope="col">quantity</th>
        </tr>
      </thead>
      <tbody>
        {% for inventory in inventories %}
            {% if logs.error|length >  3 %}
                 <tr style="background-color: rgb(234,201,198);">
            {% else %}
                <tr >
            {% endif %}
        <th class="row" ><a href="update/inventory/{{inventory.product_id  }}" > <i class="bi bi-arrow-bar-right"></i> </a></th>
{#                        <td  > {{ inventory.product_id }}  </td>#}
                        <td> {{ inventory.item_name  }} </td>
                        <td>{{ inventory.item_updated }}  </td>
                        <td>{{ inventory.amount }}  </td>
                        <td>{{inventory.quantity   }} </td>

                </tr>
        {% empty %}
            <li>No data yet.</li>
        {% endfor %}
{#      `log_id`, `device`, `lat`, `long`, `vacuum`, `vacuum_temperature`, `internal_temperature`, `power_state`, `error`, `tx`, `rx`, `ss`, `ip`, `ssn`, `ts`#}

      </tbody>
    </table>
    </div>
        </br>
    </br>
    </br>
    <hr>
    </div>





    <div class="container" id="support_div">
    <div class="text-center card">
    <h3>Support  <a href="/create/support"> <i class="bi bi-plus-square-fill text-primary"></i></a></h3>
    <table class="table px-1">
      <thead>
        <tr>
          <th scope="col"> </th>
             <th scope="col"> case_id</th>
              <th scope="col">customer</th>
             <th scope="col">assigned_staff</th>
            <th scope="col">description </th>
            <th scope="col">resolution_provided </th>

        </tr>
      </thead>
      <tbody>
        {% for support_case in support_cases %}
            {% if logs.error|length >  3 %}
                 <tr style="background-color: rgb(234,201,198);">
            {% else %}
                <tr >
            {% endif %}
        <th class="row" ><a href="update/support/{{support_case.case_id  }}" > <i class="bi bi-arrow-bar-right"></i> </a></th>
                        <td  > {{ support_case.case_id }}  </td>
                        <td> {{ support_case.customer }} </td>
                        <td>{{ support_case.assigned_staff }}  </td>
                        <td>{{ support_case.description }}  </td>
                            <td>{{ support_case.resolution_provided }}  </td>


                </tr>
        {% empty %}
            <li>No data yet.</li>
        {% endfor %}
{#      `log_id`, `device`, `lat`, `long`, `vacuum`, `vacuum_temperature`, `internal_temperature`, `power_state`, `error`, `tx`, `rx`, `ss`, `ip`, `ssn`, `ts`#}

      </tbody>
    </table>
    </div>
    </div>
</div>



    <script>




    $('#nav_id_customer').click(function(){
        $('#customer_div').show();
        $('#nav_id_customer').addClass('text-secondary');
         $('#nav_id_customer').removeClass('text-white');

         $('#nav_id_billing').addClass('text-white');
        $('#nav_id_billing').removeClass('text-secondary');

        $('#nav_id_inventory').addClass('text-white');
        $('#nav_id_inventory').removeClass('text-secondary');

        $('#nav_id_support').addClass('text-white');
        $('#nav_id_support').removeClass('text-secondary');

        $('#bill_div').hide();
        $('#inventory_div').hide();
        $('#support_div').hide();
    });
    $('#nav_id_billing').click(function(){
         $('#bill_div').show();
        $('#nav_id_billing').addClass('text-secondary');
         $('#nav_id_billing').removeClass('text-white');

         $('#nav_id_customer').addClass('text-white');
        $('#nav_id_customer').removeClass('text-secondary');

        $('#nav_id_inventory').addClass('text-white');
        $('#nav_id_inventory').removeClass('text-secondary');

        $('#nav_id_support').addClass('text-white');
        $('#nav_id_support').removeClass('text-secondary');


        $('#customer_div').hide();
        $('#inventory_div').hide();
        $('#support_div').hide();

    });

    $('#nav_id_inventory').click(function(){
        $('#inventory_div').show();
        $('#nav_id_inventory').addClass('text-secondary');
         $('#nav_id_inventory').removeClass('text-white');

           $('#nav_id_customer').addClass('text-white');
        $('#nav_id_customer').removeClass('text-secondary');

        $('#nav_id_billing').addClass('text-white');
        $('#nav_id_billing').removeClass('text-secondary');

        $('#nav_id_support').addClass('text-white');
        $('#nav_id_support').removeClass('text-secondary');

        $('#customer_div').hide();
        $('#bill_div').hide();
        $('#support_div').hide();
    });
    $('#nav_id_support').click(function(){
        $('#support_div').show();

        $('#nav_id_support').addClass('text-secondary');
         $('#nav_id_support').removeClass('text-white');
        $('#nav_id_inventory').addClass('text-white');
        $('#nav_id_inventory').removeClass('text-secondary');

        $('#nav_id_billing').addClass('text-white');
        $('#nav_id_billing').removeClass('text-secondary');

        $('#nav_id_customer').addClass('text-white');
        $('#nav_id_customer').removeClass('text-secondary');

        $('#customer_div').hide();
        $('#bill_div').hide();
        $('#inventory_div').hide();
    });
    </script>
{% endblock %}