toeasy-front/src/lib/components/trading/BoletaCompra.svelte

<script>
  import ModalBase from './ModalBase.svelte';
  import flatpickr from 'flatpickr';
  import 'flatpickr/dist/flatpickr.min.css';
  import { Portuguese } from 'flatpickr/dist/l10n/pt.js';
  import { createEventDispatcher } from 'svelte';

  export let visible = false;
  export let onClose = () => {};
  export let state = '';
  export let commodity = '';
  export let prefill = null;

  const dispatch = createEventDispatcher();

  let valorSaca = '';
  let quantidade = '';
  let referencia = '';
  let validade = new Date();
  let validadeInput = validade.toISOString().slice(0, 10);

  $: total = (Number(valorSaca) || 0) * (Number(quantidade) || 0);

  $: if (visible && prefill) {
    if (prefill.valorSaca != null || prefill.valor != null) {
      valorSaca = String(prefill.valorSaca ?? prefill.valor ?? '');
    }
    if (prefill.quantidade != null) {
      quantidade = String(prefill.quantidade ?? '');
    }
  }

  let calendarEl;

  // Inicializa Flatpickr
  function initCalendar() {
    flatpickr(calendarEl, {
      inline: true,
      appendTo: calendarEl,
      defaultDate: validade,
      locale: Portuguese,
      dateFormat: 'Y-m-d',
      onChange: (selectedDates) => {
        validade = selectedDates[0];
        validadeInput = validade.toISOString().slice(0, 10);
      }
    });
  }

  function handleValidadeInput(event) {
    const str = event.target.value;
    validade = str ? new Date(str) : new Date();
    if (calendarEl._flatpickr) {
      calendarEl._flatpickr.setDate(validade);
    }
  }

  function confirmar() {
    const dados = {
      tipo: 'compra',
      valorSaca: Number(valorSaca) || 0,
      quantidade: Number(quantidade) || 0,
      referencia,
      total,
      validade: validadeInput,
      estado: state,
      commodity
    };
    //console.log('BoletaCompra confirmada', dados);
    dispatch('confirm', dados);
    try { onClose?.(); } catch {}
  }

  function formatBRL(n) {
    return new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(Number(n || 0));
  }
</script>

<ModalBase title="Boleta de Compra" {visible} {onClose}>
  <div class="space-y-4">

    <!-- VALOR E QUANTIDADE -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="buy-valor-saca">Valor/saca</label>
        <input id="buy-valor-saca" type="number" min="0" step="0.01" bind:value={valorSaca}
          class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500" />
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="buy-quantidade">Quantidade em saca</label>
        <input id="buy-quantidade" type="number" min="0" step="1" bind:value={quantidade}
          class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500" />
      </div>
    </div>

    <!-- REFERÊNCIA E TOTAL -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300">eBRL: {referencia}</p>
      </div>
      <div>
        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300">Valor total: {formatBRL(total)}</p>
      </div>
    </div>

    <!-- VALIDADE E CALENDÁRIO -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <!-- input de validade -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="buy-validade">Validade</label>
        <input id="buy-validade" type="date" bind:value={validadeInput} on:input={handleValidadeInput}
          class="mt-1 block w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-green-500" />

        <!-- ESTADO E COMMODITY -->
        <div class="mt-4">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="buy-estado">Estado</label>
          <input id="buy-estado" value={state} readonly
            class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
        </div>
        <div class="mt-4">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="buy-commodity">Commodity</label>
          <input id="buy-commodity" value={commodity} readonly
            class="mt-1 block w-full rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/40 text-gray-900 dark:text-gray-200 px-3 py-2" />
        </div>
      </div>

      <!-- Calendário inline -->
      <div>
        <p class="block text-sm font-medium text-gray-700 dark:text-gray-300">Calendário</p>
        <div bind:this={calendarEl} class="mt-1 w-56 text-sm calendar-override rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700/70 text-gray-900 dark:text-gray-200 p-2" use:initCalendar></div>
      </div>
    </div>


    <!-- BOTÃO CONFIRMAR -->
    <div class="flex justify-end pt-2">
      <button class="px-4 py-2 rounded bg-green-600 hover:bg-green-700 text-white focus:outline-none focus:ring-2 focus:ring-green-500"
        on:click={confirmar}>
        Confirmar Compra
      </button>
    </div>
  </div>
</ModalBase>

