@extends('layouts/layoutMaster')

@php
  use Carbon\Carbon;

  $pageConfigs = [
    'myLayout' => 'blank',
    'navbarType' => 'hidden',
    'menuFixed' => false,
    'contentLayout' => 'compact',
  ];

  $locale = app()->getLocale();
  $summary = $summary ?? ['accrued' => 0, 'paid' => 0, 'pending' => 0, 'currency' => 'EUR'];
  $entries = ($entries ?? collect())->map(function ($entry) use ($locale, $summary) {
      $createdAt = $entry->entry_date?->copy()->locale($locale) ?? $entry->created_at?->copy()->locale($locale);
      $billingPeriod = optional(optional($entry->source)->billingPeriod);
      $periodLabel = $billingPeriod ? $billingPeriod->periodLabel() : null;

      return [
          'id' => $entry->id,
          'type' => $entry->entry_type,
          'is_payment' => $entry->entry_type === 'tip_payment',
          'amount' => (float) $entry->amount,
          'amount_formatted' => number_format((float) $entry->amount, 2, ',', '.'),
          'currency' => $entry->currency ?? $summary['currency'],
          'description' => $entry->description ?: ($entry->entry_type === 'tip_payment'
              ? __('Propinas abonadas en nómina')
              : __('Propinas registradas')),
          'date_label' => $createdAt ? $createdAt->isoFormat('D MMM YYYY · HH:mm') : '',
          'period_label' => $periodLabel,
      ];
  });

  $periods = ($periods ?? collect())->map(function ($period) use ($summary) {
      return [
          'billing_period_id' => $period['billing_period_id'],
          'label' => $period['label'],
          'tips_total' => number_format((float) $period['tips_total'], 2, ',', '.'),
          'paid' => number_format((float) $period['paid'], 2, ',', '.'),
          'pending' => number_format((float) $period['pending'], 2, ',', '.'),
          'currency' => $period['currency'] ?? $summary['currency'],
      ];
  });
@endphp

@section('title')
  {{ __('Propinas') }}
@endsection

@section('page-style')
<style>
  :root {
    --rider-accent: #e63946;
    --rider-muted: #667085;
    --card-radius: 22px;
  }

  body {
    background: #f8f9fb;
    color: #1f2933;
  }

  .rider-tips {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
  }

  .rider-tips__header {
    padding: clamp(1.8rem, 5vw, 3rem) clamp(1.4rem, 5vw, 3rem) clamp(2.4rem, 5vw, 3.2rem);
    background:
      radial-gradient(circle at top right, rgba(230, 57, 70, 0.16), rgba(230, 57, 70, 0)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.75));
    border-bottom: 1px solid rgba(230, 57, 70, 0.12);
    display: grid;
    gap: clamp(1.4rem, 4vw, 2.4rem);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: end;
  }

  .tips-hero__intro {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .tips-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(230, 57, 70, 0.12);
    color: var(--rider-accent);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 0.72rem;
    width: fit-content;
  }

  .tips-hero__title {
    font-size: clamp(1.9rem, 5vw, 2.7rem);
    font-weight: 700;
    margin: 0;
  }

  .tips-hero__subtitle {
    margin: 0;
    color: var(--rider-muted);
    max-width: 420px;
  }

  .tips-hero__cta {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
  }

  .tips-summary {
    display: grid;
    gap: clamp(1.4rem, 4vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: clamp(1.8rem, 5vw, 2.8rem) clamp(1.4rem, 5vw, 3rem) clamp(3rem, 6vw, 4rem);
  }

  .tips-summary__card {
    border-radius: var(--card-radius);
    border: 1px solid rgba(230, 57, 70, 0.14);
    background: #fff;
    box-shadow: 0 16px 32px rgba(230, 57, 70, 0.08);
    padding: clamp(1.4rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
  }

  .tips-summary__card h3 {
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--rider-muted);
  }

  .tips-summary__value {
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 700;
    margin: 0;
  }

  .tips-summary__meta {
    margin: 0;
    color: var(--rider-muted);
    font-size: 0.9rem;
  }

  .tips-content {
    padding: 0 clamp(1.4rem, 5vw, 3rem) clamp(3rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.8rem, 4vw, 2.4rem);
  }

  .tips-card {
    border-radius: var(--card-radius);
    border: 1px solid rgba(230, 57, 70, 0.14);
    background: #fff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
  }

  .tips-card__header {
    padding: 1.6rem 1.8rem 1.2rem;
    border-bottom: 1px solid rgba(230, 57, 70, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
  }

  .tips-card__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .tips-card__body {
    padding: 1.8rem;
  }

  .tips-entry {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 0;
  }

  .tips-entry + .tips-entry {
    border-top: 1px solid rgba(230, 57, 70, 0.08);
  }

  .tips-entry__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    color: var(--rider-muted);
    font-size: 0.86rem;
  }

  .tips-entry__amount {
    font-weight: 700;
    font-size: 1.1rem;
  }

  .tips-periods {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .tips-periods__card {
    border-radius: var(--card-radius);
    border: 1px solid rgba(230, 57, 70, 0.14);
    padding: 1.25rem;
    background: linear-gradient(140deg, rgba(230, 57, 70, 0.08), rgba(230, 57, 70, 0));
  }

  .tips-periods__card h4 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 600;
  }

  .tips-periods__stats {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--rider-muted);
    font-size: 0.9rem;
  }

  .rider-nav {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.55rem clamp(1rem, 6vw, 1.6rem);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(230, 57, 70, 0.16);
    box-shadow: 0 -6px 18px rgba(13, 25, 43, 0.08);
    z-index: 9;
  }

  .rider-nav__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.35rem 0.25rem;
    border-radius: 14px;
    color: var(--rider-muted);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all 0.2s ease;
  }

  .rider-nav__item i {
    font-size: 1.2rem;
  }

  .rider-nav__item.is-active,
  .rider-nav__item:focus,
  .rider-nav__item:hover {
    color: var(--rider-accent);
    background: rgba(230, 57, 70, 0.12);
  }
