{% extends 'shared/base.html' %}
{% load static %}
{% block content %}

<div class="content">
    <!-- Cabeçalho -->
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-body bg-success text-white rounded-top">
            <h5 class="mb-0">Relatório de Protocolos</h5>
        </div>
    </div>

    <!-- Filtro de Protocolos -->
    <div class="row">
        <!-- Coluna do Filtro -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Filtrar Protocolos</div>
                </div>
                <div class="card-body">
                    <form method="get">
                        <div class="mb-1">
                            <label for="protocolo_id" class="form-label">Selecione o Protocolo</label>
                            <select id="protocolo_id" name="protocolo_id" class="form-select select2">
                                <option value="">-- Selecione um Protocolo --</option>
                                {% for protocolo in protocolos %}
                                    <option value="{{ protocolo.id }}" {% if protocolo_selecionado and protocolo.id == protocolo_selecionado.id %}selected{% endif %}>
                                        {{ protocolo.num_protocolo|default:protocolo.id }} - 
                                        {% if protocolo.tipo_cliente == 'F' %}
                                            {{ protocolo.cliente_fisico.nome_completo }}
                                        {% else %}
                                            {{ protocolo.cliente_empresa.nome_fantasia }}
                                        {% endif %}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Buscar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Coluna das Informações do Protocolo Selecionado -->
        {% if protocolo_selecionado %}
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="card-title">Informações do Protocolo Selecionado</div>
                </div>
                <div class="card-body">
                    <!-- Detalhes do Protocolo -->
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="form-label">Número do Protocolo</label>
                                <input type="text" class="form-control" value="{{ protocolo_selecionado.num_protocolo|default:protocolo_selecionado.id }}" readonly>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label class="form-label">Data de Criação</label>
                                <input type="text" class="form-control" value="{{ dados_relatorio.data_criacao|date:"d/m/Y" }}" readonly>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label">Cliente</label>
                                <input type="text" class="form-control" value="{{ dados_relatorio.cliente_nome }}" readonly>
                            </div>
                        </div>
                    </div>
                    <!-- Totais -->
                    <div class="row mt-3">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label">Total de Mudas</label>
                                <input type="text" class="form-control" value="{{ dados_relatorio.total_mudas }}" readonly>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="form-label">Valor Total</label>
                                <input type="text" class="form-control" value="R$ {{ dados_relatorio.total_valor|floatformat:2 }}" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- Dados Relacionados -->
    {% if protocolo_selecionado %}
    <div class="card shadow-sm mt-4">
        <div class="card-header">
            <div class="card-title">Semeaduras Associadas</div>
        </div>
        <div class="card-body">
            <!-- Tabela de Semeaduras -->
            <div class="table-responsive">
                <table id="semeaduraTableRelated" class="table table-striped table-bordered nowrap" style="width: 100%;">
                    <thead class="bg-success bg-gradient text-white">
                        <tr>
                            <th>Nome Científico</th>
                            <th>Nome Popular</th>
                            <th>Categoria</th>
                            <th>Quantidade</th>
                            <th>Valor Unitário</th>
                            <th>Valor Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for semeadura in dados_relatorio.semeaduras %}
                            <tr>
                                <td>{{ semeadura.semeadura.lote.especie.especies }}</td>
                                <td>{{ semeadura.semeadura.lote.especie.nome_popular }}</td>
                                <td>{{ semeadura.categoria }}</td>
                                <td>{{ semeadura.qtd_especie }}</td>
                                <td>R$ {{ semeadura.valor_unit|floatformat:2 }}</td>
                                <td>R$ {{ semeadura.valor_total|floatformat:2 }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {% else %}
    <p class="mt-4">Selecione um protocolo para visualizar o relatório.</p>
    {% endif %}
</div>

<!-- Scripts adicionais -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        // Inicializa o Select2
        $('.select2').select2({
            placeholder: 'Digite para buscar...',
            allowClear: true
        });

        // Inicializa o DataTable
        $('#semeaduraTableRelated').DataTable({
            columnDefs: [
                // Adicione configurações de colunas se necessário
            ],
            searching: true,
            lengthChange: true,
            paging: true,
            scrollY: '400px',
            scrollCollapse: true,
            info: true,
            scrollX: true,
            fixedHeader: true
        });
    });
</script>

{% endblock %}