<style>
  :global(.calendar-override .flatpickr-calendar) {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  :global(.calendar-override .flatpickr-months) {
    border-bottom: 1px solid #e5e7eb;
  }
  :global(.dark .calendar-override .flatpickr-months) {
    border-color: #374151;
  }
  :global(.calendar-override .flatpickr-current-month .cur-month),
  :global(.calendar-override .flatpickr-current-month .numInputWrapper input) {
    color: #111827;
    font-weight: 600;
  }
  :global(.dark .calendar-override .flatpickr-current-month .cur-month),
  :global(.dark .calendar-override .flatpickr-current-month .numInputWrapper input) {
    color: #e5e7eb;
  }
  :global(.calendar-override .flatpickr-weekday) {
    color: #6b7280;
    font-weight: 500;
  }
  :global(.dark .calendar-override .flatpickr-weekday) {
    color: #9ca3af;
  }
  :global(.calendar-override .flatpickr-day) {
    color: #111827;
    border-radius: 0.375rem;
  }
  :global(.dark .calendar-override .flatpickr-day) {
    color: #e5e7eb;
  }
  :global(.calendar-override .flatpickr-day:hover) {
    background: #f3f4f6;
  }
  :global(.dark .calendar-override .flatpickr-day:hover) {
    background: #374151;
  }
  :global(.calendar-override .flatpickr-day.selected),
  :global(.calendar-override .flatpickr-day.startRange),
  :global(.calendar-override .flatpickr-day.endRange) {
    background: #16a34a !important; /* green-600 */
    color: #ffffff !important;
    border-color: transparent !important;
  }
  :global(.calendar-override .flatpickr-day.selected:hover),
  :global(.calendar-override .flatpickr-day.startRange:hover),
  :global(.calendar-override .flatpickr-day.endRange:hover) {
    background: #15803d !important; /* green-700 */
  }
  :global(.calendar-override .flatpickr-day.today) {
    box-shadow: inset 0 -2px 0 #16a34a;
  }
  :global(.calendar-override .flatpickr-day.disabled),
  :global(.calendar-override .flatpickr-day.prevMonthDay),
  :global(.calendar-override .flatpickr-day.nextMonthDay) {
    color: #9ca3af;
  }
  :global(.dark .calendar-override .flatpickr-day.disabled),
  :global(.dark .calendar-override .flatpickr-day.prevMonthDay),
  :global(.dark .calendar-override .flatpickr-day.nextMonthDay) {
    color: #6b7280;
  }
  :global(.calendar-override .flatpickr-prev-month svg),
  :global(.calendar-override .flatpickr-next-month svg) {
    fill: #6b7280;
  }
  :global(.calendar-override .flatpickr-prev-month:hover svg),
  :global(.calendar-override .flatpickr-next-month:hover svg) {
    fill: #111827;
  }
  :global(.dark .calendar-override .flatpickr-prev-month svg),
  :global(.dark .calendar-override .flatpickr-next-month svg) {
    fill: #9ca3af;
  }
  :global(.dark .calendar-override .flatpickr-prev-month:hover svg),
  :global(.dark .calendar-override .flatpickr-next-month:hover svg) {
    fill: #e5e7eb;
  }
  :global(.calendar-override .flatpickr-calendar) {
    width: 100% !important;
  }
  :global(.calendar-override .flatpickr-months) {
    padding: 0.25rem 0.25rem;
  }
  :global(.calendar-override .flatpickr-current-month) {
    font-size: 0.875rem; /* text-sm */
  }
  :global(.calendar-override .flatpickr-weekday) {
    font-size: 0.75rem; /* text-xs */
  }
  :global(.calendar-override .dayContainer) {
    padding: 0.25rem !important;
  }
  :global(.calendar-override .flatpickr-day) {
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    max-width: 1.75rem;
    font-size: 0.875rem; /* text-sm */
    margin: 0.125rem;
  }
  :global(.calendar-override .flatpickr-prev-month),
  :global(.calendar-override .flatpickr-next-month) {
    top: 0.35rem;
  }
  :global(.calendar-override .flatpickr-current-month .numInputWrapper input) {
    max-width: 3.5rem;
  }
  /* Ensure smaller footprint and dark-friendly backgrounds */
  :global(.calendar-override .flatpickr-calendar) {
    max-width: none !important;
    min-width: 0 !important;
  }
  :global(.calendar-override .flatpickr-innerContainer),
  :global(.calendar-override .flatpickr-months),
  :global(.calendar-override .flatpickr-weekdays),
  :global(.calendar-override .flatpickr-days) {
    background: transparent !important;
  }
  :global(.calendar-override .flatpickr-days),
  :global(.calendar-override .dayContainer) {
    width: auto !important;
    min-width: 0 !important;
  }
  :global(.calendar-override .dayContainer) {
    padding: 0.125rem !important;
  }
  :global(.calendar-override .flatpickr-day) {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    max-width: 1.5rem;
    font-size: 0.875rem; /* text-sm */
    margin: 0.1rem;
  }
  :global(.calendar-override .flatpickr-prev-month svg),
  :global(.calendar-override .flatpickr-next-month svg) {
    width: 0.875rem;
    height: 0.875rem;
  }
  /* Hide top navigation arrows */
  :global(.calendar-override .flatpickr-prev-month),
  :global(.calendar-override .flatpickr-next-month) {
    display: none !important;
  }
</style>