@extends('admin.layouts.app')

@section('title', 'Courier Settings')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Courier Settings</h1>
        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Configure courier services and API credentials</p>
    </div>

    @if(session('success'))
    <div class="bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-800 text-emerald-700 dark:text-emerald-400 px-4 py-3 rounded-xl">
        {{ session('success') }}
    </div>
    @endif

    <!-- Grid Layout for Couriers -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Steadfast Courier -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <div class="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-lg flex items-center justify-center mr-4">
                            <img src="{{ asset('images/steadfast-logo.png') }}" alt="Steadfast" class="max-w-full max-h-full object-contain p-2">
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Steadfast</h3>
                            <span id="steadfast-status" class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 mt-1">
                                <i data-lucide="x-circle" class="w-3 h-3 mr-1"></i> Not Connected
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Configuration Form -->
                <div id="steadfast-form" class="{{ $settings['steadfast_connected'] ? 'hidden' : '' }}">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">API Key</label>
                            <input type="text" id="steadfast_api_key" value="{{ $settings['steadfast_api_key'] }}" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Secret Key</label>
                            <input type="password" id="steadfast_secret_key" value="{{ $settings['steadfast_secret_key'] }}" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                        </div>
                        <button type="button" onclick="testSteadfast()" 
                            class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            <i data-lucide="check-circle" class="w-4 h-4 inline mr-2"></i>
                            Test Connection
                        </button>
                    </div>
                </div>

                <!-- Connected View -->
                <div id="steadfast-connected" class="{{ $settings['steadfast_connected'] ? '' : 'hidden' }}">
                    <div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-xl p-4 mb-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-emerald-800 dark:text-emerald-400">Current Balance</p>
                                <p id="steadfast-balance" class="text-2xl font-bold text-emerald-900 dark:text-emerald-300">৳ 0.00</p>
                            </div>
                            <i data-lucide="wallet" class="w-12 h-12 text-emerald-600 dark:text-emerald-400"></i>
                        </div>
                    </div>
                    <button type="button" onclick="editSteadfast()" 
                        class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <i data-lucide="edit" class="w-4 h-4 inline mr-2"></i>
                        Edit Credentials
                    </button>
                </div>
            </div>
        </div>

        <!-- Pathao Courier -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <div class="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-lg flex items-center justify-center mr-4">
                            <img src="{{ asset('images/Pathao_Logo-.svg') }}" alt="Pathao" class="max-w-full max-h-full object-contain p-2">
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-slate-800 dark:text-white">Pathao</h3>
                            <span id="pathao-status" class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 mt-1">
                                <i data-lucide="x-circle" class="w-3 h-3 mr-1"></i> Not Connected
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Configuration Form -->
                <div id="pathao-form" class="{{ $settings['pathao_connected'] ? 'hidden' : '' }}">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Client ID</label>
                            <input type="text" id="pathao_client_id" value="{{ $settings['pathao_client_id'] }}" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Client Secret</label>
                            <input type="password" id="pathao_client_secret" value="{{ $settings['pathao_client_secret'] }}" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Username</label>
                            <input type="text" id="pathao_username" value="{{ $settings['pathao_username'] }}" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Password</label>
                            <input type="password" id="pathao_password" value="{{ $settings['pathao_password'] }}" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                        </div>
                        <button type="button" onclick="testPathao()" 
                            class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            <i data-lucide="check-circle" class="w-4 h-4 inline mr-2"></i>
                            Test Connection
                        </button>
                    </div>
                </div>

                <!-- Store Selection -->
                <div id="pathao-stores" class="hidden">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Select Store</label>
                            <select id="pathao_store_select" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                                <option value="">Choose a store...</option>
                            </select>
                        </div>
                        <button type="button" onclick="savePathaoStore()" 
                            class="px-6 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
                            <i data-lucide="save" class="w-4 h-4 inline mr-2"></i>
                            Save as Primary Store
                        </button>
                    </div>
                </div>

                <!-- Connected View -->
                <div id="pathao-connected" class="{{ $settings['pathao_connected'] && $settings['pathao_store_id'] ? '' : 'hidden' }}">
                    <div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-xl p-4 mb-4">
                        <div class="space-y-2">
                            <p class="text-sm font-medium text-emerald-800 dark:text-emerald-400">Primary Store</p>
                            <p id="pathao-store-name" class="text-lg font-semibold text-emerald-900 dark:text-emerald-300">Store Name</p>
                            <p id="pathao-store-id" class="text-sm text-emerald-700 dark:text-emerald-500">Store ID: {{ $settings['pathao_store_id'] }}</p>
                        </div>
                    </div>
                    <button type="button" onclick="editPathao()" 
                        class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <i data-lucide="edit" class="w-4 h-4 inline mr-2"></i>
                        Edit Credentials
                    </button>
                </div>
            </div>
        </div>

        <!-- RedX Courier -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between mb-6">
                    <div class="flex items-center">
                        <div class="w-16 h-16 bg-slate-100 dark:bg-slate-700 rounded-lg flex items-center justify-center mr-4">
                            <img src="{{ asset('images/redx-logo.png') }}" alt="RedX" class="max-w-full max-h-full object-contain p-2">
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-slate-800 dark:text-white">RedX</h3>
                            <span id="redx-status" class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400 mt-1">
                                <i data-lucide="x-circle" class="w-3 h-3 mr-1"></i> Not Connected
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Configuration Form -->
                <div id="redx-form" class="{{ $settings['redx_connected'] ? 'hidden' : '' }}">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">API Token</label>
                            <input type="password" id="redx_api_token" value="{{ $settings['redx_api_token'] }}" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                        </div>
                        <button type="button" onclick="testRedX()" 
                            class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
                            <i data-lucide="check-circle" class="w-4 h-4 inline mr-2"></i>
                            Test Connection
                        </button>
                    </div>
                </div>

                <!-- Store Selection -->
                <div id="redx-stores" class="hidden">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Select Store</label>
                            <select id="redx_store_select" 
                                class="w-full px-4 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-slate-900 dark:text-white">
                                <option value="">Choose a store...</option>
                            </select>
                        </div>
                        <button type="button" onclick="saveRedXStore()" 
                            class="px-6 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors">
                            <i data-lucide="save" class="w-4 h-4 inline mr-2"></i>
                            Save as Primary Store
                        </button>
                    </div>
                </div>

                <!-- Connected View -->
                <div id="redx-connected" class="{{ $settings['redx_connected'] && $settings['redx_store_id'] ? '' : 'hidden' }}">
                    <div class="bg-emerald-50 dark:bg-emerald-900/30 rounded-xl p-4 mb-4">
                        <div class="space-y-2">
                            <p class="text-sm font-medium text-emerald-800 dark:text-emerald-400">Primary Store</p>
                            <p id="redx-store-name" class="text-lg font-semibold text-emerald-900 dark:text-emerald-300">Store Name</p>
                            <p id="redx-store-id" class="text-sm text-emerald-700 dark:text-emerald-500">Store ID: {{ $settings['redx_store_id'] }}</p>
                        </div>
                    </div>
                    <button type="button" onclick="editRedX()" 
                        class="px-4 py-2 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        <i data-lucide="edit" class="w-4 h-4 inline mr-2"></i>
                        Edit Credentials
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Steadfast Functions
function testSteadfast() {
    const apiKey = document.getElementById('steadfast_api_key').value;
    const secretKey = document.getElementById('steadfast_secret_key').value;

    if (!apiKey || !secretKey) {
        alert('Please enter both API Key and Secret Key');
        return;
    }

    fetch('{{ route("admin.couriers.steadfast.test") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ api_key: apiKey, secret_key: secretKey })
    })
    .then(r => {
        if (!r.ok) throw new Error('HTTP error ' + r.status);
        return r.json();
    })
    .then(data => {
        if (data.success) {
            document.getElementById('steadfast-form').classList.add('hidden');
            document.getElementById('steadfast-connected').classList.remove('hidden');
            document.getElementById('steadfast-balance').textContent = '৳ ' + (data.balance || '0.00');
            document.getElementById('steadfast-status').innerHTML = '<i data-lucide="check-circle" class="w-3 h-3 mr-1"></i> Connected';
            document.getElementById('steadfast-status').className = 'inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 mt-1';
            if (typeof reinitIcons !== 'undefined') reinitIcons();
            alert('Connected successfully!');
        } else {
            alert('Connection failed: ' + data.message);
        }
    })
    .catch(e => {
        console.error('Error:', e);
        alert('Error: ' + e.message);
    });
}

