<!-- Email Server Name -->
<div class="mb-3 row">
    <label for="settings[mail][driver]" class="col-sm-2 control-label">Driver</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[mail][driver]" name="settings[mail][driver]" placeholder="smtp" value="{{ old('settings.mail.driver', setting('mail.driver', config('mail.driver'))) }}">
    </div>
</div>

<!-- SMTP Host Address -->
<div class="mb-3 row">
    <label for="settings[mail][host]" class="col-sm-2 control-label">SMTP Host Address</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[mail][host]" name="settings[mail][host]" placeholder="" value="{{ old('settings.mail.host', setting('mail.host', config('mail.host'))) }}">
    </div>
</div>

<!-- SMTP Host Port -->
<div class="mb-3 row">
    <label for="settings[mail][port]" class="col-sm-2 control-label">SMTP Host Port</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[mail][port]" name="settings[mail][port]" placeholder="" value="{{ old('settings.mail.port', setting('mail.port', config('mail.port'))) }}">
    </div>
</div>

<!-- SMTP Server Username -->
<div class="mb-3 row">
    <label for="settings[mail][username]" class="col-sm-2 control-label">SMTP Server Username</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[mail][username]" name="settings[mail][username]" placeholder="" value="{{ old('settings.mail.username', setting('mail.username', config('mail.username'))) }}">
    </div>
</div>

<!-- SMTP Server Password -->
<div class="mb-3 row">
    <label for="settings[mail][password]" class="col-sm-2 control-label">SMTP Server Password</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[mail][password]" name="settings[mail][password]" placeholder="" value="{{ old('settings.mail.password', setting('mail.password', config('mail.password'))) }}">
    </div>
</div>

<!-- Mail Encryption Protocol -->
<div class="mb-3 row">
    <label for="settings[mail][encryption]" class="col-sm-2 control-label">E-Mail Encryption Protocol</label>
    <div class="col-sm-4">
        <select class="form-control select2" id="settings[mail][encryption]" name="settings[mail][encryption]">
            <option value="" @if ( old('settings.mail.encryption', setting('mail.encryption') ) == '' ) SELECTED @endif>None</option>
            <option value="tls" @if ( old('settings.mail.encryption', setting('mail.encryption') ) == 'tls' ) SELECTED @endif>TLS</option>
            <option value="ssl" @if ( old('settings.mail.encryption', setting('mail.encryption') ) == 'ssl' ) SELECTED @endif>SSL</option>
        </select>
    </div>
</div>

<!-- Mail Address -->
<div class="mb-3 row">
    <label for="settings[mail][from][address]" class="col-sm-2 control-label">Mail From Address</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[mail][from][address]" name="settings[mail][from][address]" placeholder="support@domain.com" value="{{ old('settings.mail.from.address', setting('mail.from.address', config('mail.from.address'))) }}">
    </div>
</div>

<!-- Mail Name -->
<div class="mb-3 row">
    <label for="settings[mail][from][name]" class="col-sm-2 control-label">Mail From Name</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="settings[mail][from][name]" name="settings[mail][from][name]" placeholder="{{config('app.name')}}" value="{{ old('settings.mail.from.name', setting('mail.from.name', config('mail.from.name'))) }}">
    </div>
</div>

<hr class="mt-4 mb-4">
<h4>Send Test Email</h4>
<p class="text-muted">Enter an email address to send a test email to verify your SMTP configuration.</p>

<div class="mb-3 row">
    <label for="test_email" class="col-sm-2 control-label">Test Email Address</label>
    <div class="col-sm-4">
        <div class="input-group">
            <input type="email" class="form-control" id="test_email" placeholder="you@example.com">
            <button type="button" class="btn btn-secondary" id="btn-send-test-email">
                <i class="ti-email"></i> Send Test
            </button>
        </div>
        <small class="text-muted" id="test-email-status"></small>
    </div>
</div>

@push('scripts')
<script>
    document.getElementById('btn-send-test-email').addEventListener('click', function() {
        var email = document.getElementById('test_email').value;
        var btn = this;
        var status = document.getElementById('test-email-status');
        
        if(!email) {
            alert('Please enter an email address');
            return;
        }

        btn.disabled = true;
        btn.innerHTML = '<i class="ti-reload ti-spin"></i> Sending...';
        status.innerHTML = '';
        status.className = 'text-muted';

        fetch('{{ route("ch-admin.settings.test-email") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({email: email})
        })
        .then(response => {
             if (!response.ok) {
                 throw response;
             }
             return response.json();
        })
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = '<i class="ti-email"></i> Send Test';
            status.innerHTML = data.message;
            status.className = 'text-success fw-bold';
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = '<i class="ti-email"></i> Send Test';
            status.className = 'text-danger fw-bold';
            
            if (err.json) {
                err.json().then(json => {
                    status.innerHTML = json.message || 'Error sending email';
                }).catch(() => {
                    status.innerHTML = 'Server error occurred';
                });
            } else {
                status.innerHTML = 'Network or server error';
            }
        });
    });
</script>
@endpush
