@extends('agent.layouts.app')
<title>Agent Portal Dashboard</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

@section('content')
    <!-- Header Section -->
    <div class="bg-white border-b border-gray-200 sticky top-0">
        <div class="mx-auto px-6 py-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded font-medium hover:bg-gray-300 transition">
                        Leads
                    </button>
                    <div class="flex items-center gap-2 bg-gray-200 px-4 py-2 rounded">
                        <span class="text-teal-600 font-semibold">{{ $lead->lead_no }}</span>
                        <a href="/public/agent/leads" class="text-gray-500 hover:text-gray-700">✕</a>
                    </div>
                </div>
                <div class="flex gap-3">
                    @if ($lead->auth_status != 'registered')
                        <button onclick="openRegisterModal()" class="px-3 py-1 bg-teal-600 text-white rounded">
                            Register User
                        </button>
                    @endif
                    @if ($lead->auth_status == 'registered')
                        <a href="{{ route('agent.fill-out-info', ['id' => $lead->id]) }}"
                            class="px-6 py-2 bg-teal-600 text-white rounded font-medium hover:bg-amber-600 transition">
                            Fill Out Policy Details
                        </a>
                    @endif
                    <a href="{{ route('agent.leads.create-payment-link', ['id' => $lead->id]) }}"
                        class="px-6 py-2 bg-amber-500 text-white rounded font-medium hover:bg-amber-600 transition">
                        Create Payment Link
                    </a>
                </div>
            </div>
            <div class="bg-red-100 block font-semibold mt-4 px-2 py-0.5 rounded text-red-600 w-max">Please make sure to fill
                out policy details before creating a payment link.</div>
            @if ($lead?->policies_information?->active_policies_count > 0)
                <div
                    class="mt-4 inline-block rounded-lg bg-teal-600 text-white px-4 py-3 flex items-baseline gap-2.5">

                    <!-- Heading -->
                    <div class="font-semibold mb-2 text-sm">
                        Active Policies Found:
                    </div>

                    <!-- Policy Badges -->
                    <div class="flex flex-wrap gap-2">
                        @if ($lead->policies_information->active_savings_count > 0)
                            <span
                                class="bg-amber-500 border font-medium gap-1 inline-flex items-center px-3 py-1 rounded-full text-white text-xs">
                                Savings Policy
                                <span class="text-white-500">
                                    ({{ $lead->policies_information->active_savings_count }})
                                </span>
                            </span>
                        @endif

                        @if ($lead->policies_information->active_term_life_count > 0)
                            <span
                                class="bg-amber-500 border font-medium gap-1 inline-flex items-center px-3 py-1 rounded-full text-white text-xs">
                                Term Life Policy
                                <span class="text-white">
                                    ({{ $lead->policies_information->active_term_life_count }})
                                </span>
                            </span>
                        @endif
                    </div>
                </div>
            @endif

        </div>
    </div>

    <!-- Main Content -->
    <div class="mx-auto px-6 py-8">

        <!-- Overlay -->
        <div id="registerOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>

        <!-- Registration Modal -->
        <div id="registerModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
            <div class="bg-white w-full max-w-md mx-4 p-6 rounded-2xl shadow-xl border border-gray-100">
                <!-- Title -->
                <h2 class="text-xl font-semibold text-gray-800 mb-5">Register Buynow User</h2>

                <!-- Form -->
                <form id="registerForm" class="space-y-4">
                    @csrf
                    <input type="hidden" name="lead_id" value="{{ $lead->id }}">

                    <!-- Full Name -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Full Name *</label>
                        <input type="text" name="full_name" id="full_name" value="Cameron Pacheco" placeholder="Enter customer name"
                            class="w-full p-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition">
                        <p id="full_name_error" class="text-red-500 text-xs mt-1 hidden"></p>
                    </div>

                    <!-- Email -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email *</label>
                        <input type="email" name="email" id="email" value="qijawl@mailinator.com" placeholder="Enter customer email"
                            class="w-full p-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition">
                        <p id="email_error" class="text-red-500 text-xs mt-1 hidden"></p>
                    </div>

                    <!-- Mobile -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Mobile *</label>
                        <input type="text" name="mobile" id="mobile" value="Reprehenderit autem" placeholder="Enter customer mobile starts with 03"
                            class="w-full p-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition">
                        <p id="mobile_error" class="text-red-500 text-xs mt-1 hidden"></p>
                    </div>

                    <!-- CNIC -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">CNIC *</label>
                        <input type="text" name="cnic" id="cnic" value="Inventore voluptate" placeholder="Enter customer CNIC"
                            class="w-full p-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition">
                        <p id="cnic_error" class="text-red-500 text-xs mt-1 hidden"></p>
                    </div>

                    <!-- Password -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password *</label>
                        <input type="password" name="password" id="password" placeholder="Enter password"
                            class="w-full p-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 focus:outline-none transition">
                        <p id="password_error" class="text-red-500 text-xs mt-1 hidden"></p>
                    </div>

                    <!-- Buttons -->
                    <div class="flex justify-end gap-3 pt-4">
                        <button type="button" onclick="closeRegisterModal()"
                            class="px-5 py-2.5 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition font-medium">
                            Cancel
                        </button>

                        <!-- Register Button -->
                        <button type="submit" id="registerBtn"
                            class="px-5 py-2.5 rounded-lg bg-teal-600 text-white hover:bg-teal-700 transition font-medium">
                            Register
                        </button>
                    </div>
                </form>
            </div>
        </div>

        @if ($lead?->policies_information?->active_policies_count > 0)
            <!-- Active Policy Overlay -->
            <div id="policyOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>

            <!-- Active Policy Popup -->
            <div id="policyPopup" class="fixed inset-0 z-50 flex items-center justify-center hidden">
                <div class="bg-white w-full max-w-sm mx-4 p-6 rounded-2xl shadow-xl border border-gray-100 relative">

                    <!-- Close Button -->
                    <button onclick="closePolicyPopup()"
                        class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-xl">
                        ✕
                    </button>

                    <!-- Content -->
                    <div class="text-center">
                        <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                            <svg class=" text-green-600" fill="none" stroke="currentColor" stroke-width="2"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2l4-4" />
                            </svg>
                        </div>

                        <h3 class="text-lg font-semibold text-gray-800">
                            Active Policy Found
                        </h3>

                        <p class="text-sm text-gray-600 mt-2">
                            This user has
                            <span class="font-semibold text-green-600 text-xl">
                                {{ $lead?->policies_information?->active_policies_count }}
                            </span>
                            active policy:
                        </p>

                        <ul class="mt-3 space-y-2 text-sm text-gray-700">
                            @if ($lead?->policies_information?->active_term_life_count > 0)
                                <li class="flex items-center justify-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-blue-500"></span>
                                    Term Life Policy
                                    <span class="text-gray-500">
                                        ({{ $lead->policies_information->active_term_life_count }})
                                    </span>
                                </li>
                            @endif

                            @if ($lead?->policies_information?->active_savings_count > 0)
                                <li class="flex items-center justify-center gap-2">
                                    <span class="h-2 w-2 rounded-full bg-green-500"></span>
                                    Savings Policy
                                    <span class="text-gray-500">
                                        ({{ $lead->policies_information->active_savings_count }})
                                    </span>
                                </li>
                            @endif
                        </ul>


                        <button onclick="closePolicyPopup()"
                            class="mt-5 px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition">
                            Okay
                        </button>
                    </div>
                </div>
            </div>
        @endif


        <!-- Lead Information Section -->
        @include('agent.lead-details-sub-section.lead-info')

        <!-- Policy Information Section -->
        @include('agent.lead-details-sub-section.policy-info')

        <!-- Comments Section -->
        @include('agent.lead-details-sub-section.comments')

    </div>

    <!-- Include SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // Toggle section function
        function toggleSection(id) {
            const element = document.getElementById(id);
            const icon = document.getElementById(id === 'lead-info' ? 'lead-icon' : 'policy-icon');

            element.classList.toggle('hidden');
            icon.textContent = element.classList.contains('hidden') ? '+' : '−';
        }

        // Open registration modal
        function openRegisterModal() {
            const leadData = {
                customer_name: '{{ addslashes($lead->customer_name ?? '') }}',
                email: '{{ addslashes($lead->email ?? '') }}',
                mobile_number: '{{ addslashes($lead->mobile_number ?? '') }}',
                cnic: '{{ addslashes($lead->cnic ?? '') }}'
            };

            // Pre-fill form fields with actual lead data
            document.getElementById('full_name').value = leadData.customer_name || '';
            document.getElementById('email').value = leadData.email || '';
            document.getElementById('mobile').value = leadData.mobile_number || '';
            document.getElementById('cnic').value = leadData.cnic || '';
            document.getElementById('password').value = '';

            // Clear any previous errors
            clearErrors();

            // Show overlay and modal
            document.getElementById('registerOverlay').classList.remove('hidden');
            document.getElementById('registerModal').classList.remove('hidden');

            // Prevent body scrolling
            document.body.style.overflow = 'hidden';
        }

        // Close registration modal
        function closeRegisterModal() {
            document.getElementById('registerOverlay').classList.add('hidden');
            document.getElementById('registerModal').classList.add('hidden');
            clearErrors();

            // Restore body scrolling
            document.body.style.overflow = 'auto';
        }

        // Close modal when clicking on overlay
        document.getElementById('registerOverlay').addEventListener('click', closeRegisterModal);

        // Clear error messages
        function clearErrors() {
            const errorElements = document.querySelectorAll('[id$="_error"]');
            errorElements.forEach(element => {
                element.classList.add('hidden');
                element.textContent = '';
            });
        }

        // Show error message
        function showError(field, message) {
            const errorElement = document.getElementById(field + '_error');
            errorElement.textContent = message;
            errorElement.classList.remove('hidden');

            // Highlight the input field
            const inputElement = document.getElementById(field);
            inputElement.classList.add('border-red-500');
            inputElement.classList.remove('border-gray-300');
        }

        // Handle form submission
        $(document).ready(function() {
            $('#registerForm').on('submit', function(e) {
                e.preventDefault();

                const formData = $(this).serialize();
                const registerBtn = $('#registerBtn');

                // Disable button and show loading
                registerBtn.prop('disabled', true);
                registerBtn.html(
                    '<span class="inline-flex items-center"><svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Processing...</span>'
                );
                clearErrors();

                // Remove error borders from all inputs
                $('input').removeClass('border-red-500').addClass('border-gray-300');

                $.ajax({
                    url: '{{ route('agent.register-buynow-user') }}',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success!',
                                text: response.message,
                                confirmButtonColor: '#0d9488',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                // Reload page to update auth status
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: response.message,
                                confirmButtonColor: '#dc2626',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            // Validation errors
                            const errors = xhr.responseJSON.errors;
                            Object.keys(errors).forEach(field => {
                                showError(field, errors[field][0]);
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: xhr.responseJSON?.message ||
                                    'Something went wrong!',
                                confirmButtonColor: '#dc2626',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    complete: function() {
                        // Re-enable button
                        registerBtn.prop('disabled', false);
                        registerBtn.html('Register');
                    }
                });
            });

            // Tab functionality
            const tabButtons = document.querySelectorAll('#policy-tabs [data-tab]');
            const tabContents = document.querySelectorAll('.tab-content [data-content]');

            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // Deactivate all buttons
                    tabButtons.forEach(btn => {
                        btn.classList.remove('text-gray-700', 'border-b-2',
                            'border-gray-900');
                        btn.classList.add('text-gray-500');
                    });

                    // Hide all tab contents
                    tabContents.forEach(content => content.classList.add('hidden'));

                    // Activate clicked button
                    button.classList.remove('text-gray-500');
                    button.classList.add('text-gray-700', 'border-b-2', 'border-gray-900');

                    // Show corresponding content
                    const tabName = button.getAttribute('data-tab');
                    const contentToShow = document.querySelector(
                        `.tab-content [data-content="${tabName}"]`);
                    if (contentToShow) contentToShow.classList.remove('hidden');
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            @if ($lead?->policies_information?->active_policies_count > 0)
                openPolicyPopup();
            @endif
        });

        function openPolicyPopup() {
            document.getElementById('policyOverlay')?.classList.remove('hidden');
            document.getElementById('policyPopup')?.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closePolicyPopup() {
            document.getElementById('policyOverlay')?.classList.add('hidden');
            document.getElementById('policyPopup')?.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        // Close on overlay click
        document.getElementById('policyOverlay')?.addEventListener('click', closePolicyPopup);
    </script>
@endsection