function editSteadfast() {
    document.getElementById('steadfast-form').classList.remove('hidden');
    document.getElementById('steadfast-connected').classList.add('hidden');
}

// Pathao Functions
function testPathao() {
    const clientId = document.getElementById('pathao_client_id').value;
    const clientSecret = document.getElementById('pathao_client_secret').value;
    const username = document.getElementById('pathao_username').value;
    const password = document.getElementById('pathao_password').value;

    if (!clientId || !clientSecret || !username || !password) {
        alert('Please fill in all fields');
        return;
    }

    fetch('{{ route("admin.couriers.pathao.test") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ client_id: clientId, client_secret: clientSecret, username, password })
    })
    .then(r => {
        if (!r.ok) throw new Error('HTTP error ' + r.status);
        return r.json();
    })
    .then(data => {
        if (data.success && data.data) {
            const select = document.getElementById('pathao_store_select');
            select.innerHTML = '<option value="">Choose a store...</option>';
            data.data.forEach(store => {
                select.innerHTML += `<option value="${store.store_id}" data-name="${store.store_name}">${store.store_name} (ID: ${store.store_id})</option>`;
            });
            document.getElementById('pathao-form').classList.add('hidden');
            document.getElementById('pathao-stores').classList.remove('hidden');
        } else {
            alert('Connection failed: ' + data.message);
        }
    })
    .catch(e => {
        console.error('Error:', e);
        alert('Error: ' + e.message);
    });
}

