{% extends 'base.html' %}

{% load static %}
{% load humanize %}



{% block content %}
<main class="content">
    <div class="container-fluid p-0">

        <div class="mb-3">
            <h1 class="h3 d-inline align-middle">Result List</h1>
        </div>

        <div class="col-md-12">
            <div class="card">
                <div class="card-body mt-4">

                    <form action="{% url 'result-list'%}" method="GET">
                        <div class="row">
    
                            <input type="hidden" name = "per_page_count" id="per-page-count" value="{{default_per_page_count}}">
    
                            <div class="col-md-6">
    
                                <div class="row">
                                <div class="col-md-6">

    
                                    
    
                                    
                                </div>
    
                                <div class="col-md-6">
                                    <div class="mb-3 row">
                                        <label class="col-form-label col-sm-4 text-sm-end">Product</label>
                                        <div class="col-sm-8">
                                          <select class="form-select" name="product">
                                            <option value="">ALL</option>
                                            {% for p in product_list %}
                                              <option value="{{ p.code }}" {% if default_product == p.code %}selected{% endif %}>
                                                {{ p.name }}
                                              </option>
                                            {% endfor %}
                                          </select>
                                        </div>
                                    </div>
                                      
                                      
                                    <div class="mb-3 row">
                                        <label class="col-form-label col-sm-4 text-sm-end">Crop</label>
                                        <div class="col-sm-8">
                                          <select class="form-select" name="crop">
                                            <option value="">ALL</option>
                                            {% for p in crop_list %}
                                            <option value="{{ p.id }}" {% if default_crop|stringformat:"s" == p.id|stringformat:"s" %}selected{% endif %}>
                                                {{ p.name }}
                                              </option>
                                            {% endfor %}
                                          </select>
                                        </div>
                                    </div>
                                    
    
                                </div>
    
                            </div>
                                    
    
    
                            </div>
    
                            <div class="col-md-6">
    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                
                                                <div class="col-md-6">
                                                    <div class="mb-3 row">
                                                        <label class="col-form-label col-sm-4 text-sm-end">Reg Date</label>
                                                        <div class="col-sm-8">
    
                                                            
    
                                                            <select class="form-select" name="registration_date_filter" id="reg-date-filter">
                                                                {% for date_filter in date_filters %}
                                                                {% if default_reg_date_filter == date_filter %}
                                                                <option name="registration_date_filter"
                                                                    value="{{date_filter}}" selected>
                                                                    {{date_filter}}</option>
                                                                {% else %}
                                                                <option name="registration_date_filter"
                                                                    value="{{date_filter}}">
                                                                    {{date_filter}}</option>
                                                                {% endif %}
                                                                {% endfor %}
                                                            </select>
    
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="mb-3 row">
                                                        <label class="col-form-label col-sm-4 text-sm-end">From Date</label>
                                                        <div class="col-sm-8">
    
                                                            
                                                        
                                                            <input type="date" 
                                                            {% if reg_from_date_error %} class="form-control is-invalid" {% else %} class="form-control" {% endif %}
                                                            name="registration_from_date" id = "reg-from-date" 
                                                            {% if default_reg_from_date %} value="{{default_reg_from_date}}" {% endif %} disabled>
    
    
                                                        </div>
                                                    </div>
    
                                                    <div class="mb-3 row">
                                                        <label class="col-form-label col-sm-4 text-sm-end">To Date</label>
                                                        <div class="col-sm-8">
    
                                                            <input type="date"
                                                            {% if reg_to_date_error %} class="form-control is-invalid" {% else %} class="form-control" {% endif %}
                                                            name="registration_to_date" id = "reg-to-date" 
                                                            {% if default_reg_to_date %} value="{{default_reg_to_date}}" {% endif %} disabled>
    
                                                        </div>
                                                    </div>
    
    
                                                </div>
    
                                                <div class="col-md-6">
                                                        
                                                    <div class="text-sm-end">
                                                        <button type="submit" class="btn btn-primary btn-lg">Search</button>
                                                    </div>
                                                </div>
    
                                            </div>
    
                                        </div>
                                    </div>
                                    
                            </div>
                        </div>
                    </form>



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

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    
                    <div class="card-body">

                        <div class="dataTables_wrapper">

                            <div class="row">
                                <div class="col-md-6">

    
                                    <div class="dataTables_length" id="datatables-reponsive_length">
                                        
                                        <form id="per-page-count-hidden-form" action="{% url 'result-list'%}" method="GET">
                                            <label>Show 

                                                <select name="per_page_count" id="select-per-page-count" aria-controls="datatables-reponsive" class="form-select form-select-sm">
                                                    {% for option in per_page_selector %}
                                                    {% if option == default_per_page_count %}
                                                        <option value="{{option}}" selected>{{option}}</option>
                                                    {% else %}
                                                        <option value="{{option}}">{{option}}</option>
                                                    {% endif %}
                                                    {% endfor %}

                                                </select> entries
                                            </label>

                                            <input type="hidden" name = "product" id="product-hidden-input-tag" value="{{default_product}}">
                                            <input type="hidden" name = "crop" id="crop-hidden-input-tag" value="{{default_crop}}">
                                            <input type="hidden" name = "registration_date_filter" id="reg-date-filter-hidden-input-tag" value="{{default_reg_date_filter}}">
                                            <input type="hidden" name = "registration_from_date" id="reg-from-date-hidden-input-tag" value="{{default_reg_from_date}}">
                                            <input type="hidden" name = "registration_to_date" id="reg-to-date-hidden-input-tag" value="{{default_reg_to_date}}"> 
                                            <input type="hidden" name = "start_index" id="start-index-hidden-input-tag" value="{{ page.start_index }}">
                                            
                                        </form>
                                   
                                    </div>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-striped" style="min-width: 1200px;">
                                    <caption class="text-muted">Results</caption>
                                    <thead>
                                      <tr>
                                        <th>#</th>
                                        <th>Device</th>
                                        <th>Field</th>
                                        <th>Buyer</th>
                                        <th>Batch #</th>
                                        <th>Description</th>
                                        <th>Crop</th>
                                        <th>Crop Temp (°C)</th>
                                        <th>Crop Weight</th>
                                        <th>Measure Number</th>
                                        <th>Scale Order Number</th>
                                        <th>Moisture (%)</th>
                                        <th>Threshold (%)</th>
                                        <th>Humidity (%)</th>
                                        <th>Weather Temp (°C)</th>
                                        <th>Pressure (hPa)</th>
                                        <th>Weather</th>
                                        <th>Visibility (m)</th>
                                        <th>Wind Speed</th>
                                        <th>Wind Dir</th>
                                        <th>Wind Gusts</th>
                                        <th>Clouds (%)</th>
                                        <th>UV Index</th>
                                        <th>GPS Lat</th>
                                        <th>GPS Lon</th>
                                        <th>Sample Image</th>
                                        <th>Result Type</th>
                                        <th>Result Mode</th>
                                        <th>Reading Time</th>
                                        <th>Created At</th>
                                      </tr>
                                    </thead>
                                    <tbody>
                                      {% for result in page %}
                                      <tr>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ result.device.device_label|default:result.device }}</td>
                                        <td>{{ result.field.field_name|default:"—" }}</td>
                                        <td>{{ result.buyer.name|default:"—" }}</td>
                                        <td>{{ result.batch_number }}</td>
                                        <td>{{ result.description }}</td>
                                        <td>{{ result.crop }}</td>
                                        <td>{{ result.crop_temperature|default_if_none:"" }}</td>
                                        <td>{{ result.crop_weight|default_if_none:"" }}</td>
                                        <td>{{ result.measure_number }}</td>
                                        <td>{{ result.scale_number_id }}</td>
                                        <td>{{ result.moisture_level }}</td>
                                        <td>{{ result.moisture_threshold }}</td>
                                        <td>{{ result.humidity|default_if_none:"" }}</td>
                                        <td>{{ result.weather_temperature|default_if_none:"" }}</td>
                                        <td>{{ result.pressure|default_if_none:"" }}</td>
                                        <td>{{ result.weather_description }}</td>
                                        <td>{{ result.visibility|default_if_none:"" }}</td>
                                        <td>{{ result.wind_speed|default_if_none:"" }}</td>
                                        <td>{{ result.wind_direction|default_if_none:"" }}</td>
                                        <td>{{ result.wind_gusts|default_if_none:"" }}</td>
                                        <td>{{ result.cloud_coverage|default_if_none:"" }}</td>
                                        <td>{{ result.uv_index|default_if_none:"" }}</td>
                                        <td>{{ result.gps_lat|default_if_none:"" }}</td>
                                        <td>{{ result.gps_lon|default_if_none:"" }}</td>
                                        <td>
                                          {% if result.sample_image %}
                                            <a href="{{ result.sample_image.url }}" target="_blank">
                                              <img src="{{ result.sample_image.url }}" alt="sample" style="height:40px;border-radius:4px;">
                                            </a>
                                          {% else %} — {% endif %}
                                        </td>
                                        <td>{{ result.result_type }}</td>
                                        <td>{{ result.result_mode }}</td>
                                        <td>{{ result.reading_datetime|date:"Y-m-d H:i" }}</td>
                                        <td>{{ result.created_at|date:"Y-m-d H:i" }}</td>
                                      </tr>
                                      {% empty %}
                                      <tr>
                                        <td colspan="25" class="text-center text-muted">No results found.</td>
                                      </tr>
                                      {% endfor %}
                                    </tbody>
                                </table>
                              </div>
                            
                              

                        <div class="row">
                            <div class="col-sm-12 col-md-5">
                                {% if has_entries %}
                                    {% if page|length == 1 %}
                                        <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">{{ page.paginator.count }} entry</div>
                                    {% else %}
                                    <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">{{ page.start_index }} to {{ page.end_index }} of {{ page.paginator.count }} entries</div>
                                    {% endif %}
                                {% else %}
                                <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite"><span class="text-danger">No entries</span></div>
                                {% endif %}
                            </div>
                            <div class="col-sm-12 col-md-2">
                                {% if has_entries %}
                                <div class="dataTables_info" id="datatables-reponsive_info" role="status" aria-live="polite">Page {{page.number}} of {{page.paginator.num_pages}}</div>
                                {% endif %}
                            </div>
                            <div class="col-sm-12 col-md-5">
                                <div class="dataTables_paginate paging_simple_numbers" id="datatables-reponsive_paginate">
                                    {% if has_entries %}
                                    <ul class="pagination">

                                        {% if page.has_previous %}

                                        <li class="paginate_button page-item previous" id="datatables-reponsive_previous">
                                            <a href="?page_number={{page.previous_page_number}}&per_page_count={{default_per_page_count}}&product={{default_product}}&crop={{default_crop}}&registration_date_filter={{default_reg_date_filter}}&registration_from_date={{default_reg_from_date}}&registration_to_date={{default_reg_to_date}}" 
                                                                                                                                                        
                                            aria-controls="datatables-reponsive" aria-disabled="true" aria-role="link" data-dt-idx="previous" tabindex="0" class="page-link">Previous</a>
                                        </li>

                                        {% else %}

                                        <li class="paginate_button page-item previous disabled" id="datatables-reponsive_previous">
                                            <a href="" aria-controls="datatables-reponsive" aria-disabled="true" aria-role="link" data-dt-idx="previous" tabindex="0" class="page-link">Previous</a>
                                        </li>

                                        {% endif %}

                                        {% for page_number in page_list %}
                                        {% if page_number == page.paginator.ELLIPSIS %}
                                            {{page_number}}
                                        {% else %}

                                            {% if page_number == page.number %}
                                                <li class="paginate_button page-item active">
                                                    <a href="#" aria-controls="datatables-reponsive" aria-role="link" aria-current="page" data-dt-idx="0" tabindex="0" class="page-link">{{page_number}}</a>
                                                </li>
                                            {% else %}
                                                <li class="paginate_button page-item">
                                                    <a href="?page_number={{page_number}}&per_page_count={{default_per_page_count}}&product={{default_product}}&crop={{default_crop}}&registration_date_filter={{default_reg_date_filter}}&registration_from_date={{default_reg_from_date}}&registration_to_date={{default_reg_to_date}}" 
                                                    aria-controls="datatables-reponsive" aria-role="link" aria-current="page" data-dt-idx="0" tabindex="0" class="page-link">{{page_number}}</a>
                                                </li>
                                            {% endif %}


                                        {% endif %}
                                        {% endfor %}

                                        {% if page.has_next %}

                                        <li class="paginate_button page-item next" id="datatables-reponsive_next">
                                            <a href="?page_number={{page.next_page_number}}&per_page_count={{default_per_page_count}}&product={{default_product}}&crop={{default_crop}}&registration_date_filter={{default_reg_date_filter}}&registration_from_date={{default_reg_from_date}}&registration_to_date={{default_reg_to_date}}" 
                                            aria-controls="datatables-reponsive" aria-role="link" data-dt-idx="next" tabindex="0" class="page-link">Next</a>
                                        </li>

                                        {% else %}

                                        <li class="paginate_button page-item next disabled" id="datatables-reponsive_next">
                                            <a href="" aria-controls="datatables-reponsive" aria-role="link" data-dt-idx="next" tabindex="0" class="page-link">Next</a>
                                        </li>

                                        {% endif %}

                                    </ul>

                                    {% endif %}
                                </div>
                            </div>
                        </div>

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


        </div>

    </div>
</main>

<script src="{% static 'js/page-selection.js' %}"></script>
<script src="{% static 'js/date-filter.js' %}"></script>

{% endblock %}