@extends('root')
@section('title', 'Email Gateway Configuration')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Email Gateway Configuration',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Email Gateway'
    ])

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="ti ti-mail-cog me-2"></i>Konfigurasi SMTP Email
                    </h5>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="ti ti-check me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="ti ti-alert-circle me-2"></i>{{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('admin.email-config.store') }}" method="POST" id="email-config-form">
                        @csrf
                        
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label fw-semibold">SMTP Host <span class="text-danger">*</span></label>
                                <input type="text" name="smtp_host" class="form-control @error('smtp_host') is-invalid @enderror" 
                                    value="{{ old('smtp_host', $config->smtp_host ?? '') }}" 
                                    placeholder="smtp.gmail.com" required>
                                @error('smtp_host')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-semibold">SMTP Port <span class="text-danger">*</span></label>
                                <input type="number" name="smtp_port" class="form-control @error('smtp_port') is-invalid @enderror" 
                                    value="{{ old('smtp_port', $config->smtp_port ?? 587) }}" 
                                    placeholder="587" required>
                                @error('smtp_port')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Username <span class="text-danger">*</span></label>
                                <input type="text" name="username" class="form-control @error('username') is-invalid @enderror" 
                                    value="{{ old('username', $config->username ?? '') }}" 
                                    placeholder="email@example.com" required>
                                @error('username')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    Password 
                                    @if($config)
                                        <small class="text-muted">(kosongkan jika tidak diubah)</small>
                                    @else
                                        <span class="text-danger">*</span>
                                    @endif
                                </label>
                                <div class="input-group">
                                    <input type="password" name="password" id="smtp_password" 
                                        class="form-control @error('password') is-invalid @enderror" 
                                        placeholder="••••••••" {{ $config ? '' : 'required' }}>
                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword()">
                                        <i class="ti ti-eye" id="password-icon"></i>
                                    </button>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">From Name <span class="text-danger">*</span></label>
                                <input type="text" name="from_name" class="form-control @error('from_name') is-invalid @enderror" 
                                    value="{{ old('from_name', $config->from_name ?? '') }}" 
                                    placeholder="WABA System" required>
                                @error('from_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">From Email <span class="text-danger">*</span></label>
                                <input type="email" name="from_email" class="form-control @error('from_email') is-invalid @enderror" 
                                    value="{{ old('from_email', $config->from_email ?? '') }}" 
                                    placeholder="noreply@example.com" required>
                                @error('from_email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Security Type <span class="text-danger">*</span></label>
                                <select name="security_type" class="form-select @error('security_type') is-invalid @enderror" required>
                                    <option value="tls" {{ old('security_type', $config->security_type ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS</option>
                                    <option value="ssl" {{ old('security_type', $config->security_type ?? '') === 'ssl' ? 'selected' : '' }}>SSL</option>
                                    <option value="none" {{ old('security_type', $config->security_type ?? '') === 'none' ? 'selected' : '' }}>None</option>
                                </select>
                                @error('security_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="d-flex gap-2 flex-wrap">
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-device-floppy me-1"></i>Simpan Konfigurasi
                            </button>
                            <button type="button" class="btn btn-outline-info" id="btn-test-connection">
                                <i class="ti ti-plug me-1"></i>Test Connection
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Test Email Card -->
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0">
                        <i class="ti ti-send me-2"></i>Kirim Email Test
                    </h6>
                </div>
                <div class="card-body">
                    @if(!$config)
                        <div class="alert alert-warning mb-0">
                            <i class="ti ti-info-circle me-2"></i>
                            Simpan konfigurasi terlebih dahulu untuk mengirim email test.
                        </div>
                    @else
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Email Tujuan</label>
                            <input type="email" id="test_email" class="form-control" placeholder="test@example.com">
                        </div>
                        <button type="button" class="btn btn-success w-100" id="btn-send-test">
                            <i class="ti ti-send me-1"></i>Kirim Email Test
                        </button>
                    @endif
                </div>
            </div>

            <!-- Info Card -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-info-circle me-2"></i>Informasi</h6>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-2">
                        <strong>Contoh Konfigurasi Gmail:</strong>
                    </p>
                    <ul class="list-unstyled small text-muted mb-0">
                        <li><i class="ti ti-point me-1"></i>Host: smtp.gmail.com</li>
                        <li><i class="ti ti-point me-1"></i>Port: 587</li>
                        <li><i class="ti ti-point me-1"></i>Security: TLS</li>
                        <li><i class="ti ti-point me-1"></i>Username: email@gmail.com</li>
                        <li><i class="ti ti-point me-1"></i>Password: App Password</li>
                    </ul>
                    <hr>
                    <p class="text-muted small mb-0">
                        <i class="ti ti-alert-triangle text-warning me-1"></i>
                        Untuk Gmail, gunakan <a href="https://support.google.com/accounts/answer/185833" target="_blank">App Password</a> bukan password akun.
                    </p>
                </div>
            </div>

            @if($config)
            <!-- Status Card -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0"><i class="ti ti-clock me-2"></i>Status Konfigurasi</h6>
                </div>
                <div class="card-body">
                    <small class="text-muted">
                        <strong>Terakhir diperbarui:</strong><br>
                        {{ $config->updated_at->format('d M Y H:i') }}
                    </small>
                    @if($config->creator)
                    <br>
                    <small class="text-muted">
                        <strong>Oleh:</strong> {{ $config->creator->name }}
                    </small>
                    @endif
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Result Modal -->
<div class="modal fade" id="resultModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resultModalTitle">Hasil</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="resultModalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function togglePassword() {
    const input = document.getElementById('smtp_password');
    const icon = document.getElementById('password-icon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.classList.remove('ti-eye');
        icon.classList.add('ti-eye-off');
    } else {
        input.type = 'password';
        icon.classList.remove('ti-eye-off');
        icon.classList.add('ti-eye');
    }
}

function showResult(success, message) {
    const modal = new bootstrap.Modal(document.getElementById('resultModal'));
    const titleEl = document.getElementById('resultModalTitle');
    const bodyEl = document.getElementById('resultModalBody');
    
    titleEl.textContent = success ? 'Berhasil' : 'Gagal';
    titleEl.className = 'modal-title ' + (success ? 'text-success' : 'text-danger');
    
    bodyEl.innerHTML = `
        <div class="text-center py-3">
            <i class="ti ${success ? 'ti-check-circle text-success' : 'ti-alert-circle text-danger'}" style="font-size: 48px;"></i>
            <p class="mt-3 mb-0">${message}</p>
        </div>
    `;
    
    modal.show();
}

$(document).ready(function() {
    // Test Connection
    $('#btn-test-connection').on('click', function() {
        const btn = $(this);
        const originalHtml = btn.html();
        
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Testing...');
        
        $.ajax({
            url: '{{ route("admin.email-config.test") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                smtp_host: $('input[name="smtp_host"]').val(),
                smtp_port: $('input[name="smtp_port"]').val(),
                username: $('input[name="username"]').val(),
                password: $('input[name="password"]').val(),
                security_type: $('select[name="security_type"]').val()
            },
            success: function(resp) {
                showResult(resp.success, resp.message);
            },
            error: function(xhr) {
                showResult(false, xhr.responseJSON?.message || 'Terjadi kesalahan');
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    // Send Test Email
    $('#btn-send-test').on('click', function() {
        const btn = $(this);
        const originalHtml = btn.html();
        const email = $('#test_email').val();
        
        if (!email) {
            alert('Masukkan email tujuan terlebih dahulu');
            return;
        }
        
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Mengirim...');
        
        $.ajax({
            url: '{{ route("admin.email-config.send-test") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                test_email: email
            },
            success: function(resp) {
                showResult(resp.success, resp.message);
            },
            error: function(xhr) {
                showResult(false, xhr.responseJSON?.message || 'Terjadi kesalahan');
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });
});
</script>
@endpush