</style>
@endsection

@section('content')
  <div class="rider-tips">
    <header class="rider-tips__header">
      <div class="tips-hero__intro">
        <span class="tips-hero__tag">
          <i class="ti tabler-forms"></i>
          {{ __('Resumen de propinas') }}
        </span>
        <h1 class="tips-hero__title">{{ __('Control de propinas') }}</h1>
        <p class="tips-hero__subtitle">
          {{ __('Consulta las propinas registradas por Glovo, lo que ya se liquidó en tu nómina y lo que queda pendiente para el siguiente pago.') }}
        </p>
        <div class="tips-hero__cta">
          <a class="btn btn-outline-secondary btn-sm" href="{{ route('rider.wallet') }}">
            <i class="ti tabler-wallet me-1"></i>
            {{ __('Volver al monedero') }}
          </a>
        </div>
      </div>
    </header>

    <section class="tips-summary">
      <div class="tips-summary__card">
        <h3>{{ __('Pendiente de pagar') }}</h3>
        <p class="tips-summary__value text-danger">{{ number_format($summary['pending'], 2, ',', '.') }} {{ $summary['currency'] }}</p>
        <p class="tips-summary__meta">{{ __('Se abonará en la próxima liquidación.') }}</p>
      </div>
      <div class="tips-summary__card">
        <h3>{{ __('Propinas registradas') }}</h3>
        <p class="tips-summary__value">{{ number_format($summary['accrued'], 2, ',', '.') }} {{ $summary['currency'] }}</p>
        <p class="tips-summary__meta">{{ __('Sumatoria total de propinas generadas en tus pedidos.') }}</p>
      </div>
      <div class="tips-summary__card">
        <h3>{{ __('Pagado en nómina') }}</h3>
        <p class="tips-summary__value text-success">{{ number_format($summary['paid'], 2, ',', '.') }} {{ $summary['currency'] }}</p>
        <p class="tips-summary__meta">{{ __('Propinas ya abonadas en tus nóminas anteriores.') }}</p>
      </div>
    </section>

    <section class="tips-content">
      <article class="tips-card">
        <div class="tips-card__header">
          <h2 class="tips-card__title">{{ __('Últimos movimientos') }}</h2>
        </div>
        <div class="tips-card__body">
          @if ($entries->isEmpty())
            <p class="text-body-secondary mb-0">{{ __('Todavía no registramos propinas para tu cuenta. Cuando se importen cierres las verás aquí.') }}</p>
          @else
            <div class="d-flex flex-column">
              @foreach ($entries as $entry)
                <div class="tips-entry">
                  <div class="d-flex flex-wrap justify-content-between gap-2 align-items-center">
                    <div>
                      <div class="fw-semibold text-heading">{{ $entry['description'] }}</div>
                      <div class="tips-entry__meta">
                        <span>{{ $entry['date_label'] }}</span>
                        @if ($entry['period_label'])
                          <span>· {{ __('Periodo') }} {{ $entry['period_label'] }}</span>
                        @endif
                      </div>
                    </div>
                    <div class="text-end">
                      <div class="tips-entry__amount {{ $entry['is_payment'] ? 'text-success' : 'text-heading' }}">
                        {{ $entry['is_payment'] ? '+' : '' }}{{ $entry['amount_formatted'] }} {{ $entry['currency'] }}
                      </div>
                      <span class="badge {{ $entry['is_payment'] ? 'bg-label-success' : 'bg-label-info' }}">
                        {{ $entry['is_payment'] ? __('Pagado') : __('Registrado') }}
                      </span>
                    </div>
                  </div>
                </div>
              @endforeach
            </div>
          @endif
        </div>
      </article>

      @if ($periods->isNotEmpty())
        <article class="tips-card">
          <div class="tips-card__header">
            <h2 class="tips-card__title">{{ __('Propinas por cierre') }}</h2>
          </div>
          <div class="tips-card__body">
            <div class="tips-periods">
              @foreach ($periods as $period)
                <div class="tips-periods__card">
                  <h4>{{ $period['label'] }}</h4>
                  <div class="tips-periods__stats">
                    <span>{{ __('Registradas') }}: <strong>{{ $period['tips_total'] }} {{ $period['currency'] }}</strong></span>
                    <span>{{ __('Pagado en nómina') }}: <strong class="text-success">{{ $period['paid'] }} {{ $period['currency'] }}</strong></span>
                    <span>{{ __('Pendiente') }}: <strong class="text-danger">{{ $period['pending'] }} {{ $period['currency'] }}</strong></span>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </article>
      @endif
    </section>

    @include('rider.partials.nav', [
      'navActive' => 'tips',
      'navItems' => ['home', 'wallet', 'tips', 'profile'],
    ])
  </div>
@endsection