@extends('layout.user')

@section('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>
    .microjob-top-actions{
        width:100%;
        max-width:28rem;
        display:grid;
        gap:.75rem;
        margin-bottom:1rem;
    }
    .microjob-top-actions.has-video{grid-template-columns:1fr 1fr;}
    .microjob-top-actions.no-video{grid-template-columns:1fr;}

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

<div class="min-h-screen bg-[#f9fafb] flex flex-col justify-start items-center px-2 py-6">

    @include('partials.mobile_action_cards', [
        'primaryVisible' => true,
        'primaryHref' => route('microjobs.index'),
        'primaryLabel' => 'সব জব',
        'primarySubtitle' => 'মাইক্রো জব লিস্টে ফিরে যান',
        'primaryIcon' => 'fas fa-arrow-left',
        'primaryArrowIcon' => 'fas fa-chevron-right',
        'videoLink' => $tutorialLink,
        'videoType' => $tutorialType,
        'videoSrc' => $tutorialSrc,
        'videoTitle' => $tutorialTitle,
        'videoLabel' => 'ভিডিও',
        'videoSubtitle' => 'এই প্রজেক্টের ভিডিও দেখতে এখানে ক্লিক করুন',
    ])

    <!-- 📌 Full Card Container -->
    <div class="w-full max-w-md bg-white rounded-xl shadow overflow-hidden">

        <!-- 🖼️ Banner Image (fallback সহ) -->
        @php
          $jobPhoto = $job->photo ? asset($job->photo) : 'https://dummyimage.com/1200x600/e5e7eb/9ca3af&text=No+Image';
        @endphp
        <img src="{{ $jobPhoto }}" alt="Job Image" class="w-full h-auto object-cover">

        <!-- 📃 Content Box -->
        <div class="p-4 flex flex-col gap-3">

            <!-- 📄 Description -->
            <div class="text-[14px] text-gray-700 leading-relaxed">
                {!! nl2br(e($job->description)) !!}
            </div>

            <!-- ⚠️ Warning -->
            <div class="text-[12px] text-red-600 mt-1">
                সঠিক নিয়মে কাজ না করলে পেমেন্ট পাবেন না
            </div>

            <!-- 💰 Price -->
            <div class="text-[14px] font-semibold text-gray-700">
                প্রাইস: <span class="text-blue-600 font-bold">৳{{ number_format($job->amount, 2) }}</span>
            </div>

            <!-- 🚀 Buttons -->
            <div class="flex flex-col gap-3 mt-2">
                @if(!empty($job->link))
                    <a href="{{ $job->link }}" target="_blank" rel="noopener"
                       class="w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-full shadow transition">
                        লিংকে যান
                    </a>
                @endif
                <button type="button" onclick="openModal()"
                        class="w-full text-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-full shadow transition">
                    প্রুফ জমা দিন
                </button>
            </div>

        </div>
    </div>
</div>

<!-- ✅ Modal (header দৃশ্যমান রাখতে top offset + কম z-index) -->
<div id="submitModal"
     class="fixed left-0 right-0 bottom-0 hidden items-center justify-center z-40 px-4"
     style="top: var(--header-h, 60px);">
    <!-- backdrop -->
    <div class="absolute inset-0 bg-black/40" onclick="closeModal()" aria-hidden="true"></div>

    <!-- dialog -->
    <div class="relative bg-white rounded-md shadow-xl p-5 w-full max-w-md animate-fadeIn"
         role="dialog" aria-modal="true" aria-labelledby="modalTitle" onclick="event.stopPropagation()">
        <h3 id="modalTitle" class="text-base font-bold mb-3 flex items-center gap-2 text-blue-600">
            <i class="fas fa-upload"></i> প্রমাণ লিংক দিন
        </h3>

        <form method="POST" action="{{ route('microjobs.submit', $job->id) }}">
            @csrf
            <input type="url" name="proof_link" required
                   placeholder="আপনার কাজের প্রমাণ লিংক দিন..."
                   class="w-full border border-gray-300 p-2.5 rounded-md mb-4 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" />

            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeModal()"
                        class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md text-sm font-medium">
                    বাতিল
                </button>
                <button type="submit"
                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                    সাবমিট
                </button>
            </div>
        </form>
    </div>
</div>

<!-- ✅ Modal Script -->
<script>
    const modalEl = document.getElementById('submitModal');

    function openModal() {
        modalEl.classList.remove('hidden');
        modalEl.classList.add('flex');
        // চাইলে স্ক্রল লক করতে পারেন (header থাকলেও ঠিক থাকবে)
        document.documentElement.style.overflow = 'hidden';
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        modalEl.classList.add('hidden');
        modalEl.classList.remove('flex');
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
    }

    // ESC চাপলে ক্লোজ
    window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !modalEl.classList.contains('hidden')) {
            closeModal();
        }
    });
</script>

<!-- ✅ Animation -->
<style>
    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.98); }
        to { opacity: 1; transform: scale(1); }
    }
    .animate-fadeIn {
        animation: fadeIn 0.2s ease-in-out;
    }
</style>
@endsection
