@extends('layouts.enterprise')

@section('title', 'Claves SAT')

@section('content')
  @php
    $indexRoute = route('admin.settings.sat_catalog_items.index');
    $storeRoute = route('admin.settings.sat_catalog_items.store');
    $hasActiveFilters = (($filters['q'] ?? '') !== '') || (($filters['active'] ?? 'all') !== 'all');
  @endphp

  <div class="card">
    <h1 class="page-title">Claves SAT</h1>
    <p class="subtle">Administra el catalogo que se usa en cada articulo de la vista previa. La opcion marcada como predeterminada se cargara automaticamente en nuevas lineas.</p>

    @if(session('ok'))
      <div class="notice">{{ session('ok') }}</div>
    @endif
    @if($errors->any())
      <div class="error">
        <ul>
          @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    <sl-details class="filters-collapse" @if($hasActiveFilters) open @endif>
      <div slot="summary" class="filters-summary">
        <img src="{{ asset('build/assets/logo.png') }}" alt="" class="filter-favicon">
        <span>Filtros</span>
        @if($hasActiveFilters)
          <span class="badge">Activos</span>
        @endif
      </div>
      <form method="GET" action="{{ $indexRoute }}" class="dashboard-filters">
        <div class="filters-grid filters-grid--two">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Nombre, clave SAT, unidad o descripcion">
          </div>
          <div class="field">
            <label>Estatus</label>
            <select name="active">
              <option value="all" @selected(($filters['active'] ?? 'all') === 'all')>Todos</option>
              <option value="1" @selected(($filters['active'] ?? 'all') === '1')>Activos</option>
              <option value="0" @selected(($filters['active'] ?? 'all') === '0')>Inactivos</option>
            </select>
          </div>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Filtrar</button>
          <a class="btn btn-secondary" href="{{ $indexRoute }}">Limpiar</a>
          <span class="badge">Resultados: {{ $items->total() }}</span>
        </div>
      </form>
    </sl-details>

    <div class="card card-dashed" style="margin-bottom:14px;">
      <h2 class="section-title" style="margin-top:0;">Alta de clave SAT</h2>
      <form method="POST" action="{{ $storeRoute }}">
        @csrf
        <div class="filters-grid filters-grid--six">
          <div class="field">
            <label>Nombre corto</label>
            <input type="text" name="name" value="{{ old('name') }}" placeholder="Promocionales" required>
          </div>
          <div class="field">
            <label>Clave SAT</label>
            <input type="text" name="sat_code" value="{{ old('sat_code', '80141605') }}" placeholder="80141605" required>
          </div>
          <div class="field">
            <label>No. identificacion</label>
            <input type="text" name="item_identifier" value="{{ old('item_identifier') }}" placeholder="111">
          </div>
          <div class="field">
            <label>Clave unidad</label>
            <input type="text" name="unit_code" value="{{ old('unit_code', 'H87') }}" placeholder="H87" required>
          </div>
          <div class="field">
            <label>Unidad</label>
            <input type="text" name="unit_name" value="{{ old('unit_name', 'Pieza') }}" placeholder="Pieza" required>
          </div>
          <div class="field">
            <label>Orden</label>
            <input type="number" name="sort_order" min="0" step="1" value="{{ old('sort_order', 0) }}">
          </div>
        </div>
        <div class="field">
          <label>Descripcion</label>
          <input type="text" name="description" value="{{ old('description', 'Mercancia promocional') }}" placeholder="Descripcion visible del concepto SAT">
        </div>
        <div class="filters-actions">
          <sl-checkbox name="is_default" value="1" @checked(old('is_default', true))>Predeterminado</sl-checkbox>
          <sl-checkbox name="is_active" value="1" @checked(old('is_active', true))>Activo</sl-checkbox>
        </div>
        <div class="filters-actions" style="margin-top:10px;">
          <button class="btn" type="submit">Guardar clave SAT</button>
          <span class="badge">Tip: deja una sola opcion como predeterminada para nuevas vistas previas.</span>
        </div>
      </form>
    </div>

    <div class="movements-table-wrap">
      <table class="movements-table movements-table--wide">
        <thead>
          <tr>
            <th>ID</th>
            <th>Nombre corto</th>
            <th>Clave SAT</th>
            <th>No. identificacion</th>
            <th>Clave unidad</th>
            <th>Unidad</th>
            <th>Descripcion</th>
            <th>Orden</th>
            <th>Default</th>
            <th>Estatus</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($items as $item)
            <tr>
              <td>{{ $item->id }}</td>
              <td>{{ $item->name }}</td>
              <td>{{ $item->sat_code }}</td>
              <td>{{ $item->item_identifier ?: '-' }}</td>
              <td>{{ $item->unit_code }}</td>
              <td>{{ $item->unit_name }}</td>
              <td>{{ $item->description ?: '-' }}</td>
              <td>{{ (int) $item->sort_order }}</td>
              <td>
                <span class="badge {{ $item->is_default ? 'badge-income' : '' }}">
                  {{ $item->is_default ? 'Si' : 'No' }}
                </span>
              </td>
              <td>
                <span class="badge {{ $item->is_active ? 'badge-income' : 'badge-expense' }}">
                  {{ $item->is_active ? 'Activo' : 'Inactivo' }}
                </span>
              </td>
              <td style="min-width:420px;">
                <details>
                  <summary class="badge" style="cursor:pointer;">Editar</summary>
                  <form method="POST" action="{{ route('admin.settings.sat_catalog_items.update', $item) }}" style="margin-top:8px;">
                    @csrf
                    @method('PATCH')
                    <div class="filters-grid filters-grid--three">
                      <div class="field">
                        <label>Nombre corto</label>
                        <input type="text" name="name" value="{{ old('sat_item_edit_id') == $item->id ? old('name', $item->name) : $item->name }}" required>
                      </div>
                      <div class="field">
                        <label>Clave SAT</label>
                        <input type="text" name="sat_code" value="{{ old('sat_item_edit_id') == $item->id ? old('sat_code', $item->sat_code) : $item->sat_code }}" required>
                      </div>
                      <div class="field">
                        <label>No. identificacion</label>
                        <input type="text" name="item_identifier" value="{{ old('sat_item_edit_id') == $item->id ? old('item_identifier', $item->item_identifier) : $item->item_identifier }}">
                      </div>
                      <div class="field">
                        <label>Clave unidad</label>
                        <input type="text" name="unit_code" value="{{ old('sat_item_edit_id') == $item->id ? old('unit_code', $item->unit_code) : $item->unit_code }}" required>
                      </div>
                      <div class="field">
                        <label>Unidad</label>
                        <input type="text" name="unit_name" value="{{ old('sat_item_edit_id') == $item->id ? old('unit_name', $item->unit_name) : $item->unit_name }}" required>
                      </div>
                      <div class="field">
                        <label>Orden</label>
                        <input type="number" name="sort_order" min="0" step="1" value="{{ old('sat_item_edit_id') == $item->id ? old('sort_order', $item->sort_order) : $item->sort_order }}">
                      </div>
                    </div>
                    <div class="field">
                      <label>Descripcion</label>
                      <input type="text" name="description" value="{{ old('sat_item_edit_id') == $item->id ? old('description', $item->description) : $item->description }}">
                    </div>
                    <div class="filters-actions">
                      <input type="hidden" name="sat_item_edit_id" value="{{ $item->id }}">
                      <sl-checkbox name="is_default" value="1" @checked(old('sat_item_edit_id') == $item->id ? old('is_default', $item->is_default) : $item->is_default)>Predeterminado</sl-checkbox>
                      <sl-checkbox name="is_active" value="1" @checked(old('sat_item_edit_id') == $item->id ? old('is_active', $item->is_active) : $item->is_active)>Activo</sl-checkbox>
                    </div>
                    <div class="filters-actions" style="margin-top:10px;">
                      <button class="btn btn-secondary" type="submit">Actualizar</button>
                    </div>
                  </form>
                </details>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="11">Aun no hay claves SAT registradas.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div style="margin-top:16px;">
      {{ $items->onEachSide(1)->links('vendor.pagination.enterprise') }}
    </div>
  </div>
@endsection

@push('styles')
  <style>
    .filters-collapse {
      margin-bottom: 14px;
    }
    .filters-collapse::part(base) {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #f8fafc;
    }
    .filters-collapse::part(summary) {
      padding: 12px 14px;
      font-weight: 600;
      color: #0b1220;
    }
    .filters-collapse::part(content) {
      padding: 0 14px 14px;
    }
    .filters-summary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .filter-favicon {
      width: 18px;
      height: 18px;
      object-fit: contain;
      border-radius: 4px;
      background: #fff;
      border: 1px solid var(--border);
      padding: 2px;
    }
    .filters-grid {
      display: grid;
      gap: 10px;
      margin-bottom: 10px;
    }
    .filters-grid--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .filters-grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .filters-grid--six {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .movements-table {
      min-width: 1380px;
      margin: 0;
      border: 0;
    }
    .card-dashed {
      border: 1px dashed var(--border);
      box-shadow: none;
    }
    @media (max-width: 900px) {
      .filters-grid--two,
      .filters-grid--three,
      .filters-grid--six {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush