{% extends "base.html" %}


{% block titulo %} Armas y Municiones{% endblock %}

{% block seccion %}
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h5 class="m-0">Panel de Unidades</h5>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Información</a></li>
                    <li class="breadcrumb-item active">Armamento</li>
                    <li class="breadcrumb-item active">Municiones</li>
                    <li class="breadcrumb-item active">Explosivos</li>
                    <li class="breadcrumb-item active">Accesorio</li>
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block contenido %}  

        <div class="card card-dark card-outline">
            <div class="card-header ">
                <div class="d-flex justify-content-between">
                    <h3 class="card-title m-0">
                    <a href="{% url 'pdf_tres' batallon.id %}" class="btn btn-danger"><i class="fas fa-file-pdf"></i> PDF</a>
                    </h3>
                    <h4>Armamento</h4>
                    <a href="" class="btn btn-success float-left" data-toggle="modal"
                        data-target="#modalArmas"><i class="fas fa-plus-square"></i> Nuevo</a>
                </div>
            </div>
            <div class="card-body table-responsive ">
                <table id="tablaArmas" class="table table-bordered table-striped table-hover-blue ">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-center">F-R</th>
                            <th class="text-center">C-ARMA</th>
                            <th class="text-center">A-AG</th>
                            <th class="text-center">M-A</th>
                            <th class="text-center">C-A</th>
                            <th class="text-center">S-A</th>
                            <th class="text-center">S-AG</th>
                            <th class="text-center">F-AG</th>
                            <th class="text-center">OP A</th>
                            <th class="text-center">C-A</th>
                            <th class="text-center">C-C</th>
                            <th class="text-center">A-S</th>
                            <th class="text-center">AC</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for datos in servicio %}
                        <tr>
                            <td>{{datos.fecha|date:"dmy"}}</td>
                            <td>{{datos.categoria}}</td>
                            <td>{{datos.tipoA}}</td>
                            <td>{{datos.modeloA}}</td>
                            <td>{{datos.calibreA}}</td>
                            <td class="text-truncate">{{datos.serialA}}</td>
                            <td>{{datos.serialAG}}</td>
                            <td>{{datos.fechaAG|date:"dmy"}}</td>
                            <td>{{datos.opAM}}</td>
                            <td>{{datos.cantidadA}}</td>
                            <td>{{datos.cantidadC}}</td>
                            <td>{{datos.armaS}}</td>
                            <td>
                            <a href="{% url 'pdf_cinco' datos.id %}" class="btn btn-danger btn-sm"><i class="fas fa-file-pdf"></i></a> |
                            <a href="{% url 'edit_armas' datos.id %}" class="btn btn-info btn-sm"><i class="fas fa-solid fa-marker"></i></a> |
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
 
        <div class="card card-dark card-outline">
            <div class="card-header">
                <div class="d-flex justify-content-between">
                    <h3 class="card-title  m-0">
                    <a href="{% url 'pdf_cuatro' batallon.id %}" class="btn btn-danger"><i class="fas fa-file-pdf"></i> PDF</a>
                    </h3>
                    <h4>Municiones y Explosivos</h4>
                    <a href="#" class="btn btn-success float-left" data-toggle="modal"
                        data-target="#modalMunicion"><i class="fas fa-plus-square"></i> Nuevo</a>
                </div>
            </div>
            <div class="card-body table-responsive">
                <table id="tablaMunicion" class="table table-bordered table-striped table-hover-blue">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-center">F-R</th>
                            <th class="text-center">DESCRIPCIÓN</th>
                            <th class="text-center">L-N°</th>
                            <th class="text-center">S-AG</th>
                            <th class="text-center">F-AG</th>
                            <th class="text-center">C-M</th>
                            <th class="text-center">AC</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for datos in municiones %}
                        <tr>
                            <td>{{datos.fecha|date:"dmy"}} </td>
                            <td>{{datos.tipoM}} </td>
                            <td>{{datos.lote}} </td>
                            <td>{{datos.serialAG}} </td>
                            <td>{{datos.fechaAG|date:"d/m/y"}} </td>
                            <td>{{datos.cantidadM}} </td>
                            <td>
                            <a href="{% url 'pdf_sexto' datos.id %}" class="btn btn-danger btn-sm"><i class="fas fa-file-pdf"></i></a> |
                            <a href="{% url 'edit_municion' datos.id %}" class="btn btn-info btn-sm"><i class="fas fa-solid fa-marker"></i></a> |
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

<div class="modal fade" id="modalArmas" tabindex="-1" aria-labelledby="tituloArmasModal" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-dark ">
                <h5 class="modal-title" id="tituloArmasModal">Formulario de las Armas</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {% include "armas/armas_f.html" %}
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalMunicion" tabindex="-1" aria-labelledby="tituloMunicionModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-dark ">
                <h5 class="modal-title" id="tituloMunicionModal">Formulario de Munición</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                {% include "municion/municion_f.html" %}
            </div>
        </div>
    </div>
</div>
</div>

{% endblock %}


{% block js %}


<script>
    $(function () {
        $("#tablaArmas").DataTable({
            "responsive": false, 
            "lengthChange": true, 
            "autoWidth": true,
             "pageLength":5,
             "ordering":false,
             'info':true,

             columnDefs: [
                {
                    targets: 0, 
                    render: function (data, type, row) {
                        return '<span class="text-truncate">' + data + '</span>';
                    }
                }
            ],
        
            language: {
                "pageLength": "",
                "decimal": "",
                "emptyTable": "No hay datos",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Registros",
                "infoEmpty": "Mostrando 0 a 0 de 0 Registros",
                "infoFiltered": "(Filtro de _MAX_ total Registros)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Registros",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "No se encontraron coincidencias",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Próximo",
                    "previous": "Anterior",
                },
                "aria": {
                    "sortAscending": ": Activar orden de columna ascendente",
                    "sortDescending": ": Activar orden de columna desendente",
                }
            }
        }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');

        $('#tablaMunicion').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "responsive": false,
            "pageLength": 5,
            "decimal": 5,
            language: {
                "pageLength": "",
                "decimal": "",
                "emptyTable": "No hay datos",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Registros",
                "infoEmpty": "Mostrando 0 a 0 de 0 Registros",
                "infoFiltered": "(Filtro de _MAX_ total Registros)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Registros",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "No se encontraron coincidencias",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Próximo",
                    "previous": "Anterior",
                },
                "aria": {
                    "sortAscending": ": Activar orden de columna ascendente",
                    "sortDescending": ": Activar orden de columna desendente",
                }
            }

        }).buttons().container().appendTo('#example2_wrapper .col-md-6:eq(0)');
    });
</script>

<script>
    $(document).ready(function () {
        $("#armaS").change(function () {
            var valorSeleccionado = $(this).val();
            if (valorSeleccionado == "No") {
                $("#prueba1").hide();
                $("#prueba2").show();
            } else {
                $("#prueba1").show();
                $("#prueba2").hide();
            }
        });
    });
</script>

{% endblock %}