@php
    $id_usuario = session('id_usuario');
    $ivaDefaultSeccion2 = isset($configuracion_iva_activa) && $configuracion_iva_activa
        ? number_format((float) $configuracion_iva_activa->porcentaje_iva, 2, '.', '')
        : '16.00';
    $tipoGastoSeccion2 = isset($datos_reporte) && isset($datos_reporte->tipo_gasto)
        ? $datos_reporte->tipo_gasto
        : null;
    $tipoGastoLabelSeccion2 = $tipoGastoSeccion2 ?: 'Sin definir';
@endphp

<!-- MODAL CREATE SECCION 2 -->
<div class="modal fade" name="create_seccion2_modal" id="create_seccion2_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form action="{{ url('create_seccion2_reporte') }}" method="post">
                {{ csrf_field() }}

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">2. Especificaciones</h5>
                    <button type="button" class="close reset" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="card text-center">
                        <div class="card-header">
                            Datos generales
                        </div>

                        <div class="card-body">
                            <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">Especificaciones</label>

                            <div class="form-row seccion2-especificaciones-row">
                                <div class="form-group col-md-6 text-left">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Tipo moneda</span>
                                        </div>

                                        @if ($permisos->gerente == 1)
                                            <select class="form-control" id="tipo_moneda" name="tipo_moneda">
                                                <option value="MXN" selected>Pesos mexicanos</option>
                                                <option value="USD">Dólar</option>
                                            </select>
                                        @else
                                            <input type="text" class="form-control" value="Pesos mexicanos" readonly>
                                            <input type="hidden" id="tipo_moneda" name="tipo_moneda" value="MXN">
                                        @endif
                                    </div>
                                </div>

                                <div class="form-group col-md-6 text-left">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">Tipo de gasto</span>
                                        </div>

                                        @if ($permisos->gerente == 1)
                                            <select class="form-control" id="tipo_gasto" name="tipo_gasto">
                                                <option value="" {{ !$tipoGastoSeccion2 ? 'selected' : '' }}>Sin definir</option>
                                                <option value="Fijo" {{ $tipoGastoSeccion2 === 'Fijo' ? 'selected' : '' }}>Fijo</option>
                                                <option value="Variable" {{ $tipoGastoSeccion2 === 'Variable' ? 'selected' : '' }}>Variable</option>
                                            </select>
                                        @else
                                            <input type="text" class="form-control" value="{{ $tipoGastoLabelSeccion2 }}" readonly>
                                            <input type="hidden" id="tipo_gasto" name="tipo_gasto" value="{{ $tipoGastoSeccion2 }}">
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" id="subtotal_seccion2" name="subtotal_seccion2" value="0.00">
                            <input type="hidden" id="monto_iva" name="monto_iva" value="0.00">
                            <input type="hidden" id="total_seccion2" name="total_seccion2" value="0.00">

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <div class="sx-scroll-x">
                                        <table class="ui celled table unstackable width_fixed_table tabla-seccion2">
                                            <thead>
                                                <tr>
                                                    <th class="collapsing text-center">Cantidad /<br> Unidad</th>
                                                    <th class="text-center">Nombre</th>
                                                    <th class="text-center">Descripción de especificación</th>
                                                    <th class="collapsing text-center">Precio</th>
                                                    <th class="collapsing text-center">Subtotal</th>
                                                    <th class="collapsing text-center">Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody id="tbody_muestras">
                                                <tr id="tr_servicios_1" data-number_row="1">
                                                    <td>
                                                        <input type="number" class="form-control calculo_subtotal calculo_total text-center" placeholder="Cantidad / Unidad" id="cantidad_1" name="cantidad_1" value="1" min="1">
                                                    </td>
                                                    <td class="width_fixed">
                                                        <input type="text" class="form-control text-center" placeholder="Nombre" id="nombre_1" name="nombre_1">
                                                    </td>
                                                    <td class="width_description_fixed">
                                                        <textarea id="descripcion_1" name="descripcion_1" cols="10" rows="2" class="form-control text-center"></textarea>
                                                    </td>
                                                    <td class="width_fixed">
                                                        <input type="number" class="form-control calculo_subtotal calculo_total text-right" placeholder="Precio" id="precio_1" name="precio_1" min="0" step=".01" value="0" @if ($permisos->gerente != 1) readonly @endif>
                                                    </td>
                                                    <td class="width_fixed">
                                                        <div class="input-group input-group-sm seccion2-money-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text moneda_label_fila">MXN</span>
                                                            </div>
                                                            <input type="number" class="form-control text-right" placeholder="Subtotal" id="subtotal_1" name="subtotal_1" min="0" step=".01" value="0.00" readonly>
                                                        </div>
                                                    </td>
                                                    <td class="text-center">
                                                        <div class="ui tiny icon buttons">
                                                            <a class="ui button red delete_servicio" title="Eliminar">
                                                                <i class="trash icon"></i>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot>
                                                <tr class="active">
                                                    <td colspan="3" class="seccion2-tfoot-empty"></td>
                                                    <td class="text-right font-weight-bold seccion2-total-label">SUBTOTAL:</td>
                                                    <td class="width_fixed seccion2-total-cell">
                                                        <div class="input-group input-group-sm seccion2-money-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text moneda_total_create">MXN</span>
                                                            </div>
                                                            <input type="text" class="form-control text-right" id="subtotal_tbody" value="0.00" readonly>
                                                        </div>
                                                    </td>
                                                    <td class="seccion2-tfoot-empty"></td>
                                                </tr>

                                                <tr  class="warning">
                                                    <td colspan="3" class="seccion2-tfoot-empty"></td>
                                                    <td class="text-right font-weight-bold seccion2-total-label">
                                                        @if ($permisos->gerente == 1)
                                                            <label style="margin:0;">
                                                                <input type="checkbox" id="aplica_iva" name="aplica_iva" value="1" checked>
                                                                IVA
                                                            </label>
                                                            <input type="number" class="form-control input-sm iva-porcentaje-input" id="porcentaje_iva" name="porcentaje_iva" min="0" step=".01" value="{{$iva_registro}}">
                                                        @else
                                                            <label style="margin:0;">
                                                                <input type="checkbox" id="aplica_iva" value="1" checked disabled>
                                                                IVA
                                                            </label>
                                                            <input type="number" class="form-control input-sm iva-porcentaje-input" id="porcentaje_iva" name="porcentaje_iva" min="0" step=".01" value="{{$iva_registro}}" readonly>
                                                            <input type="hidden" name="aplica_iva" value="1">
                                                        @endif
                                                        <span>:</span>
                                                    </td>
                                                    <td class="width_fixed seccion2-total-cell">
                                                        <div class="input-group input-group-sm seccion2-money-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text moneda_total_create">MXN</span>
                                                            </div>
                                                            <input type="text" class="form-control text-right" id="iva_tbody" value="0.00" readonly>
                                                        </div>
                                                    </td>
                                                    <td class="seccion2-tfoot-empty"></td>
                                                </tr>
                                                
                                                <tr class="active">
                                                    <td colspan="3" class="seccion2-tfoot-empty"></td>
                                                    <td class="text-right font-weight-bold seccion2-total-label">TOTAL:</td>
                                                    <td class="width_fixed seccion2-total-cell">
                                                        <div class="input-group input-group-sm seccion2-money-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text moneda_total_create">MXN</span>
                                                            </div>
                                                            <input type="text" class="form-control text-right" id="total_tbody" value="0.00" readonly>
                                                        </div>
                                                    </td>
                                                    <td class="seccion2-tfoot-empty"></td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <br>
                            <div class="row">
                                <div class="col-lg-12">
                                    <a class="ui button green float-right add_muestra"><i class="plus icon"></i>Agregar más servicios</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="times icon"></i>Cerrar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="save icon"></i>Guardar
                    </button>
                </div>

                <input hidden id="id_requisicion_reporte" name="id_requisicion_reporte" value="{{ $id_requisicion_reporte }}">
                <input hidden id="seccion" name="seccion" value="2">
            </form>
        </div>
    </div>
