@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1 class="h3 mb-4">
                <i class="bi bi-gear-fill me-2"></i>System MyTax/eInvoicing Settings
            </h1>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <div class="alert alert-info mb-4">
                <h6 class="alert-heading"><i class="bi bi-info-circle me-2"></i>About System MyTax Integration</h6>
                <p class="mb-0">Configure your platform's MyTax/eInvoicing API credentials here. These credentials will be used for all companies on your platform. Individual companies only need to provide their TIN (Tax Identification Number).</p>
            </div>

            <form action="{{ route('admin.system-mytax.update') }}" method="POST">
                @csrf
                @method('PUT')

                <!-- API Credentials Card -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-key me-2"></i>API Credentials (ERP Representative)</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label for="client_id" class="form-label">Client ID <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('client_id') is-invalid @enderror" 
                                           id="client_id" name="client_id" 
                                           value="{{ old('client_id', $settings->client_id) }}"
                                           placeholder="Enter your MyTax Client ID" required>
                                    <div class="form-text">Your MyTax/eInvoicing Client ID from LHDN portal</div>
                                    @error('client_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="client_secret_1" class="form-label">Client Secret 1 <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('client_secret_1') is-invalid @enderror" 
                                           id="client_secret_1" name="client_secret_1" 
                                           placeholder="{{ $settings->client_secret_1 ? 'Leave empty to keep current secret' : 'Enter Client Secret 1' }}"
                                           {{ !$settings->client_secret_1 ? 'required' : '' }}>
                                    <div class="form-text">First client secret from LHDN portal (encrypted storage)</div>
                                    @error('client_secret_1')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="client_secret_2" class="form-label">Client Secret 2 <span class="text-danger">*</span></label>
                                    <input type="password" class="form-control @error('client_secret_2') is-invalid @enderror" 
                                           id="client_secret_2" name="client_secret_2" 
                                           placeholder="{{ $settings->client_secret_2 ? 'Leave empty to keep current secret' : 'Enter Client Secret 2' }}"
                                           {{ !$settings->client_secret_2 ? 'required' : '' }}>
                                    <div class="form-text">Second client secret from LHDN portal (encrypted storage)</div>
                                    @error('client_secret_2')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="on_behalf_of" class="form-label">On Behalf Of (Optional)</label>
                                    <input type="text" class="form-control @error('on_behalf_of') is-invalid @enderror" 
                                           id="on_behalf_of" name="on_behalf_of" 
                                           value="{{ old('on_behalf_of', $settings->on_behalf_of) }}"
                                           placeholder="TIN of intermediary (if applicable)">
                                    <div class="form-text">Only if you're an intermediary submitting on behalf of taxpayers</div>
                                    @error('on_behalf_of')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sandbox_mode" class="form-label">Environment</label>
                                    <select class="form-select @error('sandbox_mode') is-invalid @enderror" 
                                            id="sandbox_mode" name="sandbox_mode">
                                        <option value="1" {{ old('sandbox_mode', $settings->sandbox_mode) ? 'selected' : '' }}>
                                            Sandbox (Testing)
                                        </option>
                                        <option value="0" {{ !old('sandbox_mode', $settings->sandbox_mode) ? 'selected' : '' }}>
                                            Production (Live)
                                        </option>
                                    </select>
                                    <div class="form-text">Use sandbox for testing before going live</div>
                                    @error('sandbox_mode')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Certificate Upload Section -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="certificate_path" class="form-label">Certificate Path (Optional)</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="certificate_path" 
                                               name="certificate_path" value="{{ old('certificate_path', $settings->certificate_path) }}"
                                               placeholder="Path to certificate file">
                                        <button type="button" class="btn btn-outline-secondary" onclick="uploadCertificate()">
                                            <i class="bi bi-upload"></i> Upload
                                        </button>
                                    </div>
                                    <div class="form-text">Upload .p12 or .pem certificate file if required</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="passphrase" class="form-label">Certificate Passphrase (Optional)</label>
                                    <input type="password" class="form-control" id="passphrase" 
                                           name="passphrase" 
                                           placeholder="{{ $settings->passphrase ? 'Leave empty to keep current passphrase' : 'Enter certificate passphrase' }}">
                                    <div class="form-text">Passphrase for the certificate (if required)</div>
                                </div>
                            </div>
                        </div>

                        <!-- Activation Toggle -->
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_active" 
                                       name="is_active" value="1" 
                                       {{ old('is_active', $settings->is_active) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <strong>Activate MyTax Integration</strong>
                                </label>
                            </div>
                            <div class="form-text">Enable this to allow companies to use MyTax/eInvoicing</div>
                        </div>

                        @if($settings->last_connection_test)
                            <div class="alert alert-info">
                                <i class="bi bi-clock-history me-2"></i>
                                Last connection test: {{ $settings->last_connection_test->diffForHumans() }}
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Default Settings Card -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-sliders me-2"></i>Default Settings</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="invoice_prefix" class="form-label">Invoice Number Prefix</label>
                                    <input type="text" class="form-control @error('invoice_prefix') is-invalid @enderror" 
                                           id="invoice_prefix" name="invoice_prefix" 
                                           value="{{ old('invoice_prefix', $settings->invoice_prefix) }}"
                                           placeholder="e.g., INV" required>
                                    <div class="form-text">Default prefix for invoice numbers</div>
                                    @error('invoice_prefix')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="default_tax_rate" class="form-label">Default Tax Rate (%)</label>
                                    <input type="number" class="form-control @error('default_tax_rate') is-invalid @enderror" 
                                           id="default_tax_rate" name="default_tax_rate" 
                                           value="{{ old('default_tax_rate', $settings->default_tax_rate) }}"
                                           step="0.01" min="0" max="100" required>
                                    <div class="form-text">Default SST/GST rate</div>
                                    @error('default_tax_rate')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Auto-Submit Invoices</label>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="auto_submit" 
                                               name="auto_submit" value="1" 
                                               {{ old('auto_submit', $settings->auto_submit) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="auto_submit">
                                            Automatically submit to MyTax
                                        </label>
                                    </div>
                                    <div class="form-text">If disabled, invoices will be saved as drafts</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Module Settings Card -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-puzzle me-2"></i>Module Integration</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">Select which modules can submit invoices to MyTax:</p>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="module_ecommerce" 
                                           name="enabled_modules[ecommerce]" 
                                           value="1"
                                           {{ old('enabled_modules.ecommerce', $settings->enabled_modules['ecommerce'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="module_ecommerce">
                                        <i class="bi bi-cart3 me-1"></i>E-Commerce
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="module_booking" 
                                           name="enabled_modules[booking]" 
                                           value="1"
                                           {{ old('enabled_modules.booking', $settings->enabled_modules['booking'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="module_booking">
                                        <i class="bi bi-calendar-check me-1"></i>Bookings
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="module_payment_forms" 
                                           name="enabled_modules[payment_forms]" 
                                           value="1"
                                           {{ old('enabled_modules.payment_forms', $settings->enabled_modules['payment_forms'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="module_payment_forms">
                                        <i class="bi bi-credit-card me-1"></i>Payment Forms
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           id="module_hr_payroll" 
                                           name="enabled_modules[hr_payroll]" 
                                           value="1"
                                           {{ old('enabled_modules.hr_payroll', $settings->enabled_modules['hr_payroll'] ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="module_hr_payroll">
                                        <i class="bi bi-people me-1"></i>HR Payroll
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Test Connection Result -->
                <div id="test-result" class="mb-3" style="display: none;">
                    <div class="alert" role="alert">
                        <span id="test-result-message"></span>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-outline-primary" id="test-connection-btn">
                        <i class="bi bi-wifi me-2"></i>Test Connection
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save me-2"></i>Save Settings
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Certificate Upload Modal -->
<div class="modal fade" id="certificateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Upload Certificate</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="certificateForm">
                    <div class="mb-3">
                        <label for="certificate_file" class="form-label">Select Certificate File</label>
                        <input type="file" class="form-control" id="certificate_file" 
                               accept=".p12,.pem,.crt,.cer" required>
                        <div class="form-text">Supported formats: .p12, .pem, .crt, .cer</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitCertificate()">Upload</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function testConnection(event) {
    event.preventDefault();
    const button = event.currentTarget || event.target;
    const originalText = button.innerHTML;
    
    // Get result display elements
    const resultDiv = document.getElementById('test-result');
    const resultAlert = resultDiv.querySelector('.alert');
    const resultMessage = document.getElementById('test-result-message');
    
    // Get current form values
    const clientId = document.getElementById('client_id').value;
    const clientSecret1 = document.getElementById('client_secret_1').value;
    const clientSecret2 = document.getElementById('client_secret_2').value;
    const sandboxMode = document.getElementById('sandbox_mode').checked ? 1 : 0;
    
    console.log('Testing connection with:', { clientId, clientSecret1: clientSecret1 ? '***' : '', clientSecret2: clientSecret2 ? '***' : '', sandboxMode });
    
    if (!clientId) {
        showResult('Please enter a Client ID first', 'warning');
        return;
    }
    
    if (!clientSecret1 || !clientSecret2) {
        showResult('Please enter both Client Secret 1 and Client Secret 2', 'warning');
        return;
    }
    
    // Show loading state
    button.disabled = true;
    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Testing...';
    resultDiv.style.display = 'none';
    
    // Make AJAX request
    fetch('{{ route("admin.system-mytax.test-connection") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            client_id: clientId,
            client_secret_1: clientSecret1,
            client_secret_2: clientSecret2,
            sandbox_mode: sandboxMode
        })
    })
    .then(response => {
        console.log('Response status:', response.status);
        if (!response.ok) {
            return response.text().then(text => {
                console.error('Response text:', text);
                throw new Error(`HTTP error! status: ${response.status}`);
            });
        }
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            showResult('✅ ' + data.message, 'success');
        } else {
            showResult('❌ ' + data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showResult('❌ Connection test failed: ' + error.message, 'danger');
    })
    .finally(() => {
        button.disabled = false;
        button.innerHTML = originalText;
    });
    
    function showResult(message, type) {
        resultAlert.className = 'alert alert-' + type;
        resultMessage.textContent = message;
        resultDiv.style.display = 'block';
    }
}

function uploadCertificate() {
    const modal = new bootstrap.Modal(document.getElementById('certificateModal'));
    modal.show();
}

function submitCertificate() {
    const fileInput = document.getElementById('certificate_file');
    const file = fileInput.files[0];
    
    if (!file) {
        alert('Please select a file');
        return;
    }
    
    const formData = new FormData();
    formData.append('certificate', file);
    
    fetch('{{ route("admin.system-mytax.upload-certificate") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('certificate_path').value = data.path;
            bootstrap.Modal.getInstance(document.getElementById('certificateModal')).hide();
            alert('Certificate uploaded successfully');
        } else {
            alert('Upload failed: ' + data.message);
        }
    })
    .catch(error => {
        alert('Upload failed: ' + error.message);
    });
}

// Add event listener when document is ready
document.addEventListener('DOMContentLoaded', function() {
    const testBtn = document.getElementById('test-connection-btn');
    if (testBtn) {
        console.log('Test connection button found, adding listener...');
        testBtn.addEventListener('click', function(e) {
            console.log('Test button clicked!');
            testConnection(e);
        });
    } else {
        console.error('Test connection button not found!');
    }
});
</script>
@endpush