@extends('layout.user')

@section('title', 'নতুন কাজ পোস্ট')

@section('content')
@php
    // 🎨 General settings থেকে কালার আনা
    $gs  = \App\Models\GeneralSetting::first();
    $g1  = $gs->icon_color   ?? '#0B5D1E';   // primary
    $g2  = $gs->hover_color  ?? '#0F7A2E';   // secondary
    $g3  = $gs->accent_color ?? '#E4002B';   // accent / red
    $ink = $gs->text_color   ?? '#0f172a';   // text color
@endphp

<style>
  :root{
    --bd-green: {{ $g1 }};
    --bd-green-2: {{ $g2 }};
    --bd-red: {{ $g3 }};
    --bd-ink: {{ $ink }};
  }
  .bd-grad{background:linear-gradient(90deg,var(--bd-green),var(--bd-green-2));}
  .bd-red-grad{background:linear-gradient(90deg,var(--bd-red),var(--bd-green));}
  .bd-soft{
    background:linear-gradient(#fff,#fff) padding-box,
               linear-gradient(90deg,var(--bd-green),var(--bd-green-2)) border-box;
    border:2px solid transparent; border-radius:16px;
  }
  .bd-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.06);}
  .bd-btn{
    background:linear-gradient(90deg,var(--bd-red),var(--bd-green));
    color:#fff;font-weight:800;border:none;
    transition:.25s; box-shadow:0 6px 14px rgba(0,0,0,.15);
  }
  .bd-btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
  .top-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem;}
  .top-actions > a{margin-bottom:0 !important;}
  .top-actions .flex.items-center.gap-3 > div:last-child{min-width:0;}
  @media (max-width:420px){
    .top-actions{grid-template-columns:1fr;gap:.6rem;}
    .min-h-screen{padding-left:6px;padding-right:6px;}
  }
  .form-input,textarea{
    border:1px solid #ccc;border-radius:.75rem;
    padding:.65rem 1rem;width:100%;
    transition:.2s;
  }
  .form-input:focus,textarea:focus{
    border-color:var(--bd-green);
    box-shadow:0 0 0 2px rgba(11,93,30,.2);
    outline:none;
  }
</style>

<div class="min-h-screen bg-white py-6 px-2 font-[Noto_Sans_Bengali]">

  {{-- 🟢 Header --}}
  <div class="relative rounded-2xl overflow-hidden shadow-xl mb-4 bd-grad text-white">
    <i class="fas fa-briefcase absolute -top-4 -left-3 text-[80px] text-white/10 -rotate-12"></i>
    <i class="fas fa-coins absolute -bottom-6 -right-5 text-[96px] text-white/10 rotate-12"></i>

    <div class="relative z-10 px-5 md:px-6 py-5 text-center">
      <div class="inline-flex items-center gap-2 bg-white/15 border border-white/25 rounded-full px-3 py-1 mb-2 backdrop-blur">
        <i class="fas fa-bullseye"></i>
        <span class="text-[13px] md:text-sm font-semibold">Micro Task • Quick Review</span>
      </div>
      <h1 class="text-2xl font-extrabold leading-snug">নতুন কাজ পোস্ট করুন</h1>
      <p class="text-white/90 text-xs md:text-sm mt-1">আপনার অফার যুক্ত করুন, এবং ব্যবহারকারীদের কাজে লাগান।</p>
    </div>

    <svg class="absolute bottom-0 left-0 right-0" height="32" viewBox="0 0 1440 120" preserveAspectRatio="none">
      <path fill="rgba(255,255,255,.16)"
            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,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/>
    </svg>
  </div>

  {{-- 🧾 হিস্ট্রি ব্যাজ --}}
@php
  $tutorialLink = trim((string) ($currentProjectTutorialLink ?? ''));
  $tutorialType = trim((string) ($currentProjectTutorialPlayerType ?? ''));
  $tutorialSrc = trim((string) ($currentProjectTutorialPlayerSrc ?? ''));
  $tutorialTitle = trim((string) ($currentProjectTutorialTitle ?? '')) ?: 'প্রজেক্ট ভিডিও';
  $hasTutorialLink = $tutorialLink !== '' && $tutorialLink !== '#' && $tutorialType !== '' && $tutorialSrc !== '';
