@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
@include('admin.informes._styles')

<div class="inf-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Informe de ventas por</span> Plus</h4>
      <p class="hint">Consulte el detalle de un PLU específico para el mes y año seleccionados.</p>
    </div>
  </div>

  <div class="inf-filters">
    <div class="row g-3 align-items-end">
      <div class="col-6 col-md-3 col-xl-2">
        <label class="form-label" for="mes">Mes</label>
        <select name="mes" id="mes" class="form-select">
          <option value="">Seleccione</option>
          <option value="1">Enero</option>
          <option value="2">Febrero</option>
          <option value="3">Marzo</option>
          <option value="4">Abril</option>
          <option value="5">Mayo</option>
          <option value="6">Junio</option>
          <option value="7">Julio</option>
          <option value="8">Agosto</option>
          <option value="9">Septiembre</option>
          <option value="10">Octubre</option>
          <option value="11">Noviembre</option>
          <option value="12">Diciembre</option>
        </select>
      </div>
      <div class="col-6 col-md-3 col-xl-2">
        <label class="form-label" for="anio">Año</label>
        <select name="anio" id="anio" class="form-select">
          <option value="">Seleccione</option>
          @php $anio_actual = (int) date('Y'); @endphp
          @for ($anio = 2010; $anio <= $anio_actual; $anio++)
            <option value="{{ $anio }}" @if($anio === $anio_actual) selected @endif>{{ $anio }}</option>
          @endfor
        </select>
      </div>
      <div class="col-md-6 col-xl-5">
        <label class="form-label" for="plus">Plus / PLU</label>
        <select name="plus" id="plus" class="form-select contacts"></select>
      </div>
      <div class="col-12 col-xl-3">
        <div class="inf-actions">
          <button type="button" class="btn btn-primary" onClick="generar();">
            <i class="bx bx-file"></i> Generar PDF
          </button>
          <button type="button" class="btn btn-outline-secondary" onClick="generar_excel();">
            <i class="bx bx-spreadsheet"></i> Excel
          </button>
        </div>
      </div>
    </div>
  </div>

  <div id="bloque_vacio" class="inf-empty">
    <i class="bx bx-purchase-tag"></i>
    Elija mes, año y un PLU, luego pulse <strong>Generar PDF</strong>.
  </div>

  <div class="inf-result d-none" id="modal-pdf">
    <div class="inf-result-head">
      <h6>Vista del informe</h6>
    </div>
    <div class="inf-result-body">
      <iframe id="pdf-viewer" width="100%" height="800px"></iframe>
    </div>
  </div>
</div>
@endsection
@section('scripts')
<script>
  $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

  var plus = {!! $plus !!};
  const formato = { minimumFractionDigits: 0, maximumFractionDigits: 3 };

  (function () {
    const m = String(new Date().getMonth() + 1);
    if (!$('#mes').val()) $('#mes').val(m);
  })();

  $("#plus").selectize({
    persist: false,
    placeholder: 'Buscar PLU…',
    maxItems: 1,
    valueField: "id",
    labelField: "nombre",
    searchField: ["plus","nombre","p_carta"],
    options: plus,
    render: {
      item: function (item, escape){
        return "<div>" + (item.nombre ? '<span class="name">' + escape(item.plus) + ' - ' + escape(item.nombre) + '</span>' : "") + "</div>";
      },
      option: function (item, escape) {
        return (
          "<div>" +
            '<span class="label">' + escape(item.plus) +"</span>" +
            (item.nombre ? '<span class="caption">' + escape(item.nombre) + '</span>' : "") +
            (item.p_carta ? '<span class="caption">$' + escape(parseFloat(item.p_carta).toLocaleString("es-ES", formato).replace(',', '.')) + '</span>' : "") +
          "</div>"
        );
      },
    }
  });

  function periodoOk() {
    const plusVal = $('#plus')[0].selectize.getValue();
    const mes = $('#mes').val();
    const anio = $('#anio').val();
    if (!plusVal) {
      Swal.fire({ position: 'top-end', icon: 'error', title: '¡ Debe ingresar un Plus !', showConfirmButton: false, timer: 1500 });
      return null;
    }
    if (!mes) {
      Swal.fire({ position: 'top-end', icon: 'error', title: '¡ Debe ingresar un mes !', showConfirmButton: false, timer: 1500 });
      return null;
    }
    if (!anio) {
      Swal.fire({ position: 'top-end', icon: 'error', title: '¡ Debe ingresar un año !', showConfirmButton: false, timer: 1500 });
      return null;
    }
    return { plus: plusVal, mes, anio };
  }

  function generar() {
    const p = periodoOk();
    if (!p) { $('#modal-pdf').addClass('d-none'); $('#bloque_vacio').removeClass('d-none'); return; }
    $('#pdf-viewer').prop('src', `{{ URL::to('/') }}/informe_venta_plus/${p.plus}/${p.mes}/${p.anio}`);
    $('#bloque_vacio').addClass('d-none');
    $('#modal-pdf').removeClass('d-none');
  }

  function generar_excel() {
    const p = periodoOk();
    if (!p) return;
    window.location.href = `{{ URL::to('/') }}/informe_venta_plus_excel/${p.plus}/${p.mes}/${p.anio}`;
  }
</script>
@endsection