@extends('layouts.app')

@section('content')
<style>
  :root {
    --pp-bg: #f6f8fb;
    --pp-card: #ffffff;
    --pp-text: #0f172a;
    --pp-muted: #64748b;
    --pp-border: #e2e8f0;
  }

  body {
    background: var(--pp-bg);
  }

  .pp-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 14px;
  }

  .pp-card {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .06);
    overflow: hidden;
  }

  .pp-header {
    padding: 18px 20px 12px;
  }

  .pp-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--pp-text);
    margin: 0;
    letter-spacing: .2px;
  }

  .pp-subtitle {
    font-size: 13px;
    color: var(--pp-muted);
    margin-top: 4px;
  }

  .pp-filters {
    padding: 14px 20px 16px;
    border-top: 1px solid var(--pp-border);
    border-bottom: 1px solid var(--pp-border);
    background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(180deg, rgba(226, 232, 240, .8), rgba(226, 232, 240, 0)) border-box;
  }

  /* Melhorar inputs */
  .pp-filters .form-label {
    font-size: 12px;
    color: var(--pp-muted);
    font-weight: 700;
    margin-bottom: 6px;
  }

  .pp-filters .form-control,
  .pp-filters .form-select {
    border-radius: 12px;
    border-color: var(--pp-border);
    padding: 10px 12px;
  }

  .pp-filters .form-control:focus,
  .pp-filters .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .12);
    border-color: rgba(59, 130, 246, .35);
  }

  .pp-filters .btn {
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 700;
  }

  /* pills (chips) */
  .pp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--pp-border);
    background: #fff;
    color: var(--pp-muted);
    font-size: 12px;
    font-weight: 800;
  }

  .pp-open {
    background: rgba(234, 179, 8, .14);
    border-color: rgba(234, 179, 8, .25);
    color: #7a5a00;
  }

  .pp-closed {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .22);
    color: #0f6a2e;
  }

  .pp-table-wrap {
    padding: 14px 20px 18px;
  }

  /* Tabela com melhor legibilidade */
  .pp-table-wrap table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .pp-table-wrap .table thead th {
    font-size: 12px;
    color: var(--pp-muted);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .6px;
    background: #f8fafc !important;
    border-bottom: 1px solid var(--pp-border) !important;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .pp-table-wrap .table tbody td {
    border-top: 1px solid var(--pp-border);
    padding-top: 14px;
    padding-bottom: 14px;
    vertical-align: middle;
  }

  .pp-table-wrap .table tbody tr:hover {
    background: #f8fafc;
  }

  .pp-time {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    color: var(--pp-text);
    white-space: nowrap;
  }

  /* melhorar coluna utilizador */
  .pp-user-name {
    font-weight: 800;
    color: var(--pp-text);
  }

  .pp-user-email {
    font-size: 12px;
    color: var(--pp-muted);
  }

  /* Estado como chip alinhado */
  .pp-state {
    display: inline-flex;
  }

  /* Ações no topo */
  .pp-top-actions .btn {
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
  }

  /* Responsivo: filtros mais “grid” */
  @media (max-width: 768px) {
    .pp-shell {
      padding: 14px 10px;
    }

    .pp-header,
    .pp-filters,
    .pp-table-wrap {
      padding-left: 14px;
      padding-right: 14px;
    }
  }
</style>


<div class="pp-shell">

  @if ($errors->any())
  <div class="alert alert-danger">
    <strong>Ops!</strong>
    <ul class="mb-0 mt-2">
      @foreach ($errors->all() as $e) <li>{{ $e }}</li> @endforeach
    </ul>
  </div>
  @endif

  @if (session('status'))
  <div class="alert alert-success">{{ session('status') }}</div>
  @endif

  <div class="pp-card">
    <div class="pp-header d-flex align-items-start justify-content-between gap-2">
      <div>
        <h1 class="pp-title">Admin — Registos de Ponto</h1>
        <div class="pp-subtitle">Ver e filtrar todos os registos de todos os utilizadores</div>
      </div>

      <a href="{{ route('ponto.index') }}" class="btn btn-sm btn-outline-secondary rounded-pill px-3">
        ← Voltar
      </a>
    </div>

    {{-- Filtros --}}
    <div class="pp-filters">
      <form method="GET" action="{{ route('admin.entries') }}" class="row g-2 align-items-end">

        <div class="col-12 col-md-4">
          <label class="form-label mb-1">Utilizador</label>
          <select name="user_id" class="form-select">
            <option value="">Todos</option>
            @foreach($users as $u)
            <option value="{{ $u->id }}" @selected(request('user_id')==$u->id)>
              {{ $u->name }} ({{ $u->email }})
            </option>
            @endforeach
          </select>

          <label class="form-label mb-1">De</label>
          <input type="date" name="from" value="{{ request('from') }}" class="form-control">

          <label class="form-label mb-1">Até</label>
          <input type="date" name="to" value="{{ request('to') }}" class="form-control">
        </div>

        <div class="col-12 col-md-2">
          <div class="form-check mb-2">
            <input class="form-check-input" type="checkbox" name="open_only" value="1" id="openOnly"
              @checked(request()->boolean('open_only'))>
            <label class="form-check-label" for="openOnly">Só abertos</label>
          </div>
          <button class="btn btn-primary w-100" type="submit">Filtrar</button>

          <a class="btn btn-outline-secondary btn-sm" href="{{ route('admin.entries') }}">Limpar</a>
          <span class="pp-pill">Total: {{ $entries->total() }}</span>
          @if(request('user_id')) <span class="pp-pill">User: #{{ request('user_id') }}</span> @endif
          @if(request('from')) <span class="pp-pill">De: {{ request('from') }}</span> @endif
          @if(request('to')) <span class="pp-pill">Até: {{ request('to') }}</span> @endif
          @if(request()->boolean('open_only')) <span class="pp-pill pp-open">Só abertos</span> @endif
        </div>

      </form>

      <hr class="my-3">

<div class="d-flex flex-wrap align-items-end gap-2">
  <div>
    <label class="form-label mb-1">Mês</label>
    <input
      type="month"
      class="form-control"
      id="exportMonth"
      value="{{ request('month', now()->format('Y-m')) }}"
    >
  </div>

  <div class="ms-auto">
    <a
      id="btnExportPdf"
      class="btn btn-success"
      href="{{ route('admin.export_hours_pdf', ['month' => request('month', now()->format('Y-m')), 'hours_per_day' => request('hours_per_day', 8)]) }}"
    >
      Exportar PDF (Horas/Dias)
    </a>
  </div>
</div>


    </div>

    {{-- Tabela --}}
    <div class="pp-table-wrap">
      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th>Utilizador</th>
              <th>Entrada</th>
              <th>Saída</th>
              <th class="text-end">Total</th>
              <th>Estado</th>
            </tr>
          </thead>

          <tbody>
            @forelse($entries as $e)
            @php
            $in = \Carbon\Carbon::parse($e->clock_in_at);
            $out = $e->clock_out_at ? \Carbon\Carbon::parse($e->clock_out_at) : null;

            $mins = $out ? $in->diffInMinutes($out) : null;
            $hh = $mins !== null ? floor($mins/60) : null;
            $mm = $mins !== null ? $mins % 60 : null;
            @endphp

            <tr>
              <td>
                <div class="pp-user-name">{{ $e->user->name ?? '—' }}</div>
                <div class="pp-user-email">{{ $e->user->email ?? '' }}</div>
              </td>

              <td class="pp-time">{{ $in->format('d-m-Y H:i') }}</td>

              <td class="pp-time">
                @if($out)
                {{ $out->format('d-m-Y H:i') }}
                @else
                —
                @endif
              </td>

              <td class="text-end pp-time">
                @if($mins !== null)
                {{ sprintf('%02dh%02d', $hh, $mm) }}
                @else
                —
                @endif
              </td>
              <td>
                @if($out)
                <span class="pp-pill pp-closed pp-state">Fechado</span>
                @else
                <span class="pp-pill pp-open pp-state">Aberto</span>
                @endif
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="5" class="text-center text-muted py-4">Sem registos.</td>
            </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="mt-2">
        {{ $entries->links() }}
      </div>
    </div>

  </div>
</div>
<script>
(function(){
  const monthEl = document.getElementById('exportMonth');
  const hpdEl   = document.getElementById('exportHoursPerDay');
  const btn     = document.getElementById('btnExportPdf');

  function updateLink(){
    const month = monthEl?.value || '';
    const hpd   = hpdEl?.value || 8;

    const base = @json(route('admin.export_hours_pdf'));
    const url = new URL(base, window.location.origin);
    url.searchParams.set('month', month);
    url.searchParams.set('hours_per_day', hpd);

    btn.href = url.toString();
  }

  monthEl?.addEventListener('change', updateLink);
  hpdEl?.addEventListener('input', updateLink);
  updateLink();
})();
</script>

@endsection