@extends('layouts.partner')

@section('title', 'My Demands - M-Ajira Partner')

@section('content')

<!-- Header -->
<section class="py-12 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center">
            <div>
                <a href="{{ route('partner.dashboard') }}" class="text-purple-600 font-bold hover:text-purple-800 mb-3 inline-flex items-center space-x-2">
                    <span>←</span>
                    <span>Back to Dashboard</span>
                </a>
                <h1 class="text-5xl font-black text-gray-800">My Job Demands</h1>
                <p class="text-gray-600 text-xl mt-2">Manage all your job postings</p>
            </div>
            <a href="{{ route('partner.demands.create') }}" class="btn-primary text-white font-bold py-4 px-8 rounded-2xl text-lg hover:shadow-2xl">
                ➕ Post New Demand
            </a>
        </div>
    </div>
</section>

@if(session('success'))
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="glass-card border-2 border-green-400 rounded-2xl p-6">
            <div class="flex items-center space-x-4">
                <span class="text-5xl">✅</span>
                <div>
                    <h3 class="text-xl font-bold text-green-800 mb-1">Success!</h3>
                    <p class="text-green-700">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- Demands List -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="grid grid-cols-1 gap-6">
        @forelse($demands as $demand)
            <div class="glass-card rounded-3xl p-8 card-hover">
                <div class="flex justify-between items-start mb-6">
                    <div class="flex-1">
                        <div class="flex items-center space-x-3 mb-2">
                            <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-2xl">
                                💼
                            </div>
                            <div>
                                <h3 class="text-3xl font-black text-gray-800">{{ $demand->demand_sn }}</h3>
                                <p class="text-gray-600 font-bold text-lg">{{ $demand->job_title ?: 'Job Position' }} - {{ $demand->country }}</p>
                            </div>
                        </div>
                    </div>
                    <span class="px-6 py-3 rounded-2xl text-sm font-bold border-2
                        {{ $demand->status === 'open' ? 'bg-green-100 text-green-800 border-green-300' : 'bg-gray-100 text-gray-800 border-gray-300' }}">
                        {{ ucfirst($demand->status) }}
                    </span>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div class="p-4 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl border-2 border-blue-200">
                        <p class="text-xs text-blue-600 font-bold mb-1">POSITIONS</p>
                        <p class="text-3xl font-black text-blue-800">{{ $demand->positions_available }}</p>
                    </div>
                    <div class="p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl border-2 border-green-200">
                        <p class="text-xs text-green-600 font-bold mb-1">FILLED</p>
                        <p class="text-3xl font-black text-green-800">{{ $demand->positions_filled }}</p>
                    </div>
                    <div class="p-4 bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl border-2 border-orange-200">
                        <p class="text-xs text-orange-600 font-bold mb-1">SALARY</p>
                        <p class="text-2xl font-black text-orange-800">{{ $demand->salary_currency }} {{ number_format($demand->salary_amount) }}</p>
                    </div>
                    <div class="p-4 bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl border-2 border-purple-200">
                        <p class="text-xs text-purple-600 font-bold mb-1">APPLICANTS</p>
                        <p class="text-3xl font-black text-purple-800">{{ $demand->candidates_count }}</p>
                    </div>
                </div>

                <a href="{{ route('partner.demands.show', $demand) }}" class="inline-block btn-primary text-white font-bold py-3 px-8 rounded-xl hover:shadow-2xl">
                    View Details & Candidates →
                </a>
            </div>
        @empty
            <div class="glass-card rounded-3xl p-20 text-center">
                <div class="text-8xl mb-6">📭</div>
                <h3 class="text-3xl font-black text-gray-800 mb-4">No Demands Posted Yet</h3>
                <p class="text-gray-600 text-xl mb-8">Start by posting your first job demand to find suitable candidates</p>
                <a href="{{ route('partner.demands.create') }}" class="inline-block btn-primary text-white font-bold py-4 px-10 rounded-2xl text-lg">
                    Post Your First Job →
                </a>
            </div>
        @endforelse
    </div>

    @if($demands->hasPages())
    <div class="mt-12 flex justify-center">
        <div class="glass-card p-4 rounded-2xl">
            {{ $demands->links() }}
        </div>
    </div>
    @endif
</section>

@endsection