@extends('layouts.partner')

@section('title', 'Post New Job - 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-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <a href="{{ route('partner.demands.index') }}" class="text-purple-600 font-bold hover:text-purple-800 mb-4 inline-flex items-center space-x-2">
            <span>←</span>
            <span>Back to Demands</span>
        </a>
        <h1 class="text-5xl font-black text-gray-800 mb-3">Post New Job Demand</h1>
        <p class="text-gray-600 text-xl">Fill in job details to find suitable candidates</p>
    </div>
</section>

@if ($errors->any())
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="glass-card border-2 border-red-400 rounded-2xl p-6">
            <div class="flex items-center space-x-4 mb-4">
                <span class="text-5xl">⚠️</span>
                <div>
                    <h3 class="text-xl font-bold text-red-800 mb-1">Please fix the following errors:</h3>
                </div>
            </div>
            <ul class="list-disc list-inside space-y-1 ml-12 text-red-700">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <form method="POST" action="{{ route('partner.demands.store') }}" class="glass-card rounded-3xl p-10">
        @csrf

        <!-- BASIC INFORMATION -->
        <div class="mb-10">
            <h3 class="text-3xl font-black text-gray-800 mb-6 flex items-center">
                <span class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center text-2xl mr-4">📋</span>
                Basic Information
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Job Title *</label>
                    <input type="text" name="job_title" value="{{ old('job_title') }}" required placeholder="e.g., House Helper, Caregiver, Driver"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Country *</label>
                    <select name="country" required class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                        <option value="">Select Country</option>
                        <option value="Saudi Arabia" {{ old('country') == 'Saudi Arabia' ? 'selected' : '' }}>🇸🇦 Saudi Arabia</option>
                        <option value="United Arab Emirates" {{ old('country') == 'United Arab Emirates' ? 'selected' : '' }}>🇦🇪 United Arab Emirates</option>
                        <option value="Qatar" {{ old('country') == 'Qatar' ? 'selected' : '' }}>🇶🇦 Qatar</option>
                        <option value="Kuwait" {{ old('country') == 'Kuwait' ? 'selected' : '' }}>🇰🇼 Kuwait</option>
                        <option value="Oman" {{ old('country') == 'Oman' ? 'selected' : '' }}>🇴🇲 Oman</option>
                        <option value="Bahrain" {{ old('country') == 'Bahrain' ? 'selected' : '' }}>🇧🇭 Bahrain</option>
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-bold text-gray-700 mb-2">Job Description</label>
                    <textarea name="job_description" rows="4" placeholder="Describe the job responsibilities, working conditions, benefits, etc." 
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">{{ old('job_description') }}</textarea>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Positions Available *</label>
                    <input type="number" name="positions_available" value="{{ old('positions_available', 1) }}" required min="1"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Experience Required (Years)</label>
                    <input type="number" name="experience_years" value="{{ old('experience_years', 0) }}" min="0" placeholder="e.g., 2"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Application Deadline</label>
                    <input type="date" name="deadline" value="{{ old('deadline') }}" min="{{ date('Y-m-d') }}"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>
            </div>
        </div>

        <!-- PAYMENT STRUCTURE -->
        <div class="mb-10 p-8 bg-gradient-to-br from-green-50 to-emerald-50 rounded-3xl border-2 border-green-200">
            <h3 class="text-3xl font-black text-gray-800 mb-6 flex items-center">
                <span class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center text-2xl mr-4">💰</span>
                Payment Structure
            </h3>
            
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-3">Payment Type *</label>
                <select name="payment_type" id="payment_type" required onchange="togglePaymentFields()"
                    class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    <option value="">-- Select Payment Type --</option>
                    <option value="fixed" {{ old('payment_type') == 'fixed' ? 'selected' : '' }}>💰 Fixed Monthly Salary</option>
                    <option value="range" {{ old('payment_type') == 'range' ? 'selected' : '' }}>📊 Salary Range (Min-Max)</option>
                    <option value="per_trip" {{ old('payment_type') == 'per_trip' ? 'selected' : '' }}>🚗 Per Trip/Task</option>
                    <option value="hourly" {{ old('payment_type') == 'hourly' ? 'selected' : '' }}>⏰ Hourly Rate</option>
                    <option value="commission" {{ old('payment_type') == 'commission' ? 'selected' : '' }}>💵 Commission-Based</option>
                    <option value="negotiable" {{ old('payment_type') == 'negotiable' ? 'selected' : '' }}>🤝 Negotiable</option>
                </select>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Currency *</label>
                    <select name="salary_currency" required id="currency" onchange="updateExchangeRate()"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                        <option value="">Select Currency</option>
                        <option value="SAR" data-rate="35.70" {{ old('salary_currency') == 'SAR' ? 'selected' : '' }}>SAR (Saudi Riyal)</option>
                        <option value="AED" data-rate="36.50" {{ old('salary_currency') == 'AED' ? 'selected' : '' }}>AED (UAE Dirham)</option>
                        <option value="QAR" data-rate="36.80" {{ old('salary_currency') == 'QAR' ? 'selected' : '' }}>QAR (Qatari Riyal)</option>
                        <option value="KWD" data-rate="436.50" {{ old('salary_currency') == 'KWD' ? 'selected' : '' }}>KWD (Kuwaiti Dinar)</option>
                        <option value="OMR" data-rate="347.90" {{ old('salary_currency') == 'OMR' ? 'selected' : '' }}>OMR (Omani Rial)</option>
                        <option value="USD" data-rate="134.00" {{ old('salary_currency') == 'USD' ? 'selected' : '' }}>USD (US Dollar)</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Exchange Rate (to KES) *</label>
                    <input type="number" name="exchange_rate" value="{{ old('exchange_rate') }}" required min="0" step="0.01" id="exchange_rate" placeholder="Auto-filled from currency"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg bg-gray-50" readonly>
                </div>
            </div>

            <!-- FIXED SALARY FIELDS -->
            <div id="fixed_fields" class="payment-fields hidden">
                <div class="grid grid-cols-1 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Monthly Salary *</label>
                        <input type="number" name="salary_foreign_amount" value="{{ old('salary_foreign_amount') }}" min="0" step="0.01" placeholder="e.g., 1500"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                </div>
            </div>

            <!-- RANGE FIELDS -->
            <div id="range_fields" class="payment-fields hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Minimum Salary *</label>
                        <input type="number" name="salary_min" value="{{ old('salary_min') }}" min="0" step="0.01" placeholder="e.g., 1200"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Maximum Salary *</label>
                        <input type="number" name="salary_max" value="{{ old('salary_max') }}" min="0" step="0.01" placeholder="e.g., 2000"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                </div>
            </div>

            <!-- PER TRIP FIELDS -->
            <div id="per_trip_fields" class="payment-fields hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Rate Per Trip *</label>
                        <input type="number" name="per_trip_rate" value="{{ old('per_trip_rate') }}" min="0" step="0.01" placeholder="e.g., 50"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Estimated Trips/Month</label>
                        <input type="number" name="estimated_trips_per_month" value="{{ old('estimated_trips_per_month', 100) }}" min="1" placeholder="e.g., 100"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                </div>
            </div>

            <!-- HOURLY FIELDS -->
            <div id="hourly_fields" class="payment-fields hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Hourly Rate *</label>
                        <input type="number" name="hourly_rate" value="{{ old('hourly_rate') }}" min="0" step="0.01" placeholder="e.g., 15"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Estimated Hours/Month</label>
                        <input type="number" name="estimated_hours_per_month" value="{{ old('estimated_hours_per_month', 160) }}" min="1" placeholder="e.g., 160"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                </div>
            </div>

            <!-- COMMISSION FIELDS -->
            <div id="commission_fields" class="payment-fields hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Commission Rate (%) *</label>
                        <input type="number" name="commission_percentage" value="{{ old('commission_percentage') }}" min="0" max="100" step="0.1" placeholder="e.g., 10"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Base Salary (Optional)</label>
                        <input type="number" name="base_salary" value="{{ old('base_salary') }}" min="0" step="0.01" placeholder="e.g., 500"
                            class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Commission Details</label>
                    <textarea name="commission_details" rows="2" placeholder="e.g., Commission on all sales, tiered structure, etc."
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">{{ old('commission_details') }}</textarea>
                </div>
            </div>

            <!-- NEGOTIABLE FIELDS -->
            <div id="negotiable_fields" class="payment-fields hidden">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Salary Details</label>
                    <textarea name="negotiable_details" rows="3" placeholder="Provide salary range or expectations that will be discussed during interview"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">{{ old('negotiable_details') }}</textarea>
                </div>
            </div>

            <!-- ADDITIONAL BENEFITS -->
            <div class="mt-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">Additional Benefits</label>
                <textarea name="additional_benefits" rows="3" placeholder="e.g., Housing, Transport, Medical Insurance, Food Allowance, Annual Tickets"
                    class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">{{ old('additional_benefits') }}</textarea>
            </div>
        </div>

        <!-- CANDIDATE REQUIREMENTS -->
        <div class="mb-10">
            <h3 class="text-3xl font-black text-gray-800 mb-6 flex items-center">
                <span class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-2xl mr-4">👤</span>
                Candidate Requirements
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Preferred Gender</label>
                    <select name="preferred_gender" class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                        <option value="Any" {{ old('preferred_gender') == 'Any' ? 'selected' : '' }}>Any Gender</option>
                        <option value="Male" {{ old('preferred_gender') == 'Male' ? 'selected' : '' }}>Male Only</option>
                        <option value="Female" {{ old('preferred_gender') == 'Female' ? 'selected' : '' }}>Female Only</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Preferred Age Range</label>
                    <input type="text" name="preferred_age" value="{{ old('preferred_age') }}" placeholder="e.g., 25-40"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Preferred Religion</label>
                    <select name="preferred_religion" class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                        <option value="Any" {{ old('preferred_religion') == 'Any' ? 'selected' : '' }}>Any Religion</option>
                        <option value="Muslim" {{ old('preferred_religion') == 'Muslim' ? 'selected' : '' }}>Muslim</option>
                        <option value="Christian" {{ old('preferred_religion') == 'Christian' ? 'selected' : '' }}>Christian</option>
                        <option value="Hindu" {{ old('preferred_religion') == 'Hindu' ? 'selected' : '' }}>Hindu</option>
                        <option value="Other" {{ old('preferred_religion') == 'Other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Preferred Marital Status</label>
                    <select name="preferred_marital_status" class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                        <option value="Any" {{ old('preferred_marital_status') == 'Any' ? 'selected' : '' }}>Any Status</option>
                        <option value="Single" {{ old('preferred_marital_status') == 'Single' ? 'selected' : '' }}>Single</option>
                        <option value="Married" {{ old('preferred_marital_status') == 'Married' ? 'selected' : '' }}>Married</option>
                        <option value="Divorced" {{ old('preferred_marital_status') == 'Divorced' ? 'selected' : '' }}>Divorced</option>
                        <option value="Widowed" {{ old('preferred_marital_status') == 'Widowed' ? 'selected' : '' }}>Widowed</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Maximum Number of Children</label>
                    <input type="number" name="preferred_number_of_children" value="{{ old('preferred_number_of_children') }}" min="0" placeholder="e.g., 3"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Minimum Education Level</label>
                    <select name="education_level" class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                        <option value="">Any Education Level</option>
                        <option value="Primary" {{ old('education_level') == 'Primary' ? 'selected' : '' }}>Primary</option>
                        <option value="Form 2" {{ old('education_level') == 'Form 2' ? 'selected' : '' }}>Form 2</option>
                        <option value="Form 4" {{ old('education_level') == 'Form 4' ? 'selected' : '' }}>Form 4</option>
                        <option value="Certificate" {{ old('education_level') == 'Certificate' ? 'selected' : '' }}>Certificate</option>
                        <option value="Diploma" {{ old('education_level') == 'Diploma' ? 'selected' : '' }}>Diploma</option>
                        <option value="Degree" {{ old('education_level') == 'Degree' ? 'selected' : '' }}>Degree</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Trade Certificate Required</label>
                    <input type="text" name="trade_certificate" value="{{ old('trade_certificate') }}" placeholder="e.g., Housekeeping, Caregiver, Cooking"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Preferred Issuing Institution</label>
                    <input type="text" name="preferred_issuing_institution" value="{{ old('preferred_issuing_institution') }}" placeholder="e.g., NITA, TVET"
                        class="w-full px-6 py-4 border-2 border-gray-200 rounded-2xl focus:border-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-200 transition text-lg">
                </div>
            </div>
        </div>

        <!-- SUBMIT BUTTONS -->
        <div class="flex gap-4">
            <button type="submit" class="flex-1 btn-primary text-white font-bold py-5 rounded-2xl hover:shadow-2xl text-xl transition-all transform hover:scale-105">
                ✅ Post Job Demand
            </button>
            <a href="{{ route('partner.demands.index') }}" class="flex-1 bg-gray-200 text-gray-800 font-bold py-5 rounded-2xl text-center hover:bg-gray-300 transition text-xl">
                ❌ Cancel
            </a>
        </div>
    </form>
</section>

<script>
// Exchange rates (approximate - should be fetched from API in production)
const exchangeRates = {
    'SAR': 35.70,  // Saudi Riyal
    'AED': 36.50,  // UAE Dirham
    'QAR': 36.80,  // Qatari Riyal
    'KWD': 436.50, // Kuwaiti Dinar
    'OMR': 347.90, // Omani Rial
    'USD': 134.00  // US Dollar
};

function updateExchangeRate() {
    const currencySelect = document.getElementById('currency');
    const exchangeRateInput = document.getElementById('exchange_rate');
    const selectedCurrency = currencySelect.value;
    
    if (selectedCurrency && exchangeRates[selectedCurrency]) {
        exchangeRateInput.value = exchangeRates[selectedCurrency];
    } else {
        exchangeRateInput.value = '';
    }
}

function togglePaymentFields() {
    const paymentType = document.getElementById('payment_type').value;
    const allFields = document.querySelectorAll('.payment-fields');
    
    // Hide all payment fields
    allFields.forEach(field => field.classList.add('hidden'));
    
    // Show relevant fields based on payment type
    if (paymentType) {
        const fieldToShow = document.getElementById(paymentType + '_fields');
        if (fieldToShow) {
            fieldToShow.classList.remove('hidden');
        }
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    togglePaymentFields();
    updateExchangeRate();
});
</script>

<style>
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.glass-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
</style>

@endsection