@extends('layouts/layoutMaster')

@php
  $configData = Helper::appClasses();
@endphp

@section('title', 'Propinas')

@section('page-style')
  <style>
    .tip-summary-card {
      border-radius: 18px;
      border: 1px solid rgba(126, 87, 194, 0.16);
      background: linear-gradient(135deg, rgba(126, 87, 194, 0.08), rgba(79, 70, 229, 0.06));
      box-shadow: 0 16px 34px rgba(79, 70, 229, 0.12);
      position: relative;
      overflow: hidden;
    }

    .tip-summary-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 60%);
      pointer-events: none;
    }

    .tip-summary-card .card-body {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 1rem;
    }

    .tip-summary-value {
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 700;
      margin: 0;
    }

    .tip-filter-chip {
      border-radius: 999px;
      border: 1px solid rgba(79, 70, 229, 0.2);
      padding: 0.45rem 0.9rem;
      background: rgba(79, 70, 229, 0.06);
      color: #312e81;
      font-weight: 600;
      font-size: 0.85rem;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .tips-table {
      width: 100%;
    }

    .tips-table thead th {
      text-transform: uppercase;
      font-size: 0.75rem;
      letter-spacing: .08em;
      color: #64748b;
      border-bottom-width: 1px;
    }

    .tips-table tbody td {
      vertical-align: middle;
    }

    .tips-status-badge {
      border-radius: 999px;
      font-size: 0.75rem;
      padding: 0.35rem 0.75rem;
    }

    .tip-modal .form-label {
      font-weight: 600;
      color: #1f2937;
    }
  </style>
@endsection

@section('content')
  <div id="adminTipsPage" class="admin-tips-page" data-pending-endpoint="{{ route('admin.api.tips.pending') }}" data-settlement-template="{{ route('admin.api.tips.settlements.store', ['rider' => '__RIDER__']) }}" data-company-id="{{ $filters['company_id'] ?? '' }}" data-period-id="{{ $filters['period_id'] ?? '' }}">
  <div class="row mb-4">
    <div class="col-12">
      <div class="card tip-summary-card">
        <div class="card-body">
          <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 align-items-start align-items-lg-center">
            <div>
              <span class="tip-filter-chip">
                <i class="ti tabler-coins"></i>
                Gestión de propinas
              </span>
              <h1 class="mb-1 mt-3">Liquidación de propinas</h1>
              <p class="mb-0 text-body-secondary">
                Revisa las propinas registradas por cierre, identifica lo pendiente de pagar y confirma los movimientos liquidados en nómina.
              </p>
            </div>
            <div class="text-end pe-lg-3">
              <h5 class="text-body-secondary text-uppercase small fw-semibold mb-1">Pendiente global</h5>
              <p class="tip-summary-value text-danger mb-0" data-tips-pending-total>—</p>
              <small class="text-body-secondary" data-tips-last-update></small>
            </div>
          </div>
          <div class="d-flex flex-wrap gap-2 align-items-center">
            <span class="text-body-secondary">{{ __('Filtros activos') }}:</span>
            <div class="d-flex flex-wrap gap-2" id="tips-active-filters"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      <div class="d-flex flex-column flex-lg-row justify-content-between gap-3">
        <div>
          <h5 class="card-title mb-1">{{ __('Propinas pendientes') }}</h5>
          <p class="card-subtitle text-body-secondary mb-0">{{ __('Filtra por empresa, cierre o rider para preparar la liquidación.') }}</p>
        </div>
        <div class="d-flex flex-wrap gap-2">
          <button class="btn btn-outline-secondary" id="tipsExportCsv">
            <i class="ti tabler-download me-1"></i>
            {{ __('Exportar CSV') }}
          </button>
        </div>
      </div>
    </div>
    <div class="card-body">
      <form id="tipsFilters" class="row g-3">
        <div class="col-12 col-md-4">
          <label for="filterCompany" class="form-label">{{ __('Empresa') }}</label>
          <select id="filterCompany" class="form-select">
            <option value="">{{ __('Todas') }}</option>
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label for="filterPeriod" class="form-label">{{ __('Cierre / Periodo') }}</label>
          <select id="filterPeriod" class="form-select">
            <option value="">{{ __('Todos') }}</option>
          </select>
        </div>
        <div class="col-12 col-md-4">
          <label for="filterRider" class="form-label">{{ __('Rider') }}</label>
          <input type="search" id="filterRider" class="form-control" placeholder="{{ __('Nombre o email') }}">
        </div>
      </form>
    </div>

    <div class="table-responsive">
      <table class="table tips-table align-middle">
        <thead>
          <tr>
            <th>{{ __('Cierre') }}</th>
            <th>{{ __('Rider') }}</th>
            <th class="text-end">{{ __('Propinas registradas') }}</th>
            <th class="text-end">{{ __('Pagado') }}</th>
            <th class="text-end">{{ __('Pendiente') }}</th>
            <th>{{ __('Estado') }}</th>
            <th class="text-end">{{ __('Acciones') }}</th>
          </tr>
        </thead>
        <tbody id="tipsTableBody">
          <tr>
            <td colspan="7" class="text-center text-body-secondary py-5" data-empty>
              <div class="d-flex flex-column gap-2 align-items-center">
                <span class="spinner-border text-primary" role="status" aria-hidden="true"></span>
                <span>{{ __('Cargando información de propinas…') }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal fade tip-modal" id="markTipsModal" tabindex="-1" aria-labelledby="markTipsLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <form id="markTipsForm">
          <div class="modal-header">
            <h5 class="modal-title" id="markTipsLabel">{{ __('Registrar pago de propinas') }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Cerrar') }}"></button>
          </div>
          <div class="modal-body">
            <div class="alert alert-danger d-none" id="tipsModalError"></div>
            <div class="row g-3 mb-3">
              <div class="col-12 col-lg-6">
                <label class="form-label">{{ __('Rider') }}</label>
                <p class="fw-semibold mb-0" data-tips-rider>—</p>
                <small class="text-body-secondary" data-tips-rider-email></small>
              </div>
              <div class="col-12 col-lg-6">
                <label class="form-label">{{ __('Cierre / Periodo') }}</label>
                <p class="fw-semibold mb-0" data-tips-period>—</p>
                <small class="text-body-secondary" data-tips-company></small>
              </div>
            </div>
            <div class="row g-3 mb-3">
              <div class="col-12 col-md-4">
                <label class="form-label">{{ __('Registrado') }}</label>
                <div class="border rounded-3 py-2 px-3 fw-semibold" data-tips-registered>—</div>
              </div>
              <div class="col-12 col-md-4">
                <label class="form-label">{{ __('Pagado hasta ahora') }}</label>
                <div class="border rounded-3 py-2 px-3 fw-semibold text-success" data-tips-paid>—</div>
              </div>
              <div class="col-12 col-md-4">
                <label class="form-label">{{ __('Pendiente a liquidar') }}</label>
                <div class="border rounded-3 py-2 px-3 fw-semibold text-danger" data-tips-pending>—</div>
              </div>
            </div>
            <div class="row g-3">
              <div class="col-12 col-md-6">
                <label for="tipsAmount" class="form-label">{{ __('Importe a abonar') }}</label>
                <div class="input-group">
                  <input type="number" step="0.01" min="0.01" class="form-control" id="tipsAmount" name="amount" required>
                  <span class="input-group-text" data-tips-currency>EUR</span>
                </div>
                <small class="text-body-secondary">{{ __('Se recomienda liquidar el importe pendiente total.') }}</small>
              </div>
              <div class="col-12 col-md-6">
                <label for="tipsReference" class="form-label">{{ __('Referencia / Nómina') }}</label>
                <input type="text" class="form-control" id="tipsReference" name="reference" maxlength="120" placeholder="{{ __('Ejemplo: Nómina Oct 2025') }}">
              </div>
              <div class="col-12">
                <label for="tipsNotes" class="form-label">{{ __('Notas internas') }}</label>
                <textarea class="form-control" id="tipsNotes" name="notes" rows="3" placeholder="{{ __('Comentarios adicionales para el equipo de administración') }}"></textarea>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">{{ __('Cancelar') }}</button>
            <button type="submit" class="btn btn-primary" id="tipsSubmitBtn">
              <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
              <span>{{ __('Registrar pago') }}</span>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
  </div>
@endsection

@section('page-script')
  @vite(['resources/js/admin/tips.js'])
@endsection