@extends('layouts.master')
@section('title', 'Configure Mock ORG Update')
@section('styles')
    <style>
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .loader-spin {
            width: 40px;
            height: 40px;
            border: 4px solid #e2e8f0;
            border-top: 4px solid #f59e0b;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        /* Sticky Header */
        .sticky-header th {
            position: sticky;
            top: 0;
            z-index: 30;
            background: #fef3c7;
        }
    </style>
@endsection
@section('content')
    <div class="px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-amber-50 to-white">
        <!-- Heading -->
        <div class="mb-4 w-full">
            <h2 class="text-2xl font-semibold text-gray-800">Configure Mock ORG</h2>
            <p class="text-sm text-gray-600 mt-1">Add or modify mock organization configurations</p>
        </div>

        <!-- Configuration Form -->
        <div class="bg-white rounded-lg border border-gray-200 p-6 mb-4">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">Organization Details</h3>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <!-- Org Code -->
                <div>
                    <label for="orgCode" class="block text-xs font-semibold text-gray-600 mb-1">
                        Org Code <span class="text-red-800">*</span>
                    </label>
                    <select id="orgCode" class="w-full text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500">
                        <option value="">Select an organization</option>
                    </select>
                </div>

                <!-- ORG Type -->
                <div>
                    <label for="orgType" class="block text-xs font-semibold text-gray-600 mb-1">
                        ORG Type <span class="text-red-800">*</span>
                    </label>
                    <select id="orgType" class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500">
                        <option value="">Select ORG Type</option>
                        <option value="Prepaid">Prepaid</option>
                        <option value="Postpaid">Postpaid</option>
                    </select>
                </div>
            </div>

            <!-- Test Configurations Section -->
            <div class="border-t pt-4">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold text-gray-700">Test Configurations</h3>
                    <button
                        id="addRowBtn"
                        class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-500 hover:bg-green-600 text-white rounded-lg shadow-sm hover:shadow-md text-sm transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Add Row
                    </button>
                </div>

                <!-- Dynamic Table -->
                <div class="overflow-x-auto border border-gray-200 rounded-lg">
                    <table class="min-w-full text-sm text-left">
                        <thead class="bg-amber-100 text-amber-800">
                        <tr>
                            <th class="px-4 py-3 font-semibold border border-gray-300 w-12">#</th>
                            <th class="px-4 py-3 font-semibold border border-gray-300">Test ID <span class="text-red-800">*</span></th>
                            <th class="px-4 py-3 font-semibold border border-gray-300">Response Time (ms) <span class="text-red-800">*</span></th>
                            <th class="px-4 py-3 font-semibold border border-gray-300">Response Status <span class="text-red-800">*</span></th>
                            <th class="px-4 py-3 font-semibold border border-gray-300">Response Type <span class="text-red-800">*</span></th>
                            <th class="px-4 py-3 font-semibold border border-gray-300">Pay Type <span class="text-red-800">*</span></th>
                            <th class="px-4 py-3 font-semibold border border-gray-300 w-20">Action</th>
                        </tr>
                        </thead>
                        <tbody id="configTableBody" class="divide-y divide-gray-100">
                        <!-- Dynamic rows will be added here -->
                        </tbody>
                    </table>
                </div>

                <!-- Empty State -->
                <div id="emptyState" class="text-center py-10 text-gray-500">
                    <svg class="w-16 h-16 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <p class="text-base font-medium">No configurations added</p>
                    <p class="text-sm">Click "Add Row" to add test configurations</p>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-3 mt-6 pt-4 border-t">
                <button
                    id="resetBtn"
                    class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition text-sm">
                    Reset
                </button>
                <button
                    id="saveBtn"
                    class="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white rounded-lg shadow-sm hover:shadow-md transition text-sm">
                    Save Configuration
                </button>
            </div>
        </div>

        <!-- Existing Configurations -->
        <div class="bg-white rounded-lg border border-gray-200 p-6">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">Existing Configurations</h3>

            <div class="overflow-y-auto max-h-[400px] border border-gray-200 rounded-lg">
                <table class="min-w-full text-sm text-left table-auto relative border border-gray-300">
                    <thead class="bg-amber-100 text-amber-800 sticky-header">
                    <tr>
                        <th class="px-4 py-3 font-semibold border border-gray-300">Serial</th>
                        <th class="px-4 py-3 font-semibold border border-gray-300">ORG Code</th>
                        <th class="px-4 py-3 font-semibold border border-gray-300">Biller Error Code</th>
                        <th class="px-4 py-3 font-semibold border border-gray-300">CDSL Error Code</th>
                        <th class="px-4 py-3 font-semibold border border-gray-300">CDSL Error MSG</th>
                        <th class="px-4 py-3 font-semibold border border-gray-300">bKash Error Code</th>
                        <th class="px-4 py-3 font-semibold border border-gray-300">Pay Type</th>
                    </tr>
                    </thead>
                    <tbody id="existingConfigTable" class="divide-y divide-gray-100">
                    <tr><td colspan="9" class="text-center py-10 text-gray-500">
                            <div class="flex flex-col items-center justify-center space-y-3">
                                <div class="loader-spin"></div>
                                <p class="text-lg font-semibold text-gray-700">Loading configurations...</p>
                            </div>
                        </td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const SELECTED_ORG_CODE = @json($org_code ?? null);
        const SELECTED_ORG_TYPE = @json($orgType ?? null);
        if (SELECTED_ORG_TYPE) {
            $('#orgType').val(SELECTED_ORG_TYPE).trigger('change');
        }

    </script>
    <script>
        let org_code_p = @json($org_code ?? null);
        let orgData = [];
        let rowCounter = 0;
        let configurations = [];

        // Load organization data
        $.get("/getUATOrgGroupInfo", function(data) {

            orgData = data.map(org => ({
                id: org.ORG_CODE,
                text: org.ORG_NAME + ' - (' + org.ORG_CODE + ')'
            }));

            $('#orgCode').select2({
                placeholder: "Select Organization",
                width: '100%',
                data: orgData,
                allowClear: true
            });

            // ✅ Set selected org code after select2 initialized
            if (SELECTED_ORG_CODE) {
                $('#orgCode').val(SELECTED_ORG_CODE).trigger('change');
            }

        }).fail(function() {
            console.error('Failed to load organization data');
        });

        document.addEventListener("DOMContentLoaded", function() {
            const addRowBtn = document.getElementById('addRowBtn');
            const saveBtn = document.getElementById('saveBtn');
            const resetBtn = document.getElementById('resetBtn');
            const configTableBody = document.getElementById('configTableBody');
            const emptyState = document.getElementById('emptyState');
            const existingConfigTable = document.getElementById('existingConfigTable');

            let rowCounter = 0;
            // Existing data passed from controller
            let existingData = @json($mockData ?? []);
            /* =========================================
               🔥 Reusable Add Row Function
            ==========================================*/
            function addRow(data = null) {
                rowCounter++;
                const row = document.createElement('tr');
                row.className = 'hover:bg-gray-50 transition';
                row.id = `row-${rowCounter}`;

                row.innerHTML = `
            <td class="px-4 py-3 border text-center">${rowCounter}</td>
            <td class="px-4 py-3 border">
                <input type="text" id="testId-${rowCounter}" value="${data?.TEST_ID ?? ''}" class="w-full px-2 py-1 text-sm border rounded"/>
            </td>
            <td class="px-4 py-3 border">
                <input type="number" id="responseTime-${rowCounter}" value="${data?.RESPONSE_TIME ?? ''}" class="w-full px-2 py-1 text-sm border rounded"/>
            </td>
            <td class="px-4 py-3 border">
                <input type="number" id="responseStatus-${rowCounter}" value="${data?.RESPONSE_STATUS ?? ''}" class="w-full px-2 py-1 text-sm border rounded"/>
            </td>

            <td class="px-4 py-3 border">
                <select id="responseType-${rowCounter}" class="w-full px-2 py-1 text-sm border rounded">
                    <option value="Select">Select</option>
                    <option value="Success">Success</option>
                    <option value="Failed">Failed</option>
                    <option value="Data Not Found">Data Not Found</option>
                    <option value="">Empty</option>
                </select>
            </td>

            <td class="px-4 py-3 border">
                <select id="payType-${rowCounter}" class="w-full px-2 py-1 text-sm border rounded">
                    <option value="">Select</option>
                    <option value="CHK_BILL">CHK_BILL</option>
                    <option value="PAY_BILL">PAY_BILL</option>
                    <option value="QUR_BILL">QUR_BILL</option>
                </select>
            </td>
            <td class="px-4 py-3 border text-center">
                <button onclick="removeRow(${rowCounter})" class="px-2 py-1 bg-red-500 text-white text-xs rounded">Remove</button>
            </td>
        `;

                configTableBody.appendChild(row);
                emptyState.style.display = 'none';

                // Set dropdowns if data exists
                if (data) {
                    document.getElementById(`payType-${rowCounter}`).value = data.PAY_TYPE ?? '';
                    // For Pay Type: if null or empty, select "Empty"
                    const payTypeValue = data.RESPONSE_TYPE ?? '';
                    document.getElementById(`responseType-${rowCounter}`).value = payTypeValue === '' ? '' : payTypeValue;
                }
            }

            // Remove Row Function
            window.removeRow = function(rowId) {
                const row = document.getElementById(`row-${rowId}`);
                if (row) row.remove();
                if (configTableBody.children.length === 0) emptyState.style.display = 'block';
            }

            // 🔥 Load existing data into dynamic rows
            if (existingData.length > 0) {
                existingData.forEach(item => addRow(item));
                rowCounter = existingData.length;
            }

            /* =========================================
               ➕ Add Row Button
            ==========================================*/
            addRowBtn.addEventListener('click', function() {
                addRow();
            });

            /* =========================================
               ❌ Remove Row
            ==========================================*/
            window.removeRow = function(rowId) {
                const row = document.getElementById(`row-${rowId}`);
                if (row) row.remove();

                if (configTableBody.children.length === 0) {
                    emptyState.style.display = 'block';
                    rowCounter = 0;
                }
            };

            /* =========================================
               🔄 Reset
            ==========================================*/
            resetBtn.addEventListener('click', function() {

                configTableBody.innerHTML = '';
                emptyState.style.display = 'block';
                rowCounter = 0;

                document.getElementById('orgCode').value = '';
                $('#orgCode').val(null).trigger('change');
                document.getElementById('orgType').value = '';
                document.getElementById('payType').value = '';
            });

            /* =========================================
               💾 Save (UNCHANGED LOGIC)
            ==========================================*/
            saveBtn.addEventListener('click', function() {

                const orgCode = document.getElementById('orgCode').value;
                const orgType = document.getElementById('orgType').value;


                if (!orgCode  || !orgType) {
                    Swal.fire('Missing Information', 'Please select Org Code, ORG Type, Response Type, and Pay Type', 'warning');
                    return;
                }

                if (configTableBody.children.length === 0) {
                    Swal.fire('No Configurations', 'Please add at least one test configuration', 'warning');
                    return;
                }

                const configs = [];
                const rows = configTableBody.children;

                for (let i = 0; i < rows.length; i++) {
                    const rowId = rows[i].id.split('-')[1];

                    // Dynamic row inputs
                    const testId = document.getElementById(`testId-${rowId}`).value;
                    const responseTime = document.getElementById(`responseTime-${rowId}`).value;
                    const responseStatus = document.getElementById(`responseStatus-${rowId}`).value;
                    const responseType = document.getElementById(`responseType-${rowId}`).value;
                    const payTypeValue = document.getElementById(`payType-${rowId}`).value || ""; // handle Empty

                    // Validation
                    /*if (!testId || !responseTime || !responseStatus || !responseType) {
                        Swal.fire('Incomplete Data', 'Please fill all required fields', 'warning');
                        return;
                    }*/

                    // Push row data with static values
                    configs.push({
                        org_code: orgCode,                  // static from form
                        orgtype: orgType,                   // static from form
                        paytype: payTypeValue,              // from row select
                        testid: testId,                     // dynamic
                        responsetime: responseTime,         // dynamic
                        responsestatus: responseStatus,     // dynamic
                        responsetype: responseType,         // dynamic
                        extendedparameter1: "",             // static/empty
                        extendedparameter2: "",             // static/empty
                        extendedparameter3: "",             // static/empty
                        extendedparameter4: "",             // static/empty
                        extendedparameter5: "",             // static/empty
                        extendedparameter6: ""              // static/empty
                    });
                }

// Now payload is ready to send
                const payload = configs;

                console.log('Payload:', payload);


                fetch("{{ route('save-mock-config') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify(payload)
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire('Success!', 'Configuration saved successfully', 'success');
                            loadExistingConfigurations();
                        } else {
                            Swal.fire('Error!', data.message || 'Failed to save', 'error');
                        }
                    });
            });

            // Load Existing Configurations
            function loadExistingConfigurations() {
                fetch("{{ route('get-uatorg-error-map-data') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        org_code: org_code_p,
                        offset: 1,
                        limit: 50
                    })
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.data && data.data.length > 0) {
                            existingConfigTable.innerHTML = '';
                            data.data.forEach((item, index) => {
                                const responseStatusClass =
                                    item.RESPONSE_STATUS === "Success"
                                        ? "bg-green-100 text-green-800"
                                        : item.RESPONSE_STATUS === "Failed"
                                            ? "bg-yellow-100 text-yellow-800"
                                            : "";

                                existingConfigTable.innerHTML += `
                                <tr class="hover:bg-gray-50 transition">
                                    <td class="px-4 py-3 border border-gray-300">${index + 1}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.ORG_CODE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.BILLER_ERR_CODE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.CDSL_ERR_CODE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.CDSL_ERR_DESCR || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.SUCCESS_ERR_TYPE || ''}</td>
                                    <td class="px-4 py-3 border border-gray-300">${item.PAY_TYPE || ''}</td>
                                </tr>
                            `;
                            });
                        } else {
                            existingConfigTable.innerHTML = `
                            <tr><td colspan="9" class="text-center py-10 text-gray-500">
                                <p class="text-base font-medium">No configurations found</p>
                            </td></tr>
                        `;
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        existingConfigTable.innerHTML = `
                        <tr><td colspan="9" class="text-center py-10 text-red-500">
                            <p class="text-base font-medium">Error loading configurations</p>
                        </td></tr>
                    `;
                    });
            }

            // Delete Configuration
            window.deleteConfig = function(testId) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: `Delete configuration with Test ID: ${testId}?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Call delete API here
                        Swal.fire({
                            title: 'Deleted!',
                            text: 'Configuration has been deleted.',
                            icon: 'success',
                            timer: 1500,
                            showConfirmButton: false
                        });
                        loadExistingConfigurations();
                    }
                });
            };

            // Initial load
            loadExistingConfigurations();
        });
    </script>
@endpush