@if (Session::has('message'))
    <div id="alert-border-3"
        class="flex items-center p-4 mb-6 text-sm text-blue-800 bg-blue-100 border border-blue-300 rounded-lg relative mx-auto max-w-2xl">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM9 5a1 1 0 102 0 1 1 0 00-2 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                clip-rule="evenodd"></path>
        </svg>
        <span class="flex-grow">{{ Session::get('message') }}</span>
        <button type="button" class="absolute top-2 right-2 p-1 hover:bg-blue-200 rounded"
            data-dismiss-target="#alert-border-3" aria-label="Close">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414 5.707 15.707a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clip-rule="evenodd"></path>
            </svg>
        </button>
    </div>
@endif

<h2 class="text-3xl font-semibold text-[#005aab] text-center">How can I help you?</h2>

@if (session()->has('success'))
    <div class="p-4 text-green-700 bg-green-100 border border-green-300 rounded-md">{{ session('success') }}</div>
@endif

@if (session()->has('error'))
    <div class="p-4 text-red-700 bg-red-100 border border-red-300 rounded-md">{{ session('error') }}</div>
@endif

@if ($errors->any())
    <div class="mb-6 max-w-2xl mx-auto p-4 bg-red-100 border border-red-400 text-red-700 rounded">
        <ul class="list-disc list-inside">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('whistleblower.store') }}" method="POST" id="whistleblowerForm" name="whistleblowerForm">
    @csrf

    <div class="grid gap-6 md:grid-cols-2">
        <!-- Hidden input to submit 0 if unchecked -->
        <input type="hidden" name="is_anonymous" value="0" />

        <!-- Anonymous -->
        <div class="flex items-center space-x-3 md:col-span-2">
            <input type="checkbox" id="is_anonymous" name="is_anonymous" value="1"
                class="w-5 h-5 text-blue-600 border-gray-300 rounded" {{ old('is_anonymous') ? 'checked' : '' }}>
            <label for="is_anonymous" class="text-gray-700 font-medium">Submit Anonymously</label>
        </div>

        <!-- Full Name -->
        <div id="fullNameGroup" class="space-y-2">
            <label for="full_name" class="font-medium text-gray-700">Full Name <span
                    class="text-red-500">*</span></label>
            <input type="text" name="full_name" id="full_name" placeholder="Your Name" value="{{ old('full_name') }}"
                class="w-full px-4 py-3 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 @error('full_name') border-red-500 @enderror" />
            @error('full_name')
                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Email -->
        <div id="emailGroup" class="space-y-2">
            <label for="email" class="font-medium text-gray-700">Email Address <span
                    class="text-red-500">*</span></label>
            <input type="email" name="email" id="email" placeholder="you@example.com"
                value="{{ old('email') }}"
                class="w-full px-4 py-3 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 @error('email') border-red-500 @enderror" />
            @error('email')
                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Mobile -->
        <div id="mobileGroup" class="space-y-2">
            <label for="mobile" class="font-medium text-gray-700">Mobile Number <span
                    class="text-red-500">*</span></label>
            <input type="text" name="mobile" id="mobile" placeholder="+977-98XXXXXXXX"
                value="{{ old('mobile') }}"
                class="w-full px-4 py-3 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 @error('mobile') border-red-500 @enderror" />
            @error('mobile')
                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Subject -->
        <div class="space-y-2">
            <label for="subject" class="font-medium text-gray-700">Subject <span class="text-red-500">*</span></label>
            <select name="subject" id="subject"
                class="w-full px-4 py-3 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 @error('subject') border-red-500 @enderror">
                <option value="" disabled {{ old('subject') ? '' : 'selected' }}>Select Subject</option>
                @foreach (['Conflict of Interest', 'Abuse', 'Obstructive Practice', 'Collusive Practice', 'Coercive Practice', 'Fraudulent Practice', 'Fraud and Forgery', 'Human Resource'] as $sub)
                    <option value="{{ $sub }}" {{ old('subject') == $sub ? 'selected' : '' }}>
                        {{ $sub }}</option>
                @endforeach
            </select>
            @error('subject')
                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Lodged Against -->
        <div id="lodgedGroup" class="space-y-2 {{ old('subject') == 'Human Resource' ? '' : 'hidden' }}">
            <label for="lodged" class="font-medium text-gray-700">Lodged Against <span
                    class="text-red-500">*</span></label>
            <select name="lodged" id="lodged"
                class="w-full px-4 py-3 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 @error('lodged') border-red-500 @enderror">
                <option value="" disabled {{ old('lodged') ? '' : 'selected' }}>Select Person</option>
                <option value="Other Staff" {{ old('lodged') == 'Other Staff' ? 'selected' : '' }}>Other Staff</option>
                <option value="Sr Management/ HR" {{ old('lodged') == 'Sr Management/ HR' ? 'selected' : '' }}>Sr
                    Management/ HR</option>
            </select>
            @error('lodged')
                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>

        <!-- Issue -->
        <div class="space-y-2 md:col-span-2">
            <label for="issue" class="font-medium text-gray-700">Issue <span class="text-red-500">*</span></label>
            <textarea name="issue" id="issue" rows="4" placeholder="Describe the issue..."
                class="w-full px-4 py-3 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-400 @error('issue') border-red-500 @enderror">{{ old('issue') }}</textarea>
            @error('issue')
                <p class="text-red-600 text-xs mt-1">{{ $message }}</p>
            @enderror
        </div>
        <div>
            {!! NoCaptcha::renderJs() !!}
            {!! NoCaptcha::display() !!}
            @error('g-recaptcha-response')
                <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <!-- Submit -->
    <div class="mt-8 text-center">
        <button type="submit"
            class="inline-block px-10 py-3 text-white font-semibold bg-[#005aab] rounded-lg hover:bg-[#004d6e] transition duration-200 shadow-lg">
            Submit
        </button>
    </div>
</form>


<script>
    const isAnonymousCheckbox = document.getElementById('is_anonymous');
    const fullNameInput = document.getElementById('full_name');
    const emailInput = document.getElementById('email');
    const mobileInput = document.getElementById('mobile');

    const fullNameGroup = document.getElementById('fullNameGroup');
    const emailGroup = document.getElementById('emailGroup');
    const mobileGroup = document.getElementById('mobileGroup');

    const subjectSelect = document.getElementById('subject');
    const lodgedGroup = document.getElementById('lodgedGroup');

    function toggleAnonymousFields() {
        const isAnonymous = isAnonymousCheckbox.checked;

        // Hide or show fields
        [fullNameGroup, emailGroup, mobileGroup].forEach(group => {
            group.classList.toggle('hidden', isAnonymous);
        });

        // Clear input values if anonymous is checked
        if (isAnonymous) {
            fullNameInput.value = '';
            emailInput.value = '';
            mobileInput.value = '';
        }
    }

    function toggleLodgedField() {
        lodgedGroup.classList.toggle('hidden', subjectSelect.value !== 'Human Resource');
    }

    isAnonymousCheckbox.addEventListener('change', toggleAnonymousFields);
    subjectSelect.addEventListener('change', toggleLodgedField);

    // On page load
    document.addEventListener('DOMContentLoaded', () => {
        toggleAnonymousFields();
        toggleLodgedField();
    });
</script>