@extends('layouts/base_view')
@section('title'){!! $variables['header_routes'] !!}@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">{{ $variables['judul'] ?? 'Message Channel' }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="main-form" method="post" action="{{ route('message-channels.store', $data->id ?? 0) }}">
                            @csrf
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input type="text" name="channel_name" class="form-control" placeholder="" value="{{ old('channel_name', $data->channel_name ?? '') }}" required>
                                    <label>Channel Name</label>
                                </div>
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <label style="opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem);">Message Type</label>
                                    <select name="message_type" id="message_type" class="form-control" required>
                                        <option value="">-- Pilih Type --</option>
                                        <option value="whatsapp" {{ old('message_type', $data->message_type ?? '') == 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                                        <option value="email"    {{ old('message_type', $data->message_type ?? '') == 'email'    ? 'selected' : '' }}>Email</option>
                                        <option value="sms"      {{ old('message_type', $data->message_type ?? '') == 'sms'      ? 'selected' : '' }}>SMS</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-12">
                                    <input type="text" name="full_url" class="form-control" placeholder="" value="{{ old('full_url', $data->full_url ?? '') }}" required>
                                    <label>Full URL</label>
                                </div>
                            </div>

                            {{-- WhatsApp / SMS fields --}}
                            <div id="section-gateway" style="display:none;">
                                <hr><h6 class="text-muted mb-3">Gateway Configuration</h6>
                                <div class="row">
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="number" name="client_id" class="form-control" placeholder="" value="{{ old('client_id', $data->client_id ?? '') }}">
                                        <label>Client ID</label>
                                    </div>
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="text" name="message_template_id" class="form-control" placeholder="" value="{{ old('message_template_id', $data->message_template_id ?? '') }}">
                                        <label>Message Template ID</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group form-floating mb-3 col-md-12">
                                        <input type="text" name="channel_integration_id" class="form-control" placeholder="" value="{{ old('channel_integration_id', $data->channel_integration_id ?? '') }}">
                                        <label>Channel Integration ID</label>
                                    </div>
                                </div>
                            </div>

                            {{-- SMS specific --}}
                            <div id="section-sms" style="display:none;">
                                <hr><h6 class="text-muted mb-3">SMS Configuration</h6>
                                <div class="row">
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="text" name="sms_sender_id" class="form-control" placeholder="" value="{{ old('sms_sender_id', $data->sms_sender_id ?? '') }}">
                                        <label>Sender ID</label>
                                    </div>
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="text" name="sms_api_key" class="form-control" placeholder="" value="">
                                        <label>API Key {{ $data->id ? '(kosongkan jika tidak diubah)' : '' }}</label>
                                    </div>
                                </div>
                            </div>

                            {{-- Email specific --}}
                            <div id="section-email" style="display:none;">
                                <hr><h6 class="text-muted mb-3">Email (SMTP) Configuration</h6>
                                <div class="row">
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="text" name="mail_host" class="form-control" placeholder="" value="{{ old('mail_host', $data->mail_host ?? '') }}">
                                        <label>SMTP Host</label>
                                    </div>
                                    <div class="form-group form-floating mb-3 col-md-3">
                                        <input type="number" name="mail_port" class="form-control" placeholder="" value="{{ old('mail_port', $data->mail_port ?? '587') }}">
                                        <label>Port</label>
                                    </div>
                                    <div class="form-group form-floating mb-3 col-md-3">
                                        <label style="opacity:.65;transform:scale(.85) translateY(-.5rem) translateX(.15rem);">Encryption</label>
                                        <select name="mail_encryption" class="form-control">
                                            <option value="tls" {{ old('mail_encryption', $data->mail_encryption ?? 'tls') == 'tls' ? 'selected' : '' }}>TLS</option>
                                            <option value="ssl" {{ old('mail_encryption', $data->mail_encryption ?? '') == 'ssl' ? 'selected' : '' }}>SSL</option>
                                            <option value="none" {{ old('mail_encryption', $data->mail_encryption ?? '') == 'none' ? 'selected' : '' }}>None</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="text" name="mail_username" class="form-control" placeholder="" value="{{ old('mail_username', $data->mail_username ?? '') }}">
                                        <label>Username</label>
                                    </div>
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="password" name="mail_password" class="form-control" placeholder="" value="">
                                        <label>Password {{ $data->id ? '(kosongkan jika tidak diubah)' : '' }}</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="email" name="mail_from_address" class="form-control" placeholder="" value="{{ old('mail_from_address', $data->mail_from_address ?? '') }}">
                                        <label>From Address</label>
                                    </div>
                                    <div class="form-group form-floating mb-3 col-md-6">
                                        <input type="text" name="mail_from_name" class="form-control" placeholder="" value="{{ old('mail_from_name', $data->mail_from_name ?? '') }}">
                                        <label>From Name</label>
                                    </div>
                                </div>
                            </div>

                            <hr>
                            <div class="row">
                                <div class="col-md-6 d-flex gap-3">
                                    <div class="form-check mr-3">
                                        <input type="checkbox" class="form-check-input" name="is_active" id="is_active" value="1" {{ old('is_active', $data->is_active ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Aktif</label>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="is_default" id="is_default" value="1" {{ old('is_default', $data->is_default ?? false) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_default">Default untuk type ini</label>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-3">
                                <button type="submit" class="btn btn-outline-primary"><i class="fa-regular fa-floppy-disk"></i> Simpan</button>
                                <a href="{{ route('message-channels.index') }}" class="btn btn-outline-secondary" data="back" onclick="return notificationBeforeBack(event, this)">Kembali</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
$(function() {
    function toggleSections(type) {
        $('#section-gateway').toggle(type === 'whatsapp' || type === 'sms');
        $('#section-sms').toggle(type === 'sms');
        $('#section-email').toggle(type === 'email');
    }

    $('#message_type').on('change', function() { toggleSections($(this).val()); });
    toggleSections('{{ old('message_type', $data->message_type ?? '') }}');

    $('#main-form').on('submit', function(e) {
        e.preventDefault();
        $('#loaderaditdinda').show();
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $(this).serialize(),
            success: function(res) {
                $('#loaderaditdinda').hide();
                if (res[0] === 'success') {
                    Swal.fire({ icon: 'success', text: res[1], timer: 1500, showConfirmButton: false })
                        .then(() => window.location.href = '{{ route("message-channels.index") }}');
                } else {
                    Swal.fire({ icon: 'warning', text: res[1] });
                }
            },
            error: function(xhr) {
                $('#loaderaditdinda').hide();
                var msg = 'Terjadi kesalahan.';
                if (xhr.responseJSON?.errors) msg = Object.values(xhr.responseJSON.errors).map(e => e[0]).join('\n');
                Swal.fire({ icon: 'error', text: msg });
            }
        });
    });
});
</script>
@endsection