@extends('layouts.portal')
@section('title', 'Funeral Instructions')
@section('sidebar')
    @include('agent.partials.sidebar', ['active' => 'wills'])
@endsection

@section('content')
<div class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] p-8 sticky top-0 z-50">
    <div class="flex justify-between items-center">
        <div class="flex items-center gap-4">
            <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center"><i class="fas fa-praying-hands text-white text-2xl"></i></div>
            <div>
                <h1 class="text-3xl font-bold text-white">Funeral Instructions</h1>
                <p class="text-white/80">Step 7 of 15 - Islamic Burial Preferences</p>
            </div>
        </div>
    </div>
</div>

<div class="max-w-6xl mx-auto px-8 py-8">
    <div class="bg-green-50 border-l-4 border-green-500 p-4 rounded-lg mb-6">
        <p class="text-sm text-green-800"><strong>Islamic Funeral:</strong> Specify your preferences for Islamic funeral and burial according to Sunnah.</p>
    </div>

    <form action="{{ route('agent.islamic.funeral.store', $will) }}" method="POST" class="bg-white rounded-xl shadow-lg p-8 space-y-6">
        @csrf
        @php $funeral = $will->islamicFuneralInstructions; @endphp

        <div class="border-2 border-gray-200 rounded-xl p-6">
            <h3 class="text-xl font-bold mb-6 flex items-center">
                <i class="fas fa-mosque text-green-600 mr-3"></i>Funeral Instructions
            </h3>

            <div class="space-y-6">
                <div>
                    <label class="block font-semibold mb-2">General Funeral Instructions</label>
                    <textarea name="funeral_instructions" rows="4" placeholder="e.g., Prefer simple burial according to Sunnah, no extravagance..." class="w-full px-4 py-3 border-2 rounded-xl focus:border-[#772B10]">{{ old('funeral_instructions', optional($funeral)->funeral_instructions) }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">General preferences for funeral arrangements</p>
                </div>

                <div>
                    <label class="block font-semibold mb-2">Burial Location Preference</label>
                    <input type="text" name="burial_location_preference" value="{{ old('burial_location_preference', optional($funeral)->burial_location_preference) }}" 
                           placeholder="e.g., Muslim cemetery in [City/Area]" 
                           class="w-full px-4 py-3 border-2 rounded-xl focus:border-[#772B10]">
                    <p class="text-xs text-gray-500 mt-1">Preferred cemetery or burial location</p>
                </div>

                <div>
                    <label class="block font-semibold mb-2">Special Religious Instructions</label>
                    <textarea name="special_religious_instructions" rows="5" placeholder="e.g., Specific duas to be recited, scholars to lead prayer, Quranic recitations..." class="w-full px-4 py-3 border-2 rounded-xl focus:border-[#772B10]">{{ old('special_religious_instructions', optional($funeral)->special_religious_instructions) }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">Specific Islamic rituals or religious preferences</p>
                </div>

                <div>
                    <label class="block font-semibold mb-2">Other Instructions</label>
                    <textarea name="other_instructions" rows="4" placeholder="e.g., Notification preferences, family contacts, specific requests..." class="w-full px-4 py-3 border-2 rounded-xl focus:border-[#772B10]">{{ old('other_instructions', optional($funeral)->other_instructions) }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">Any other funeral-related instructions</p>
                </div>
            </div>
        </div>

        <!-- Common Islamic Preferences Checklist -->
        <div class="border-2 border-green-200 rounded-xl p-6 bg-green-50">
            <h4 class="font-bold mb-4 text-green-900">Common Islamic Burial Practices (For Reference)</h4>
            <div class="grid grid-cols-2 gap-3 text-sm text-gray-700">
                <div class="flex items-center"><i class="fas fa-check-circle text-green-600 mr-2"></i>Burial within 24 hours (if possible)</div>
                <div class="flex items-center"><i class="fas fa-check-circle text-green-600 mr-2"></i>Simple white shroud (Kafan)</div>
                <div class="flex items-center"><i class="fas fa-check-circle text-green-600 mr-2"></i>Body facing Qibla</div>
                <div class="flex items-center"><i class="fas fa-check-circle text-green-600 mr-2"></i>Janazah prayer (Salat al-Janazah)</div>
                <div class="flex items-center"><i class="fas fa-check-circle text-green-600 mr-2"></i>No embalming</div>
                <div class="flex items-center"><i class="fas fa-check-circle text-green-600 mr-2"></i>Simple grave marker</div>
            </div>
            <p class="text-xs text-gray-600 mt-4">These are general practices. Specify any specific preferences in the fields above.</p>
        </div>

        <div class="flex justify-between">
            <a href="{{ route('agent.wills.liabilities', $will) }}" class="px-6 py-3 border rounded-xl hover:bg-gray-50">
                <i class="fas fa-arrow-left mr-2"></i>Back
            </a>
            <button type="submit" class="px-6 py-3 bg-[#772B10] text-white rounded-xl hover:bg-[#8B3D15]">
                Save & Continue<i class="fas fa-arrow-right ml-2"></i>
            </button>
        </div>
    </form>
</div>
@endsection