@extends('backend.template.layouts.template-base')
@section('title', 'Email & SMS Settings')

@section('content')

    @php
        $activeProvider = $settings['sms_active_provider'] ?? '';
    @endphp

    {{-- ── Page header ─────────────────────────────────────────────────── --}}
    <div class="page-head-title mb-3">
        <div class="email-sms d-flex align-items-center justify-content-between">
            <div class="d-inline-block">
                <h2 class="text-title fw-semibold mb-0">Email &amp; SMS Setting</h2>
            </div>
            <div class="d-flex align-items-center gap-3">
                <button type="button" id="globalSaveBtn" class="button-green d-flex flex-row gap-2 align-items-center px-3">
                    Update changes
                </button>
            </div>
        </div>
    </div>

    {{-- ── Alert ───────────────────────────────────────────────────────── --}}
    @if (session('message'))
        <div class="alert alert-{{ session('alert_type') === 'error' ? 'danger' : 'success' }} alert-dismissible fade show"
            role="alert">
            {{ session('message') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- ── Tabs ────────────────────────────────────────────────────────── --}}
    <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" data-bs-toggle="tab" href="#emailTab" role="tab">Email Settings</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" data-bs-toggle="tab" href="#smsTab" role="tab">SMS Settings</a>
        </li>
    </ul>

    <div class="tab-content card-tab-border text-muted">

        {{-- ================================================================ --}}
        {{-- EMAIL TAB                                                         --}}
        {{-- ================================================================ --}}
        <div class="tab-pane show active" id="emailTab" role="tabpanel">
            <div class="p-3">
                <form id="emailForm"
                    action="{{ route('backend.template.admin-settings.email-sms-settings.save', 'email') }}" method="POST">
                    @csrf
                    <div class="smtp-wrapper">

                        <div class="smtp-card">
                            <h4 class="smtp-title">Mail SMTP Configuration</h4>
                            <div class="smtp-grid">

                                <div class="smtp-field">
                                    <label>Mail Provider</label>
                                    <select class="form-select" name="smtp_mailer">
                                        <option value="">Select</option>
                                        <option value="smtp" @selected(($settings['smtp_mailer'] ?? '') === 'smtp')>SMTP</option>
                                        <option value="sendmail" @selected(($settings['smtp_mailer'] ?? '') === 'sendmail')>Sendmail</option>
                                        <option value="log" @selected(($settings['smtp_mailer'] ?? '') === 'log')>Log (testing)</option>
                                    </select>
                                </div>

                                <div class="smtp-field">
                                    <label>Mail Host</label>
                                    <input type="text" name="mail_host" class="form-control"
                                        placeholder="e.g. smtp.gmail.com" value="{{ $settings['mail_host'] ?? '' }}">
                                </div>

                                <div class="smtp-field">
                                    <label>Mail Port</label>
                                    <input type="text" name="mail_port" class="form-control" placeholder="e.g. 587"
                                        value="{{ $settings['mail_port'] ?? '' }}">
                                </div>

                                <div class="smtp-field">
                                    <label>Mail Username</label>
                                    <input type="text" name="mail_username" class="form-control"
                                        placeholder="Enter username" value="{{ $settings['mail_username'] ?? '' }}">
                                </div>

                                <div class="smtp-field smtp-password">
                                    <label>Mail Password</label>
                                    <div class="password-wrapper">
                                        <input type="password" id="mailPassword" name="mail_password" class="form-control"
                                            placeholder="Enter password" value="{{ $settings['mail_password'] ?? '' }}">
                                        <i class="ri-eye-off-line password-toggle" onclick="togglePassword(this)"></i>
                                    </div>
                                </div>

                                <div class="smtp-field">
                                    <label>Mail Encryption</label>
                                    <select class="form-select" name="mail_encryption">
                                        <option value="">Select</option>
                                        <option value="tls" @selected(($settings['mail_encryption'] ?? '') === 'tls')>TLS</option>
                                        <option value="ssl" @selected(($settings['mail_encryption'] ?? '') === 'ssl')>SSL</option>
                                    </select>
                                </div>

                                <div class="smtp-field">
                                    <label>Mail From Address</label>
                                    <input type="text" name="mail_from_address" class="form-control"
                                        placeholder="Enter from address" value="{{ $settings['mail_from_address'] ?? '' }}">
                                </div>

                                <div class="smtp-field">
                                    <label>Mail From Name</label>
                                    <input type="text" name="mail_from_name" class="form-control"
                                        placeholder="Enter from name" value="{{ $settings['mail_from_name'] ?? '' }}">
                                </div>

                                <div class="smtp-field">
                                    <label>Contact Mail To Address</label>
                                    <input type="email" name="contact_mail_to_address" class="form-control"
                                        placeholder="Enter contact mail address"
                                        value="{{ $settings['contact_mail_to_address'] ?? '' }}">
                                </div>

                                <div class="smtp-field">
                                    <label>Careers Mail To Address</label>
                                    <input type="email" name="careers_mail_to_address" class="form-control"
                                        placeholder="Enter careers mail address"
                                        value="{{ $settings['careers_mail_to_address'] ?? '' }}">
                                </div>

                            </div>
                        </div>

                        <div class="smtp-card smtp-test">
                            <h4 class="smtp-title">Test Email</h4>
                            <div class="smtp-field">
                                <label>Mail To Address</label>
                                <input type="email" name="mail_to_address" class="form-control"
                                    placeholder="Enter recipient address">
                            </div>
                            <div class="smtp-field">
                                <label>Message</label>
                                <textarea name="message" class="form-control" placeholder="Type here..." rows="4"></textarea>
                            </div>
                            <button type="button" class="smtp-btn mt-2"
                                onclick="document.getElementById('testEmailForm').submit()">
                                Send Mail
                            </button>
                        </div>

                    </div>
                </form>

                <form id="testEmailForm" action="{{ route('backend.template.settings.update', 'test_mail') }}"
                    method="POST" class="d-none">
                    @csrf
                    <input type="hidden" name="mail_to_address">
                    <input type="hidden" name="message">
                </form>
            </div>
        </div>

        {{-- ================================================================ --}}
        {{-- SMS TAB                                                           --}}
        {{-- ================================================================ --}}
        <div class="tab-pane" id="smsTab" role="tabpanel">
            <div class="p-3">
                <div class="sms-wrapper">

                    {{-- ── Provider cards + test bypass (left/main area) ── --}}
                    <div class="sms-providers-area">
                        <form id="smsForm"
                            action="{{ route('backend.template.admin-settings.email-sms-settings.save', 'sms') }}"
                            method="POST">
                            @csrf


                            {{-- ── Provider cards grid ───────────────────── --}}
                            <div class="provider-grid">

                                {{-- Nettyfish --}}
                                <div class="provider-card {{ $activeProvider === 'nettyfish' ? 'is-active' : '' }}"
                                    data-provider="nettyfish">
                                    <div class="provider-card-header">
                                        <div class="provider-name">
                                            <span class="provider-badge">NF</span>
                                            <span>Nettyfish</span>
                                        </div>
                                        <input type="radio" name="sms_active_provider" value="nettyfish"
                                            class="prov-radio" {{ $activeProvider === 'nettyfish' ? 'checked' : '' }}>
                                    </div>
                                    <div
                                        class="provider-status {{ $activeProvider === 'nettyfish' ? 'status-active' : 'status-inactive' }}">
                                        {{ $activeProvider === 'nettyfish' ? '● Active — primary provider' : '○ Inactive — used as fallback if credentials are set' }}
                                    </div>
                                    <div class="provider-fields">
                                        <div class="prov-field">
                                            <label>API Key</label>
                                            <input type="text" name="sms_nettyfish_api_key" class="form-control"
                                                placeholder="Nettyfish APIKey"
                                                value="{{ $settings['sms_nettyfish_api_key'] ?? '' }}">
                                        </div>
                                        <div class="prov-field">
                                            <label>Sender ID</label>
                                            <input type="text" name="sms_nettyfish_sender_id" class="form-control"
                                                placeholder="Registered sender ID"
                                                value="{{ $settings['sms_nettyfish_sender_id'] ?? '' }}">
                                        </div>
                                        <div class="prov-field">
                                            <label>SMS Type</label>
                                            <select name="sms_nettyfish_sms_type" class="form-select">
                                                <option value="transactional" @selected(($settings['sms_nettyfish_sms_type'] ?? 'transactional') === 'transactional')>Transactional
                                                </option>
                                                <option value="promotional" @selected(($settings['sms_nettyfish_sms_type'] ?? '') === 'promotional')>Promotional
                                                </option>
                                            </select>
                                        </div>
                                        <div class="prov-field">
                                            <label>Route ID</label>
                                            <input type="text" name="sms_nettyfish_route" class="form-control"
                                                placeholder="Route ID (if required)"
                                                value="{{ $settings['sms_nettyfish_route'] ?? '' }}">
                                        </div>
                                    </div>
                                </div>

                                {{-- MSG91 --}}
                                <div class="provider-card {{ $activeProvider === 'msg91' ? 'is-active' : '' }}"
                                    data-provider="msg91">
                                    <div class="provider-card-header">
                                        <div class="provider-name">
                                            <span class="provider-badge">M91</span>
                                            <span>MSG91</span>
                                        </div>
                                        <input type="radio" name="sms_active_provider" value="msg91"
                                            class="prov-radio" {{ $activeProvider === 'msg91' ? 'checked' : '' }}>
                                    </div>
                                    <div
                                        class="provider-status {{ $activeProvider === 'msg91' ? 'status-active' : 'status-inactive' }}">
                                        {{ $activeProvider === 'msg91' ? '● Active — primary provider' : '○ Inactive — used as fallback if credentials are set' }}
                                    </div>
                                    <div class="provider-fields">
                                        <div class="prov-field">
                                            <label>Auth Key</label>
                                            <input type="text" name="sms_msg91_api_key" class="form-control"
                                                placeholder="MSG91 auth key"
                                                value="{{ $settings['sms_msg91_api_key'] ?? '' }}">
                                        </div>
                                        <div class="prov-field">
                                            <label>Sender ID</label>
                                            <input type="text" name="sms_msg91_sender_id" class="form-control"
                                                placeholder="6-char sender ID"
                                                value="{{ $settings['sms_msg91_sender_id'] ?? '' }}">
                                        </div>
                                        <div class="prov-field">
                                            <label>DLT Template ID</label>
                                            <input type="text" name="sms_msg91_template_id" class="form-control"
                                                placeholder="Registered DLT template ID"
                                                value="{{ $settings['sms_msg91_template_id'] ?? '' }}">
                                        </div>
                                    </div>
                                </div>

                            </div>{{-- /provider-grid --}}

                            {{-- ── Test bypass credentials ───────────────── --}}
                            <div class="test-bypass-card mt-3">
                                <h6 class="test-bypass-title">
                                    <i class="ri-shield-check-line me-1"></i> Test Bypass
                                    <small class="text-muted fw-normal ms-2">— SMS is skipped for this mobile; the Test OTP
                                        is accepted without real delivery</small>
                                </h6>
                                <div class="test-bypass-grid">
                                    <div class="prov-field">
                                        <label>Test Mobile Number</label>
                                        <input type="text" name="sms_test_mobile" class="form-control"
                                            placeholder="10-digit mobile for development"
                                            value="{{ $settings['sms_test_mobile'] ?? '' }}">
                                    </div>
                                    <div class="prov-field">
                                        <label>Test OTP</label>
                                        <input type="text" name="sms_test_otp" class="form-control"
                                            placeholder="e.g. 1234" value="{{ $settings['sms_test_otp'] ?? '' }}">
                                    </div>
                                </div>
                            </div>

                            {{-- fallback info note --}}
                            <div class="fallback-note mt-2">
                                <i class="ri-information-line"></i>
                                Providers with credentials saved are used as automatic fallback — if the active provider
                                fails,
                                the next configured provider is tried in order: Nettyfish → Fast2SMS → MSG91 → TextLocal.
                            </div>

                        </form>
                    </div>

                    {{-- ── Test SMS panel (right) ──────────────────────── --}}
                    <form id="testSmsForm"
                        action="{{ route('backend.template.admin-settings.email-sms-settings.test-sms') }}"
                        method="POST">
                        @csrf
                        <div class="sms-card sms-test">
                            <h4 class="sms-title">Test SMS</h4>

                            <div class="sms-field">
                                <label>Mobile Number</label>
                                <input type="text" name="sms_test_to_mobile" class="form-control"
                                    placeholder="Enter mobile" maxlength="10">
                            </div>

                            <div class="sms-field">
                                <label>Message</label>
                                <textarea name="sms_test_message" class="form-control" placeholder="Type here..." rows="5" maxlength="160"></textarea>
                            </div>

                            <button type="submit" class="sms-btn mt-2">Send SMS</button>
                        </div>
                    </form>

                </div>{{-- /sms-wrapper --}}
            </div>
        </div>

    </div>{{-- /tab-content --}}

