@extends('layout.user')
@section('title','DG Digital Services')

@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; }
  .line-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
  .btn-details{ color:#fff !important; }
  .dg-top-actions{
    display:grid;
    gap:12px;
    align-items:stretch;
    margin-bottom:14px;
  }
  .dg-top-actions.has-video{grid-template-columns:1fr auto;}
  .dg-top-actions.no-video{grid-template-columns:1fr;}

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

<div class="max-w-[1120px] mx-auto px-1 sm:px-2 py-3">
  @include('partials.mobile_action_cards', [
    'primaryVisible' => false,
    'videoLink' => $tutorialLink,
    'videoType' => $tutorialType,
    'videoSrc' => $tutorialSrc,
    'videoTitle' => $tutorialTitle,
    'videoLabel' => 'ভিডিও',
    'videoSubtitle' => 'এই প্রজেক্টের ভিডিও দেখতে এখানে ক্লিক করুন',
    'renderDisabledVideo' => false,
  ])

  <header class="mb-3 rounded-2xl border border-slate-200 bg-white px-4 py-4 shadow-sm">
    <h1 class="text-[22px] font-extrabold tracking-tight text-slate-800">ডিজিটাল সার্ভিসসমূহ</h1>
    <p class="mt-1 text-sm text-slate-500">সার্ভিস কেনার আগে ভিডিও দেখে নিলে purchase flow আরও clear হবে।</p>
  </header>

  @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>
  @endif

  <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
    @forelse($services as $s)
      <article class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden flex flex-col">
        <div class="relative bg-slate-50">
          <div class="aspect-[16/10] p-2">
            <img src="{{ asset($s->photo) }}" alt="{{ $s->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-2 sm:p-3 flex flex-col gap-2">
          <h3 class="text-[15px] font-extrabold line-1 text-slate-800">{{ $s->title }}</h3>

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

          <div class="mt-2 flex justify-end">
            <a href="{{ route('user.dg_services.show',$s->id) }}"
               class="btn-details inline-flex items-center justify-center gap-2 px-4 py-2 w-auto font-extrabold text-[13px] rounded-xl shadow-sm bg-blue-600 hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 active:translate-y-[1px] transition">
              বিস্তারিত দেখুন
            </a>
          </div>
        </div>
      </article>
    @empty
      <div class="col-span-full text-center text-slate-500 py-10">বর্তমানে কোনো ডিজিটাল সার্ভিস পাওয়া যায়নি।</div>
    @endforelse
  </section>
</div>
@endsection
