@extends('agent.layouts.app')
<title>Agent Portal Dashboard</title>
@section('content')
    <!-- Header Section -->
    <div class="bg-white">
        <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-100 px-3 py-1 rounded">
                        <span class="text-teal-600 font-semibold">{{ $lead->lead_no }}</span>
                        <a href="/agent/leads" class="text-gray-500 hover:text-gray-700">✕</a>
                    </div>
                </div>
            </div>
            <!-- Added Create Payment Link section with three delivery options -->
            <div class="flex gap-2 items-center justify-end">
                <a href="/public/agent/leads/{{ $lead->id }}" class="bg-teal-600 px-6 py-2 rounded-md text-white">Go Back</a>
            </div>
            <div class="bg-white rounded-lg border border-gray-200 mb-6 overflow-hidden mt-6">
                <div class="bg-teal-600 text-white px-6 py-4">
                    <h2 class="text-lg font-semibold">Create Payment Link</h2>
                </div>
                <div class="p-8">
                    <div class="flex items-center justify-around">
                        <!-- Send via SMS -->
                        <div onclick="openModal('sms')"
                            class="flex flex-col items-center gap-4 cursor-pointer hover:opacity-80 transition">
                            <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center">
                                <svg class="w-8 h-8 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12h-8v-2h8v2zm0-4h-8V8h8v2z" />
                                </svg>
                            </div>
                            <span class="text-gray-900 font-semibold text-center">Send via SMS</span>
                        </div>

                        <!-- Send via Voucher -->
                        <div onclick="openModal('voucher')"
                            class="flex flex-col items-center gap-4 cursor-pointer hover:opacity-80 transition">
                            <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center">
                                <svg class="w-8 h-8 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-7-11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm0 2c-2.21 0-4 1.79-4 4h8c0-2.21-1.79-4-4-4z" />
                                </svg>
                            </div>
                            <span class="text-gray-900 font-semibold text-center">Send via Voucher</span>
                        </div>

                        <!-- Send via Portal -->
                        <div onclick="openModal('portal')"
                            class="flex flex-col items-center gap-4 cursor-pointer hover:opacity-80 transition">
                            <div class="w-16 h-16 bg-teal-100 rounded-full flex items-center justify-center">
                                <svg class="w-8 h-8 text-teal-600" fill="currentColor" viewBox="0 0 24 24">
                                    <path
                                        d="M20 3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H4V5h16v14zm-8-9h6v2h-6zm0 4h6v2h-6zm-5-8h2v10h-2z" />
                                </svg>
                            </div>
                            <span class="text-gray-900 font-semibold text-center">Send via Portal</span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- MODAL OVERLAY -->
    <div id="confirmModal"
        class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 
            opacity-0 pointer-events-none transition-opacity duration-300">

        <div id="modalBox"
            class="bg-white w-full max-w-md p-6 rounded-lg shadow-lg transform 
                scale-90 opacity-0 transition-all duration-300">

            <h3 id="modalTitle" class="text-xl font-semibold text-gray-800 mb-4">
                Confirm Action
            </h3>

            <p id="modalMessage" class="text-gray-600 mb-6 px-2 rounded w-max py-0.5">
                Are you sure you want to continue?
            </p>

            <div class="flex justify-end gap-3">
                <button onclick="closeModal()" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded">
                    Cancel
                </button>
                <button id="modalConfirmBtn" class="px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded">
                    Yes, Continue
                </button>
            </div>
        </div>
    </div>

    <script>
        function openModal(type) {
            let title = "";
            let message = "";
            let url = "{{ route('agent.payment-api') }}"; // Same API for all

            if (type === "sms") {
                title = "Send Payment Link via SMS";
                message = "Are you sure you want to send the payment link via SMS?";
            }
            if (type === "voucher") {
                title = "Generate Voucher";
                message = "Are you sure you want to generate a voucher?";
            }
            if (type === "portal") {
                title = "Send Payment Link to Portal";
                message = "Are you sure you want to continue?";
            }

            document.getElementById('modalTitle').innerText = title;
            document.getElementById('modalMessage').innerText = message;

            // SET NEW CLICK HANDLER
            document.getElementById('modalConfirmBtn').onclick = function() {

                const btn = document.getElementById('modalConfirmBtn');
                btn.disabled = true;
                btn.innerText = "Please wait...";

                fetch(url, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            lead_id: "{{ $lead->id }}",
                            method: type // pass which action user selected
                        })
                    })
                    .then(async res => {
                        let json = {};
                        try {
                            json = await res.json();
                        } catch (e) {
                            json = {
                                message: "Server returned invalid JSON"
                            };
                        }
                        
                        const modalMsg = document.getElementById("modalMessage");

                        modalMsg.classList.add('bg-teal-500', 'text-white');
                        modalMsg.classList.remove('text-gray-600');

                        // Remove after 5 seconds
                        setTimeout(() => {
                            modalMsg.classList.remove('bg-teal-500', 'text-white');
                            modalMsg.classList.add('text-gray-600');
                            modalMsg.innerText ='Are you sure you want to send the payment link via SMS?';
                        }, 5000);

                        modalMsg.innerText = json?.success ?? json?.response?.message;
                    })
                    .catch(() => {
                        document.getElementById("modalMessage").innerText =
                            "Network error! Unable to reach server.";
                    })
                    .finally(() => {
                        btn.disabled = false;
                        btn.innerText = "Yes, Continue";
                    });
            };

            // SHOW MODAL
            const overlay = document.getElementById("confirmModal");
            const box = document.getElementById("modalBox");

            overlay.classList.remove("pointer-events-none", "opacity-0");
            overlay.classList.add("opacity-100");

            setTimeout(() => {
                box.classList.remove("scale-90", "opacity-0");
                box.classList.add("scale-100", "opacity-100");
            }, 100);
        }


        function closeModal() {
            const overlay = document.getElementById("confirmModal");
            const box = document.getElementById("modalBox");

            box.classList.remove("scale-100", "opacity-100");
            box.classList.add("scale-90", "opacity-0");

            overlay.classList.remove("opacity-100");
            overlay.classList.add("opacity-0");

            setTimeout(() => {
                overlay.classList.add("pointer-events-none");
            }, 300);
        }
    </script>


    <script>
        document.getElementById('modalConfirmBtn').onclick = function() {

            const btn = document.getElementById('modalConfirmBtn');
            btn.disabled = true;
            btn.innerText = "Processing...";

            fetch(url, {
                    method: "GET",
                    headers: {
                        "Accept": "application/json"
                    }
                })
                .then(async res => {
                    let data = {};

                    try {
                        data = await res.json();
                    } catch (e) {
                        data = {
                            message: "Invalid JSON response"
                        };
                    }

                    document.getElementById("modalMessage").innerText =
                        data.message ?? "Request completed!";
                })
                .catch(() => {
                    document.getElementById("modalMessage").innerText =
                        "Server Error! Check connection.";
                })
                .finally(() => {
                    btn.disabled = false;
                    btn.innerText = "Yes, Continue";
                });
        };
    </script>
@endsection