@extends('layouts.enterprise')

@section('title', 'Oficinas')

@section('content')
  <div class="card">
    <h1 class="page-title">Oficinas</h1>
    <p class="subtle">ABM de oficinas y carga masiva desde archivo de oficinas vigentes.</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

    @php
      $indexRoute = request()->routeIs('accountant.*') ? route('accountant.incomes.offices.index') : route('admin.incomes.offices.index');
      $storeRoute = request()->routeIs('accountant.*') ? route('accountant.incomes.offices.store') : route('admin.incomes.offices.store');
      $importRoute = request()->routeIs('accountant.*') ? route('accountant.incomes.offices.import') : route('admin.incomes.offices.import');
      $hasActiveFilters = (($filters['q'] ?? '') !== '') || (($filters['active'] ?? 'all') !== 'all') || (($filters['status'] ?? '') !== '') || (($filters['client_id'] ?? null) !== null);
      $importStats = session('office_import_stats');
    @endphp

    @if(is_array($importStats))
      <div class="grid grid-2" style="margin-bottom: 14px;">
        <div class="field">
          <label>Archivo importado</label>
          <div class="badge">{{ $importStats['file'] ?? '-' }}</div>
        </div>
        <div class="field">
          <label>Resultado</label>
          <div style="display:flex; gap:8px; flex-wrap:wrap;">
            <span class="badge">Insertados: {{ $importStats['inserted'] ?? 0 }}</span>
            <span class="badge">Actualizados: {{ $importStats['updated'] ?? 0 }}</span>
            <span class="badge">Omitidos: {{ $importStats['skipped'] ?? 0 }}</span>
          </div>
        </div>
      </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--four">
          <div class="field">
            <label>Buscar</label>
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Código, oficina o localización">
          </div>
          <div class="field">
            <label>Cliente</label>
            <select name="client_id">
              <option value="">Todos</option>
              @foreach(($clients ?? collect()) as $client)
                <option value="{{ $client->id }}" @selected((int) ($filters['client_id'] ?? 0) === (int) $client->id)>
                  {{ $client->name }}{{ $client->rfc ? ' ('.$client->rfc.')' : '' }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>Activo</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 class="field">
            <label>Estatus oficina</label>
            <input type="text" name="status" value="{{ $filters['status'] ?? '' }}" placeholder="VIGENTE, BAJA, etc.">
          </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: {{ $offices->total() }}</span>
        </div>
      </form>
    </sl-details>

    <div class="card" style="margin-bottom: 14px; border:1px dashed var(--border); box-shadow:none;">
      <h2 class="section-title" style="margin-top:0;">Carga masiva</h2>
      <div class="grid grid-2">
        <div class="field">
          <label>Formato esperado</label>
          <small>Columnas requeridas: <strong>ESTATUS OFICINA</strong>, <strong>OFICINA</strong>, <strong>LOCALIZACION</strong>.</small>
        </div>
        <div class="field">
          <label>Notas</label>
          <small>Si una oficina ya existe (por código o nombre), se actualiza.</small>
        </div>
      </div>
      <form method="POST" action="{{ $importRoute }}" enctype="multipart/form-data" style="margin-top: 10px;">
        @csrf
        <div class="filters-grid filters-grid--three">
          <div class="field">
            <label>Cliente</label>
            <select name="client_id" required>
              <option value="">Selecciona cliente</option>
              @foreach(($clients ?? collect()) as $client)
                <option value="{{ $client->id }}" @selected((int) old('client_id') === (int) $client->id)>
                  {{ $client->name }}{{ $client->rfc ? ' ('.$client->rfc.')' : '' }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>Archivo (XLSX o CSV)</label>
            <input type="file" name="office_file" accept=".xlsx,.csv,text/csv" required>
          </div>
          <div class="field" style="display:flex; align-items:flex-end;">
            <button class="btn" type="submit">Importar oficinas</button>
          </div>
        </div>
      </form>
    </div>

    <div class="card" style="margin-bottom: 14px; border:1px dashed var(--border); box-shadow:none;">
      <h2 class="section-title" style="margin-top:0;">Alta manual</h2>
      <form method="POST" action="{{ $storeRoute }}">
        @csrf
        <div class="filters-grid filters-grid--five">
          <div class="field">
            <label>Cliente</label>
            <select name="client_id" required>
              <option value="">Selecciona cliente</option>
              @foreach(($clients ?? collect()) as $client)
                <option value="{{ $client->id }}" @selected((int) old('client_id') === (int) $client->id)>
                  {{ $client->name }}{{ $client->rfc ? ' ('.$client->rfc.')' : '' }}
                </option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>Código oficina</label>
            <input type="text" name="office_code" placeholder="MX0064">
          </div>
          <div class="field">
            <label>Oficina</label>
            <input type="text" name="name" required placeholder="MX0064 | CV MORONES | CSEGM">
          </div>
          <div class="field">
            <label>Estatus oficina</label>
            <input type="text" name="status" required value="VIGENTE">
          </div>
          <div class="field">
            <label>Activo</label>
            <select name="is_active">
              <option value="1" selected>Sí</option>
              <option value="0">No</option>
            </select>
          </div>
        </div>
        <div class="field">
          <label>Localización</label>
          <textarea name="location" rows="2" placeholder="Dirección y datos de localización"></textarea>
        </div>
        <div class="filters-actions">
          <button class="btn" type="submit">Guardar oficina</button>
        </div>
      </form>
    </div>

    <div class="movements-table-wrap">
      <table class="movements-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Cliente</th>
            <th>Código</th>
            <th>Oficina</th>
            <th>Estatus</th>
            <th>Activo</th>
            <th>Localización</th>
            <th>Archivo</th>
            <th>Última carga</th>
            <th>Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($offices as $office)
            @php
              $updateRoute = request()->routeIs('accountant.*')
                ? route('accountant.incomes.offices.update', $office)
                : route('admin.incomes.offices.update', $office);
            @endphp
            <tr>
              <td>{{ $office->id }}</td>
              <td>{{ $office->client?->name ?: '-' }}</td>
              <td>{{ $office->office_code ?: '-' }}</td>
              <td>{{ $office->name }}</td>
              <td>{{ $office->status }}</td>
              <td>
                <span class="badge {{ $office->is_active ? 'badge-income' : 'badge-expense' }}">
                  {{ $office->is_active ? 'Activo' : 'Inactivo' }}
                </span>
              </td>
              <td>{{ $office->location ?: '-' }}</td>
              <td>{{ $office->source_file_name ?: '-' }}</td>
              <td>{{ $office->last_imported_at?->format('Y-m-d H:i') ?: '-' }}</td>
              <td style="min-width: 320px;">
                <details>
                  <summary class="badge" style="cursor:pointer;">Editar</summary>
                  <form method="POST" action="{{ $updateRoute }}" style="margin-top:8px;">
                    @csrf
                    @method('PATCH')
                    <div class="filters-grid filters-grid--two">
                      <div class="field">
                        <label>Cliente</label>
                        <select name="client_id" required>
                          <option value="">Selecciona cliente</option>
                          @foreach(($clients ?? collect()) as $client)
                            <option value="{{ $client->id }}" @selected((int) $office->client_id === (int) $client->id)>
                              {{ $client->name }}{{ $client->rfc ? ' ('.$client->rfc.')' : '' }}
                            </option>
                          @endforeach
                        </select>
                      </div>
                      <div class="field">
                        <label>Código</label>
                        <input type="text" name="office_code" value="{{ $office->office_code }}">
                      </div>
                      <div class="field">
                        <label>Oficina</label>
                        <input type="text" name="name" value="{{ $office->name }}" required>
                      </div>
                      <div class="field">
                        <label>Estatus oficina</label>
                        <input type="text" name="status" value="{{ $office->status }}" required>
                      </div>
                      <div class="field">
                        <label>Activo</label>
                        <select name="is_active">
                          <option value="1" @selected($office->is_active)>Sí</option>
                          <option value="0" @selected(!$office->is_active)>No</option>
                        </select>
                      </div>
                    </div>
                    <div class="field">
                      <label>Localización</label>
                      <textarea name="location" rows="2">{{ $office->location }}</textarea>
                    </div>
                    <div class="filters-actions">
                      <button class="btn btn-secondary" type="submit">Actualizar</button>
                    </div>
                  </form>
                </details>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="10">No hay oficinas registradas.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div style="margin-top: 16px;">
      {{ $offices->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;
    }
    .dashboard-filters {
      margin: 0;
      padding: 0;
    }
    .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--four {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .filters-grid--five {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .filters-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .movements-table-wrap {
      width: 100%;
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }
    .movements-table {
      min-width: 1400px;
      border: 0;
      margin: 0;
    }
    .badge-income {
      background: #dcfce7;
      color: #166534;
      border: 1px solid #86efac;
    }
    .badge-expense {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }
    @media (max-width: 900px) {
      .filters-grid--two,
      .filters-grid--three,
      .filters-grid--four,
      .filters-grid--five {
        grid-template-columns: 1fr;
      }
    }
  </style>
@endpush