@extends('layouts.portal')
@section('title', 'Islamic Information')
@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-mosque text-white text-2xl"></i>
            </div>
            <div>
                <h1 class="text-3xl font-bold text-white">Islamic Information</h1>
                <p class="text-white/80">Step 3 of 15</p>
            </div>
        </div>
    </div>
</div>

<div class="max-w-6xl mx-auto px-8 py-8">
    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-6">
        <p class="text-sm text-blue-800"><strong>Important:</strong> Information is subject to Malaysian Shariah law.</p>
    </div>

    <form action="{{ route('agent.islamic.info.store', $will) }}" method="POST" enctype="multipart/form-data" class="bg-white rounded-xl shadow-lg p-8">
        @csrf
        @php $info = $will->islamicDetails; @endphp

        <!-- Muslim Status and Islamic Name -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block font-semibold mb-2">Muslim Status <span class="text-red-500">*</span></label>
                <select name="muslim_status" id="muslim_status" required class="w-full px-4 py-3 border-2 rounded-xl focus:border-[#772B10]">
                    <option value="">Select</option>
                    <option value="birth" {{ optional($info)->muslim_status=='birth'?'selected':'' }}>Born Muslim</option>
                    <option value="convert" {{ optional($info)->muslim_status=='convert'?'selected':'' }}>Convert / Revert</option>
                </select>
                @error('muslim_status')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block font-semibold mb-2">Islamic Name</label>
                <input type="text" name="islamic_name" value="{{ old('islamic_name', optional($info)->islamic_name) }}" class="w-full px-4 py-3 border-2 rounded-xl focus:border-[#772B10]" placeholder="Enter Islamic name">
                @error('islamic_name')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Conversion/Revert Fields (Conditional) -->
        <div id="convert_fields" style="display:{{ optional($info)->muslim_status=='convert'?'block':'none' }}" class="mt-6 p-6 bg-green-50 rounded-xl border-l-4 border-green-500">
            <h4 class="font-bold mb-4 text-green-800"><i class="fas fa-info-circle mr-2"></i>Conversion / Revert Details</h4>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Conversion Date -->
                <div>
                    <label class="block font-semibold mb-2">Conversion Date</label>
                    <input type="date" name="conversion_date" id="conversion_date" value="{{ old('conversion_date', optional($info)->conversion_date?->format('Y-m-d')) }}" max="{{ date('Y-m-d') }}" class="w-full px-4 py-3 border-2 rounded-xl focus:border-green-600">
                    <p class="text-xs text-gray-500 mt-1">Date cannot be in the future</p>
                    @error('conversion_date')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- State of Conversion -->
                <div>
                    <label class="block font-semibold mb-2">State of Conversion / Registration</label>
                    <select name="islamic_authority_state" class="w-full px-4 py-3 border-2 rounded-xl focus:border-green-600">
                        <option value="">Select State</option>
                        @foreach(['Johor','Kedah','Kelantan','Melaka','Negeri Sembilan','Pahang','Penang','Perak','Perlis','Sabah','Sarawak','Selangor','Terengganu','Kuala Lumpur','Putrajaya','Labuan'] as $s)
                            <option value="{{$s}}" {{ optional($info)->islamic_authority_state==$s?'selected':'' }}>{{$s}}</option>
                        @endforeach
                    </select>
                    @error('islamic_authority_state')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Islamic Registration Number -->
                <div>
                    <label class="block font-semibold mb-2">Islamic Registration / Conversion Number</label>
                    <input type="text" name="islamic_registration_number" value="{{ old('islamic_registration_number', optional($info)->islamic_registration_number) }}" class="w-full px-4 py-3 border-2 rounded-xl focus:border-green-600" placeholder="Enter registration number">
                    <p class="text-xs text-gray-500 mt-1">Optional</p>
                    @error('islamic_registration_number')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Islamic Affairs Authority -->
                <div>
                    <label class="block font-semibold mb-2">Islamic Affairs Authority / Registration Body</label>
                    <select name="islamic_affairs_authority" id="islamic_affairs_authority" class="w-full px-4 py-3 border-2 rounded-xl focus:border-green-600">
                        <option value="">Select Authority</option>
                        <option value="JAKIM" {{ optional($info)->islamic_affairs_authority=='JAKIM'?'selected':'' }}>JAKIM (Department of Islamic Development Malaysia)</option>
                        <option value="JAIS" {{ optional($info)->islamic_affairs_authority=='JAIS'?'selected':'' }}>JAIS (Jabatan Agama Islam Selangor)</option>
                        <option value="JAWI" {{ optional($info)->islamic_affairs_authority=='JAWI'?'selected':'' }}>JAWI (Federal Territory Islamic Religious Department)</option>
                        <option value="JAIJ" {{ optional($info)->islamic_affairs_authority=='JAIJ'?'selected':'' }}>JAIJ (Johor Islamic Religious Department)</option>
                        <option value="JAIK" {{ optional($info)->islamic_affairs_authority=='JAIK'?'selected':'' }}>JAIK (Kedah Islamic Religious Department)</option>
                        <option value="State Islamic Religious Department" {{ optional($info)->islamic_affairs_authority=='State Islamic Religious Department'?'selected':'' }}>State Islamic Religious Department</option>
                        <option value="Other" {{ optional($info)->islamic_affairs_authority=='Other' || (optional($info)->islamic_affairs_authority && !in_array(optional($info)->islamic_affairs_authority, ['JAKIM','JAIS','JAWI','JAIJ','JAIK','State Islamic Religious Department']))?'selected':'' }}>Other</option>
                    </select>
                    @error('islamic_affairs_authority')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Islamic Registration Date -->
                <div>
                    <label class="block font-semibold mb-2">Islamic Registration Date</label>
                    <input type="date" name="islamic_registration_date" id="islamic_registration_date" value="{{ old('islamic_registration_date', optional($info)->islamic_registration_date?->format('Y-m-d')) }}" max="{{ date('Y-m-d') }}" class="w-full px-4 py-3 border-2 rounded-xl focus:border-green-600">
                    <p class="text-xs text-gray-500 mt-1">Date cannot be in the future</p>
                    @error('islamic_registration_date')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Islamic Status Document Upload -->
                <div>
                    <label class="block font-semibold mb-2">Islamic Status / Supporting Document</label>
                    <input type="file" name="islamic_status_document" id="islamic_status_document" accept=".pdf,.jpg,.jpeg,.png" class="w-full px-4 py-3 border-2 rounded-xl focus:border-green-600">
                    <p class="text-xs text-gray-500 mt-1">Conversion Certificate / Islamic Registration Document (PDF, JPG, JPEG, PNG)</p>
                    @if(optional($info)->islamic_status_document_path)
                        <div class="mt-2 flex items-center text-sm text-green-700">
                            <i class="fas fa-file-alt mr-2"></i>
                            <a href="{{ asset(optional($info)->islamic_status_document_path) }}" target="_blank" class="underline hover:text-green-900">View Current Document</a>
                        </div>
                    @endif
                    @error('islamic_status_document')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Additional Islamic Information -->
        <div class="mt-6">
            <label class="block font-semibold mb-2">Additional Islamic Information</label>
            <textarea name="additional_islamic_info" rows="4" class="w-full px-4 py-3 border-2 rounded-xl focus:border-[#772B10]" placeholder="Enter any additional Islamic information here...">{{ old('additional_islamic_info', optional($info)->additional_islamic_info) }}</textarea>
            @error('additional_islamic_info')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-between mt-8">
            <a href="{{ route('agent.wills.testator', $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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const muslimStatus = document.getElementById('muslim_status');
    const convertFields = document.getElementById('convert_fields');
    
    // Toggle convert fields based on Muslim status selection
    muslimStatus.addEventListener('change', function() {
        if (this.value === 'convert') {
            convertFields.style.display = 'block';
        } else {
            convertFields.style.display = 'none';
        }
    });
    
    // Prevent future dates for conversion and registration dates
    const today = new Date().toISOString().split('T')[0];
    const conversionDate = document.getElementById('conversion_date');
    const registrationDate = document.getElementById('islamic_registration_date');
    
    if (conversionDate) {
        conversionDate.setAttribute('max', today);
    }
    if (registrationDate) {
        registrationDate.setAttribute('max', today);
    }
});
</script>
@endsection