{% extends "admin/layout_admin.html" %}
{% load i18n %}

{% block title %}{% trans "Dashboard Agronomo" %}{% endblock title %}

{% block head %}

{% endblock %}

{% block content %}s
    {% load static %}
    {% load humanize %}

<div class="main-content">
    <div class="page-content">
        <div class="container-fluid">
   
            <div class="row mb-4">
                <div class="col-md-12">
                        <h2>{% trans "Gestión de Marcas" %}</h2>
                        <!-- Botón para abrir el modal de creación -->
                        <button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#createBrandModal">
                            {% trans "Añadir Nueva Marca" %}
                        </button>
                </div>
            </div>

            <div class="row">
                <div class="card">
                    <div class="card-body">
                      <!-- Tabla de marcas -->
                    <table class="table table-bordered" id="brandsTable">
                        <thead>
                            <tr>
                                <th>{% trans "Nombre" %}</th>
                                <th>{% trans "Tipo de Producto" %}</th>
                                <th>{% trans "Precio" %}</th>
                                <th>{% trans "Disponibilidad" %}</th>
                                <th>{% trans "Acciones" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for brand in brands %}
                            <tr>
                                <td>{{ brand.name }}</td>
                                <td>{{ brand.get_product_type_display }}</td>
                                <td>${{ brand.price_per_unit }}</td>
                                <td>{% if brand.availability %} ✅ {% else %} ❌ {% endif %}</td>
                                <td>
                                    <!-- Botón para editar -->
                                    <button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editBrandModal{{ brand.id }}">
                                        {% trans "Editar" %}
                                    </button>
                                    
                                    <!-- Botón para eliminar -->
                                    <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteBrandModal{{ brand.id }}">
                                        {% trans "Eliminar" %}
                                    </button>
                                </td>
                            </tr>

                            <!-- Modal para Editar -->
                            <div class="modal fade" id="editBrandModal{{ brand.id }}" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">{% trans "Editar Marca" %}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form action="{% url 'brand-update' brand.id %}" method="post">
                                                {% csrf_token %}

                                                <!-- Nombre -->
                                                <div class="mb-3">
                                                    <label for="brandName{{ brand.id }}" class="form-label">{% trans "Nombre" %}</label>
                                                    <input type="text" class="form-control" id="brandName{{ brand.id }}" name="name" value="{{ brand.name }}" required>
                                                </div>

                                                <!-- Descripción -->
                                                <div class="mb-3">
                                                    <label for="brandDescription{{ brand.id }}" class="form-label">{% trans "Descripción" %}</label>
                                                    <textarea class="form-control" id="brandDescription{{ brand.id }}" name="description">{{ brand.description }}</textarea>
                                                </div>

                                                <!-- Sitio Web -->
                                                <div class="mb-3">
                                                    <label for="brandWebsite{{ brand.id }}" class="form-label">{% trans "Sitio Web" %}</label>
                                                    <input type="url" class="form-control" id="brandWebsite{{ brand.id }}" name="website" value="{{ brand.website }}">
                                                </div>

                                                <!-- Información de Contacto -->
                                                <div class="mb-3">
                                                    <label for="brandContact{{ brand.id }}" class="form-label">{% trans "Información de Contacto" %}</label>
                                                    <input type="text" class="form-control" id="brandContact{{ brand.id }}" name="contact_info" value="{{ brand.contact_info }}">
                                                </div>

                                                <!-- Tipo de Producto -->
                                                <div class="mb-3">
                                                    <label for="brandType{{ brand.id }}" class="form-label">{% trans "Tipo de Producto" %}</label>
                                                    <select class="form-select" id="brandType{{ brand.id }}" name="product_type">
                                                        {% for value, label in product_types %}
                                                            <option value="{{ value }}" {% if brand.product_type == value %}selected{% endif %}>
                                                                {{ label }}
                                                            </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>

                                                <!-- Precio por Unidad -->
                                                <div class="mb-3">
                                                    <label for="brandPrice{{ brand.id }}" class="form-label">{% trans "Precio por Unidad" %}</label>
                                                    <input type="number" step="0.01" class="form-control" id="brandPrice{{ brand.id }}" name="price_per_unit" value="{{ brand.price_per_unit }}">
                                                </div>

                                                <!-- Unidad de Medida -->
                                                <div class="mb-3">
                                                    <label for="brandUnit{{ brand.id }}" class="form-label">{% trans "Unidad de Medida" %}</label>
                                                    <input type="text" class="form-control" id="brandUnit{{ brand.id }}" name="unit_of_measure" value="{{ brand.unit_of_measure }}">
                                                </div>

                                                <!-- Disponibilidad -->
                                                <div class="mb-3 form-check">
                                                    <input type="checkbox" class="form-check-input" id="brandAvailability{{ brand.id }}" name="availability" {% if brand.availability %}checked{% endif %}>
                                                    <label class="form-check-label" for="brandAvailability{{ brand.id }}">{% trans "Disponible" %}</label>
                                                </div>

                                                <button type="submit" class="btn btn-success">{% trans "Actualizar" %}</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <!-- Modal para Eliminar -->
                            <div class="modal fade" id="deleteBrandModal{{ brand.id }}" tabindex="-1">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">{% trans "Confirmar Eliminación" %}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>{% trans "¿Estás seguro de que deseas eliminar esta marca?" %}</p>
                                            <form action="{% url 'brand-delete' brand.id %}" method="post">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-danger">{% trans "Eliminar" %}</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </tbody>
                    </table>   
                    </div>
                                       
                </div>
            </div>            


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


<!-- Modal para Crear una Marca -->
<div class="modal fade" id="createBrandModal" tabindex="-1" aria-labelledby="createBrandModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "Agregar Nueva Marca" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{% url 'brand-create' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">{% trans "Nombre" %}</label>
                                <input type="text" name="name" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{% trans "Tipo de Producto" %}</label>
                                <select name="product_type" class="form-select">
                                    {% for value, label in product_types %}
                                        <option value="{{ value }}">{{ label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{% trans "Precio por Unidad" %}</label>
                                <input type="number" step="0.01" name="price_per_unit" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{% trans "Unidad de Medida" %}</label>
                                <input type="text" name="unit_of_measure" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">{% trans "Descripción" %}</label>
                                <textarea name="description" class="form-control" rows="3"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{% trans "Sitio Web" %}</label>
                                <input type="url" name="website" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">{% trans "Información de Contacto" %}</label>
                                <input type="text" name="contact_info" class="form-control">
                            </div>
                            <div class="mb-3 form-check">
                                <input type="checkbox" name="availability" class="form-check-input" checked>
                                <label class="form-check-label">{% trans "Disponible" %}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancelar" %}</button>
                    <button type="submit" class="btn btn-primary">{% trans "Guardar Marca" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>
           
{% endblock content %}

{% block footer %}

<script>
    $(document).ready(function() {
        $('#brandsTable').DataTable({
            responsive: true,
            autoWidth: false,
            paging: true,
            pageLength: 10,
            language: {
                search: "{% trans 'Buscar:' %}",
                zeroRecords: "{% trans 'No se encontraron resultados' %}",
                info: "{% trans 'Mostrando _START_ a _END_ de _TOTAL_ registros' %}",
                infoEmpty: "{% trans 'No hay registros disponibles' %}",
                lengthMenu: "{% trans 'Mostrar _MENU_ registros' %}",
                paginate: {
                    previous: "{% trans 'Anterior' %}",
                    next: "{% trans 'Siguiente' %}"
                }
            }
        });
    });
</script>


{% endblock %}