@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="d-flex align-items-center justify-content-between mb-4">
    <div>
      <a href="{{ route('admin.shared-subscriptions.index') }}" class="btn btn-sm btn-outline-secondary mb-2">
        <i class="ti tabler-arrow-left me-1"></i> Back to Shared Subscriptions
      </a>
      <h4 class="fw-bold mb-1">Manage Shared Subscription</h4>
      <span class="text-muted">Subscription #{{ $sharedSubscription->id }} &bull; {{ $sharedSubscription->title }}</span>
    </div>

    <div>
      @if($sharedSubscription->is_public)
        <span class="badge bg-success rounded-pill px-3 py-2 fs-6">
          <i class="ti tabler-world me-1"></i> Publicly Visible
        </span>
      @else
        <span class="badge bg-secondary rounded-pill px-3 py-2 fs-6">
          <i class="ti tabler-eye-off me-1"></i> Hidden / Private
        </span>
      @endif
    </div>
  </div>

  @if(session('status'))
    <div class="alert alert-success alert-dismissible mb-4" role="alert">
      {{ session('status') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  @if($errors->any())
    <div class="alert alert-danger alert-dismissible mb-4" role="alert">
      <ul class="mb-0">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <div class="row g-4">
    <!-- Left Column: Subscription Details -->
    <div class="col-lg-4 col-md-5">
      <div class="card h-100 shadow-sm border">
        <div class="card-header border-bottom pb-3">
          <h5 class="card-title mb-0">Subscription Info</h5>
        </div>
        <div class="card-body pt-3">
          <div class="d-flex align-items-center gap-3 mb-4">
            @php
              $svcLogo = $sharedSubscription->service?->logo ?: $sharedSubscription->service?->category?->image_url;
            @endphp
            @if($svcLogo)
              <img src="{{ marketplaceImageUrl($svcLogo) }}" alt="{{ $sharedSubscription->service?->name }}" class="rounded" style="width: 54px; height: 54px; object-fit: contain; background: #f8f9fa; padding: 4px; border: 1px solid #e2e8f0;">
            @else
              <div class="rounded d-flex align-items-center justify-content-center bg-primary text-white" style="width: 54px; height: 54px; font-weight: bold; font-size: 20px;">
                {{ strtoupper(substr($sharedSubscription->service?->name ?? 'S', 0, 1)) }}
              </div>
            @endif
            <div>
              <h6 class="mb-0 fw-bold">{{ $sharedSubscription->service?->name ?? 'Custom Service' }}</h6>
              <small class="text-muted">{{ $sharedSubscription->servicePlan?->name ?? 'Standard Plan' }}</small>
            </div>
          </div>

          <ul class="list-group list-group-flush mb-3">
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
              <span class="text-muted">Owner</span>
              <span class="fw-semibold text-dark">{{ $sharedSubscription->owner?->name ?? 'N/A' }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
              <span class="text-muted">Owner Email</span>
              <span class="fw-semibold text-dark small font-monospace">{{ $sharedSubscription->owner?->email ?? 'N/A' }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
              <span class="text-muted">Total Slots</span>
              <span class="badge bg-label-primary fs-7">{{ $sharedSubscription->total_slots }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
              <span class="text-muted">Available Slots</span>
              <span class="badge bg-label-info fs-7">{{ $sharedSubscription->available_slots }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
              <span class="text-muted">Price per Slot</span>
              <span class="fw-bold text-success">${{ number_format((float) $sharedSubscription->price_per_slot, 2) }}/mo</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
              <span class="text-muted">Total Price</span>
              <span class="fw-bold text-dark">${{ number_format((float) $sharedSubscription->total_price, 2) }}</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center px-0 py-2">
              <span class="text-muted">Invoice Proof</span>
              @php
                $subInvoice = getSubscriptionInvoiceForSubscription((int) $sharedSubscription->id);
                $invStatus = strtolower(trim((string) ($subInvoice['status'] ?? ($sharedSubscription->is_invoice_verified ? 'approved' : ($sharedSubscription->invoice_status ?? 'unverified')))));
              @endphp
              @if(in_array($invStatus, ['approved', 'verified'], true))
                <span class="badge bg-success rounded-pill fw-bold"><i class="ti tabler-rosette-discount-check me-1"></i> Approved</span>
              @elseif($invStatus === 'pending')
                <span class="badge bg-warning text-dark rounded-pill fw-bold"><i class="ti tabler-clock me-1"></i> Needs Review</span>
              @else
                <span class="badge bg-label-secondary rounded-pill">Unverified</span>
              @endif
            </li>
          </ul>

          <div class="mt-3">
            <a href="{{ route('subscriptions.manage', $sharedSubscription) }}" target="_blank" class="btn btn-outline-primary btn-sm w-100">
              <i class="ti tabler-external-link me-1"></i> View Public Manage Page
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Column: Credentials & Settings Edit Form -->
    <div class="col-lg-8 col-md-7">
      <div class="card shadow-sm border mb-4">
        <div class="card-header border-bottom bg-light-subtle d-flex justify-content-between align-items-center">
          <h5 class="card-title mb-0 d-flex align-items-center gap-2">
            <i class="ti tabler-key text-primary fs-4"></i>
            <span>Subscription Credentials</span>
          </h5>
          @if(filled($sharedSubscription->subscription_email) || filled($sharedSubscription->subscription_password))
            <span class="badge bg-label-success">Credentials Configured</span>
          @else
            <span class="badge bg-label-warning">Not Set</span>
          @endif
        </div>

        <form method="POST" action="{{ route('admin.shared-subscriptions.update', $sharedSubscription) }}">
          @csrf
          @method('PUT')

          <div class="card-body">
            <!-- Information note matching screenshot -->
            <div class="alert alert-warning d-flex align-items-start gap-2 mb-4" style="background-color: #fff9ed; border-color: #ffe0b2; color: #8a5300;">
              <i class="ti tabler-shield-lock fs-4 mt-1"></i>
              <div>
                <strong class="d-block">Account login credentials provided to buyers:</strong>
                <span class="small">These credentials are securely shown to approved co-subscribers after payment. As an admin, you can view or update them below.</span>
              </div>
            </div>

            <!-- Red-lined Fields from the User Screenshot -->
            <div class="row g-3 mb-4 p-3 rounded border" style="background: #fafafa;">
              <div class="col-md-6">
                <label class="form-label fw-bold text-dark small mb-1" for="adminSubEmail">
                  Subscription Email <span class="text-danger">*</span>
                </label>
                <div class="input-group">
                  <input 
                    type="email" 
                    id="adminSubEmail" 
                    name="subscription_email" 
                    class="form-control font-monospace" 
                    placeholder="e.g. account@netflix.com" 
                    value="{{ old('subscription_email', $sharedSubscription->subscription_email) }}"
                    autocomplete="off"
                  >
                  <button 
                    type="button" 
                    class="btn btn-outline-secondary" 
                    title="Copy Email" 
                    onclick="const val=document.getElementById('adminSubEmail').value; if(val){ navigator.clipboard.writeText(val); const el=this; el.classList.add('btn-success'); el.classList.remove('btn-outline-secondary'); setTimeout(()=>{ el.classList.remove('btn-success'); el.classList.add('btn-outline-secondary'); }, 1500); }"
                  >
                    <i class="ti tabler-copy"></i>
                  </button>
                </div>
                <div class="form-text small">Subscription account login email or username.</div>
              </div>

              <div class="col-md-6">
                <label class="form-label fw-bold text-dark small mb-1" for="adminSubPassword">
                  Subscription Password <span class="text-danger">*</span>
                </label>
                <div class="input-group">
                  <input 
                    type="password" 
                    id="adminSubPassword" 
                    name="subscription_password" 
                    class="form-control font-monospace" 
                    placeholder="Enter subscription password" 
                    value="{{ old('subscription_password', $sharedSubscription->subscription_password) }}"
                    autocomplete="new-password"
                  >
                  <button 
                    type="button" 
                    class="btn btn-outline-secondary" 
                    id="btnToggleAdminSubPwd"
                    title="Show/Hide Password"
                    onclick="const p = document.getElementById('adminSubPassword'); const icon = this.querySelector('i'); if (p.type==='password'){ p.type='text'; icon.classList.remove('tabler-eye'); icon.classList.add('tabler-eye-off'); } else { p.type='password'; icon.classList.remove('tabler-eye-off'); icon.classList.add('tabler-eye'); }"
                  >
                    <i class="ti tabler-eye"></i>
                  </button>
                  <button 
                    type="button" 
                    class="btn btn-outline-secondary" 
                    title="Copy Password" 
                    onclick="const val=document.getElementById('adminSubPassword').value; if(val){ navigator.clipboard.writeText(val); const el=this; el.classList.add('btn-success'); el.classList.remove('btn-outline-secondary'); setTimeout(()=>{ el.classList.remove('btn-success'); el.classList.add('btn-outline-secondary'); }, 1500); }"
                  >
                    <i class="ti tabler-copy"></i>
                  </button>
                </div>
                <div class="form-text small">Subscription account password. Click eye icon to reveal.</div>
              </div>
            </div>

            <!-- Status & Publication Settings -->
            <h6 class="fw-bold mb-3 d-flex align-items-center gap-2">
              <i class="ti tabler-settings text-primary"></i>
              <span>Status & Publication Settings</span>
            </h6>

            <div class="row g-3 mb-4">
              <div class="col-md-6">
                <label class="form-label fw-bold small">Status <span class="text-danger">*</span></label>
                <select name="status" class="form-select" required>
                  @foreach(['draft', 'active', 'paused', 'full', 'cancelled', 'expired'] as $status)
                    <option value="{{ $status }}" @selected(old('status', $sharedSubscription->status) === $status)>
                      {{ ucfirst($status) }}
                    </option>
                  @endforeach
                </select>
                <div class="form-text small">Set listing lifecycle state.</div>
              </div>

              <div class="col-md-6">
                <label class="form-label fw-bold small d-block">Marketplace Visibility</label>
                <div class="form-check form-switch mt-2">
                  <input class="form-check-input" type="checkbox" id="isPublicSwitch" name="is_public" value="1" @checked(old('is_public', $sharedSubscription->is_public))>
                  <label class="form-check-label fw-semibold" for="isPublicSwitch">
                    Display Publicly on Marketplace
                  </label>
                </div>
                <div class="form-text small">When checked, this package is searchable and purchasable by other users.</div>
              </div>

              <div class="col-12">
                <label class="form-label fw-bold small">Admin Notes</label>
                <textarea name="notes" class="form-control" rows="3" placeholder="Optional internal notes about this subscription or verification status">{{ old('notes', $sharedSubscription->notes) }}</textarea>
              </div>
            </div>
          </div>

          <div class="card-footer border-top bg-light-subtle d-flex justify-content-between align-items-center">
            <button type="submit" class="btn btn-primary fw-bold px-4">
              <i class="ti tabler-device-floppy me-1"></i> Update Shared Subscription
            </button>
        </form>

            <form method="POST" action="{{ route('admin.shared-subscriptions.destroy', $sharedSubscription) }}" onsubmit="return confirm('Are you sure you want to permanently delete this shared subscription?');">
              @csrf
              @method('DELETE')
              <button type="submit" class="btn btn-outline-danger">
                <i class="ti tabler-trash me-1"></i> Delete
              </button>
            </form>
          </div>
      </div>
    </div>
  </div>
</div>
@endsection