@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</span> Mensual</h4>
      <p class="hint">Seleccione mes y año para ver el resumen de ventas del período en PDF o Excel.</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-12 col-md-6 col-xl-8">
        <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-bar-chart-alt-2"></i>
    Elija el período y pulse <strong>Generar PDF</strong> para ver el informe.
  </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') } });

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

  function periodoOk() {
    const mes = $('#mes').val();
    const anio = $('#anio').val();
    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 { 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_mensual/${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_mensual_excel/${p.mes}/${p.anio}`;
  }
</script>
@endsection