@endsection

@section('styles')
    <style>
        /* ── Provider card grid ──────────────────────────────────────────── */
        .sms-providers-area {
            flex: 1;
            min-width: 0;
        }

        .provider-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        @media (max-width: 900px) {
            .provider-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ── Individual card ─────────────────────────────────────────────── */
        .provider-card {
            background: #fff;
            border: 1.5px solid #e4e4e4;
            border-radius: 10px;
            padding: 16px;
            transition: border-color .2s, box-shadow .2s;
        }

        .provider-card.is-active {
            border-color: #28a745;
            box-shadow: 0 0 0 3px rgba(40, 167, 69, .08);
            background: #f6fff8;
        }

        /* ── Card header row ─────────────────────────────────────────────── */
        .provider-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .provider-name {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: .95rem;
            color: #333;
        }

        .provider-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: #f0f0f0;
            font-size: .72rem;
            font-weight: 700;
            color: #555;
            letter-spacing: .5px;
        }

        .is-active .provider-badge {
            background: #28a745;
            color: #fff;
        }

        /* ── Radio button ────────────────────────────────────────────────── */
        .prov-radio {
            width: 18px;
            height: 18px;
            accent-color: #28a745;
            cursor: pointer;
            flex-shrink: 0;
        }

        /* ── Status line ─────────────────────────────────────────────────── */
        .provider-status {
            font-size: .78rem;
            margin-bottom: 12px;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .status-active {
            color: #28a745;
            background: #eafbee;
        }

        .status-inactive {
            color: #888;
            background: #f5f5f5;
        }

        /* ── Fields inside card ──────────────────────────────────────────── */
        .provider-fields {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .prov-field label {
            display: block;
            font-size: .8rem;
            font-weight: 600;
            color: #555;
            margin-bottom: 4px;
        }

        /* ── Test bypass card ────────────────────────────────────────────── */
        .test-bypass-card {
            background: #fffbea;
            border: 1px solid #f0e28a;
            border-radius: 10px;
            padding: 14px 16px;
        }

        .test-bypass-title {
            font-size: .88rem;
            font-weight: 600;
            color: #856404;
            margin-bottom: 12px;
        }

        .test-bypass-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        @media (max-width: 600px) {
            .test-bypass-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ── Fallback note ───────────────────────────────────────────────── */
        .fallback-note {
            font-size: .78rem;
            color: #6c757d;
            background: #f8f9fa;
            border-left: 3px solid #6c757d;
            padding: 8px 12px;
            border-radius: 0 6px 6px 0;
            line-height: 1.5;
        }
    </style>
@endsection

@section('scripts')
    <script>
        // ── Provider radio — update card highlight on change ─────────────
        document.querySelectorAll('.prov-radio').forEach(radio => {
            radio.addEventListener('change', function() {
                document.querySelectorAll('.provider-card').forEach(card => {
                    const active = card.dataset.provider === this.value;
                    card.classList.toggle('is-active', active);
                    const status = card.querySelector('.provider-status');
                    if (status) {
                        status.classList.toggle('status-active', active);
                        status.classList.toggle('status-inactive', !active);
                        status.textContent = active ?
                            '● Active — primary provider' :
                            '○ Inactive — used as fallback if credentials are set';
                    }
                });
            });
        });

        // ── Global save button ────────────────────────────────────────────
        document.getElementById('globalSaveBtn').addEventListener('click', function() {
            const activePane = document.querySelector('.tab-pane.show.active');
            if (activePane && activePane.id === 'emailTab') {
                document.getElementById('emailForm').submit();
            } else if (activePane && activePane.id === 'smsTab') {
                document.getElementById('smsForm').submit();
            }
        });

        // ── Password visibility ───────────────────────────────────────────
        function togglePassword(icon) {
            const input = document.getElementById('mailPassword');
            const isHidden = input.type === 'password';
            input.type = isHidden ? 'text' : 'password';
            icon.classList.toggle('ri-eye-off-line', !isHidden);
            icon.classList.toggle('ri-eye-line', isHidden);
        }
    </script>
@endsection