@php
$configData = Helper::appClasses();
$pendingOffers = $domain->offers->where('status', \App\Enums\OfferStatus::Pending)->count();
@endphp

@extends('layouts/layoutMaster')

@section('title', $domain->name)

@section('vendor-style')
@vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss'])
@endsection

@section('vendor-script')
@vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js'])
@endsection

@section('page-script')
@vite(['resources/assets/js/domain-show.js'])
@endsection

@section('content')
<div class="row g-6">
  <div class="col-12">
    @include('_partials.alerts')
  </div>

  <!-- Sidebar -->
  <div class="col-xl-4 col-lg-5" id="domainSidebarCol">
    <div class="card mb-6">
      <div class="card-body pt-12">
        <div class="d-flex align-items-center flex-column">
          <div class="d-flex align-items-center justify-content-center rounded-circle mb-4"
            style="width: 100px; height: 100px; font-size: 2.5rem; color: #fff; background: linear-gradient(135deg, #696cff, #8f92ff);">
            {{ strtoupper(substr($domain->name, 0, 1)) }}
          </div>
          <div class="text-center">
            <h5 class="mb-2">{{ $domain->name }}</h5>
            @include('content.domains._status_badge', ['domain' => $domain])
          </div>
        </div>

        <div class="d-flex justify-content-around flex-wrap my-6 gap-3">
          <div class="d-flex align-items-center gap-3">
            <div class="avatar">
              <div class="avatar-initial bg-label-primary rounded">
                <i class="icon-base ti tabler-calendar-due icon-lg"></i>
              </div>
            </div>
            <div>
              <h5 class="mb-0">{{ $domain->days_until_expiration }}</h5>
              <span>Días para vencer</span>
            </div>
          </div>
          <div class="d-flex align-items-center gap-3">
            <div class="avatar">
              <div class="avatar-initial bg-label-primary rounded">
                <i class="icon-base ti tabler-mail-dollar icon-lg"></i>
              </div>
            </div>
            <div>
              <h5 class="mb-0">{{ $domain->offers->count() }}</h5>
              <span>Ofertas</span>
            </div>
          </div>
        </div>

        <h5 class="pb-4 border-bottom mb-4">Detalles</h5>
        <ul class="list-unstyled mb-0">
          <li class="d-flex justify-content-between mb-3">
            <span class="text-body">Categoría</span>
            <span class="fw-medium">{{ $domain->category?->name ?? '—' }}</span>
          </li>
          <li class="d-flex justify-content-between mb-3">
            <span class="text-body">Registrador</span>
            <span class="fw-medium">{{ $domain->registrar ?? '—' }}</span>
          </li>
          <li class="d-flex justify-content-between mb-3">
            <span class="text-body">Prioridad</span>
            <span class="badge bg-label-{{ $domain->priority->color() }}">{{ $domain->priority->label() }}</span>
          </li>
          <li class="d-flex justify-content-between mb-3">
            <span class="text-body">Fecha de compra</span>
            <span class="fw-medium">{{ $domain->purchase_date->format('d/m/Y') }}</span>
          </li>
          <li class="d-flex justify-content-between mb-3">
            <span class="text-body">Fecha de vencimiento</span>
            <span class="text-end">
              <span class="badge bg-label-{{ $domain->expirationBadgeColor() }}">
                {{ $domain->timeUntilExpirationCompact() }}
              </span>
              <small class="text-body-secondary d-block mt-1">{{ $domain->expirationDateHuman() }}</small>
            </span>
          </li>
          @if ($domain->estimated_renewal_cost)
            <li class="d-flex justify-content-between mb-3">
              <span class="text-body">Costo estimado de renovación</span>
              <span class="fw-medium">{{ \App\Models\Currency::format($domain->estimated_renewal_cost, $domain->currency) }}/año</span>
            </li>
          @endif
          <li class="d-flex justify-content-between mb-3">
            <span class="text-body">Costo inicial</span>
            <span class="fw-medium">{{ \App\Models\Currency::format($domain->purchase_cost, $domain->currency) }}</span>
          </li>
          <li class="d-flex justify-content-between mb-3">
            <span class="text-body">Última renovación</span>
            <span class="fw-medium">
              {{ $domain->renewal_date ? $domain->renewal_date->format('d/m/Y') : 'Nunca renovado' }}
              @if ($domain->renewal_cost)
                ({{ \App\Models\Currency::format($domain->renewal_cost, $domain->currency) }})
              @endif
            </span>
          </li>
          <li class="d-flex justify-content-between">
            <span class="text-body">Renovación automática</span>
            <span class="fw-medium">{{ $domain->auto_renew ? 'Sí' : 'No' }}</span>
          </li>
        </ul>

        @if ($domain->notes)
          <hr />
          <p class="mb-0 text-body">{{ $domain->notes }}</p>
        @endif

        <div class="d-flex justify-content-center gap-3 mt-6">
          <a href="{{ route('domains.edit', $domain) }}" class="btn btn-primary">Editar</a>
          <button type="button" class="btn btn-label-secondary" data-bs-toggle="modal" data-bs-target="#changeStatusModal">
            Cambiar estado
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- /Sidebar -->

  <!-- Content -->
  <div class="col-xl-8 col-lg-7" id="domainContentCol">
    <ul class="nav nav-pills flex-column flex-md-row flex-wrap mb-6 row-gap-2" role="tablist">
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="toggleDomainSidebar" data-bs-toggle="tooltip"
          title="Ocultar panel de detalles">
          <i class="icon-base ti tabler-layout-sidebar-left-collapse" id="toggleDomainSidebarIcon"></i>
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link active" id="pill-renovaciones" data-bs-toggle="pill"
          data-bs-target="#tab-renovaciones" role="tab" aria-controls="tab-renovaciones" aria-selected="true">
          <i class="icon-base ti tabler-refresh icon-sm me-1_5"></i>Renovaciones
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="pill-ofertas" data-bs-toggle="pill" data-bs-target="#tab-ofertas"
          role="tab" aria-controls="tab-ofertas" aria-selected="false">
          <i class="icon-base ti tabler-mail-dollar icon-sm me-1_5"></i>Ofertas
          @if ($pendingOffers > 0)
            <span class="badge bg-danger rounded-pill ms-1">{{ $pendingOffers }}</span>
          @endif
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="pill-metricas" data-bs-toggle="pill"
          data-bs-target="#tab-metricas" role="tab" aria-controls="tab-metricas" aria-selected="false">
          <i class="icon-base ti tabler-chart-line icon-sm me-1_5"></i>Métricas
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="pill-bitacora" data-bs-toggle="pill"
          data-bs-target="#tab-bitacora" role="tab" aria-controls="tab-bitacora" aria-selected="false">
          <i class="icon-base ti tabler-history icon-sm me-1_5"></i>Bitácora
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button type="button" class="nav-link" id="pill-seo" data-bs-toggle="pill" data-bs-target="#tab-seo"
          role="tab" aria-controls="tab-seo" aria-selected="false">
          <i class="icon-base ti tabler-search icon-sm me-1_5"></i>SEO
        </button>
      </li>
    </ul>

    <div class="tab-content p-0">
      <div class="tab-pane fade show active" id="tab-renovaciones" role="tabpanel" aria-labelledby="pill-renovaciones">
        <div class="card">
          <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0">Renovaciones</h5>
            <button type="button"
              class="btn btn-sm {{ $domain->days_until_expiration < 0 ? 'btn-danger' : ($domain->days_until_expiration <= 30 ? 'btn-warning' : 'btn-primary') }}"
              data-bs-toggle="modal" data-bs-target="#renewModal">
              Renovar
            </button>
          </div>
          <div class="card-body">
            <ul class="list-unstyled mb-0">
              <li class="d-flex justify-content-between mb-3">
                <span class="text-body">Próximo vencimiento</span>
                <span class="text-end">
                  <span class="badge bg-label-{{ $domain->expirationBadgeColor() }}">
                    {{ $domain->timeUntilExpirationCompact() }}
                  </span>
                  <small class="text-body-secondary d-block mt-1">{{ $domain->expirationDateHuman() }}</small>
                </span>
              </li>
              @if ($domain->estimated_renewal_cost)
                <li class="d-flex justify-content-between">
                  <span class="text-body">Costo estimado</span>
                  <span class="fw-medium">{{ \App\Models\Currency::format($domain->estimated_renewal_cost, $domain->currency) }}/año</span>
                </li>
              @endif
            </ul>

            @php $renewalLogs = $domain->logs->where('type', \App\Enums\DomainLogType::Renewal); @endphp
            @if ($renewalLogs->isNotEmpty())
              <hr class="my-4" />
              <ul class="timeline mb-0">
                @foreach ($renewalLogs as $log)
                  <li class="timeline-item timeline-item-transparent">
                    <span class="timeline-point timeline-point-{{ $log->type->color() }}"></span>
                    <div class="timeline-event">
                      <div class="timeline-header mb-1">
                        <small class="text-body-secondary">{{ $log->created_at->format('d/m/Y H:i') }}</small>
                      </div>
                      <p class="mb-0">{{ $log->description }}</p>
                    </div>
                  </li>
                @endforeach
              </ul>
            @else
              <hr class="my-4" />
              <p class="text-body mb-0">Todavía no se ha registrado ninguna renovación.</p>
            @endif
          </div>
        </div>
      </div>

        <div class="tab-pane fade" id="tab-ofertas" role="tabpanel" aria-labelledby="pill-ofertas">
          <div class="card">
            <div class="card-header">
              <h5 class="mb-0">Ofertas recibidas</h5>
            </div>
            <div class="table-responsive">
              <table class="table mb-0">
                <thead>
                  <tr>
                    <th>De</th>
                    <th>Monto</th>
                    <th>Mensaje</th>
                    <th>Estado</th>
                    <th>Fecha</th>
                    <th class="text-end">Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse ($domain->offers as $offer)
                    <tr>
                      <td>
                        {{ $offer->name ?: '—' }}
                        <small class="text-body-secondary d-block">{{ $offer->email }}</small>
                        @if ($offer->phone)
                          <small class="text-body-secondary d-block">{{ $offer->phone }}</small>
                        @endif
                      </td>
                      <td>{{ $offer->currency }} {{ number_format($offer->amount, 2) }}</td>
                      <td>{{ $offer->message ?: '—' }}</td>
                      <td>@include('content.domains._offer_status_badge', ['status' => $offer->status])</td>
                      <td>{{ $offer->created_at->format('d/m/Y') }}</td>
                      <td class="text-end">
                        @if ($offer->status->value === 'pending')
                          <form action="{{ route('domains.offers.accept', [$domain, $offer]) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-label-success">Aceptar</button>
                          </form>
                          <form action="{{ route('domains.offers.reject', [$domain, $offer]) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-label-danger">Rechazar</button>
                          </form>
                        @endif
                      </td>
                    </tr>
                  @empty
                    <tr>
                      <td colspan="6" class="text-center text-body py-6">Todavía no hay ofertas para este dominio.</td>
                    </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-metricas" role="tabpanel" aria-labelledby="pill-metricas">
          <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
              <h5 class="mb-0">Métricas de la landing</h5>
              <span class="text-body-secondary">{{ $totalVisits }} visitas totales</span>
            </div>
            <div class="card-body">
              <div id="domainVisitsChart"
                data-labels="{{ $visitChartLabels->toJson() }}"
                data-series="{{ $visitChartSeries->toJson() }}"></div>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-bitacora" role="tabpanel" aria-labelledby="pill-bitacora">
          <div class="card">
            <div class="card-header">
              <h5 class="mb-0">Bitácora</h5>
            </div>
            <div class="card-body">
              <form action="{{ route('domains.notes.store', $domain) }}" method="POST" class="mb-6">
                @csrf
                <div class="mb-3">
                  <textarea name="description" class="form-control" rows="2" placeholder="Agregar una nota..." required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Agregar nota</button>
              </form>

              <ul class="timeline mb-0">
                @forelse ($domain->logs as $log)
                  <li class="timeline-item timeline-item-transparent">
                    <span class="timeline-point timeline-point-{{ $log->type->color() }}"></span>
                    <div class="timeline-event">
                      <div class="timeline-header mb-1">
                        <span class="badge bg-label-{{ $log->type->color() }} me-2">
                          {{ $log->type->label() }}
                        </span>
                        <small class="text-body-secondary">{{ $log->created_at->format('d/m/Y H:i') }}</small>
                      </div>
                      <p class="mb-1">{{ $log->description }}</p>
                      @if ($log->user)
                        <small class="text-body-secondary">— {{ $log->user->name }}</small>
                      @endif
                    </div>
                  </li>
                @empty
                  <p class="text-body mb-0">Todavía no hay movimientos registrados.</p>
                @endforelse
              </ul>
            </div>
          </div>
        </div>

        <div class="tab-pane fade" id="tab-seo" role="tabpanel" aria-labelledby="pill-seo">
          <div class="card">
            <div class="card-header">
              <h5 class="mb-1">SEO de la landing pública</h5>
              <p class="text-body-secondary small mb-0">
                Se usan en el &lt;title&gt; y la meta descripción de la página pública
                cuando el dominio está en venta. Si se dejan vacíos, se usa un texto
                genérico.
              </p>
            </div>
            <div class="card-body">
              <form action="{{ route('domains.seo.update', $domain) }}" method="POST">
                @csrf
                @method('PUT')
                <div class="row g-6">
                  <div class="col-12">
                    <label class="form-label" for="seo_title">Título SEO</label>
                    <input type="text" class="form-control @error('seo_title') is-invalid @enderror" id="seo_title"
                      name="seo_title" value="{{ old('seo_title', $domain->seo_title) }}"
                      placeholder="{{ $domain->name }} is for sale" />
                    @error('seo_title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>

                  <div class="col-12">
                    <label class="form-label" for="seo_description">Meta descripción SEO</label>
                    <input type="text" class="form-control @error('seo_description') is-invalid @enderror"
                      id="seo_description" name="seo_description"
                      value="{{ old('seo_description', $domain->seo_description) }}"
                      placeholder="This premium domain name is available for purchase." maxlength="500" />
                    @error('seo_description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                  </div>
                </div>

                <div class="mt-6">
                  <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
  </div>
  <!-- /Content -->
</div>

<!-- Renew domain modal -->
<div class="modal fade" id="renewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="{{ route('domains.renew', $domain) }}" method="POST">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title">Renovar dominio</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        @php
          $renewBaseDate = $domain->expiration_date->isPast() ? now() : $domain->expiration_date;
        @endphp
        <div class="modal-body">
          <p class="text-body-secondary small mb-4">
            Vencimiento actual: <strong>{{ $domain->expiration_date->format('d/m/Y') }}</strong>.
            Si vas a cambiar de proveedor (transferir el dominio), simplemente escribí el
            nuevo registrador abajo.
          </p>
          <div class="mb-4">
            <label class="form-label" for="renew_registrar">Registrador</label>
            <input type="text" class="form-control" id="renew_registrar" name="registrar"
              value="{{ $domain->registrar }}" placeholder="Namecheap, GoDaddy, ..." required />
          </div>
          <div class="mb-4">
            <label class="form-label" for="renew_term">Plazo</label>
            <select class="form-select" id="renew_term" data-base-date="{{ $renewBaseDate->format('Y-m-d') }}">
              <option value="">Personalizado (elegí la fecha vos)</option>
              <option value="1" selected>1 año</option>
              <option value="2">2 años</option>
              <option value="3">3 años</option>
              <option value="5">5 años</option>
              <option value="10">10 años</option>
            </select>
          </div>
          <div class="mb-4">
            <label class="form-label" for="renew_expiration_date">Nueva fecha de vencimiento</label>
            <input type="date" class="form-control" id="renew_expiration_date" name="expiration_date"
              value="{{ $renewBaseDate->copy()->addYear()->format('Y-m-d') }}" required />
          </div>
          <div class="row g-4">
            <div class="col-8">
              <label class="form-label" for="renew_cost">Costo de esta renovación</label>
              @php $renewDefaultCost = $domain->renewal_cost ?? $domain->estimated_renewal_cost; @endphp
              <input type="number" step="0.01" min="0" class="form-control" id="renew_cost" name="renewal_cost"
                value="{{ $renewDefaultCost ? (float) $renewDefaultCost : '' }}" required />
            </div>
            <div class="col-4">
              <label class="form-label" for="renew_currency">Moneda</label>
              <select class="form-select" id="renew_currency" name="currency">
                @foreach ($currencies as $currency)
                  <option value="{{ $currency->code }}" @selected($domain->currency === $currency->code)>
                    {{ $currency->code }}
                  </option>
                @endforeach
              </select>
            </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">Registrar renovación</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Change status modal -->
<div class="modal fade" id="changeStatusModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form action="{{ route('domains.status.update', $domain) }}" method="POST">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title">Cambiar estado</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-4">
            <label class="form-label" for="status-select">Nuevo estado</label>
            <select class="form-select" id="status-select" name="status">
              @foreach ($statuses as $status)
                <option value="{{ $status->value }}" @selected($domain->status === $status)>{{ $status->label() }}</option>
              @endforeach
            </select>
          </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">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection