@extends('layout.user')

@section('title','Micro Jobs')

@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>
  .micro-top-actions{
    display:grid;
    gap:1rem;
    margin-bottom:1rem;
  }
  .micro-top-actions.has-video{grid-template-columns:1fr 1fr;}
  .micro-top-actions.no-video{grid-template-columns:1fr;}

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

<div class="pt-2 px-2 max-w-5xl mx-auto font-[Noto_Sans_Bengali]">

  <div class="relative rounded-2xl overflow-hidden shadow-xl mb-4 bg-indigo-600 text-white">
    <i class="fas fa-briefcase absolute -bottom-6 -right-5 text-[100px] text-white/10 rotate-12"></i>

    <div class="relative z-10 px-5 md:px-6 py-6 text-center">
      <div class="inline-flex items-center gap-2 bg-white/15 border border-white/25 rounded-full px-3 py-1 mb-3 backdrop-blur">
        <i class="fas fa-briefcase"></i>
        <span class="text-[13px] md:text-sm font-semibold">মাইক্রো টাস্কস • তাত্ক্ষণিক আয়</span>
      </div>

      <h2 class="text-[20px] md:text-2xl font-extrabold leading-snug">
        ছোট ছোট কাজ করুন, তাত্ক্ষণিক আয় করুন
      </h2>
      <p class="text-white/90 text-sm mt-2">
        দৈনিক সহজ টাস্ক—স্ক্রিনশট সাবমিট করুন, রিভিউ শেষে ব্যালেন্স যুক্ত হবে।
      </p>
    </div>

    <svg class="absolute bottom-0 left-0 right-0" height="38" viewBox="0 0 1440 120" preserveAspectRatio="none" aria-hidden="true">
      <path fill="rgba(255,255,255,.15)"
            d="M0,64L48,80C96,96,192,128,288,138.7C384,149,480,139,576,117.3C672,96,768,64,864,69.3C960,75,1056,117,1152,128C1248,139,1344,117,1392,106.7L1440,96L1440,0L0,0Z"/>
    </svg>
  </div>

  @include('partials.mobile_action_cards', [
    'primaryVisible' => true,
    'primaryHref' => route('user.job_history'),
    'primaryLabel' => 'হিস্ট্রি',
    'primarySubtitle' => 'আপনার সাবমিটেড সব জব দেখুন',
    'videoLink' => $tutorialLink,
    'videoType' => $tutorialType,
    'videoSrc' => $tutorialSrc,
    'videoTitle' => $tutorialTitle,
    'videoLabel' => 'ভিডিও',
    'videoSubtitle' => 'এই প্রজেক্টের ভিডিও দেখতে এখানে ক্লিক করুন',
  ])

  <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 gap-4 pb-12">
    @foreach($jobs as $job)
      @php
        $remaining = max(0, (int)$job->limit - (int)$job->completed_count);
        $photo = $job->photo ? asset($job->photo) : 'https://dummyimage.com/600x400/e5e7eb/9ca3af&text=No+Image';
      @endphp
      <a href="{{ route('microjobs.show', $job->id) }}" class="group relative">
        <div class="border-2 border-blue-600 rounded-xl shadow-sm hover:shadow-lg transition duration-300 p-3 bg-white">
          <div class="relative">
            <img src="{{ $photo }}" alt="{{ $job->title }}" class="w-full h-24 object-cover rounded-md">
            <span class="absolute top-2 left-2 bg-emerald-600 text-white text-[11px] px-2 py-1 rounded shadow">
              {{ $remaining }} জন বাকি
            </span>
          </div>
          <h3 class="mt-3 text-sm font-semibold text-gray-800"
              style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">
            {{ $job->title }}
          </h3>
          <p class="text-sm text-gray-700 mt-1 flex items-center">
            <i class="fas fa-coins text-amber-500 mr-1"></i> {{ number_format($job->amount, 2) }} টাকা
          </p>
        </div>
      </a>
    @endforeach
  </div>

</div>
@endsection
