{# Se importa el template base #}
{% extends 'MainBundle:Master:template.html.twig' %}
{% block scripts %}
    {# Styles #}
    <link rel="stylesheet" type="text/css" href="{{ asset('bundles/utilities/datatable/datatables.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/utilities/bootstrap-3.3.7/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/indicator/css/bootstrap-select.css') }}"/>
    <link href="{{ asset('bundles/utilities/font-awesome-4.7.0/css/font-awesome.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('bundles/utilities/datatable/datatables.min.css') }}">
    <link rel="stylesheet"
          href="{{ asset('bundles/utilities/bootstrap-datepicker-1.6.4/css/bootstrap-datepicker3.min.css') }}"/>

    {% set configUser = app.user.config %}
    {% if configUser.skin_dark is defined %}
        {% if configUser.skin_dark %}
            <link rel="stylesheet" href="{{ asset('bundles/grid/'~ hrk_skin ~'/buscarpaciente-dark.css') }}">
            <link rel="stylesheet" href="{{ asset('bundles/grid/css/htmlGrid.css') }}"/>
        {% else %}
            <link rel="stylesheet" href="{{ asset('bundles/grid/css/lightGrid.css') }}"/>
        {% endif %}
    {% else %}
        <link rel="stylesheet" href="{{ asset('bundles/grid/'~ hrk_skin ~'/buscarpaciente-dark.css') }}">
        <link rel="stylesheet" href="{{ asset('bundles/grid/css/htmlGrid.css') }}"/>
    {% endif %}
    {# Js #}
    <script>
        var getCanasta = "{{ path('get_canasta') }}";
        var saveCanasta = "{{ path('save_canasta') }}";
        var SrcGif = '{{ asset('bundles/utilities/images/anim_gif.gif') }}';
        var errorAjax = "{{ 'messages.ajax.errorProcess'|trans([], 'LocalizationBundle') }}";
        var errorFileds = "{{ 'patient.error.msg' |trans([], 'LocalizationBundle') }}";
    </script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/jquery.dataTables.min.js') }}"></script>

    <script type="text/javascript" src="{{ asset('bundles/utilities/bootstrap-3.3.7/js/bootstrap.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ asset('bundles/utilities/bootstrap-datepicker-1.6.4/js/bootstrap-datepicker.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ asset('bundles/utilities/bootstrap-datepicker-1.6.4/locales/bootstrap-datepicker.es.min.js') }}"></script>
    <script src="{{ asset('bundles/utilities/bootstrap-select/js/bootstrap-select.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/js/blockUI.js') }}"></script>
    <script src="{{ asset('bundles/hirukofacturacion/js/canasta.js') }}"></script>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-body">
                <h4 class="mb-1">{{ 'labels.canastaIns'|trans([], 'LocalizationBundle') }}</h4>
                <table style="text-align: left" class="table table-bordered table-condensed">
                    <tr>
                        <th>{{ 'labels.nombreCan'|trans([], 'LocalizationBundle') }} *:</th>
                        <br>
                        <td>
                            <input id="nombre-can" data-idcan="{{ canasta.0.idCanasta |default('') }}"
                                   class="form-control" value="{{ canasta.0.nombreCanasta | default ('') }}">
                        </td>
                    </tr>
                    <tr>
                        <th>{{ 'labels.insumos'|trans([], 'LocalizationBundle') }} *:</th>
                        <td>
                            <select id="sel-insumo" title="Seleccionar" class="selectpicker form-control"
                                    data-live-search="true" data-size="10">
                                {% if repoIns is defined %}
                                    {% for ins in repoIns %}
                                        <option value="{{ ins.idStudyList }}">{{ ins.nameStudy }}</option>
                                    {% endfor %}
                                {% endif %}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>{{ 'Modify.state.label'|trans([], 'LocalizationBundle') }}</th>
                        <td><input id="estado" type="checkbox"></td>
                    </tr>
                    <tr>
                        <td colspan="4" style="text-align: right;">
                            <a id="cancel" href="{{ path('canastaServicio') }}" class="btn btn-primary btn-md"
                               role="button">{{ 'patient.cancel.label'|trans([], 'LocalizationBundle') }}</a>
                            <a id="save" class="btn btn-primary btn-md"
                               role="button">{{ 'button.save'|trans([], 'LocalizationBundle') }}</a>
                        </td>
                    </tr>
                </table>
                {#TABLA NUEVA PARA LISTA DE INSUMOS#}
                <div class="col-md-12 draggable">
                    <label class="mt-3">Insumos seleccionados</label>
                    <table id="insTable" class="table table-hover table-striped">
                        <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Eliminar</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% if insumos | length > 0 %}
                            {% for insumos in insumos %}
                                <tr id="{{ insumos.idStudyList }}">
                                    <td>
                                        {{ insumos.nameStudy }}
                                    </td>
                                    <td>
                                        <a href="javascript:void(0)" data-id="{{ insumos.idStudyList }}"
                                           class="btn btn-sm removeIns">
                                            <i class="fa fa-trash">
                                            </i>
                                        </a>
                                    </td>
                                </tr>
                            {% endfor %}
                        {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            var estado = '{{ canasta.0.estado|default(false) }}';

            $('#estado').prop('checked', estado);
            $('.selectpicker').selectpicker('refresh');
        });
    </script>
{% endblock %}