function savePathaoStore() {
    const select = document.getElementById('pathao_store_select');
    const storeId = select.value;
    const storeName = select.options[select.selectedIndex].dataset.name;

    if (!storeId) {
        alert('Please select a store');
        return;
    }

    fetch('{{ route("admin.couriers.pathao.save-store") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ store_id: storeId })
    })
    .then(r => {
        if (!r.ok) throw new Error('HTTP error ' + r.status);
        return r.json();
    })
    .then(data => {
        if (data.success) {
            document.getElementById('pathao-stores').classList.add('hidden');
            document.getElementById('pathao-connected').classList.remove('hidden');
            document.getElementById('pathao-store-name').textContent = storeName;
            document.getElementById('pathao-store-id').textContent = 'Store ID: ' + storeId;
            document.getElementById('pathao-status').innerHTML = '<i data-lucide="check-circle" class="w-3 h-3 mr-1"></i> Connected';
            document.getElementById('pathao-status').className = 'inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 mt-1';
            if (typeof reinitIcons !== 'undefined') reinitIcons();
            alert('Store saved successfully!');
        } else {
            alert('Failed to save store: ' + data.message);
        }
    })
    .catch(e => {
        console.error('Error:', e);
        alert('Error: ' + e.message);
    });
}

function editPathao() {
    document.getElementById('pathao-form').classList.remove('hidden');
    document.getElementById('pathao-connected').classList.add('hidden');
}

