@extends('agent.layouts.app')

@section('content')
    @php
        $id = request()->segment(3); // segment(1) = 'agent', segment(2) = 'fill-out-info', segment(3) = 25
    @endphp
    <div class="px-12 mx-auto py-8">
        <div class="flex flex justify-between">
            <h1 class="text-2xl font-bold mb-6">Fill Policy Information</h1>
            <a href="/public/agent/leads/{{ $id }}" class="px-4 py-2 bg-amber-500 text-white h-1/2 rounded hover:bg-amber-600 transition">Go Back</a>
        </div>
        @include('agent.layouts.message')
        <form action="{{ route('agent.fill-out-info.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Policy Type -->
            <div class="w-full">
                <!-- Radio Buttons -->
                <div class="flex gap-4 mb-6">
                    <div class="flex-1">
                        <input 
                            type="radio" 
                            id="term-life" 
                            name="product" 
                            value="Term Life" 
                            class="hidden peer"
                            @if(($lead?->policies_information?->product ?? 'Term Life') == 'Term Life') checked @endif
                        >
                        <label 
                            for="term-life" 
                            class="term-life-label font-semibold block p-4 border-2 border-gray-200 rounded-lg cursor-pointer text-center peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 transition-colors duration-200 hover:border-gray-300">
                            Term Life
                        </label>
                    </div>

                    <div class="flex-1">
                        <input 
                            type="radio" 
                            id="saving-goal" 
                            name="product" 
                            value="Saving Goals" 
                            class="hidden peer"
                            @if(($lead?->policies_information?->product ?? '') == 'Saving Goals') checked @endif
                        >
                        <label 
                            for="saving-goal" 
                            class="saving-goal-label font-semibold block p-4 border-2 border-gray-200 rounded-lg cursor-pointer text-center peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 transition-colors duration-200 hover:border-gray-300">
                            Saving Goal
                        </label>
                    </div>
                </div>


                <!-- Hidden Input -->
                <input type="hidden" name="product" value="Term Life" id="product-value">
                <input type="hidden" name="id" value="{{ $id }}">

                <!-- Sections -->
                <div id="term-life-section" class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm">
                    <!-- Your Term Life content -->
                    @include('agent.fill-out-term-life')
                </div>

                <div id="saving-goal-section" class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm hidden">
                    <!-- Your Saving Goal content -->
                    @include('agent.fill-out-savng-goal')
                </div>
            </div>

            <!-- Rider Info -->
            <!-- Beneficiaries -->
            @include('agent.fill-out-info-customer-info')

            @include('agent.fill-out-info-beneficiary')

            <!-- Submit -->
            <div class="pt-4">
                <button type="submit"
                    class="px-6 py-2 bg-teal-600 text-white rounded hover:bg-teal-700 transition">Submit</button>
            </div>
        </form>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const termLifeRadio = document.getElementById('term-life');
            const savingGoalRadio = document.getElementById('saving-goal');
            const termLifeLabel = document.querySelector('.term-life-label');
            const savingGoalLabel = document.querySelector('.saving-goal-label');
            const termLifeSection = document.getElementById('term-life-section');
            const savingGoalSection = document.getElementById('saving-goal-section');
            const productValueInput = document.getElementById('product-value');

            function toggleSections() {
                if (termLifeRadio.checked) {
                    // Term Life selected
                    termLifeLabel.classList.add('bg-teal-600', 'text-white');
                    savingGoalLabel.classList.remove('bg-teal-600', 'text-white');
                    termLifeSection.classList.remove('hidden');
                    savingGoalSection.classList.add('hidden');
                    productValueInput.value = 'Term Life';

                    // Enable Term Life inputs, disable Saving Goal inputs
                    termLifeSection.querySelectorAll('input, select, textarea')
                        .forEach(el => el.disabled = false);
                    savingGoalSection.querySelectorAll('input, select, textarea')
                        .forEach(el => el.disabled = true);
                } else if (savingGoalRadio.checked) {
                    // Saving Goal selected
                    termLifeLabel.classList.remove('bg-teal-600', 'text-white');
                    savingGoalLabel.classList.add('bg-teal-600', 'text-white');
                    termLifeSection.classList.add('hidden');          // hide Term Life
                    savingGoalSection.classList.remove('hidden');     // show Saving Goal
                    productValueInput.value = 'Saving Goals';

                    // Enable Saving Goal inputs, disable Term Life inputs
                    termLifeSection.querySelectorAll('input, select, textarea')
                        .forEach(el => el.disabled = true);
                    savingGoalSection.querySelectorAll('input, select, textarea')
                        .forEach(el => el.disabled = false);
                }
            }

            termLifeRadio?.addEventListener('change', toggleSections);
            savingGoalRadio?.addEventListener('change', toggleSections);

            // Initialize
            toggleSections();
        });
    </script>

    <script>
        // On form submit, gather riders into JSON
        document.querySelector("form").addEventListener("submit", function(e) {

            const riderDivs = document.querySelectorAll("#riders-wrapper .rider");
            let ridersArray = [];

            riderDivs.forEach((div, i) => {
                const rider = {
                    rider_code: div.querySelector(`[name^="subscription_riders"][name$="[rider_code]"]`)
                        ?.value || "",
                    rider_type: div.querySelector(`[name^="subscription_riders"][name$="[rider_type]"]`)
                        ?.value || "",
                    sum_assured_percent: div.querySelector(
                            `[name^="subscription_riders"][name$="[sum_assured_percent]"]`)?.value ||
                        "",
                    sum_assured_value: div.querySelector(
                        `[name^="subscription_riders"][name$="[sum_assured_value]"]`)?.value || "",
                    premium_amount: div.querySelector(
                        `[name^="subscription_riders"][name$="[premium_amount]"]`)?.value || ""
                };

                if (rider.rider_code !== "") {
                    ridersArray.push(rider);
                }
            });

            // Set JSON to hidden input
            document.getElementById("addons_json").value = JSON.stringify(ridersArray);

            // Remove old inputs so they are not sent
            const oldInputs = document.querySelectorAll('[name^="subscription_riders"]');
            oldInputs.forEach(i => i.remove());
        });
    </script>
@endsection