@extends('layouts.master')
@section('title', 'Configure Mock ORG')
@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 Mock 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>
        let orgData = [];
        let rowCounter = 0;         // ✅ Fixed: removed duplicate declaration
        let configurations = [];

        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');

        // ✅ Fixed: existingData declared before use
        let existingData = @json($mockData ?? []);

        /* =========================================
           📦 Load Organization Dropdown
        ==========================================*/
        $.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
            });

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

        /* =========================================
           🔁 Org Code Change Trigger
        ==========================================*/
        $('#orgCode').on('change', function() {
            const selectedOrgCode = $(this).val();

            // ✅ Fixed: clear table on every change including clear
            configTableBody.innerHTML = '';
            emptyState.style.display = 'block';
            rowCounter = 0;

            if (selectedOrgCode) {
                loadORGErrorCode(selectedOrgCode);
                loadExistingConfigurations(selectedOrgCode);
            } else {
                // ✅ Fixed: clear existing config table when org is cleared
                existingConfigTable.innerHTML = `
                <tr><td colspan="7" class="text-center py-10 text-gray-500">
                    <p class="text-base font-medium">Select an organization to load configurations</p>
                </td></tr>
            `;
            }
        });

        /* =========================================
           📋 Load ORG Error Code Table
        ==========================================*/
        function loadORGErrorCode(orgCode) {
            // ✅ Fixed: show loading state before fetch
            existingConfigTable.innerHTML = `
            <tr><td colspan="7" 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-sm font-semibold text-gray-700">Loading...</p>
                </div>
            </td></tr>
        `;

            fetch("{{ route('get-uatorg-error-map-data') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({
                    org_code: orgCode,
                    offset: 1,
                    limit: 50
                })
            })
                .then(res => res.json())
                .then(data => {
                    if (data.data && data.data.length > 0) {
                        existingConfigTable.innerHTML = '';
                        data.data.forEach((item, index) => {
                            // ✅ Fixed: colspan corrected to 7 matching actual columns
                            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="7" 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="7" class="text-center py-10 text-red-500">
                    <p class="text-base font-medium">Error loading configurations</p>
                </td></tr>
            `;
                });
        }

        /* =========================================
           📥 Load Existing Mock Config into Rows
        ==========================================*/
        function loadExistingConfigurations(orgCode) {
            const url = `{{ url('/make/extgis/mock/org') }}/${orgCode}`;

            // ✅ Fixed: show loading in configTableBody while fetching
            configTableBody.innerHTML = `
            <tr><td colspan="7" class="text-center py-6 text-gray-500">
                <div class="flex flex-col items-center justify-center space-y-2">
                    <div class="loader-spin"></div>
                    <p class="text-sm text-gray-600">Loading configurations...</p>
                </div>
            </td></tr>
        `;
            emptyState.style.display = 'none';

            fetch(url, {
                method: "GET",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                }
            })
                .then(res => res.json())
                .then(data => {
                    configTableBody.innerHTML = ''; // ✅ Fixed: clear loading row before adding data
                    rowCounter = 0;

                    if (data.data && data.data.length > 0) {
                        existingData = data.data;
                        existingData.forEach(item => addRow(item));
                        emptyState.style.display = 'none';
                    } else {
                        emptyState.style.display = 'block';
                        existingData = [];
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    configTableBody.innerHTML = '';
                    emptyState.style.display = 'block';
                });
        }

        /* =========================================
           🔥 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 ?? ''}"
                    placeholder="Enter Test ID"
                    class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500"/>
            </td>
            <td class="px-4 py-3 border">
                <input
                    type="number"
                    id="responseTime-${rowCounter}"
                    value="${data?.RESPONSE_TIME ?? ''}"
                    placeholder="e.g. 200"
                    class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500"/>
            </td>
            <td class="px-4 py-3 border">
                <input
                    type="number"
                    id="responseStatus-${rowCounter}"
                    value="${data?.RESPONSE_STATUS ?? ''}"
                    placeholder="e.g. 200"
                    class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500"/>
            </td>
            <td class="px-4 py-3 border">
                <select id="responseType-${rowCounter}" class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500">
                    <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 border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500">
                    <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="inline-flex items-center px-2 py-1 bg-red-500 hover:bg-red-600 text-white text-xs rounded 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="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </td>
        `;

            configTableBody.appendChild(row);

            // ✅ Fixed: set dropdown values AFTER appending to DOM
            if (data) {
                const payTypeEl = document.getElementById(`payType-${rowCounter}`);
                const responseTypeEl = document.getElementById(`responseType-${rowCounter}`);

                if (payTypeEl) payTypeEl.value = data.PAY_TYPE ?? '';
                const payTypeValue = data.RESPONSE_TYPE ?? '';
                document.getElementById(`responseType-${rowCounter}`).value = payTypeValue === '' ? '' : payTypeValue;
            }
        }

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

        /* =========================================
           ❌ 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() {
            Swal.fire({
                title: 'Are you sure?',
                text: 'This will clear all configurations!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, reset it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    configTableBody.innerHTML = '';
                    emptyState.style.display = 'block';
                    rowCounter = 0;

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

                    // ✅ Fixed: added swal confirmation on success
                    Swal.fire({
                        title: 'Reset!',
                        text: 'All configurations have been cleared.',
                        icon: 'success',
                        timer: 1500,
                        showConfirmButton: false
                    });
                }
            });
        });

        /* =========================================
           💾 Save
        ==========================================*/
        saveBtn.addEventListener('click', function() {
            const orgCode = document.getElementById('orgCode').value;
            const orgType = document.getElementById('orgType').value;

            // Validation
            if (!orgCode || !orgType) {
                Swal.fire('Missing Information', 'Please select Org Code and ORG 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;
            let hasError = false;

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

                const testId       = document.getElementById(`testId-${rowId}`).value.trim();
                const responseTime = document.getElementById(`responseTime-${rowId}`).value.trim();
                const responseStatus = document.getElementById(`responseStatus-${rowId}`).value.trim();
                const responseType = document.getElementById(`responseType-${rowId}`).value;
                const payTypeValue = document.getElementById(`payType-${rowId}`).value;

                // ✅ Fixed: proper row-level validation
                if (!testId || !responseStatus || !responseType || !payTypeValue) {
                    hasError = true;
                    break;
                }

                configs.push({
                    org_code:            orgCode,
                    orgtype:             orgType,
                    paytype:             payTypeValue,
                    testid:              testId,
                    responsetime:        responseTime,
                    responsestatus:      responseStatus,
                    responsetype:        responseType,
                    extendedparameter1:  "",
                    extendedparameter2:  "",
                    extendedparameter3:  "",
                    extendedparameter4:  "",
                    extendedparameter5:  "",
                    extendedparameter6:  ""
                });
            }

            // ✅ Fixed: show error outside loop
            if (hasError) {
                Swal.fire('Incomplete Data', 'Please fill all required fields in every row', 'warning');
                return;
            }

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

            // Show loading
            Swal.fire({
                title: 'Saving...',
                text: 'Please wait while we save your configuration',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });

            fetch("{{ route('save-mock-config') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify(configs)
            })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: 'Configuration saved successfully',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });

                        // ✅ Fixed: reload configurations after save
                        const selectedOrgCode = document.getElementById('orgCode').value;
                        if (selectedOrgCode) {
                            loadExistingConfigurations(selectedOrgCode);
                        }
                    } else {
                        Swal.fire('Error!', data.message || 'Failed to save', 'error');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire('Error!', 'An error occurred while saving', 'error');
                });
        });

        /* =========================================
           🚀 Initial Load
        ==========================================*/
        // ✅ Fixed: load initial existingData only if mockData is available
        if (existingData.length > 0) {
            existingData.forEach(item => addRow(item));
            emptyState.style.display = 'none';
        }
    </script>
@endpush