{% extends 'base.html.twig' %}
{% block stylesheets %}
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
    fieldset {
      border: 1px solid blue !important;
    }
    legend {
      font-size: 1rem;
      font-weight: bold;
    }
    .g-container {
      display: grid;
      grid-template-columns: 1fr 0.5fr 1fr 0.5fr 1fr 0.5fr;
      column-gap: 20px;
      row-gap: 20px;
    }
    .g-container > .col-form-label {
      text-align: right;
    }

    .d-blue {
      border: 3px solid blue;
    }
    .d-green {
      border: 3px solid green;
    }
    .d-red {
      border: 3px solid red;
    }
    .d-orange {
      border: 3px solid orange;
    }
    .d-slateblue {
      border: 3px solid slateblue;
    }
    .d-black {
      border: 3px solid black;
    }
  </style>
{% endblock %}
{% block body %}
  <div id="app">
    <fieldset class="px-3 pb-2 col-xl-6">
      <legend class="w-auto ml-3 px-1">Configuración decimales</legend>
      <div class="g-container">
        <label class="col-form-label" for="dec-ud">Unidades</label>
        <number-input is-integer id="dec-ud" class="d-blue" v-model="config.unidades" @input="calculaTotal()"></number-input>
        <label class="col-form-label" for="dec-pvp">Precio</label>
        <number-input is-integer id="dec-pvp" class="d-green" v-model="config.precio" @input="calculaTotal()"></number-input>
        <label class="col-form-label" for="dec-total-lin">Total línea</label>
        <number-input is-integer id="dec-total-lin" class="d-red" v-model="config.totalLinea" @input="calculaTotal()"></number-input>
        <label class="col-form-label" :class="{'font-italic': config.redondeo2totales}" for="dec-bimp">Base imponible</label>
        <number-input is-integer id="dec-bimp" class="d-orange" v-model="config.baseImponible" @input="calculaTotal()" v-if="!config.redondeo2totales"></number-input>
        <input type="text" id="dec-bimp" class="form-control form-control-sm text-right font-italic d-orange" :value="decBaseImp" @input="calculaTotal()" v-if="config.redondeo2totales" readonly>
        <label class="col-form-label font-italic" for="dec-iva">Total IVA</label>
        <input type="text" id="dec-iva" class="form-control form-control-sm text-right font-italic d-slateblue" :value="decTotales" readonly>
        <label class="col-form-label font-italic" for="dec-total-fac">Total factura</label>
        <input type="text" id="dec-total-fac" class="form-control form-control-sm text-right font-italic d-black" value="2" readonly>
      </div>
      <div class="mt-2 d-flex justify-content-around">
        <div class="custom-control custom-switch mt-2">
          <input type="checkbox" class="custom-control-input" id="dec-redondeo2" v-model="config.redondeo2totales" @change="calculaTotal()">
          <label class="custom-control-label" for="dec-redondeo2">Redondear totales con 2 decimales</label>
        </div>
        <button class="btn btn-primary" @click="fillLines()">
          <i class="fa fa-lg fa-pencil-square-o mr-3"></i>Rellenar líneas
        </button>
        <button class="btn btn-primary" @click="clearLines()">
          <i class="fa fa-lg fa-square-o mr-3"></i>Limpiar líneas
        </button>
      </div>
    </fieldset>
    <fieldset class="px-2 pb-2">
      <legend class=" w-auto ml-3 px-1">Líneas</legend>
      <div class="row no-gutters mx-0 py-1">
        <div class="d-none d-sm-block col-sm-3 col-lg-7 mr-2">Artículo</div>
        <div class="col-2 col-lg-1 mr-2 text-right">Unidades</div>
        <div class="col-2 col-lg-1 mr-2 text-right">Precio</div>
        <div class="col-2 col-lg-1 mr-2 text-right">%IVA</div>
        <div class="col-2 col-lg-1 mr-2 text-right">Total</div>
      </div>
      <div class="row no-gutters py-1" v-for="lin in lineas">
        <input type="text" class="col-12 col-sm-3 col-lg-7 mr-2 pl-2 mb-2 mb-sm-0 form-control form-control-sm" v-model="lin.nombre">
        <number-input v-bind:precision="config.unidades" class="col-2 col-lg-1 mr-2 pr-2 form-control form-control-sm text-right d-blue" v-model="lin.unidades" @input="calculaTotal()"></number-input>
        <number-input v-bind:precision="config.precio" class="col-2 col-lg-1 mr-2 pr-2 form-control form-control-sm text-right d-green" v-model="lin.precio" @input="calculaTotal()"></number-input>
        <number-input class="col-2 col-lg-1 mr-2 pr-2 form-control form-control-sm text-right" v-model="lin.piva" @input="calculaTotal()"></number-input>
        <input type="text" class="col-2 col-lg-1 mr-2 pr-2 form-control form-control-sm text-right d-red" v-model="lin.total" readonly></div>
    </fieldset>
    <fieldset class="px-2 pb-2">
      <legend class=" w-auto ml-3 px-1">Totales</legend>
      <div class="row">
        <div class="col">
          <div class="row no-gutters mx-0 py-1">
            <div class="col-4 col-md-3 col-lg-1 mr-2">Base</div>
            <div class="col-2 col-lg-1 mr-2 text-right">%IVA</div>
            <div class="col-4 col-md-3 col-lg-1 mr-2 text-right">Iva</div>
          </div>
          <div class="row no-gutters py-1" v-for="(item, index) in totales.piva">
            <input type="text" class="col-4 col-md-3 col-lg-2 mr-2 pr-2 form-control form-control-sm text-right d-orange" :value="totBase(index)" readonly>
            <input type="text" class="col-2 col-lg-1 mr-2 pr-2 form-control form-control-sm text-right" :value="totales.piva[index]" readonly>
            <input type="text" class="col-4 col-md-3 col-lg-2 mr-2 pr-2 form-control form-control-sm text-right d-slateblue" :value="totIva(index)" readonly>
          </div>
        </div>
        <div class="col-12 col-md-auto d-flex flex-column align-items-end">
          <div>Total</div>
          <div class="d-flex align-items-center">
            <span class="mr-2">Calculado</span>
            <input type="text" class="my-2 form-control form-control-sm text-right d-orange" :value="totTotal()" readonly>
          </div>
          <div class="d-flex align-items-center">
            <span class="mr-2">Final</span>
            <input type="text" class="form-control form-control-sm text-right d-black" :value="totTotal2()" readonly>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
{% endblock %}
{% block javascript %}
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="{{ asset('js/calculos/tools.js') }}?20250414"></script>
  <script src="{{ asset('js/calculos/number-input.js') }}?20250414"></script>
  <script src="{{ asset('js/calculos/calculos.js') }}?20250414" defer></script>
{% endblock %}