@extends('layout.user')
@section('title', $service->title)

@section('content')
@php
  $tutorialLink = trim((string) ($currentProjectTutorialLink ?? ''));
  $tutorialType = trim((string) ($currentProjectTutorialPlayerType ?? ''));
  $tutorialSrc = trim((string) ($currentProjectTutorialPlayerSrc ?? ''));
  $tutorialTitle = trim((string) ($currentProjectTutorialTitle ?? '')) ?: 'ডিজিটাল সার্ভিস ভিডিও';
  $hasTutorialLink = $tutorialLink !== '' && $tutorialLink !== '#' && $tutorialType !== '' && $tutorialSrc !== '';
@endphp
<style>
  body { background:#f9fafb; color:#0f172a; }
  .btn-primary{ background:#2563eb; color:#fff !important; font-weight:800; transition:.2s; }
  .btn-primary:hover{ background:#1d4ed8; transform:translateY(-1px); }
  .btn-primary:active{ transform:translateY(1px); }
  .dg-detail-top{
    display:grid;
    gap:12px;
    margin-bottom:14px;
  }
  .dg-detail-top.has-video{grid-template-columns:1fr auto;}
  .dg-detail-top.no-video{grid-template-columns:1fr;}

  @media (max-width:640px){
    .dg-detail-top{grid-template-columns:1fr;}
  }
</style>

<div class="max-w-[720px] mx-auto px-1 sm:px-2 py-3">
  @include('partials.mobile_action_cards', [
    'primaryVisible' => true,
    'primaryHref' => route('user.dg_services.index'),
    'primaryLabel' => 'সব সার্ভিস',
    'primarySubtitle' => 'ডিজিটাল সার্ভিস লিস্টে ফিরুন',
    'primaryIcon' => 'fas fa-arrow-left',
    'primaryArrowIcon' => 'fas fa-chevron-right',
    'videoLink' => $tutorialLink,
    'videoType' => $tutorialType,
    'videoSrc' => $tutorialSrc,
    'videoTitle' => $tutorialTitle,
    'videoLabel' => 'ভিডিও',
    'videoSubtitle' => 'এই প্রজেক্টের ভিডিও দেখতে এখানে ক্লিক করুন',
  ])

  {{-- Flash --}}
  @if(session('success'))
    <div class="mb-3 rounded-lg border border-emerald-200 bg-emerald-50 text-emerald-700 px-3 py-2 text-sm font-semibold">
      {{ session('success') }}
    </div>
  @elseif(session('fail'))
    <div class="mb-3 rounded-lg border border-rose-200 bg-rose-50 text-rose-700 px-3 py-2 text-sm font-semibold">
      {{ session('fail') }}
    </div>
  @elseif($errors->any())
    <div class="mb-3 rounded-lg border border-rose-200 bg-rose-50 text-rose-700 px-3 py-2 text-sm font-semibold">
      {{ $errors->first() }}
    </div>
  @endif

  <article class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
    <div class="bg-slate-50">
      <div class="aspect-[16/10] p-2">
        <img src="{{ asset($service->photo) }}" alt="{{ $service->title }}" class="w-full h-full object-contain"
             onerror="this.src='data:image/svg+xml;utf8,{{ rawurlencode('<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'800\' height=\'500\'><rect width=\'100%\' height=\'100%\' fill=\'#eef2f7\'/><text x=\'50%\' y=\'52%\' font-family=\'Arial\' font-size=\'18\' text-anchor=\'middle\' fill=\'#94a3b8\'>No Image</text></svg>') }}'">
      </div>
    </div>

    <div class="p-3 sm:p-4 space-y-3">
      <header>
        <h1 class="text-xl sm:text-[22px] font-extrabold text-slate-800">{{ $service->title }}</h1>
        @if(filled($service->description))
          <p class="mt-1 text-sm text-slate-600">{{ $service->description }}</p>
        @endif
        <p class="mt-2 text-[13px] font-semibold text-red-600">
          ⚠️ বি:দ্র: ভাউচার থেকে প্রাইস কেটে নেওয়া হবে এবং ব্যালেন্সে ক্যাশব্যাক যুক্ত হবে।
        </p>
      </header>

      <div class="flex items-center justify-between gap-2 flex-wrap mt-2">
        <div class="flex items-center gap-2 flex-wrap">
          <span class="inline-flex items-center text-[13px] font-semibold text-slate-700 bg-slate-50 border border-slate-200 rounded-lg px-3 py-1.5">
            মূল্য: <strong class="ml-1 text-slate-900">{{ number_format($service->price,2) }}</strong>
          </span>
          <span class="inline-flex items-center text-[13px] font-semibold text-slate-700 bg-slate-50 border border-slate-200 rounded-lg px-3 py-1.5">
            ক্যাশব্যাক: <strong class="ml-1 text-slate-900">{{ number_format($service->cashback,2) }}</strong>
          </span>
        </div>
        <div class="shrink-0">
          <span class="inline-flex items-center text-[13px] font-semibold text-slate-700 bg-slate-50 border border-slate-200 rounded-lg px-3 py-1.5">
            মেয়াদ: <strong class="ml-1 text-slate-900">{{ $service->validity ?: '—' }}</strong>
          </span>
        </div>
      </div>

      <hr class="border-slate-200">

      <section>
        <form method="POST" action="{{ route('user.dg_services.order',$service->id) }}" class="grid gap-2 sm:gap-3">
          @csrf
          <label class="text-[13px] font-semibold text-slate-700">জিমেইল লিখুন (এখানেই সার্ভিস পাঠানো হবে)</label>
          <input class="w-full border border-slate-300 rounded-lg px-3 py-2 text-[14px] outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-300"
                 type="email" name="gmail" placeholder="yourname@gmail.com" required>
          <div class="flex justify-end mt-2">
            <button type="submit" class="btn-primary inline-flex items-center justify-center gap-2 px-7 py-3 rounded-xl text-[15px] shadow-sm focus-visible:ring-2 focus-visible:ring-blue-300">
              অর্ডার করুন
            </button>
          </div>
        </form>
      </section>
    </div>
  </article>
</div>
@endsection
