@extends('layouts.app')
@section('title', 'Create SMS Gateway')
@section('description', 'Configure a new SMS gateway')
@section('content')

    <!-- Page Content -->
    <main class="p-8">
        <div class="max-w-5xl mx-auto">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('admin.sms_gateway.index') }}" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Back to SMS Gateways
                </a>
            </div>

            <!-- Form Card -->
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden">
                <form action="{{ route('admin.sms_gateway.store') }}" method="POST">
                    @csrf

                    <!-- Validation Errors -->
                    @if ($errors->any())
                    <div class="m-8 mb-0 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-red-600 dark:text-red-400 mt-0.5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <div class="flex-1">
                                <h3 class="text-sm font-medium text-red-800 dark:text-red-400">There were {{ $errors->count() }} error(s) with your submission:</h3>
                                <ul class="mt-2 text-sm text-red-700 dark:text-red-300 list-disc list-inside space-y-1">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif

                    <!-- Form Body -->
                    <div class="p-8 space-y-8">
                        <!-- Basic Information -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Basic Information
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Gateway Name <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="name" id="name" value="{{ old('name') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="e.g., HRSoft Bangladesh" required>
                                    @error('name')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="display_name" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Display Name <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="display_name" id="display_name" value="{{ old('display_name') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="e.g., HRSoft SMS Gateway" required>
                                    @error('display_name')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="driver" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Gateway Driver <span class="text-red-500">*</span>
                                    </label>
                                    <select name="driver" id="driver" required
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200">
                                        <option value="">Select Driver</option>
                                        @foreach($drivers as $key => $value)
                                            <option value="{{ $key }}" {{ old('driver') === $key ? 'selected' : '' }}>{{ $value }}</option>
                                        @endforeach
                                    </select>
                                    @error('driver')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label for="description" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Description
                                    </label>
                                    <textarea name="description" id="description" rows="3"
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Brief description of this SMS gateway">{{ old('description') }}</textarea>
                                    @error('description')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- API Configuration -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                                API Configuration
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="api_key" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        API Key <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" name="api_key" id="api_key" value="{{ old('api_key') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Enter API key" required>
                                    @error('api_key')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="api_secret" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        API Secret
                                    </label>
                                    <input type="password" name="api_secret" id="api_secret" value="{{ old('api_secret') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Enter API secret (if required)">
                                    @error('api_secret')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="sender_id" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Sender ID / Phone Number
                                    </label>
                                    <input type="text" name="sender_id" id="sender_id" value="{{ old('sender_id') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="e.g., +1234567890 or YourBrand">
                                    @error('sender_id')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="api_url" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        API URL
                                    </label>
                                    <input type="url" name="api_url" id="api_url" value="{{ old('api_url') }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="Optional: Custom API endpoint">
                                    @error('api_url')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="md:col-span-2">
                                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Additional Configuration (JSON)
                                    </label>
                                    <div class="space-y-2">
                                        <div class="flex items-center space-x-2">
                                            <input type="text" id="config_key" 
                                                class="flex-1 px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white" 
                                                placeholder="Key (e.g., customer_id)">
                                            <input type="text" id="config_value" 
                                                class="flex-1 px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white" 
                                                placeholder="Value">
                                            <button type="button" onclick="addConfigPair()" 
                                                class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                                                Add
                                            </button>
                                        </div>
                                        <div id="config_pairs" class="space-y-1 text-sm"></div>
                                        <input type="hidden" name="config" id="config_json" value="{{ old('config', '{}') }}">
                                    </div>
                                    <p class="mt-2 text-xs text-gray-500">For HRSoft, add: customer_id</p>
                                </div>
                            </div>
                        </div>

                        <!-- Country & Priority Configuration -->
                        <div>
                            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Country & Priority Configuration
                            </h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div class="md:col-span-2">
                                    <label for="country_codes_input" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Country Codes <span class="text-red-500">*</span>
                                    </label>
                                    <div class="space-y-2">
                                        <div class="flex items-center space-x-2">
                                            <span class="text-gray-500 dark:text-gray-400">+</span>
                                            <input type="text" id="country_codes_input" 
                                                class="flex-1 px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 text-gray-900 dark:text-white" 
                                                placeholder="e.g., 880 (for Bangladesh), 1 (for USA/Canada), 91 (for India)">
                                            <button type="button" onclick="addCountryCode()" 
                                                class="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors">
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                                                </svg>
                                            </button>
                                        </div>
                                        <div id="country_codes_display" class="flex flex-wrap gap-2">
                                            <!-- Country codes will be displayed here -->
                                        </div>
                                        <div id="country_codes_hidden"></div>
                                    </div>
                                    <p class="mt-2 text-xs text-gray-500">Common codes: Bangladesh (880), USA/Canada (1), UK (44), India (91), Pakistan (92)</p>
                                    @error('country_codes')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="priority" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        Priority (0-100)
                                    </label>
                                    <input type="number" name="priority" id="priority" value="{{ old('priority', 50) }}" 
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200" 
                                        placeholder="50" min="0" max="100">
                                    <p class="mt-1 text-xs text-gray-500">Higher priority = preferred selection (100 is highest)</p>
                                    @error('priority')
                                    <p class="mt-2 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="method" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                        HTTP Method
                                    </label>
                                    <select name="method" id="method"
                                        class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900 dark:text-white transition-colors duration-200">
                                        <option value="POST" {{ old('method') === 'POST' ? 'selected' : '' }}>POST</option>
                                        <option value="GET" {{ old('method') === 'GET' ? 'selected' : '' }}>GET</option>
                                    </select>
                                </div>

                                <div class="md:col-span-2 space-y-3">
                                    <div class="flex items-center">
                                        <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                                            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                        <label for="is_active" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                                            Activate this SMS gateway
                                        </label>
                                    </div>

                                    <div class="flex items-center">
                                        <input type="checkbox" name="is_default" id="is_default" value="1" {{ old('is_default') ? 'checked' : '' }}
                                            class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                                        <label for="is_default" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
                                            Set as default fallback gateway
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Footer -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-8 py-4 flex justify-end space-x-3">
                        <a href="{{ route('admin.sms_gateway.index') }}" class="px-6 py-3 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 font-semibold rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200">
                            Cancel
                        </a>
                        <button type="submit" class="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200">
                            <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Create SMS Gateway
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </main>

    <!-- JavaScript -->
    <script>
        let countryCodes = [];
        let configData = {};

        // Add country code
        function addCountryCode() {
            const input = document.getElementById('country_codes_input');
            const code = input.value.trim().replace(/\+/g, '');
            
            if (code && /^\d{1,3}$/.test(code)) {
                if (!countryCodes.includes(code)) {
                    countryCodes.push(code);
                    updateCountryCodesDisplay();
                    input.value = '';
                }
            } else {
                alert('Please enter a valid country code (1-3 digits)');
            }
        }

        // Remove country code
        function removeCountryCode(code) {
            countryCodes = countryCodes.filter(c => c !== code);
            updateCountryCodesDisplay();
        }

        // Update country codes display
        function updateCountryCodesDisplay() {
            const display = document.getElementById('country_codes_display');
            const hidden = document.getElementById('country_codes_hidden');
            
            display.innerHTML = '';
            hidden.innerHTML = '';
            
            countryCodes.forEach(code => {
                // Display badge
                const badge = document.createElement('span');
                badge.className = 'px-3 py-1 bg-blue-500 text-white rounded-full text-sm flex items-center space-x-2';
                badge.innerHTML = `
                    <span>+${code}</span>
                    <button type="button" onclick="removeCountryCode('${code}')" class="hover:text-red-200">
                        <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"></path>
                        </svg>
                    </button>
                `;
                display.appendChild(badge);
                
                // Hidden input
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'country_codes[]';
                input.value = code;
                hidden.appendChild(input);
            });
        }

        // Add config pair
        function addConfigPair() {
            const keyInput = document.getElementById('config_key');
            const valueInput = document.getElementById('config_value');
            const key = keyInput.value.trim();
            const value = valueInput.value.trim();
            
            if (key && value) {
                configData[key] = value;
                updateConfigDisplay();
                keyInput.value = '';
                valueInput.value = '';
                document.getElementById('config_json').value = JSON.stringify(configData);
            }
        }

        // Remove config pair
        function removeConfigPair(key) {
            delete configData[key];
            updateConfigDisplay();
            document.getElementById('config_json').value = JSON.stringify(configData);
        }

        // Update config display
        function updateConfigDisplay() {
            const display = document.getElementById('config_pairs');
            display.innerHTML = '';
            
            Object.entries(configData).forEach(([key, value]) => {
                const div = document.createElement('div');
                div.className = 'flex items-center justify-between px-3 py-2 bg-gray-100 dark:bg-gray-700 rounded';
                div.innerHTML = `
                    <span class="text-gray-900 dark:text-white"><strong>${key}:</strong> ${value}</span>
                    <button type="button" onclick="removeConfigPair('${key}')" class="text-red-600 hover:text-red-800">
                        <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"></path>
                        </svg>
                    </button>
                `;
                display.appendChild(div);
            });
        }

        // Enter key support
        document.getElementById('country_codes_input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                addCountryCode();
            }
        });
    </script>

@endsection