@endphp
@include('partials.mobile_action_cards', [
  'primaryVisible' => true,
  'primaryHref' => route('user.jobs.history'),
  'primaryLabel' => 'হিস্ট্রি',
  'primarySubtitle' => 'আগের সব কাজ',
  'videoLink' => $tutorialLink,
  'videoType' => $tutorialType,
  'videoSrc' => $tutorialSrc,
  'videoTitle' => $tutorialTitle,
  'videoLabel' => 'ভিডিও',
  'videoSubtitle' => 'এই প্রজেক্টের ভিডিও দেখতে এখানে ক্লিক করুন',
])

  {{-- ✅ Success & Errors --}}
  @if (session('success'))
    <div class="bd-soft px-4 py-3 mb-4 shadow text-[var(--bd-green)] font-semibold">
      <i class="fas fa-check-circle"></i> {{ session('success') }}
    </div>
  @endif
  @if ($errors->any())
    <div class="rounded-xl px-4 py-3 mb-4 bg-red-50 border border-red-200 shadow-sm">
      <ul class="list-disc pl-5 space-y-1">
        @foreach ($errors->all() as $error)
          <li class="text-sm text-[var(--bd-red)]"><i class="fas fa-exclamation-circle"></i> {{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  {{-- 🧰 ফর্ম --}}
  <form action="{{ route('user.jobs.store') }}" method="POST" enctype="multipart/form-data" class="bd-card p-5 space-y-5">
    @csrf

    {{-- Title --}}
    <div>
      <label class="flex items-center text-sm font-bold text-[var(--bd-green)] mb-1">
        <i class="fas fa-briefcase mr-2"></i> কাজের শিরোনাম
      </label>
      <input type="text" name="title" value="{{ old('title') }}" required class="form-input">
    </div>

    {{-- Link --}}
    <div>
      <label class="flex items-center text-sm font-bold text-[var(--bd-green)] mb-1">
        <i class="fas fa-link mr-2"></i> কাজের লিংক
      </label>
      <input type="url" name="link" value="{{ old('link') }}" required class="form-input">
    </div>

    {{-- Limit & Amount --}}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
      <div>
        <label class="flex items-center text-sm font-bold text-[var(--bd-green)] mb-1">
          <i class="fas fa-layer-group mr-2"></i> কাজের পরিমাণ
        </label>
        <input type="number" name="limit" value="{{ old('limit') }}" required placeholder="সংখ্যা লিখুন" class="form-input">
      </div>
      <div>
        <label class="flex items-center text-sm font-bold text-[var(--bd-green)] mb-1">
          <i class="fas fa-sack-dollar mr-2"></i> প্রতি কাজের মূল্য
        </label>
        <input type="number" name="amount" step="0.01" value="{{ old('amount') }}" required class="form-input">
        <p class="text-xs mt-1 font-semibold text-[var(--bd-red)]">
          <i class="fas fa-info-circle"></i> ১০% সার্ভিস চার্জ প্রযোজ্য
        </p>
      </div>
    </div>

    {{-- Photo --}}
    <div>
      <label class="flex items-center text-sm font-bold text-[var(--bd-green)] mb-1">
        <i class="fas fa-image mr-2"></i> ছবি নির্বাচন করুন
      </label>
      <input type="file" name="photo" accept="image/*" required
             class="w-full text-sm border border-gray-300 rounded-xl px-4 py-2 file:rounded-full file:border-0 file:text-[var(--bd-green)] file:font-bold">
      <small class="text-gray-500 text-xs">সর্বোচ্চ স্পষ্ট রেজোলিউশনের ছবি দিন।</small>
    </div>

    {{-- Description --}}
    <div>
      <label class="flex items-center text-sm font-bold text-[var(--bd-green)] mb-1">
        <i class="fas fa-file-alt mr-2"></i> কাজের বিবরণ
      </label>
      <textarea name="description" rows="4" required class="form-input">{{ old('description') }}</textarea>
    </div>

    {{-- Submit --}}
    <div>
      <button type="submit" class="w-full bd-btn py-3 rounded-full font-extrabold">
        <i class="fas fa-paper-plane mr-1"></i> জমা দিন
      </button>
      <p class="text-[11px] text-gray-500 text-center mt-2">
        সাবমিটের পর রিভিউ শেষ হলে আপনার পোস্ট লাইভ হবে।
      </p>
    </div>
  </form>
</div>
@endsection