</div>

<style>
    .tabla-seccion2 th,
    .tabla-seccion2 td {
        vertical-align: middle !important;
    }
    .seccion2-especificaciones-row {
        margin-bottom: 4px;
    }
    .seccion2-money-group .input-group-text {
        font-weight: bold;
        min-width: 52px;
        justify-content: center;
    }
    .tabla-seccion2 tfoot td {
        vertical-align: middle !important;
    }
    .tabla-seccion2 tfoot .seccion2-tfoot-empty {
        border: none !important;
        background: transparent !important;
    }
    .tabla-seccion2 tfoot .seccion2-total-label {
        border: none !important;
        background: transparent !important;
        padding-right: 8px !important;
        white-space: nowrap;
    }
    .tabla-seccion2 tfoot .seccion2-total-cell {
        border: none !important;
        background: transparent !important;
    }
    .tabla-seccion2 tfoot .seccion2-money-group {
        width: 100%;
    }
    .iva-porcentaje-input {
        display: inline-block !important;
        width: 60px !important;
        height: 28px !important;
        padding: 2px 4px !important;
        margin-left: 6px;
        text-align: center;
    }
</style>

<script>
    function obtenerEtiquetaMonedaCreate() {
        return $('#tipo_moneda').val() || 'MXN';
    }

    function actualizarEtiquetaMonedaCreate() {
        var moneda = obtenerEtiquetaMonedaCreate();
        $('#create_seccion2_modal .moneda_label_fila').text(moneda);
        $('#create_seccion2_modal .moneda_total_create').text(moneda);
    }

    function calculo_total_create() {
        var subtotalGeneral = 0;

        $('#tbody_muestras tr').each(function() {
            var number_row = $(this).data('number_row');
            var cantidad = parseFloat($('#cantidad_' + number_row).val() || 0);
            var precio = parseFloat($('#precio_' + number_row).val() || 0);
            var subtotal = cantidad * precio;

            $('#subtotal_' + number_row).val(subtotal.toFixed(2));
            subtotalGeneral += subtotal;
        });

        var aplicaIva = $('#aplica_iva').is(':checked');
        var porcentajeIva = parseFloat($('#porcentaje_iva').val() || 0);
        var montoIva = aplicaIva ? (subtotalGeneral * (porcentajeIva / 100)) : 0;
        var total = subtotalGeneral + montoIva;

        $('#subtotal_seccion2').val(subtotalGeneral.toFixed(2));
        $('#monto_iva').val(montoIva.toFixed(2));
        $('#total_seccion2').val(total.toFixed(2));

        $('#subtotal_tbody').val(subtotalGeneral.toFixed(2));
        $('#iva_tbody').val(montoIva.toFixed(2));
        $('#total_tbody').val(total.toFixed(2));

        actualizarEtiquetaMonedaCreate();
    }

    $(document).ready(function() {
        var count = 1;

        $('.add_muestra').click(function() {
            count++;
            var moneda = obtenerEtiquetaMonedaCreate();
            var readonlyPrecio = '@if($permisos->gerente != 1) readonly @endif';
            var html = "";

            html += "<tr id='tr_servicios_"+count+"' data-number_row='"+count+"' data-id_modal='create_seccion2_modal'>";
            html += "<td><input type='number' class='form-control calculo_subtotal calculo_total text-center' placeholder='Cantidad / Unidad' id='cantidad_"+count+"' name='cantidad_"+count+"' value='1' min='1'></td>";
            html += "<td class='width_fixed'><input type='text' class='form-control text-center' placeholder='Nombre' id='nombre_"+count+"' name='nombre_"+count+"'></td>";
            html += "<td class='width_description_fixed'><textarea id='descripcion_"+count+"' name='descripcion_"+count+"' cols='10' rows='2' class='form-control text-center'></textarea></td>";
            html += "<td class='width_fixed'><input type='number' class='form-control calculo_subtotal calculo_total text-right' placeholder='Precio' id='precio_"+count+"' name='precio_"+count+"' min='0' step='.01' value='0' "+readonlyPrecio+"></td>";
            html += "<td class='width_fixed'><div class='input-group input-group-sm seccion2-money-group'><div class='input-group-prepend'><span class='input-group-text moneda_label_fila'>"+moneda+"</span></div><input type='number' class='form-control text-right' placeholder='Subtotal' id='subtotal_"+count+"' name='subtotal_"+count+"' min='0' step='.01' value='0.00' readonly></div></td>";
            html += "<td class='text-center'><div class='ui tiny icon buttons'><a class='ui button red delete_servicio' title='Eliminar'><i class='trash icon'></i></a></div></td>";
            html += "</tr>";

            $('#tbody_muestras').append(html);
            calculo_total_create();
        });

        calculo_total_create();
    });

    $(document).on('keyup change', '#create_seccion2_modal .calculo_subtotal, #create_seccion2_modal .calculo_total, #tipo_moneda, #aplica_iva, #porcentaje_iva', function() {
        calculo_total_create();
    });

    $(document).on('click', '#create_seccion2_modal .delete_servicio', function() {
        if ($('#tbody_muestras tr').length > 1) {
            $(this).closest('tr').remove();
            calculo_total_create();
        }
    });
</script>