@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1>MYSOFT E-Invoice Integration</h1>
                <button class="btn btn-primary" onclick="testConnection()">
                    <i class="fas fa-plug"></i> Test Connection
                </button>
            </div>

            @if($integrations->count() > 0)
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-link"></i> Active Integrations
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Title</th>
                                    <th>Type</th>
                                    <th>URL</th>
                                    <th>Username</th>
                                    <th>Status</th>
                                    <th>Token Expires</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($integrations as $integration)
                                <tr>
                                    <td>{{ $integration->id }}</td>
                                    <td>{{ $integration->title }}</td>
                                    <td>
                                        <span class="badge badge-info">{{ $integration->type }}</span>
                                        <span class="badge badge-secondary">{{ $integration->tool }}</span>
                                    </td>
                                    <td>
                                        <small><code>{{ Str::limit($integration->url, 30) }}</code></small>
                                    </td>
                                    <td>{{ $integration->username }}</td>
                                    <td>
                                        @if($integration->is_active)
                                        <span class="badge badge-success">Active</span>
                                        @else
                                        <span class="badge badge-danger">Inactive</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($integration->token_expires_at)
                                        {{ $integration->token_expires_at->diffForHumans() }}
                                        @else
                                        <span class="text-muted">No token</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary"
                                            onclick="refreshToken({{ $integration->id }})">
                                            <i class="fas fa-sync"></i> Refresh Token
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            @else
            <div class="alert alert-warning">
                <i class="fas fa-exclamation-triangle"></i>
                No MYSOFT integrations found. Please create one in the database.
            </div>
            @endif

            <div class="card">
                <div class="card-header">
                    <i class="fas fa-file-invoice"></i> Create E-Invoice
                </div>
                <div class="card-body">
                    <form id="createInvoiceForm">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="sale_id">POS Sale ID *</label>
                                    <input type="number" class="form-control" id="sale_id" name="sale_id" required>
                                    <small class="form-text text-muted">
                                        Enter the POS sale ID to create e-invoice
                                    </small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="integration_id">Integration</label>
                                    <select class="form-control" id="integration_id" name="integration_id">
                                        <option value="">Use Default (Active)</option>
                                        @foreach($integrations as $integration)
                                        <option value="{{ $integration->id }}">
                                            {{ $integration->title }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-paper-plane"></i> Create E-Invoice
                        </button>
                    </form>
                </div>
            </div>

            <!-- Response Modal -->
            <div class="modal fade" id="responseModal" tabindex="-1">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Response</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <pre id="responseContent"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Test Connection
function testConnection(integrationId = null) {
    const payload = {};
    if (integrationId) {
        payload.integration_id = integrationId;
    }

    fetch('/api/mysoft/test-connection', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(payload)
    })
    .then(response => response.json())
    .then(data => {
        showResponse(data);
        if (data.success) {
            showToast('Connection successful!', 'success');
        } else {
            showToast('Connection failed: ' + data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('An error occurred', 'danger');
    });
}

// Refresh Token
function refreshToken(integrationId) {
    if (!confirm('Refresh token for this integration?')) return;

    fetch('/api/mysoft/refresh-token', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({ integration_id: integrationId })
    })
    .then(response => response.json())
    .then(data => {
        showResponse(data);
        if (data.success) {
            showToast('Token refreshed successfully!', 'success');
            setTimeout(() => location.reload(), 2000);
        } else {
            showToast('Failed to refresh token: ' + data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('An error occurred', 'danger');
    });
}

// Create Invoice
document.getElementById('createInvoiceForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const data = Object.fromEntries(formData.entries());

    fetch('/api/mysoft/create-invoice', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        showResponse(data);
        if (data.success) {
            showToast('E-invoice created successfully!', 'success');
            this.reset();
        } else {
            showToast('Failed: ' + data.message, 'danger');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('An error occurred', 'danger');
    });
});

// Show Response Modal
function showResponse(data) {
    document.getElementById('responseContent').textContent =
        JSON.stringify(data, null, 2);
    $('#responseModal').modal('show');
}

// Show Toast
function showToast(message, type = 'info') {
    const toast = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>
    `;
    document.querySelector('.container').insertAdjacentHTML('afterbegin', toast);

    setTimeout(() => {
        document.querySelector('.alert')?.remove();
    }, 5000);
}
</script>
@endpush

@endsection