@extends('layouts.partner')

@section('title', 'Demand Details - M-Ajira Partner')

@section('content')

<!-- Breadcrumb -->
<section class="py-6 bg-white border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <a href="{{ route('partner.demands.index') }}" class="inline-flex items-center space-x-2 text-purple-600 font-bold hover:text-purple-800 group">
            <span class="group-hover:-translate-x-1 transition-transform">←</span>
            <span>Back to Demands</span>
        </a>
    </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

<!-- Demand Details -->
<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="glass-card rounded-3xl p-10">
            <div class="flex justify-between items-start mb-8">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center text-3xl">
                        💼
                    </div>
                    <div>
                        <h1 class="text-5xl font-black text-gray-800 mb-2">{{ $demand->demand_sn }}</h1>
                        <p class="text-2xl text-gray-600 font-bold">{{ $demand->job_title }}</p>
                    </div>
                </div>
                <div class="flex flex-col items-end space-y-2">
                    <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' : ($demand->status === 'closed' ? 'bg-red-100 text-red-800 border-red-300' : 'bg-gray-100 text-gray-800 border-gray-300') }}">
                        {{ ucfirst($demand->status) }}
                    </span>
                    @if($demand->payment_type)
                    <span class="px-4 py-2 rounded-xl text-xs font-bold
                        {{ $demand->payment_type === 'fixed' ? 'bg-green-100 text-green-800' : '' }}
                        {{ $demand->payment_type === 'range' ? 'bg-blue-100 text-blue-800' : '' }}
                        {{ $demand->payment_type === 'per_trip' ? 'bg-yellow-100 text-yellow-800' : '' }}
                        {{ $demand->payment_type === 'hourly' ? 'bg-purple-100 text-purple-800' : '' }}
                        {{ $demand->payment_type === 'commission' ? 'bg-pink-100 text-pink-800' : '' }}
                        {{ $demand->payment_type === 'negotiable' ? 'bg-gray-100 text-gray-800' : '' }}">
                        @switch($demand->payment_type)
                            @case('fixed') 💰 Fixed @break
                            @case('range') 📊 Range @break
                            @case('per_trip') 🚗 Per Trip @break
                            @case('hourly') ⏰ Hourly @break
                            @case('commission') �� Commission @break
                            @case('negotiable') 🤝 Negotiable @break
                        @endswitch
                    </span>
                    @endif
                </div>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
                <div class="p-6 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-2">COUNTRY</p>
                    <p class="text-3xl font-black text-blue-800">{{ $demand->country }}</p>
                </div>
                
                <div class="p-6 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-2">POSITIONS</p>
                    <p class="text-3xl font-black text-green-800">{{ $demand->positions_filled }}/{{ $demand->positions_available }}</p>
                </div>
                
                <!-- DYNAMIC COMPENSATION DISPLAY -->
                <div class="p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl border-2 border-purple-200 col-span-2">
                    <p class="text-xs text-purple-600 font-bold mb-2">COMPENSATION</p>
                    @switch($demand->payment_type)
                        @case('fixed')
                            <p class="text-2xl font-black text-purple-800">{{ $demand->salary_currency }} {{ number_format($demand->salary_foreign_amount, 0) }}/month</p>
                            <p class="text-xs text-purple-600 mt-1">KES {{ number_format($demand->salary_foreign_amount * $demand->exchange_rate, 0) }}</p>
                        @break

                        @case('range')
                            <p class="text-2xl font-black text-purple-800">{{ $demand->salary_currency }} {{ number_format($demand->salary_min, 0) }} - {{ number_format($demand->salary_max, 0) }}</p>
                            <p class="text-xs text-purple-600 mt-1">KES {{ number_format($demand->salary_min * $demand->exchange_rate, 0) }} - {{ number_format($demand->salary_max * $demand->exchange_rate, 0) }}</p>
                        @break

                        @case('per_trip')
                            <p class="text-2xl font-black text-purple-800">{{ $demand->salary_currency }} {{ number_format($demand->per_trip_rate, 2) }}/trip</p>
                            <p class="text-xs text-purple-600 mt-1">~{{ $demand->salary_currency }} {{ number_format($demand->per_trip_rate * ($demand->estimated_trips_per_month ?? 100), 0) }}/month</p>
                        @break

                        @case('hourly')
                            <p class="text-2xl font-black text-purple-800">{{ $demand->salary_currency }} {{ number_format($demand->hourly_rate, 2) }}/hour</p>
                            <p class="text-xs text-purple-600 mt-1">~{{ $demand->salary_currency }} {{ number_format($demand->hourly_rate * ($demand->estimated_hours_per_month ?? 160), 0) }}/month</p>
                        @break

                        @case('commission')
                            <p class="text-2xl font-black text-purple-800">{{ $demand->commission_percentage }}% Commission</p>
                            @if($demand->base_salary)
                            <p class="text-xs text-purple-600 mt-1">+ {{ $demand->salary_currency }} {{ number_format($demand->base_salary, 0) }} base</p>
                            @endif
                        @break

                        @case('negotiable')
                            <p class="text-2xl font-black text-purple-800">Negotiable</p>
                            <p class="text-xs text-purple-600 mt-1">To be discussed</p>
                        @break

                        @default
                            <p class="text-2xl font-black text-purple-800">{{ $demand->salary_currency }} {{ number_format($demand->salary_foreign_amount ?? 0, 0) }}</p>
                            <p class="text-xs text-purple-600 mt-1">KES {{ number_format($demand->salary_kes_amount ?? 0, 0) }}</p>
                    @endswitch
                </div>
            </div>

            @if($demand->job_description)
                <div class="mb-6 p-6 bg-blue-50 rounded-2xl border-2 border-blue-200">
                    <h3 class="font-black text-gray-800 mb-3 text-xl">📄 Job Description</h3>
                    <p class="text-gray-700 leading-relaxed">{{ $demand->job_description }}</p>
                </div>
            @endif

            @if($demand->additional_benefits)
                <div class="mb-6 p-6 bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl border-2 border-green-200">
                    <h3 class="font-black text-gray-800 mb-3 text-xl">✨ Additional Benefits</h3>
                    <p class="text-gray-700 leading-relaxed">{{ $demand->additional_benefits }}</p>
                </div>
            @endif

            <!-- Payment Details (for non-fixed types) -->
            @if($demand->payment_type && $demand->payment_type !== 'fixed')
                <div class="mb-6 p-6 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-2xl border-2 border-indigo-200">
                    <h3 class="font-black text-gray-800 mb-3 text-xl">💰 Payment Structure Details</h3>
                    
                    @switch($demand->payment_type)
                        @case('range')
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">MINIMUM</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format($demand->salary_min, 0) }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">MAXIMUM</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format($demand->salary_max, 0) }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">AVERAGE</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format(($demand->salary_min + $demand->salary_max) / 2, 0) }}</p>
                                </div>
                            </div>
                        @break

                        @case('per_trip')
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">RATE PER TRIP</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format($demand->per_trip_rate, 2) }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">EST. TRIPS/MONTH</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->estimated_trips_per_month ?? 100 }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">EST. MONTHLY</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format($demand->per_trip_rate * ($demand->estimated_trips_per_month ?? 100), 0) }}</p>
                                </div>
                            </div>
                        @break

                        @case('hourly')
                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">HOURLY RATE</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format($demand->hourly_rate, 2) }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">EST. HOURS/MONTH</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->estimated_hours_per_month ?? 160 }}</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600 font-bold mb-1">EST. MONTHLY</p>
                                    <p class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format($demand->hourly_rate * ($demand->estimated_hours_per_month ?? 160), 0) }}</p>
                                </div>
                            </div>
                        @break

                        @case('commission')
                            <div class="space-y-3">
                                <div class="flex justify-between items-center p-4 bg-white rounded-xl">
                                    <span class="text-gray-700 font-bold">Commission Rate:</span>
                                    <span class="text-2xl font-black text-indigo-800">{{ $demand->commission_percentage }}%</span>
                                </div>
                                @if($demand->base_salary)
                                <div class="flex justify-between items-center p-4 bg-white rounded-xl">
                                    <span class="text-gray-700 font-bold">Base Salary:</span>
                                    <span class="text-2xl font-black text-indigo-800">{{ $demand->salary_currency }} {{ number_format($demand->base_salary, 0) }}</span>
                                </div>
                                @endif
                                @if($demand->commission_details)
                                <div class="p-4 bg-white rounded-xl">
                                    <p class="text-sm text-gray-600">{{ $demand->commission_details }}</p>
                                </div>
                                @endif
                            </div>
                        @break

                        @case('negotiable')
                            @if($demand->negotiable_details)
                            <p class="text-gray-700 leading-relaxed">{{ $demand->negotiable_details }}</p>
                            @else
                            <p class="text-gray-600 italic">Salary will be discussed during the interview process</p>
                            @endif
                        @break
                    @endswitch
                </div>
            @endif

            <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                @if($demand->experience_years)
                    <div class="p-4 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl border-2 border-indigo-200">
                        <p class="text-xs text-indigo-600 font-bold mb-1">EXPERIENCE</p>
                        <p class="font-black text-lg text-indigo-800">{{ $demand->experience_years }} years</p>
                    </div>
                @endif

                @if($demand->preferred_gender)
                    <div class="p-4 bg-gradient-to-br from-orange-50 to-red-50 rounded-xl border-2 border-orange-200">
                        <p class="text-xs text-orange-600 font-bold mb-1">GENDER</p>
                        <p class="font-black text-lg text-orange-800">{{ $demand->preferred_gender }}</p>
                    </div>
                @endif

                @if($demand->education_level)
                    <div class="p-4 bg-gradient-to-br from-pink-50 to-rose-50 rounded-xl border-2 border-pink-200">
                        <p class="text-xs text-pink-600 font-bold mb-1">EDUCATION</p>
                        <p class="font-black text-lg text-pink-800">{{ $demand->education_level }}</p>
                    </div>
                @endif

                @if($demand->preferred_age)
                    <div class="p-4 bg-gradient-to-br from-teal-50 to-cyan-50 rounded-xl border-2 border-teal-200">
                        <p class="text-xs text-teal-600 font-bold mb-1">AGE RANGE</p>
                        <p class="font-black text-lg text-teal-800">{{ $demand->preferred_age }}</p>
                    </div>
                @endif

                @if($demand->preferred_religion)
                    <div class="p-4 bg-gradient-to-br from-lime-50 to-green-50 rounded-xl border-2 border-lime-200">
                        <p class="text-xs text-lime-600 font-bold mb-1">RELIGION</p>
                        <p class="font-black text-lg text-lime-800">{{ $demand->preferred_religion }}</p>
                    </div>
                @endif

                @if($demand->trade_certificate)
                    <div class="p-4 bg-gradient-to-br from-amber-50 to-orange-50 rounded-xl border-2 border-amber-200">
                        <p class="text-xs text-amber-600 font-bold mb-1">CERTIFICATE</p>
                        <p class="font-black text-lg text-amber-800">{{ $demand->trade_certificate }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Matched Candidates -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="glass-card rounded-3xl p-10">
        <div class="flex items-center justify-between mb-8">
            <h2 class="text-4xl font-black text-gray-800 flex items-center">
                <span class="text-5xl mr-4">👥</span>
                Matched Candidates
                <span class="ml-4 px-4 py-2 bg-purple-100 text-purple-800 rounded-2xl text-2xl">{{ $demand->candidates->count() }}</span>
            </h2>
        </div>

        <div class="space-y-6">
            @forelse($demand->candidates as $candidate)
                <div class="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-200 rounded-2xl p-8 card-hover">
                    <div class="flex justify-between items-start mb-6">
                        <div class="flex items-start space-x-4 flex-1">
                            <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center text-white font-black text-2xl flex-shrink-0">
                                {{ strtoupper(substr($candidate->first_name, 0, 1)) }}{{ strtoupper(substr($candidate->last_name, 0, 1)) }}
                            </div>
                            <div class="flex-1">
                                <h3 class="text-2xl font-black text-gray-800">{{ $candidate->first_name }} {{ $candidate->last_name }}</h3>
                                <p class="text-gray-600 font-semibold">{{ $candidate->gender }} • {{ $candidate->county }}</p>
                                <p class="text-sm text-gray-500 font-semibold">📱 {{ $candidate->phone ?? ($candidate->contact_no ?? 'N/A') }}</p>
                            </div>
                        </div>
                        <div class="text-center ml-6">
                            <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center mb-2">
                                <div class="text-3xl font-black text-white">{{ $candidate->pivot->match_score }}%</div>
                            </div>
                            <p class="text-xs text-purple-600 font-bold">MATCH</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                        <div class="p-4 bg-gradient-to-br {{ $candidate->has_passport ? 'from-green-50 to-emerald-50 border-green-200' : 'from-red-50 to-orange-50 border-red-200' }} rounded-xl border-2">
                            <p class="text-xs font-bold mb-1 {{ $candidate->has_passport ? 'text-green-600' : 'text-red-600' }}">PASSPORT</p>
                            <p class="font-black text-xl {{ $candidate->has_passport ? 'text-green-800' : 'text-red-800' }}">
                                {{ $candidate->has_passport ? '✓ Yes' : '✗ No' }}
                            </p>
                        </div>
                        <div class="p-4 bg-gradient-to-br {{ $candidate->has_valid_police_clearance ? 'from-green-50 to-emerald-50 border-green-200' : 'from-red-50 to-orange-50 border-red-200' }} rounded-xl border-2">
                            <p class="text-xs font-bold mb-1 {{ $candidate->has_valid_police_clearance ? 'text-green-600' : 'text-red-600' }}">POLICE CLEARANCE</p>
                            <p class="font-black text-xl {{ $candidate->has_valid_police_clearance ? 'text-green-800' : 'text-red-800' }}">
                                {{ $candidate->has_valid_police_clearance ? '✓ Yes' : '✗ No' }}
                            </p>
                        </div>
                        <div class="p-4 bg-gradient-to-br {{ $candidate->worked_abroad_before ? 'from-green-50 to-emerald-50 border-green-200' : 'from-gray-50 to-gray-100 border-gray-200' }} rounded-xl border-2">
                            <p class="text-xs font-bold mb-1 {{ $candidate->worked_abroad_before ? 'text-green-600' : 'text-gray-600' }}">ABROAD EXP</p>
                            <p class="font-black text-xl {{ $candidate->worked_abroad_before ? 'text-green-800' : 'text-gray-800' }}">
                                {{ $candidate->worked_abroad_before ? '✓ Yes' : '✗ No' }}
                            </p>
                        </div>
                        <div class="p-4 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl border-2 border-blue-200">
                            <p class="text-xs text-blue-600 font-bold mb-1">STATUS</p>
                            <p class="font-black text-xl text-blue-800">{{ ucfirst($candidate->pivot->status) }}</p>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('partner.demands.candidates.status', [$demand, $candidate]) }}" class="flex flex-col md:flex-row gap-3">
                        @csrf
                        <select name="status" required class="flex-1 px-6 py-4 border-2 border-gray-200 rounded-2xl font-bold text-lg focus:border-purple-500 focus:outline-none">
                            <option value="applied" {{ $candidate->pivot->status === 'applied' ? 'selected' : '' }}>Applied</option>
                            <option value="shortlisted" {{ $candidate->pivot->status === 'shortlisted' ? 'selected' : '' }}>Shortlisted</option>
                            <option value="interviewed" {{ $candidate->pivot->status === 'interviewed' ? 'selected' : '' }}>Interviewed</option>
                            <option value="passed" {{ $candidate->pivot->status === 'passed' ? 'selected' : '' }}>Passed</option>
                            <option value="rejected" {{ $candidate->pivot->status === 'rejected' ? 'selected' : '' }}>Rejected</option>
                        </select>
                        <input type="text" name="remarks" placeholder="Add remarks (optional)" 
                            value="{{ $candidate->pivot->remarks ?? '' }}"
                            class="flex-1 px-6 py-4 border-2 border-gray-200 rounded-2xl text-lg focus:border-purple-500 focus:outline-none">
                        <button type="submit" class="btn-primary text-white font-bold px-8 py-4 rounded-2xl hover:shadow-2xl text-lg">
                            Update Status
                        </button>
                    </form>
                </div>
            @empty
                <div class="text-center py-20">
                    <div class="text-8xl mb-6">🔍</div>
                    <h3 class="text-3xl font-black text-gray-800 mb-4">No Candidates Matched Yet</h3>
                    <p class="text-gray-600 text-xl">Our system will automatically match suitable candidates based on your requirements.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>

@endsection