// RedX Functions
function testRedX() {
    const apiToken = document.getElementById('redx_api_token').value;

    if (!apiToken) {
        alert('Please enter API Token');
        return;
    }

    fetch('{{ route("admin.couriers.redx.test") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ api_token: apiToken })
    })
    .then(r => {
        if (!r.ok) throw new Error('HTTP error ' + r.status);
        return r.json();
    })
    .then(data => {
        console.log('RedX Full Response:', data); // Debug log
        console.log('RedX Stores Data:', data.data); // Debug log
        console.log('RedX Raw Response:', data.raw_response); // Debug log
        
        if (data.success) {
            if (!data.data || data.data.length === 0) {
                console.warn('No stores found in response');
                alert('Connection successful but no stores found.\n\nPlease check:\n1. Your RedX account has stores configured\n2. API token has proper permissions\n3. Check browser console for response details');
                return;
            }
            
            console.log('Processing stores:', data.data);
            const select = document.getElementById('redx_store_select');
            select.innerHTML = '<option value="">Choose a store...</option>';
            
            data.data.forEach((store, index) => {
                console.log(`Store ${index}:`, store);
                // Try multiple possible field names
                const storeId = store.id || store.store_id || store.pickup_store_id;
                const storeName = store.name || store.store_name || store.pickup_store_name || `Store ${storeId}`;
                
                if (storeId) {
                    select.innerHTML += `<option value="${storeId}" data-name="${storeName}">${storeName} (ID: ${storeId})</option>`;
                } else {
                    console.warn('Store missing ID:', store);
                }
            });
            
            if (select.options.length > 1) {
                document.getElementById('redx-form').classList.add('hidden');
                document.getElementById('redx-stores').classList.remove('hidden');
                document.getElementById('redx-status').innerHTML = '<i data-lucide="check-circle" class="w-3 h-3 mr-1"></i> Connected';
                document.getElementById('redx-status').className = 'inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 mt-1';
                if (typeof reinitIcons !== 'undefined') reinitIcons();
            } else {
                alert('No valid stores found. Check console for details.');
            }
        } else {
            const errorMsg = data.message || 'Connection failed';
            const details = data.error_response ? JSON.stringify(data.error_response, null, 2) : '';
            console.error('RedX Error:', errorMsg, data.error_response);
            alert('Connection failed: ' + errorMsg + (details ? '\n\nDetails: ' + details : ''));
        }
    })
    .catch(e => {
        console.error('Error:', e);
        alert('Error: ' + e.message);
    });
}

function saveRedXStore() {
    const select = document.getElementById('redx_store_select');
    const storeId = select.value;
    const storeName = select.options[select.selectedIndex].dataset.name;

    if (!storeId) {
        alert('Please select a store');
        return;
    }

    fetch('{{ route("admin.couriers.redx.save-store") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ store_id: storeId })
    })
    .then(r => {
        if (!r.ok) throw new Error('HTTP error ' + r.status);
        return r.json();
    })
    .then(data => {
        if (data.success) {
            document.getElementById('redx-stores').classList.add('hidden');
            document.getElementById('redx-connected').classList.remove('hidden');
            document.getElementById('redx-store-name').textContent = storeName;
            document.getElementById('redx-store-id').textContent = 'Store ID: ' + storeId;
            document.getElementById('redx-status').innerHTML = '<i data-lucide="check-circle" class="w-3 h-3 mr-1"></i> Connected';
            document.getElementById('redx-status').className = 'inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400 mt-1';
            if (typeof reinitIcons !== 'undefined') reinitIcons();
            alert('Store saved successfully!');
        } else {
            alert('Failed to save store: ' + data.message);
        }
    })
    .catch(e => {
        console.error('Error:', e);
        alert('Error: ' + e.message);
    });
}

function editRedX() {
    document.getElementById('redx-form').classList.remove('hidden');
    document.getElementById('redx-connected').classList.add('hidden');
}

// Initialize icons on page load
document.addEventListener('DOMContentLoaded', function() {
    if (typeof reinitIcons !== 'undefined') reinitIcons();
});
</script>
@endsection